Melya Wulandari: Tutorial

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara memasang cctv pada blog

01.34 |

Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya aman dan bisa melihat dengan detail semua kejadian yang telah di pantau oleh kamera tersebut , Mungkin sobat bertanya-tanya apakah hubungan nya dengan blog , disini saya akan berbagi Cara Memasang Kamera CCTV di Blog tapi bukan Kamera CCTV benaran , hanya sebuah widget penghias pada blog , kamera nya bisa berputar-putar seperti kamera CCTV benaran seperti contoh lihat di pojok kanan atas.Jika blog Kamu berisikan tema-tema tentang Aplikasi, Software, Android, atau tema-tema yang berbau teknologi. kamu bisa mencoba memasang widget CCTV ini pada blog kamu. Karena widget ini dapat mengambarkan isi tema dari blog kamu sendiri. Tetapi walaupun blog kamu tidak memiliki label artikel yang berbau teknologi, tidak ada salahnya jika anda mencoba memasang widget CCTV ini pada blog kamu.

Supaya widget ini bisa di pasang di blog kamu ikutilah seperti cara di bawah ini :

1. Buka tata letak ? layout blog ....

2.Pilih Tambahkan gadget

3. Pilih HTML/Javascript

4. Copy Pastekan Kode berikut ini

5. Klik simpan Dan lihat hasilnya di blog kamu

Cara membuat scroll di posting blogger

01.17 |

Hay semuanya , sekarang aku mau kasih tau nih gimana caranya membuat scroll dalam posting.Kalian tepat banget udah mampir ke blog ini. Scroll dalam posting berguna buat memfleksibelkan tampilan posting agar gak berantakan guys. Langsung Ke TKP aja deh !

1. Masuk ke blogger.com

2.Buat entri baru / artikel

3. Pilihlah bagian yang ingin di beri efek scroll. Seperti contoh

/* -- POPULAR POST -- */ 
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;} 
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;} 
.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%} 
.PopularPosts .widget-content ul li:first-child:after{content:"01";} 
.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%} 
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";} 
.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%} 
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";} 
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";} 
.PopularPosts .widget-content ul li:first-child:after, 
.PopularPosts .widget-content ul li:first-child + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after 
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold} 
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px} 
.PopularPosts .widget-content ul li a{color:white;text-decoration:none}

4. Copy pastekan kode berikut ini di atas posting yang ingin di beri efek scroll

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">

5. Tutup Dengan kode html </div>

6 . Dan hasilnya pun akan menjadi seperti ini

/* -- POPULAR POST -- */ 
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;} 
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;} 
.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%} 
.PopularPosts .widget-content ul li:first-child:after{content:"01";} 
.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%} 
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";} 
.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%} 
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";} 
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";} 
.PopularPosts .widget-content ul li:first-child:after, 
.PopularPosts .widget-content ul li:first-child + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after 
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold} 
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px} 
.PopularPosts .widget-content ul li a{color:white;text-decoration:none}

Thank you :)

Cara Membuat efek bunga berjatuhan di blog

01.18 |

Hai Kali ini saya akan memberi tau cara Membuat efek bunga berjatuhan di blog....
Ayo ikuti tutorialnya semoga bermanfaat yah ...

1. Buka tata letak ? layout blog ....

2.Pilih Tambahkan gadget

3. Pilih HTML/Javascript

4. Copy Pastekan Kode berikut ini

</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://gitafaa.blogspot.com'}).append(a).appendTo('body')});</script>

5. Klik simpan Dan lihat hasilnya di blog kamu

Cara Membuat Popular Pos Keren

14.24 |

Tak bisa dipungkiri jika kita memiliki blog yang keren dan unik akan membuat pengunjung tertarik terhadap blog yang kita miliki. Mereka akan ingat terhadap blog kita jika kita memiliki blog yang indah nan cantik. Salah satunya dengan cara membuat popular post yang keren. Popular post akan menampilkan update artikel pos yang paling populer di antara seluruh artikel yang kita miliki.
Langsung saja mari kita praktekkan caranya.
Pertama kita buat popular pos dengan cara seperti ini :

1 . Cara membuat Popular Post
Buka tata letak / layout blog ....

2.Pilih Tambahkan gadget

3. Pilih Entri popular

4. Atur pengaturan popular post

5. Jika sudah selesai klik simpan

6. Buka template lalu Edit HTML

7. Cari kode html popular pos ganti dengan kode di bawah ini

/* -- POPULAR POST -- */ 
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;} 
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;} 
.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%} 
.PopularPosts .widget-content ul li:first-child:after{content:"01";} 
.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%} 
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";} 
.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%} 
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";} 
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%} 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";} 
.PopularPosts .widget-content ul li:first-child:after, 
.PopularPosts .widget-content ul li:first-child + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after, 
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after 
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold} 
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px} 
.PopularPosts .widget-content ul li a{color:white;text-decoration:none}

8. Dan hasilnya akan menjadi seperti ini

Kunjungi blog kamu untuk melihat apakah widget popular post sudah terpasang dengan baik pada sidebar blog kamu . Beritahu aku jika kamu membutuhkan bantuan lebih lanjut dalam mengubah jenis font atau warna. Widget akan secara otomatis menggunakan warna standar pelangi, tetapi jika kamu ingin mengubah untuk sesuatu yang berbeda maka jangan ragu untuk membiarkan aku tahu dengan mem-posting komentar kamu di bawah ini.

Baca selengkapnya »

Pengunjung Ke :

Label

Mengenai Saya

Kalender

Follow us

Cara memasang cctv pada blog

Cara membuat scroll di posting blogger

Cara Membuat efek bunga berjatuhan di blog

Cara Membuat Popular Pos Keren

Clock

Popular Post

Arsip Blog