Hedeh,ngabisin waktu 3 jam cuma buat nyelesein beginian ( related post css modify ).
Tapi gapapa,namanya juga resiko pemblogger newbie wkwkwk.
Epilogue..
Apakah sobat tau,apa itu related post..?? Silahkan cek disini,apa itu related post XD #saya juga lupa.Atau bisa sobat lihat 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 :
- Login ke akun blogger sobat
- 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> :
.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/> :
<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
NB : Script ini ( efeknya ),tidak bekerja pada opera,ntah kenapa saya juga kurang tau tuh wkwkwk XD
11 Comments
