Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

Sebelumnya saya pernah share cara membuat Efek Salju, Daun, Bintang berjatuhan di blogger yang menunjukkan suasana blog terasa lebih indah dan nyaman, sedangkan yang ini berbeda alasannya adalah kita akan membuat nya menjadi lebih horror dengan menambahkan efek petir pada blog yang berkilat kilat namun tanpa bunyi. Dan bila template blogspot, wordpress, website teman mempunyai tema dark atau berwarna gelap maka akan sangat cocok sekali untuk memberi animasi imbas petir ini biar menambah keseraman dan menciptakan tampilan background dari situs tersebut menjadi keren serta lebih menarik untuk dilihat. Selain itu widget ini juga ringan dan untuk memasang nya pun gampang dengan cara hanya memasukkan beberapa script instruksi pada layout blog teman.

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

Kali ini aku akan share gimana Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat teman yang ingin memberi widget animasi kilatan petir di background blogger.

Cara Membuat Efek Petir Di Blog :

1. Bikin animasi petir bergerak seperti diatas yakni dengan cara masuk ke menu Tata Letak / Layout dan klik Tambahkan gadget pada sidebar / footer

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

2. Kemudian klik tombol tambah pada HTML/Javascript

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

3. Setelah itu masukkan script aba-aba berikut ke dalam kotak konten :

Jika sudah klik Simpan

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

4. Terakhir klik Simpan setelan.. Selesai dan lihat risikonya

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

5. Berikut yakni screenshot gambar blog yang berhasil dan work 100% dalam memasang imbas animasi petir yang menyambar :

Sebelumnya saya pernah share cara membuat  Ini Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

Nah itulah bagaimana cara membuat imbas petir pada blog yang keren dengan gampang dan cepat di tampilan terbaru.

Silahkan dicoba

Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Popular post yaitu daftar / urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post, related post dan recent post yakni untuk navigasi atau memudahkan para pengunjung mejelajahi seluruh konten postingan yang ada di blogspot, wordpress, mwb maupun website dengan gampang. Dan pasti teman blogger pernah blogwalking atau berkunjung ke blog blog lain dan melihat sebuah widget most popular post ada yang bergerak, berjalan, mempunyai scroll maupun yang warna warni dengan nomor dan bentuk yang keren terpasang biasanya pada sidebar template blog yang membuat tampilan blog menjadi sangat menarik untuk dilihat. Sebenarnya itu yaitu widget popular post bawaan blog yang di pasang namun telah di modifikasi / costumize dengan menambahkan beberapa instruksi css pada php / html blog yang mampu teman lakukan jika ingin menambah atau menampilkan popular posts yang berwarna warni dengan Title Only (hanya judul artikel) atau with thumbnails (dengan gambar) agar mempercantik tampilan blog.

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Kali ini saya akan share gimana Cara Membuat Popular Post Warna Warni Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang / menambahkan widget most popular posts keren pada sidebar template blogger.

Cara Membuat Popular Post Warna Warni Di Blog :

1. Bikin popular post warna warni seperti diatas ialah dengan cara pertama masuk tata letak lalu klik Tambahkan Gadget pada bagian sidebar

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

2. Kemudian klik tombol tambah pada Entri Populer / Popular Post

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

3. Setelah itu konfigurasi widget tersebut sesuai cita-cita sahabat, centang thumbnail gambar kalau sobat ingin membuat terkenal post dengan gambar (with thumbnail) atau kosongkan bila ingin hanya judul (title only), jika sudah bisa klik tombol Simpan maka widget popular post biasa bawaan blogger sudah terpasang

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

4. Selanjutnya kita akan mengubah nya menjadi lebih berwarna dan keren yakni dengan cara masuk ke sajian Template dan klik Edit HTML

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

5. Kemudian cari instruksi ]]> atau

, gunakan Ctrl+F untuk memudahkan pencarian

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

6. Setelah itu silahkan sahabat pilih dibawah ini ada beberapa pilihan tipe widget popular post yang banyak sekali macam bentuk dan warna yang keren dan bagus kemudian copy script isyarat nya :

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1

