Apa fungsi label...? untuk memudahkan para pembaca (visitor) dalam mencari artikel terkait menurut kategori masing-masing artikel tersebut .
Bagaimana cara membuat label...?
jawab :
Perhatikan yang dilingkari warna merah (Autocad) - lingkar merah label autocad yang sudah jadi tersebut jika anda telah memiliki artikel dengan kategori autocad tidak usah membuat label lagi - anda tinggal ceklis artikel anda kemudian klik label autocad. (ini hanya sebagai contoh saja)
setelah melakukan hal diatas barulah anda membuat Related Post. Berikut langkah-langkah untuk membuat related post - Terlengkap.
Cara Membuat Related Post Berdampingan (sebelahan / disebelahnya) iklan atau script html anda. (klik gambar untuk memperbesar ) blog ini menggunakan related post type ini
1. Masuk akun blog anda.
2. Masuk Dasboard.
3. Klik Template lalu edit html jangan lupa <centang> expand template (ada disudut kiri)
4. Kemudian cari kode ]]></b:skin> tekan ctrl+f untuk memudahkan pencarian.
5. lalu taruh kode berikut di atas kode ]]></b:skin> - perhatikan tulisan yang berwarna di bawah itu menunjjukan rbbox posisi dikiri dan lebar kotak 275px sedangkan banner-ads posisi dikanan dan lebar 300px.
#rbbox{float:left;width:275px;border-right:1px solid #ffaaff;margin:5px 0 0;padding:0 15px 0 0}
#rbbox .widget{margin:0;padding:0}
#rbbox .widget h2,#related-posts h2{font:bold 13px Droid Serif;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#rbbox {color:#333;font:12px Droid Serif}
#rbbox:hover{color:#f9ab39}
#rbbox li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGCSu2wXQ6b2OW9prMsecnsM2bmBuey6GlmTT8fCUXC6_5mpexAVNzN8tolbnwxYHrvuQWk4GgMc1d0YFDikHtvXPpwOaA9inWQ73Xc56P0BHiMbBX97wTk640X1Bff-ry2Eukywe9d8/s1600/bullet-list.gif) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}
#banner-ads{float:right;width:300px;margin:5px 0}
6. masih di edit html kemudian anda cari kode <data:post.body/>, apabila kode tersebut terdapat 3 atau 4, maka taruh kode berikut di bawah kode no 3. apabila kode <data:post.body/>, terdapat hanya 2 maka taruh kode berikut dibawah no.2
7. Taruh kode berikut sesuai perintah no.6 diatas. (ganti tulisan yang berwarna merah dengan kode iklan anda atau script html anda sendiri).
<b:if cond='data:blog.pageType == "item"'>
<H3>Artikel Terkait :</H3>
<div id='banner-ads'>
MASUKKAN SCRIPT HTML/JAVASCRIPT KAMU DISINI..!!!
</div>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:250px;overflow:auto;border:0px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 10 ;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
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('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').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>
<script type='text/javascript'>RelPost();</script>
</div>
</div>
</b:if>
7. klik pratinjau atau save template....
Finish and good luck...
Cara Membuat Related Post Thumbnail.
Berikut langkah-langkah untuk membuat related post thumbnail.
1. Masuk akun blog anda.
2. Masuk Dasboard.
3. Klik Template lalu edit html jangan lupa <centang> expand template (ada disudut kiri)
4. Masukkan kode dibawah ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px; padding-left:5px;}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black; }
#related-posts a:hover{
color:black;
} #related-posts a:hover {
background-color:#d4eaf2; }
</style>
<script src='http://kangdansen.googlecode.com/files/relatedpostwiththumbnail.js' type='text/javascript'/>
</b:if>
5. masih di edit html, kemudian anda cari kode berikut <div class='post-footer-line post-footer-line-1'/>
Kemudian letakkan kode di bawah ini di bawah kode <div class='post-footer-line post-footer-line-1'/>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
Perhatian..!!
kode : maxresults var = 6; - untuk menampilkan jumlah artikel terkait
kode : var relatedpoststitle="Related Posts"; - untuk mengganti judul related posts silahkan ganti tulisan yang berwarna merah.
6. kemudian klik pratinjau atau save template anda..
Demikian sharing knowledge pada kesempatan kali ini, semoga bermanfaat untuk kita semua..., apabila ada pertanyaan monggo bertanya dengan cara berkomentar di artikel ini melalu kotak komentar blogger.
No comments:
Post a Comment