Related Post CSS Part 2 Vers.

contoh gambarnya dibawah ini :

Udah pada taukan sekarang,apa itu related post ? Ingin mencoba untuk memasangnya di blog sobat masing masing ??
Untuk itu saya ambil jawaban iya #maksa banget jawabannya XD
Dan untuk itu,langsung simak saja tutornya :

Dasbor > Rancangan > Edit HTML > Centang Expland Template Widget

Kemudian tekan F3 atau CTRL + F lalu cari code :

]]></b:skin>

Lalu copi code dibawah ini dan pastekan diatas code ]]></b:skin> :

view plain print ?

.caesar-terkait{margin:0 0 10px 0;color:#666666;}.sidebar a{text-decoration:none;color:#666666;}
.caesar-terkait a:hover{text-decoration:none;color:red;}
.caesar-terkait h3{color:#414445;background:-moz-linear-gradient(top, #800000, orange);background:-o-linear-gradient(top, #800000, orange); background:-webkit-gradient(linear,left top,left bottom,from(#800000),to(orange)) repeat-x;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-shadow:0 1px 0 #fff;}
.caesar-terkait ul{list-style-type:none;margin:0px;padding:0px;}
.caesar-terkait ul li{padding:4px 0px 0px 6px;color:yellow;margin:0px;-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;background:-moz-linear-gradient(top, #000000, #FF0000);background:-o-linear-gradient(top, #000000, #FF0000); background:-webkit-gradient(linear,left top,left bottom,from(#000000),to(#FF0000)) repeat-x;}
.caesar-terkait ul li:hover{padding:4px 0px 0px 6px;color:yellow;margin:0px;-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;background:-moz-linear-gradient(top, #000000, orange);background:-o-linear-gradient(top, #000000, orange); background:-webkit-gradient(linear,left top,left bottom,from(#000000),to(orange)) repeat-x;}
.caesar-isi a{color:yellow;-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;padding:4px 0px 0px 6px;text-decoration:none;font-family:Arial,Helvetica,Sans-serif}
.caesar-isi a:hover{color:white;-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;padding:4px 0px 0px 12px;text-decoration:none}

Jika sudah,cari lagi code ini :

<data:post.body/>

Lalu,copi code dibawah ini dan pastekan tepat dibawah code <data:post.body/> :

view plain print ?

<div style='margin:20px;'/>

<b:if cond='data:blog.pageType == "item"'>

<div style='padding-left:6px;border-radius-topleft:10px; -moz-border-radius-topleft:10px; -webkit-border-radius-topleft:10px; -o-border-radius-topleft:10px; -khtml-border-radius-topleft:10px;border-radius-topright:10px; -moz-border-radius-topright:10px; -webkit-border-radius-topright:10px; -o-border-radius-topright:10px; -khtml-border-radius-topright:10px;background:-moz-linear-gradient(top, #800000, #000);background:-o-linear-gradient(top, #800000, #000); background:-webkit-gradient(linear,left top,left bottom,from(#800000),to(#000)) repeat-x;color:white;margin-right:700px;padding-top:5px;padding-bottom:5px;margin-bottom: -10px;margin-left:10px;border-left:2px solid red;font-weight:bold;font-size:16px;border-right:2px solid blue;border-top:2px solid green;'>artikel terkait lainnya :</div>

<div class='caesar-isi' style='margin:0; padding:10px;'>

<div class='caesar-terkait' id='caesparta'/>

<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 5;

maxNumberOfLabels = 5;

function listEntries10(json) {

  var ul = document.createElement('ul');

  var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;

  for (var i = 0; i < maxPosts; i++) {

    var entry = json.feed.entry[i];

    var alturl;

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        alturl = entry.link[k].href;break;

      }

    }

  var li = document.createElement('li');

  var a = document.createElement('a');

  a.href = alturl;

  if(a.href!=location.href) {

    var txt = document.createTextNode(entry.title.$t);

    a.appendChild(txt);

    li.appendChild(a);

    ul.appendChild(li);

  }

}



for (var l = 0; l < json.feed.link.length; l++) {

  if (json.feed.link[l].rel == 'alternate') {

    var raw = json.feed.link[l].href;

    var label = raw.substr(homeUrl3.length+13);

    var k;

    for (k=0; k<20; k++)

    label = label.replace("%20", " ");

    var txt = document.createTextNode(label);

    var h = document.createElement('h3');

    h.appendChild(txt);

    var div1 = document.createElement('div');

    div1.appendChild(h);

    div1.appendChild(ul);

    document.getElementById('caesparta').appendChild(div1);

  }

}

}



function search10(query, label) {

  var script = document.createElement('script');

  script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');

  script.setAttribute('type','text/javascript');

  document.documentElement.firstChild.appendChild(script);

}



var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

  search10(homeUrl3, textLabel);

  numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</b:if>

Jika sudah,klik simpan dan lihat hasilnya, di Full Posting sobat masing masing,tepatnya diatas kotak komentar sobat :D

Judul : Related Post CSS Part 2 Vers.
Deskripsi : contoh gambarnya dibawah ini : Udah pada taukan sekarang,apa itu related post ? Ingin mencoba untuk memasangnya di blog sobat masin...

Related Post CSS Part 2 Vers.

Belum ada komentar untuk "Related Post CSS Part 2 Vers."

Posting Komentar