Pages
Showing posts with label blogger tutorial. Show all posts
Showing posts with label blogger tutorial. Show all posts

Saturday, 4 May 2013

Cara mudah mengaktifkan komentar Google+ di Blogger

 
Sebenarnya perpaduan komentar Google+ di Blogger sudah lumayan lama diterbitkan oleh Google, namun baru kali ini saya sempat menuliskan tutorial cara mudah mengaktifkan komentar Google+ di Blogger, karena banyak kesibukan Offline akhirnya saya baru bisa update. Maaf ya :-)

Sebelum saya menuliskan tutorial cara membuat komentar Google+ di Blogger saya ingin memperlihatkan bagaimana penampilan komentar Google+ tersebut di Blogger

Membuat kommentar Google+ di Blogger

Langkah pertama.
Setelah login ke blogger klik menu Google +
switch-blogger-to-google-plus
Langkah kedua
Setelah itu beri centang pada bagian Gunakan Google+ Komentar di blog ini

Selanjutnya klik tab Template > Edit HTML kemudian klik menu Kembalikan template widget ke default atau Revert Widget Templates to default. Beri centang Blog1 dan klik tombol Kembalikan widget yang dipilih atau Revert Selected widgets
revert-blog-widget-to-default
Selesai.
Nah itulah cara mudah untuk membuat komentar Google+ di Blogger.

Cara manual mengaktifkan komentar Google+ di Blogger

Gunakan cara ini jika kamu lebih suka mengedit template sendiri (dengan cara manual).

cara pertama dan cara kedua sama saja dengan cara yang sudah saya tuliskan di atas, jika kedua cara tersebut sudah dilakukan silakan ikuti langkah selanjutnya berikut ini:

Klik tab Template > Edit HTML kemudian cari kode

image

setelah itu ganti kode tersebut dengan kode yang diberi tanda/highligh berikut ini

<b:include data='post' name='comment_picker'/>

Simpan pengaturan template dan selesai.

Selamat mencoba mengaktifkan komentar Google+ di Blogger kamu dan semoga bermanfaat.

Monday, 22 April 2013

Blogger Update Tampilan Template HTML Editor

 
Belum lama ini blogger update tampilan template html editor (html editor untuk edit template). Dengan tampilan baru ini kita lebih mudah untuk edit template kita.

Berikut tampilan terbaru dari template html editor blogger.
Pada tampilan tersebut terdapat banyak kode ►, kode tersebut menyimpan kode-kode html lainnya pada masing-masing elemen, dan jika kita klik kode tersebut maka kita dapat melihat seluruh elemen bagian tersebut.

Misalnya kita ingin mengedit bagian posting (artikel) template kita, maka kita cukup mencari element "Blog1" atau langsung gunakan menu drop-down Jump to widget / Langsung ke widget dan pilih menu "Blog1". Maka kamu akan dibawa ke elemen posting artikel / Blog1.
Selanjutnya klik kode ► untuk menampilkan elemen / bagian dari widget Blog1 tersebut.

Untuk mengedit bagian posting, yang perlu kita lakukan selanjutnya adalah mengklik kode ► pada bagianincludable id='post' var='post' maka akan keluar kode-kode bagian posting template kita, dan silakan edit sesuai keperluan.
Nah itulah sekilas info tentang tampilan edit html / template html editor terbaru dari blogger.

Tuesday, 16 April 2013

4 Kode Search Box (Kolom Pencarian) Buat Blogger - Keren

 
Search Box / Kolom Pencarian Untuk Blogger

4 Kode Html + CSS Search Box Keren Untuk Blogger / Kolom Pencarian

Pada tutorial kali ini saya akan menuliskan cara pasang kolom pencarian yang keren buat blogger. Dengan memasang search box atau kolom pencarian di blog kita maka pengunjung dapat mencari artikel yang ada di blog kita sesuai dengan kata kunci yang mereka tulis.

Di sini saya memuat 4 kode search box keren (menurut saya) yang bisa kamu pilih, urutan kode search box (kolom pencarian) saya tulis sesuai dengan urutan gambar.

Sebelum saya menuliskan kode search box, saya akan menuliskan cara pasang search box tersebut dahulu.

Cara Pasang Search Box / Kolom Pencarian di Blogger

  1. Login ke Blogger
  2. Pilih menu Tata Letak
  3. Klik tambah Gadget
  4. Pilih Gadget Html/JavaScript
  5. Masukkan kode search box
  6. Simpan.
Nah itulah cara pasang search box, adapun kode search box silakan pilih salah satu dari kode html + css berikut:

