Hai Sobat blogger, pada kesempatan sebelumnya saya sudah membagikan Cara Mudah Membuat Widget Facebook Popup Like Box Stilysh Di Blog. Dan pada kesempatan kali ini, saya akan membagikan Cara Mudah Membuat Widget Recent Post/Artikel Terbaru Warna-Warni (Pelangi) Di Blog. Memang kebanyakan judul artikel buatan saya terdapat kata "Mudah", misalnya "Cara Mudah memasang bla bla bla". Hal tersebut dikarenakan saya membuatkan artikel yang sangat mudah dan menarik dan saya ringkas dari berbagai referensi, sehingga tutorial, cara jitu, tips, dsb yang saya kemas, lebih memudahkan dan tidak merepotkan sobat.
Oke kembali lagi pada topik pembahasan kita kali ini ya. Widget atau Gadget "Recent Post" merupakan sebuah widget yang memaparkan daftar/list artikel terbaru (terakhir diposting). Widget ini memudahkan pembaca untuk mengetahui artikel ter-update dan fresh (masih hangat di perbincangkan). Pada kesempatan kali ini, saya telah mengemas widget ini sehinga menjadi lebih menarik dan indah untuk dipandang. Walaupun widget ini menampilkan gambar thumbnail sehingga mungkin sedikit akan berefek dalam proses loading blog sobat, widget ini masih fresh dan menjadi trending widget di seluruh jagad blogger (alay).
Eko sob! bagaimana kalu kita kerumah si Eko. Maksud saya, Oke sob! bagaimana kalau kita simak ulasan berikut ini untuk memasang widgetnya di blog sobat.
1. Login ke akun blogger sobat.
2. Pada bagian Dasbor, sobat pilih Tata Letak/Layout => Tambahkan Gadget/Add Gadget => HTML/Javascript.
3. Masukkan kode berikut.
<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/AVvXsEg9yVU9TNGIk0MsAZGmlbJ9GHdmoVYyA2cHkZWPekNEQYVQ8dwMk7BM1_zTSx_SUXDvZnqr59IQNSZOnpp1Kd4i9y-UjrR9zu2iieP576TiDRZgHc82xgSytSPvGx1Ut8dIVO-TNC87LwM/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:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://zonnacyber.blogspot.com",
rp_numPosts = 5,
rp_thumbWidth = 50,
rp_numChars = 80,
rp_sortByLabel = false,
rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWNmzfKy9Ep6Li_VwcMI0tLisBcUnCV-rdHot5dl7acnk4WPcvBLcG50_duVmWyoH1KrI76_2JEOJT0bYFoLhnGcvn9GCujWK6YWskfB15AxEuvizK2rhBxUAAlRAX04FPPd-DQa3uQ0/s1600/minismallest-img.png",
rp_newTabLink = false,
rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>4. Ganti kode berikut dengan URL Blog sobat.
http://zonnacyber.blogspot.com5. Lalu save dan muat ulang laman blog sobat.
.jpg)
.jpg)
1 komentar: