Memodifikasi Tampilan Random Post Blog

Mempercantik tampilan blog merupakan salah satu yang wajib dilakukan oleh para blogger, Kenapa? Karena dengan mempercantik display dari blog yang kita punya secara tidak lansung mampu memberikan daya tarik tersendiri bagi pengunjung blog Kita. Olehnya itu, Jika Anda menginginkan para pengunjung blog Anda betah dan menyukai blog Anda, Anda harus mempercantik tampilan blog Anda. Adapun salah satu jalan untuk mempercantik tampilan blog yaitu dengan memodifikasi model tampilan random post blog Anda.

Tapi sebelum itu, klik banner di bawah ini guna membantu dalam pengembangan blog ini, atas Klik-annya, diucapkan terima kasih.

Berikut ini langkah-langkah memodifikasi tampilan Random Post Blog menjadi lebih menarik :

1. Login ke Blogger anda terlebih dahulu.
2. Masuk ke menu "Tata Letak"
3. Pada kolom widget, pilih "Tambahkan Gadget"
4. Setelah halaman tambahan gadget aktif, Silahkan cari gadget "HTML/Java Script"
5. Kemudian isikan konten gadget tersebut dengan kode yang ditampilkan pada kotak di bawah , lalu simpan settingan dengan menekan tombol "Simpan"

<style type="text/css">
.noop-random-posts ul {margin:0;padding:0px 0;list-style-type:none}
.noop-random-posts ul  li{position:left;margin:3px 00px;border-radius:0px 20px 0px 20px;border:2.5px solid #d26c21;-webkit-box-shadow:0px 0px 0px #000;-moz-box-shadow: 0px 0px 0px #000;padding:10px;}
.noop-random-posts ul  li:first-child{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child:after{content:""}
.noop-random-posts ul  li:first-child + li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li + li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li + li +li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li + li + li +li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li +li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li + li +li{background:#f69e5d;width:90%}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li + li + li:after{content:""}
.noop-random-posts ul  li:first-child:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li:first-child + li + li + li + li + li + li + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
.noop-random-posts ul  li a {color: #ffffff;}
.noop-random-posts ul  li a:hover{color: #a61515;}
}

</style>

<div class="noop-random-posts">
<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=9;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>
";
    document.write(item);}}
    }document.write('</ul>
');}
    </script><a href="http://contohblognih.blogspot.com/" style="font-size: 0pt;">Random Posts Widgets</a><script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=nooprandomposts" type="text/javascript"></script></div>

Demikian tips dari Saya, silahkan coba percantik tampilan Random Post blog Anda