Cara Mengubah Tampilan Raletad Post (linkwithin)

Lanjutan dari artikel sebelumnya kita akan membahas bagaimana cara untuk mengubah tampilan widget "Related Post" agar sesuai dengan yang kita inginkan. Kita akan menggunakan kode-kode dibawah untuk merubah bagian-bagian tertentu.

Langung saja, berikut langkah-langkahnya :

• Masuk ke Dashboard Blog.
• Pilih Tamplate >> Edit Html
• Setelah itu cari (ctrl+f) kode ini  : ] ] ></b:skin>
• Copy kode di bawah ini tepat di atas kode ] ] ></b:skin> :

/*Related Post edit by Satria_Blog
===============================*/
#linkwithin_logolink_0 { display:none!important; }

#lws_0 { clear: both!important; margin: 0 0 20px 0!important;}

.linkwithin_outer { margin: 1px 0px !important; height: 260px; width:550px!important; padding-top: 60px;!important }

.linkwithin_inner { width:550px!important; }

.linkwithin_text {margin: 0px!important; padding: 10px!important; font-family: "Droid Sans",Helvetica,Arial,sans-serif;
font-size: 1.35em; color: #333; font-weight: 700; line-height: 1.35em; background-color: #bbb7b7; border-bottom: 1px solid rgb(0, 0, 0); border-top-right-radius: 10px; border-top-left-radius: 10px; box-shadow: 0px 2px 4px #666; }

.linkwithin_posts a { border-right:0px!important;}

.linkwithin_posts a:hover { border-right:0px!important; background:none!important;}

#linkwithin_logo_0 {display:none;}

.linkwithin_img_0 { border: 1px solid #666!important; padding: 1px !important; width: 100px !important; height: 100px !important; margin-right: 10px !important; overflow: hidden; background:#000 !important;
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease; }

.linkwithin_img_0:hover { cursor:pointer; border: 1px solid #666 !important;
-moz-transform:scale(1.2) rotate(180deg);
-webkit-transform:scale(1.2) rotate(180deg);
-o-transform:scale(1.2) rotate(180deg);
-ms-transform:scale(1) rotate(-180deg);
transform:scale(1.2) rotate(180deg);
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
}

.linkwithin_img_0 div { width: 100px !important; height: 100px !important;}


.linkwithin_title { color: #333 !important; font-size: 10px !important; display: block; padding:0px 10px 0px 0px !important; font-weight: 500!important; line-height: 1.45em!important; margin-top: 10px !important; font-family: "Droid Sans",Helvetica,Arial,sans-serif !important; text-decoration: none!important; width:100px!important;
}


.linkwithin_title:hover{
color:#333;
}

NB : Kode yang berwarna merah adalah kode untuk mengatur panjang lebar widget tersebut (Related Post). 

• Setelah selasai di copy pada tempat yang saya arahkan tadi, silahkan di simpan dan lihat hasilnya.

Contoh Gambar  :

Sebelum

Sesudah

Selamat mencoba, semoga bermanfaat.