/*—– TAB POPULER —–*/
#PopularPosts1 ul li a:hovercolor:#fff;text-decoration:none
#PopularPosts1 ul li a -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;
#PopularPosts1 ul li .item-thumbnailfloat:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:63px
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:afterposition:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li background:#DF01D7;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:aftercontent:”8″
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +libackground:#B041FF;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:aftercontent:”9″
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +libackground:#F52887;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:aftercontent:”10″
#PopularPosts1 ul li:first-child + li + li + li + li +libackground:#7ee3c7;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li:aftercontent:”6″
#PopularPosts1 ul li:first-child + li + li + li + li + li +libackground:#f6993d;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:aftercontent:”7″
#PopularPosts1 ul li:first-child + li + li + li + libackground:#33c9f7;width:90%
#PopularPosts1 ul li:first-child + li + li + li + li:aftercontent:”5″
#PopularPosts1 ul li:first-child + li + li + libackground:#c7f25f;width:90%
#PopularPosts1 ul li:first-child + li + li + li:aftercontent:”4″
#PopularPosts1 ul li:first-child + li + libackground:#ffde4c;width:90%
#PopularPosts1 ul li:first-child + li + li:aftercontent:”3″
#PopularPosts1 ul li:first-child + libackground:#ff764c; width:90%
#PopularPosts1 ul li:first-child + li:aftercontent:”2″
#PopularPosts1 ul li:first-childbackground:#ff4c54 ;width:90%
#PopularPosts1 ul li:first-child:aftercontent:”1″
#PopularPosts1 ulmargin:0;padding:0px 0;list-style-type:none
#PopularPosts1 ul liposition:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a imgmargin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none
.PopularPosts ulmargin:.5em 0;list-style:none;color:black;counter-reset:num
.PopularPosts ul libackground-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative
.PopularPosts ul li acolor:#fff!important
.PopularPosts ul li a:hovercolor:#2c3e50!important
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li afont-weight:bold;color:inherit;text-decoration:none
.PopularPosts ul li:beforecontent:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1)background-color:#f1c40f;
.PopularPosts ul li:nth-child(2)background-color:#f39c12;
.PopularPosts ul li:nth-child(3)background-color:#2ecc71;
.PopularPosts ul li:nth-child(4)background-color:#27ae60;
.PopularPosts ul li:nth-child(5)background-color:#e67e22;
.PopularPosts ul li:nth-child(6)background-color:#d35400;
.PopularPosts ul li:nth-child(7)background-color:#3498db;
.PopularPosts ul li:nth-child(8)background-color:#2980b9;
.PopularPosts ul li:nth-child(9)background-color:#ea6153;
.PopularPosts ul li:nth-child(10)background-color:#c0392b;
.PopularPosts .item-thumbnailmargin:0 7 0 0
.PopularPosts .item-snippetfont-size:11px

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3

/* Popular Post */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;

.PopularPosts ul
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;

.PopularPosts ul li img
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;

.PopularPosts ul li
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a
font-weight:normal;
color:#000 !important;
text-decoration:none;

.PopularPosts ul li:before
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;

/* Set color and level */
.PopularPosts ul li:nth-child(1) background-color:#A51A5D;margin-right:1% !important
.PopularPosts ul li:nth-child(2) background-color:#F53477;margin-right:2% !important
.PopularPosts ul li:nth-child(3) background-color:#FD7FAA;margin-right:3% !important
.PopularPosts ul li:nth-child(4) background-color:#FF9201;margin-right:4% !important
.PopularPosts ul li:nth-child(5) background-color:#FDCB01;margin-right:5% !important
.PopularPosts ul li:nth-child(6) background-color:#DEDB00;margin-right:6% !important
.PopularPosts ul li:nth-child(7) background-color:#89C237;margin-right:7% !important
.PopularPosts ul li:nth-child(8) background-color:#44CCF2;margin-right:8% !important
.PopularPosts ul li:nth-child(9) background-color:#01ACE2;margin-right:9% !important
.PopularPosts ul li:nth-child(10) background-color:#94368E;margin-right:10% !important
.PopularPosts .item-thumbnail
margin:0 0 0 0;

.PopularPosts .item-snippet
font-size:11px;

.widget-content ul limargin:0;padding:6px 0px;border-bottom:1px solid #ededed

.widget-content ul li:last-childborder-bottom:medium none !important

.widget-content ul li acolor:#333

.widget-content ul li a:hovercolor:#C80441