Kode 1
<style type='text/css'>
input{
font-family: cursive;
}
form.search1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgjuImDklGNWO9TzkHJiJVDCZt9Wdgd8C_7ZrxeBo1H0Wt4D5-tRRhtIrSNoi8i6lR6kB3Q8D5Xn7CQBiiqpMFhJo7oMsImOqUqByVWafzWi1ug3aiv8LC5Lnixgr4ArnF6oKJW92ipw/s1600/1.png);
width: 320px;
height: 38px;
}
.text1 {
background: transparent;
width: 275px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit1 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 41px;
top: -12;
cursor: pointer;
}
</style>
<form class="search1" action="/search" style="method="get">
<input class="text1" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>
Kode 2
<style type='text/css'>
form.search2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEKeIq96HMh8HCMY-i5K0m8Z3rpKeybMSMrfTBZrvjrQsGp5SOFdyjMFPJxLisR4x_5bamRXp-Mhaaie96mQtz8oS-sZmk90y_2qPkele3lwAv91Eqh9RIbC2ERrG-vZbGmjEo6RBZaQ/s1600/2.png);
width: 320px;
height: 38px;
}
.text2 {
background: transparent;
width: 270px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit2 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 45px;
top: -12;
cursor: pointer;
}
</style>
<form class="search2" action="/search" style="method="get">
<input class="text2" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit2" type="submit" value="" />
</form>
Kode 3
<style type='text/css'>
form.search3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HqZe8e4-H0znyPmoe-5aq7RSwG_dA8NJOkKSLX6poPk34ViomK2b94l97mKpWSJLFwpjWAyoSDOxQL1X2MGSNIQcD0zKri7n5Aw84ER3BMt9Z8aX2QB_YJ_D_xV2hv5gs9R7N8jRMYY/s1600/3.png);
width: 320px;
height: 38px;
}
.text3 {
background: transparent;
width: 260px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit3 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 50px;
top: -12;
cursor: pointer;
left: 5px;
}
</style>
<form class="search3" action="/search" style="method="get">
<input class="text3" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit3" type="submit" value="" />
</form>
Kode 4
<style type='text/css'>
form.search4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFzWX4XJWcH8TldfZe46giMnAJpufFGVqGSojmKIEIPbP-XLFY5pxVyZA00efZuLszDN4kw9MSDLtvHPHQ66NVt-6eFPrtvCqAlYtl5l7iKrpqNaP5t2uVLsVNleAv-qkCX8RkR76EEE/s1600/4.png);
width: 334px;
height: 49px;
}
.text4 {
background: transparent;
width: 290px;
height: 38px;
border: 0px;
outline: 0px;
padding: 10px 0 0 10px;
font-size: 20px;
}
.submit4 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 40px;
top: -12;
cursor: pointer;
}
</style>
<form class="search4" action="/search" style="method="get">
<input class="text4" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit4" type="submit" value="" />
</form>
Silakan letakkan kode search box yang kamu pilih di Gadget Html/JavaScript. Ingat, urutan kode kolom pencarian sesuai dengan urutan gambar di atas.

Sunday, 7 April 2013

Cara Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ & RSS

 
Kali ini saya akan mencoba menuliskan tutorial cara pasang widget jejaring sosial facebook, twitter, G+ dan RSS di blogger.

Sebelum membuat widget jaringan social keren yang satu ini ada baiknya jika kita lihat dahulu bagaimana penampilannya, agar tidak mengecewakan karena salah pasang widget, berikut gambarnya :
Berikut demo widget facebook, twitter, G+ dan RSS

Bagaimana, widget jaringan sosialnya keren apa tidak?

Jika tertarik ingin memassangnya di blog kamu, maka silakan ikuti panduan cara memasangnya berikut ini.

Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ dan RSS

  1. Login ke blogger
  2. Klik menu Tata Letak
    3. Cara Membuat Widget Jejaring Sosial
  3. Klik Tambah Gadget, pilih gadget Html/JavaScript
    4. Cara Membuat Widget Jejaring Sosial di Blogger
    Script Widget Jejaring Sosial
  4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
  5. Simpan & Selesai
Berikut script yang harus dipasang :
<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style>
<ul id="iconizr"><li data-alt="Follow me on Twitter"><a rel="external" href="#Twitter" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="#Facebook" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="#G+" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="#Feed" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>
Keterangan :
Ganti kode #Twitter dengan alamat twitter kamu.
Ganti kode #Facebook dengan alamat facebook kamu.
Ganti kode #G+ dengan alamat G+ kamu.
Ganti kode #Feed dengan alamat feed blog kamu.

Thursday, 4 April 2013

