Cara Membuat Widget Popular Post Warna Warni V.2

Kemarin saya sudah membagikan cara bagaimana menambahkan widget popular post warna-warni versi ke 3. Nah kalau yang ini sama saja dengan widget yang kemarin, namun yang saya bagikan ini adalha versi yang ke-2 nya. Tentunya dengan menambahkan widget ini akan semakin terlihat cantik dan menarik. Bedanya, kalau kemarin tidak ada efek hover atau gambar yang bisa berputar, kalau versi yang kedua ini bisa menampilkan gambar yang bisa berputar loh!

Saya sendiri sudah merasakan dan mencoba widget ini. Dan menurut saya widget ini tidak terlalu berat, masih standar hehe. Untuk screenshotsnya lihat gambar diatas, itu sudah saya coba sendiri kok :). Oke bagi kamu yang mau mencoba widget ini, silakan lihat caranya yah.

1. Login ke Blogger.com.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, boleh memakai GAMBAR tapi saya menyarankan untuk tidak memakai cuplikan agar terlihat lebih rapi. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja. 

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini

• Untuk Antarmuka Blog yang lama klik disini  
• Untuk Antarmuka Blog yang Baru klik disini

5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular repost by http://hzndi.blogspot.com*/

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}

/* Rainbow Popular repost by http://hzndi.blogspot.com*/

6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe

Read more »

Cara Membuat Widget Popular Post Warna Warni V.3

Yowman kembali hadir lagi di Tutorial Blog dan SEO. Di tutorial kali ini saya akan menjelaskan bagaimana caranya membuat widget popular post atau artikel terpopuler menjadi lebih atraktif, cantik dan menarik. Hanya dengan menyalin beberapa kode CSS, dan Wushhh.... Widget Popular post kamu akan terlihat sangat menarik dan cantik seperti gambar diatas.

Widget ini suda saya coba sendiri dan hasilnya pun sudah saya screenshot. Gambar diatas adalah hasilnya, cara membuatnya pun cukup mudah. Dan bagi kamu yang tertarik memakai widget ini, silakan lihat caranya di bawah ini. Di perhatikan yah !

1. Login ke Blogger.com dengan Akun kamu.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, jangan memakai gambar dan cuplikan. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja.

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini

• Untuk Antarmuka Blog yang lama klik disini  
• Untuk Antarmuka Blog yang Baru klik disini

5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

#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}

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

6. Simpa dan kamu lihat hasilnya, pasti cantik sekali sob :D

Read more »

Cara Membuat Widget Popular Post Dengan Bingkai

Setelah browsing iseng-iseng kesana kemari, akhirnya saya menemukan salah satu cara untuk hack widget popular post atau artikel terpopuler. Memang sih pihak blogger sudah menyediakan widget ini, namun tampilannya masih kurang rapi dan gambarnya pu terkadang acak-acakan. Dengan di tambahkannya beberapa kode css, maka widget ini akan semakin terlihat elegan dan menakjubkan. Penasaran ? lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> Pilih "Entri Populer". Nah untuk setiingan-nya terserah kamu mau  menampilkan berapa artikel, boleh 7, 8 , atau 10. Jangan lupa untuk menampilkan gambarnya saja ! kalau pake cuplikan postingan juga ribet hehe.

3. Simpan template, tetapi masih belum selesai nih.

4. Sekarang klik Template --> Edit HTML --> Kamu cari kode ]]></b:skin>, gunakan ctrl + f untuk memudahkan pencarian.

5. Salin kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

    .PopularPosts .item-thumbnail {
    padding: 3px;
    border: 1px solid #999;
    background-color: #fff;
    }

    .PopularPosts img {
    height: 36px;
    width: 36px;
    }

    .PopularPosts .widget-content ul li {
    list-style: none;
    }

6. Simpan template dan lihat hasilnya :)

Read more »

Menaruh Widget Subscription Berbentuk Perangko

Sepertinya jika membahas tentang widget untuk blogger memang tidak akan ada habisnya, sekarang ada lagi widget dengan tampoilanb yang lumayang menarik dan seperti perangko. Di dalam widget tersebut juga kita bisa memasukkan alamat feedburner, RSS, Twitter, Facebook hingga google plus. Tentu saja itu semua dapat memanjakan pengunjung kita dan menambah jumlah follower di twitter maupun jumlah fans di FB. Lihat langkahnya di bawah ini.

1. Login ke blogger.com

2. klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.

3. Masukkan kode di bawah ini ke dalam Kotak HTML/Javascript tadi.

<style>
a:hover {background-color: transparent;opacity:0.7;}
</style>

<a title="Rss Feed" href="MASUKKAN ALAMAT FEEDBURNER KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRnXReMkOI-wxU_tSjWafg3PbN0AB_-PAmauocviZvT7UtKG-6Ddyn7qt-BFg7Cpb-jB4mGKzVBZBd2UQ4jXF2dw0oOQQAO7fQeIi4Pi3t8jGUaQZjjIaA7mvkMs2umQVV6u1RmrQf2bP/s1600/rss_48x48.png" /></a>