.item-date font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4

.PopularPosts ul,.PopularPosts li,.PopularPosts li amargin:0;padding:0;list-style:none;border:none;background:none;outline:none.PopularPosts ulmargin:0;list-style:none;color:black;counter-reset:num.PopularPosts ul libackground-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative.item-thumbnail imgfloat:left;margin:0 10px 0 0.PopularPosts acolor:#fff!important.PopularPosts a:hovercolor:#222!important.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li afont-weight:bold;color:inherit;text-decoration:none.PopularPosts ul li:beforecontent:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important.PopularPosts ul li:nth-child(1)background-color:#A51A5D.PopularPosts ul li:nth-child(2)background-color:#F53477.PopularPosts ul li:nth-child(3)background-color:#FD7FAA.PopularPosts ul li:nth-child(4)background-color:#FF9201.PopularPosts ul li:nth-child(5)background-color:#FDCB01.PopularPosts ul li:nth-child(6)background-color:#DEDB00.PopularPosts ul li:nth-child(7)background-color:#89C237.PopularPosts ul li:nth-child(8)background-color:#44CCF2.PopularPosts ul li:nth-child(9)background-color:#01ACE2.PopularPosts ul li:nth-child(10)background-color:#94368E.cloud-label-widget-contenttext-align:left.label-sizedisplay:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px.label-size:hoverborder:1px solid #000;color:#000!important.label-size a:hovercolor:#000!important

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5

/* Pengaturan Warna */ .PopularPosts ul li:nth-child(1) background-color:#E11E28;margin-right:1% .PopularPosts ul li:nth-child(2) background-color:#FD3C03;margin-right:2% .PopularPosts ul li:nth-child(3) background-color:#FECB09;margin-right:3% .PopularPosts ul li:nth-child(4) background-color:#6EBE27;margin-right:4% .PopularPosts ul li:nth-child(5) background-color:#149A48;margin-right:5% .PopularPosts ul li:nth-child(6) background-color:#5BBFF1;margin-right:6% .PopularPosts ul li:nth-child(7) background-color:#61469C;margin-right:7% .PopularPosts ul li:nth-child(8) background-color:#863E86;margin-right:8% .PopularPosts ul li:nth-child(9) background-color:#863E62;margin-right:9% .PopularPosts ul li:nth-child(10) background-color:#815540;margin-right:10% /*Custom Popular Post*/ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img   margin:0 0;   padding:0 0;   list-style:none;   border:none;   background:none;   outline:none; .PopularPosts ul   margin:.5em 0;   list-style:none;   font:normal normal 13px/1.4 “Arial Narrow”,Arial,Sans-Serif;   color:black;   counter-reset:num; .PopularPosts ul li img   display:block;   margin:0 10px 0 10px;   width:50px;   height:50px;   float:left; .PopularPosts ul li   background-color:#eee;   margin:0 10% .4em 0;   padding:.5em 1.5em .5em .5em;   counter-increment:num;   position:relative; .PopularPosts ul li:before, .PopularPosts ul li .item-title a   font-weight:bold;   font-size:120%;   color:inherit;   text-decoration:none; .PopularPosts ul li:before   content:counter(num);   display:block;   position:absolute;   background-color:black;   color:white;   width:30px;   height:30px;   line-height:30px;   text-align:center;   top:50%;   right:-10px;   margin-top:-15px;   -webkit-border-radius:30px;   -moz-border-radius:30px;   border-radius:30px;

Jika sudah memilih tipe dari widget tersebut dan copy scriptnya selanjutnya masukkan script tersebut sempurna diatas aba-aba ]]> atau

mirip pada gambar dibawah ini dan klik Simpan template.. Selesai dan lihat akibatnya

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru

7. Berikut ialah tampilan tampilan blog yang berhasil atau work 100% dalam membuat popular post warna warni dengan aneka macam tipe :

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1 ( TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 1 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 2 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 3 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 4 (WITH THUMBNAIL)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5 (TITLE ONLY)

 urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post Ini Cara Membuat Popular Post Warna Warni Di Blog Terbaru
TIPE 5 (WITH THUMBNAIL)

Nah itulah bagaimana cara menciptakan popular post warna warni di blog dengan gampang dan cepat.

Silahkan dicoba