Mempercantik blog dengan modifikasi Random Post

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.

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

Terlebih dahulu, Anda harus masuk ke halaman desain blog Anda

Kemudian masuk ke menu "Tata Letak"

Pada kolom widget, pilih "Tambahkan Gadget"

Setelah halaman tambahan gadget aktif, Silahkan cari "HTML/Java Script"

Kemudian isikan konten gadget tersebut dengan kode yang ditampilkan pada kotak di bawah ini:

<div style="color: #d46417; font-size: 13px; text-align: LEFT;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">ENTRI RANDOM</span></b></div>
<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 type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

Simpan dan tutup gadget tersebut dengan mengklik tombol "Simpan"

Demikian tips dari Saya, silahkan coba gadget Random Post ini pada blog Anda guna meningkatkan tampilan pada blog Anda.

---

Silahkan baca juga artikel sejenisnya di bawah ini :

BLOGING