<a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=GANTI DENGAN NAMA FEEDBURNER KAMU&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMq37-mDhbJ48Y7ui_Htgq_jhPLdsYTCbwyyCLrPOH1k9Or5tpWTDAeB_fdFj5mpV4WTGV95D_CEn3X7Rrcn4910M8UZjqIomqt-UTSx_XUq-kDB95plSlHp3SMj8HadJtACpiPSGJ0LP/s1600/mailrss_48x48.png" /></a>

<a title="Follow On Twitter" href="MASUKKAN ALAMAT TWITTER KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-3WO4is1-5sdgoIPZibPk0j29K8mPXw8YUh7-MF3fFLleJIph9nHIGEwpFv1gz_vrTL49I4Vw46r-5O3610DnVzqDwLKasA9xs6TSZZRLjwxNRYSxaCNiM75QvNsbQPSZtCzGQ_9PFYZ/s1600/twitter_48x48.png" /></a>

<a title="Find Us On Facebook" href="MASUKKAN ALAMAT FB/ FANS PAGE FB KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqU-n-kqi11OzKh_qIR7n7LoM-lyreubgWBSlmyNwXD8TQ30rnmNEocU8xcUGDlzhiMK1P_iiaaExA0EvaXypKjgxd38qMfaYJ045odtLKVXFQMWr9lhzI4X8L7VDfBqTHxwwJXraThOio/s1600/facebook_48x48.png" /></a>

<a title="Add To Circles" href="MASUKKAN ALAMAT GOOGLE PLUS KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCT5Ykh8v3O8BhHoW50-afcr35Ii_rYl3p5YFAc10A4odGWddtBtAtrE41j2C9pXrRmiEFS6En8eJ7f9OqtSKeiptbYYlCBIV04rUmb9ojNmD1Mg38bgtYjO1KAmyMm3Gf4U7I97e4vky/s1600/googleplus_48x48.png" /></a>

4. Simpan template.

Read more »

Menambah Bar Notifikasi Untuk Blogger Dengan Tombol "Like" Facebook

(source : mybloggertricks.com)

 

Jika tadi widget yang saya bagikan tidak menampilkan tombol like facebook, di widget yang sau ini akan ada tombol like facebooknya. Fungsinya sih hampir sama seperti widget sticky bar namun dengan adanya tombol like, bisa menambah fans kamu di halaman fans FB. Lihat tutorialnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt-stickybar{
background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

3. Kamu cari lagi kode <body> atau </body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body> (Jika kamu ingin menempatkannnya di bawah header) atau letakkan di </body> (Jika kamu ingin menempatkannya di bawah footer).

<div id='mbt-stickybar1'>
<div style='float:left; width:400px;'>
<a href='#'>Receive Free Updates Via Email. Subscribe Now!</a>
</div>
<div style='float:right; width:300px;'>
<table style='margin:0; padding:0;'>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='alamat fan page Facebook kamu' layout='button_count' send='false' show_faces='false' width='80'/>
</td>
</tr>
</table>
</div>
</div>

NOTE :

- Ganti kode # dengan alamat feedburner kamu.
- Ganti kode yang berwarna biru dengan alamat url fan page facebook kamu.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)

Read more »

Menaruh Pesan di Sticky Bar Dengan Tombol Tutup

Sudah beberapa hari saya tidak membagikan tutorial tentang blog dan kali ini akan saya bagikan lagi sebuah tutorial untuk menaruh pesan di widget Sticky Bar. Kira-kira bagaimana sih tampilannya ? kamu bisa lihat seperti Gambar di atas dan langsung saja langkah-langkahnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

3. Kemudian kamu cari lagi kode </head>, setelah itu kamu salin kode javascript di bawah ini dan letakkan yang sudah kamu salin di atas kode </head>.

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

4. Kamu cari lagi kode <body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body>.

<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?
<a href='http://hzndi.blogspot.com/2012/06/menjadi-penulis-di-blog-hzndi.html'>KLIK DISINI</a>
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8s2PLNjAZuP69tEDlbnfobv7A4J8_1rvSmfB8rkkX5dHaCXNQowJfN4ouiPpB7gHzQPQtzpShVwsI3vcD1So29lrIGeBIDDp0dJ5PfPg6lAHguLSDgfP9lODxThIPfUeHCGVIpHpPGNo/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

NOTE :

- Tulisan yang berlatar belakang berwarna kuning kamu ganti dengan kata-kata kamu sendiri.
- Kode yang berwarna biru adalah alamat URL yang bisa kamu taruh, ganti juga kata yng berwarna biru berlatar belakang kuning dengan kata-kata kamu sendiri.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)

Read more »