Cara merubah tampilan home post blog rak buku

banyak sekali kini desain desain template blog yang sangat bagus maupun menarik terutama bisa kita lihat di bagian home post blog anda berubah menjadi lebih menarik, nah disini saya akan memberitahukan kepada anda sekalian cara membuat tampilan home post blog keren lebih menarik menjadi seperti rak buku ya bisa kita sebut juga mengganti thumbnail post blog menjadi seperti rak buku dan jauh lebih simple.

DEMO

Ikuti Langkah - Langkah :

1. Login Blog anda dan buka yang ingin di pasang
2. Buka Tata Letak
3. Tambahkan Gadget > HTML/JavaScript
4. Masukan Kode Di Bawah, Beri nama Latest Post Dan Simpan
5.      <style>
       #daftar-isi-body
       {
                width:760px!important;
                height:600px!important;
                padding:30px 40px;
                margin:0 auto;
       }
        #daftar-isi-wrap
       {
                margin: 0 auto;
       }
        .box-posting
       {
                background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQ_cN8qQQgHRynmyR2_n-1ye-OtW6Xe2QkgNUolgT4ZQqzsjGmBMqzjarHn17nqAspGBhi1EYffC3P9D5gUBz9LpY85G58gq7OymdwNq0J9X9j6JAJHMJBvQixApPEdXk1yKeoQ4zdRk/s1600/bg-box.png);
                background-position:bottom center;
                background-repeat:no-repeat;
                overflow:hidden;
                cursor:pointer;
                float:left;
                height:140px;
                width:248px;
                margin:-50px 0 0 0;
       }
        .box-posting img
       {
                height:46px;
                width:46px;
                float:left;
                margin:20px 0 0 25px;
                background-color:#2E0700;
                border:1px solid #2E0700;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                border-radius: 50%;
       }
        .box-posting .judul-posting
       {
                float:left;
                height:35px;
                margin:0;
                width:220px;
       }
        .box-posting .judul-posting a
       {
                font-family:arial,Serif !important;
                color:#774A34!important;
                text-shadow:0 0 1px rgba(0,0,0,0.9);
                margin:-40px 0 0 80px;
                display:block;
                font-size:13px !important;
                line-height:18px!important;
                font-weight:bold !important;
       }
        .box-posting .judul-posting a:hover
       {
                color:#333!important;
       }
        .box-posting:hover
       {
                border-left-color:#C6EB04;
       }
        #totales
       {
                text-align:center;
                color:#774A34 !important;
                text-shadow:0 1px rgba(0,0,0,0.2);
       }
        #loadingscript
       {
                color:#444;
                font-family:Century Gothic;
                font-size:100px;
                letter-spacing:-10px;
                text-align:center;
                text-shadow:-5px 0 1px #444;
       }
        #paginacion
       {
                color:#BBB;
                font-size:24px;
                font-weight:bold;
                height:35px;
                line-height:28px;
                padding:0;
                margin:0 auto;
                text-align:center;
       }
        #paginacion span,#paginacion a
       {
                display:inline-block;
                font-size:13px !important;
                line-height:24px;
                font-weight:bold;
                margin:0 1px;
                width:25px;
                height:25px;
       }
       #paginacion a, #paginacion span.actual
       {
                background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnoombpZcNyvF-ur848BcPqCJMUp9O2sI0CLanlGdv28QAwouE-VT22JHx5QSgx7b-oaWM4zk0h0nD7N3glvCrWHXRqmyF4hOs9lV_9TLz4jq6lE4ei_OH0YcVEMS_MAeseJjOdVpCKY/s1600/page-link.png);
                background-position:top center;
                background-repeat:no-repeat;
                color:#250700 !important;
                text-shadow:0px 1px 0px rgba(255,255,255,0.1);
       }
        #paginacion span.actual
       {
                color:#774A34 !important;
       }
        #paginacion a:hover
       {
                color:#FFF !important;
       }
        #paginacion .nextprev-link,
        #paginacion span.nextprev-link
       {
                border:none;
                color:#250700 !important;
                text-shadow:0px 1px 0px rgba(255,255,255,0.1);
                width:100px;
                background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGk1U2elLHJ4H11q89tLvRsycdFr18DG4kt4N-T8FYayPJKJ_D9VoQufAlGOAOMbbVV9XJkiU-QCRWWcyW9MjoFcCxhRssLlKUsJXORzn3V9P6KpPDK_w-WoCOSEoGIHeFwzY_aq5CQng/s1600/nextprev.png);
                background-position:top center;
                background-repeat:no-repeat;
       }
       </style>
       <script type="text/javascript">
                         var jumlahposting = 18;
                         var urlblog = "http://sumber-akuka.blogspot.com";
                         var minpaginas = 5;
                         var maxpaginas = 10;
                         var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
                                                   </script>
       <script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>

Note :
Ubah Kode yang berwarna kuning dengan nama blog anda


Taruh Widget di atas Posting Blog Seperti Gambar di bawah


6. Buka Setelan > Post dan komentar
   
   
7. Ubah jumpal postingan menjadi 0 > Simpan setelan
   
   

Untuk Mengoptimalkannya agar widgetnya tampil hanya di Homepage Buka link di bawah :
Cara Menampilkan Widget Hanya Di HomePage SEO Friendly

Selesai deh silahkan anda lihat hasilnya sendiri dan selamat menikmati , kami tunggu kunjungan selanjutnya