membuat related post responsive

Cara Membuat Related Post Dengan Thumbnail di Blogger -Pada sore ini saya sudah membuat kode javascript Related Post Dengan Thumbnail dengan pada dasar saya ingin shree  Related Post Dengan Thumbnail untuk kalian ,Related Post ini adalah yang kamu akan tanpil secara otomatis pada saat pengjung blog kita membaca artikel kita dengan pada awal Related Post ini sangat membantu untuk statik blog kita libih meningkat , Related Post bukan hanya untk mempercantik blog saja dan banyak manppaat dan ke gunanyaa jika kamu mau pasang Related Post Dengan Thumbnail ini anda bisa lihat pada gambar di bawah ini.

DEMO

Seperti yang anda lihat di atas jika kamu tertarik sama dengan menu Related Post Dengan Thumbnail ini anda bisa pasang pada blog anda dengan cara berikut ini.

Langkah Pertama

1. Kamu Login saja ke blogger
2. Kemudian  kamu pilih saja Menu Tambahkan Wigdet pada blog anda
3. Dan kamu pilih Saja Menu Tata Letak >> Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript
4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts = 6;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;
//]]>
</script>
<script type="text/javascript" src="https://rawgit.com/tutorialcid/js/master/li-widget.js"></script>
<script type="text/javascript" src="http://tutorialcid.blogspot.co.id//feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

5. Langkah Berikutnya kemudian kamu klik simpan dan buka Tab baru maka menu tersbut maka akan tanpil sesuwai dengan pada gambar berikut.

Keterangn

• Kamu Gantikan http://tutorialcid.blogspot.co.id/ Dengan Ulr alamat blog anda
• var numposts = 6; Kamu bisa seting jumblah yang akan tanpil

Munkin cukup sampai di sini saja pada tutorial kali ini yang saya bisa sampaikan ke pada anda tentang Cara Membuat Related Post Dengan Thumbnail di Blogger ini semoga bisa bermanpaat bagi anda wasalam .

Lokasi:

Berbagi :