Fibox Shoutbox Script Buku Tamu Gratis Buat Blogger

 
Tutorial Blogger kali ini saya ingin berbagi info tentang Fibox.

Fixbox merupakan salah satu penyedia script buku tamu gratis yang bisa dijadikan sebagai alternatif buku tamu gratis selain Cbox.ws situs penyedia Shoutbox Script (script buku tamu) gratis yang sudah saya share dulu.

Sama dengan script buku tamu lainnya, script buku tamu Fibox nantinya juga bisa kita buat menjadi tersembunyi.

Cara Mendaftar Di Fibox Penyedia Script Buku Tamu Gratis

Cara Pertama.
  1. silakan buka situs www.fibox.ws kemudian klik Sign Up
    2. Fibox Shoutbox
  2. Masukkan email address dan password. Beri centang pada term of service kemudian klik continue.
    3. Shoutbox Script Buku Tamu Gratis
  3. Maka akan kamu akan menemukan halaman seperti ini
    4. Script Buku Tamu Gratis
  4. Nah langkah selanjutnya silakan buka inbox email kamu untuk melakukan konfirmasi, yaitu dengan cara mengklik link konfirmasinya.
    5. Script Buku Tamu Gratis Buat Blogger
  5. Selesai. Selamat, kamu sudah memiliki akun di Fibox dan sudah bisa login dan menggunakan script buku tamunya.
    6. Fibox Shoutbox Script
Cara Kedua
Oh ia, selain dengan cara di atas kamu juga bisa mendaftar menggunakan akun facebook kamu, yaitu dengan cara mengklik tombol login menggunakan akun facebook.

Monday, 3 September 2012

Cara Membuat Popular Post Warna Warni Di Blogger

 
Kemarin ada yang bertanya tentang cara membuat popular post warna warni, sehingga akhirnya saya putuskan untuk menuliskan tutorial cara pasang widget popular post warna warni di blogger pada postingan kali ini.
Tutorial Cara Membuat Popular Post Warna Warni Di Blogger (Mudah dan Cepat)
Sebenarnya cara membuat popular post warna warni di blogger tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada template kita.

Untuk lebih jelasnya silakan ikuti tutorial berikut.

Cara Pasang Popular Post Warna Warni Di Blogger

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:
  1. Klik menu Tata Letak / Layout
  2. Klik Tambahkan Gadget / Add a Gdget
  3. Pilih Widget Popular Post / Entri Populer

Cara Setting Widget Popular Post :

  • Pada bagian Most viewed, silakan tentukan sendiri apakah ingin menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam satu minggu.
  • Pada bagian Show ada bagian image thumbnail dan snippet serta Display up to, nah pada bagian Display up to silakan tentukan berapa artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan snippet JANGAN DIBERI CENTANG.
  • Setelah itu silakan Simpan
Tutorial Cara Pasang Popular Post Warna Warni Di Blogger
Sampai tahap ini widget artikel populer sudah bisa dilihat pada blog kita, namun artikel populer nya belum warna warni, agar popular post menjadi warna warni silakan lanjutkan baca tutorial ini , he heeee.

Ada 2 cara, silakan pilih yang menurut kamu lebih mudah.

Cara Pertama

Karena kamu sudah berada pada bagian Tata Letak / Layout, maka kamu cukup klik tambah gadget lagi, dan pilih gadget HTML/JavaScript, setelah itu masukkan kode css berikut di dalamnya
<style type='text/css'>
/*----- POPULAR POST WARNA WARNI -----*/
#PopularPosts1 ul li a:hover{color:#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-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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:after{position: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:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position: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}
</style>
Selanjutnya simpan.

Cara Kedua

Klik menu Template (letak menunya di sebelah kiri)

Di sana kamu akan bisa melihat tampilan blog kamu sekarang, nah di bawahnya ada tulisan Edit HTML, silakan klik tulisan Edit HTML tersebut, kemudian klik Lanjutkan.

Cari kode ]]></b:skin> setelah itu pasang kode berikut di atasnya. Agar lebih mudah menemukan kode tersebut silakan baca Cara Mudah + Cepat Mencari Kode Html di Blogger
/*----- POPULAR POST WARNA WARNI -----*/
#PopularPosts1 ul li a:hover{color:#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-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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:after{position: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:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position: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}
Simpan pengaturan template kamu.

Nah itulah tutorial cara membuat / pasang widget popular post warna warni di blogger, semoga bermanfaat.
Get updates in your email box

Complete the form below, and we'll send you our recent update.

Deliver via FeedBurner
© Copyright 2016 i-Habibi. Designed by Bloggertheme9. Distributed by Free Blogger Templates