Cara Membuat Recent Post Blog Warna - Warni

Oke sobat blogger semuanya, kembali lagi nih saya akan bagikan tutorial blog update terbaru pastinya. Kali ini akan saya share tentang cara membuar recent post warna-warni. Cara buatnya sangat mudah kok, mirip-mirip dengan tutorial membuat popular post warna-warni. Dan keuntungannya memasang widget ini tentunya untuk mempromosikan postingan terbaru kita lewat sidebar di samping blog. Sekaligus juga dengan tampilannya yang warna-warni bisa menambah keindahan blog sobat.

Bagi yang ingin memasangnya di blog sobat, segera ikuti tutorial berikut :
Tahap Pertama
1. Login akun blogger sobat
2. Masuk ke tab menu Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Copypastekan kode berikut ini ke dalamnya

<div id='entrinewdjb'>
<script src="http://djangkarubumi.googlecode.com/files/SerpihanWaktuEntriNew.js"></script>
<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://NamaBlog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
</div>

Keterangan
Ganti kode warna merah dengan alamat blog sobat
Untuk warna biru menandakan jumlah post yang ingin ditampilkan, sesuaikan dengan selera saja
4. Klik Simpan

Tahap Kedua
1. Masuk tab menu Template > Edit HTML
2. Search kode ]]></b:skin> kemudian copypastekan kode berikut di atasnya :

#entrinewdjb ul li a:hover{color:#fff;text-decoration:none} #entrinewdjb 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;} #entrinewdjb ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #entrinewdjb ul li:first-child:after,#entrinewdjb ul li:first-child + li:after,#entrinewdjb ul li:first-child + li + li:after,#entrinewdjb ul li:first-child + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after,#entrinewdjb 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}#entrinewdjb ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #entrinewdjb ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li:after{content:"6"} #entrinewdjb ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li:after{content:"7"} #entrinewdjb ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li:after{content:"5"} #entrinewdjb ul li:first-child + li + li + li{background:#c7f25f;width:90%} #entrinewdjb ul li:first-child + li + li + li:after{content:"4"} #entrinewdjb ul li:first-child + li + li{background:#ffde4c;width:90%} #entrinewdjb ul li:first-child + li + li:after{content:"3"} #entrinewdjb ul li:first-child + li{background:#ff764c; width:90%} #entrinewdjb ul li:first-child + li:after{content:"2"} #entrinewdjb ul li:first-child{background:#ff4c54 ;width:90%} #entrinewdjb ul li:first-child:after{content:"1"} #entrinewdjb ul{margin:0;padding:0px 0;list-style-type:none} #entrinewdjb 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}      

3. Klik Pratinjau untuk lihat hasil sementaranya.

4. Jika sudah sukses berhasil tinggal klik Simpan.

http://www.djangkarubumi.com/2013/05/widget-entri-populer-berwarna.html

Diposting Oleh : Boeztanoel ~ Blogging, Trik, Tips, Free Software

Sobat sedang membaca artikel tentang Cara Membuat Recent Post Blog Warna - Warni. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. <a href="http://oplosanblog.blogspot.com/2014/04/cara-membuat-recent-post-blog-warna.html" target="_blank">Cara Membuat Recent Post Blog Warna - Warni</a>

:: Oplosanblog ! ::

Artikel Terkait

Get this widget [ Here ]