Jika Anda mencari widget popular post warna warni tentu akan ditemukan banyak blog yang telah membahas widget tersebut namun bagaimana dengan recent post, widget artikel terbaru dibuat seperti popular post yaitu memiliki warna warni disetiap linknya? Memang sudah ada artikel yang membahas widget recent post warna warni ini namun yang saya jelaskan pada artikel ini memiliki perbedaan dengan yang telah ada. Apa saja perbedaannya? Yuk kita bahas bersama....
Widget artikel terbaru ini merupakan hasil modifikasi saya dari widget recent post yang di buat oleh mas +Taufik Nurrohman yang telah di bahas di Widget Recent Post dan hasil modifikasi yang saya lakukan tentu lebih baik karena
Perhatikan widget artikel terbaru warna warni di sidebar blog ini, sepintas memang terlihat seperti popular post yang biasa ditemukan di beberapa blog, sebenarnya itulah recent post yang telah saya modifikasi dan jika Anda ingin memasangnya kedalam blog Anda semua silahkan ikuti panduannya berikut ini

Widget artikel terbaru ini merupakan hasil modifikasi saya dari widget recent post yang di buat oleh mas +Taufik Nurrohman yang telah di bahas di Widget Recent Post dan hasil modifikasi yang saya lakukan tentu lebih baik karena
- Memiliki tab list warna warni seperti yang terlihat pada sidebar blog ini
- Memiliki title tag pada gambar dan judul
- Lebih SEO Friendly karena adanya title tag tersebut
- Loading lebih cepat karena beberapa kode saya hapus
- Perbedaan dari recent post yang telah ada adalah secara keseluruhan kode script lebih sedikit
Perhatikan widget artikel terbaru warna warni di sidebar blog ini, sepintas memang terlihat seperti popular post yang biasa ditemukan di beberapa blog, sebenarnya itulah recent post yang telah saya modifikasi dan jika Anda ingin memasangnya kedalam blog Anda semua silahkan ikuti panduannya berikut ini

Recent Post: Widget Artikel Terbaru SEO Friendly & Warna Warni
CSS & SCRIPT- Buka akun blogger Anda
- Pilih menu Tata Letak >> Tambahkan Widget atau Add Gadget
- Pilih HTML/JavaScript
- Salin kode css berikut ini kedalam HTML/JavaScript
<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQKH9x9SrDNtZSQ91NjuxzBD-Bf5g-PWMMhKcbxFzLLILnVJTrUohkD-I-fH82fu2pO-AgmfhyhaVFsPcu4AlQIAl3koNnWn1jII_QNQiI26DUQxWu4HrYai8JjMLJVQvW22J5jnCBU8/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:1%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:3%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:5%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:9%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:10%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.panduantemplateblog.com",
rp_numPosts = 5,
rp_thumbWidth = 50,
rp_numChars = 80,
rp_sortByLabel = false,
rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6IPmNmigCgEkH5ef5UGxdMXhUobuyHSUQI4Sg1dVX2yiuxaMDdxnTKFH1yfI0WwPADtMWK9NR3GEPXz_4NrKgTQ4FucGQYuawnscOyRPkRgYr4J5dMe7IvV4Kzbyc_ZKa1h9bUP9GDY/s1600/minismallest-img.png",
rp_newTabLink = false,
rp_loadTimer = "onload";
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/s/m6emd2j1kc5517k/ptb-repost.js' type='text/JavaScript'></script>
Jika berhasil maka akan terlihat seperti yang ada pada gambar diatas atau pada bagian artikel terbaru di sidebar blog ini. Jika belum berhasil silahkan tinggalkan komentar Anda untuk artikel ini, Recent Post: Widget Artikel Terbaru SEO Friendly & Warna Warni
- Klik Simpan
Jika berhasil maka akan terlihat seperti yang ada pada gambar diatas atau pada bagian artikel terbaru di sidebar blog ini. Jika belum berhasil silahkan tinggalkan komentar Anda untuk artikel ini, Recent Post: Widget Artikel Terbaru SEO Friendly & Warna Warni
seperti pelangi jadinya mbak bagus sekali coding nya juga simple dan tidak begitu banyak .
BalasHapushehee bukan saya yang coding mas, cuma melakukan edit ulang saja :)
HapusTapi memang keren kok....unik dan enak dipandang....
BalasHapusheheee iya om, sekeren om Mus,, :)
Hapuspinjam ya mba..hehehe
BalasHapushehee kalau pinjem jangan lupa dikembalikan ya mas Aldino :)
Hapusberhasil mba...
BalasHapusmakasih ya..
bagus tuh recent post, pengen coba. ijin kopas
BalasHapussilahkan dicoba mas Ridho, semoga bermanfaat.. :)
Hapusletakkan kode dibagian mana ya,? kok saya letakkan di atas kode ]]> gak bisa
BalasHapusdi halaman Tata Letak mas..
Hapus