Cara Membuat Related Post Dengan Gambar

BOS TUTORIAL - Cara Membuat Related Post Dengan Gambar. Masih ingat tulisan sebelum postingan ini bukan, yaitu Cara Membuat Related Post Pada Blog. Jangan tanya lagi apa gunanya Related Post atau Artikel Terkait yah (heheheh... canda), soalnya disini sudah dibahas lebih detail. Kita langsung saja ke lokasi (kayak mau kemana aja nih...). Maksudnya langsung membuat tutorialnya, gitu loh....

Beginilah Cara Membuat Related Post Dengan Gambar
1. Tentunya anda harus buka akun blogger anda kawan.
2. Masuk Elemen Template - Lalu Klik Edit HTML - Centang Expand Template Widget
3. Carilah kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian)
4 Apabila sudah ketemu, copylah kode di bawah ini lalu tempatkan persis di atas kode ]]></b:skin> tadi.

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 100px;
height: 100px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

5. Jangan beranjank dulu, masih ada yang harus di cari. Lihat kode selanjutnya di bawah ini, lalu cari kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/> (gunakan CTRL + F untuk mempermudah pencarian)

6. Apabila sudah ketemu dan anda yakin, copy kode di bawah ini dan pastekan tepat di bawah kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/>

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-dMXy7uJCsnPkEukemYqcQrkvlXTmhjVeIzLOItsWRhvfy43kwMNZrJK8yBOQwQK95gzYrFXXXZbBz0QwSg7MOi5xxsjFbn14UPMbBCKN8Uak_tTC2lOLzAKPT3dGFymcE4xKxdzo6aIX/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

7. Selesai
8. Simpan template blog anda kawan.

Catatan Yang harus anda perhatikan.

• maxresults=5 adalah jumlah artikel yang anda tapilkan pada Related Post. Silahkan anda tambahi atau kurangi sesuai keingan anda.
• 100px adalah ukuran gambar, baik tinggi maupun lebarnya. Silahkan anda ganti bila anda ingin memperkecil atau memperbesarnya.
• Tulisan Related Post silahkan anda ganti dengan sesuka anda, misalnya jadi Artikel Terkait, atau Mungkin Ini Anda suka" dan lain-lain sesuka anda.
• Bila gagal, coba ulangi lagi perlahan-lahan. Biasanya sih bisa.

Dah cuma segitu, tutorial mengenai Cara Membuat Related Post Dengan Gambar. Silahkan di coba yah. Semoga bermanfaat. Bila anda kendala silahkan bertanya di kolom komentar. Dan Salam Blogger.

Cara Membuat Related Post Dengan Scroll

BOS TUTORIAL - Cara Membuat Related Post Dengan Scroll. Masih kelanjutan dari Membuat Related Post Pada Blog. Apa itu related post atau artikel terkait silahkan baca disini.

Kali ini kita akan membicarakan tentang Cara Membuat Related Post Dengan Scroll. Kenapa menggunakan Scroll? Agar bisa menghemat tempat, dengan begitu akan terlihat ramping.

Seperti yang saya paparkan sebelumnya, bahwa Cara Membuat Related Post Dengan Scroll akan menampilkan Label / Kategori sejumlah yang kita inginkan. Dan akan dibagi berdasarkan Label / Katergori. Misalnya dalam postingan anda ada 3 atau lebi kategori, maka Cara Membuat Related Post Dengan Scroll akan menampilkan maksimal 3 kategori. Anda bisa merombaknya sesuai keinginan anda.

Contoh Cara Membuat Related Post Dengan Scroll - Sumber : Kumpulan Adsen Blogspot

Langsung saja yah, Inilah Cara Membuat Related Post Dengan Scroll
1. Seperti biasa, buka akun blogger kawan
2. Masuk ke Elemen Template, piluh Edit HTML lalu centang Expand
3. Carilah kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 kode tersebut, anda pilih yang pertama.
5. Sudah ketemu belum nih, bila sudah Copy lah kode script dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>

6. Lalu tempatkan (paste) kode tersebut tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.

Catatan :

• <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
• <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
• maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Demikianlah postingan mengenai Cara Membuat Related Post Dengan Scroll. Sama seperti yang ada di Kumpulan Adsen Blogspot. Silahkan lihat contoh hasilnya disini.

Tambahan : Pilih salah satu yah Related Post yang anda suka. Jangan gunakan semuanya secara bersamaan, akan mempengaruhi loading blog.

Cara Membuat Related Post di Bawah Postingan

BOS TUTORIAL - Cara Membuat Related Post di Bawah Postingan. Melanjutkan tulisan saya mengenai Cara Membuat Related Post Pada Blog, makan postingan ini akan berisakan tentang Cara Membuat Related Post di Bawah Postingan.

Seperti inilah hasilnya (mirip)

Tidak perlu berlama-lama lagi, langsung saja simak di bawah ini. (Sekali lagi saya sebutkan, apabila template blog anda sudah menyajikan Related Post, abaikan saja ini). Sekedar berbagi saja untuk kawan-kawan.

Cara Membuat Related Post di Bawah Postingan
1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget
3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3egdbUXyTo5q1s8C7nikVf6yQboKrJ-htyxN1sZlPJXXFBOiDWp45OxC5lX4OLRZr_ZCrAtbCYy3difedYVsRxG9OWa7UndzGvrgdMBs7IRLDimpdjrv_K5tZkJwkOcolSfUkKJ7pXE/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Aplagi cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut : <data:post.body/>, Sudah ketemu belum kode itu, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (pastekan)

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Setelah selesai, lalu simpan template blog anda.
6. Lihat hasilnya seperti apa.

Catatan :
Kode <data:post.body/> mungkin anda akan temukan banyak, pilih saja satu, tidak apa-apa kok anda coba-coba yang penting anda faham.

Ok, demikian tutorial mengenai Cara Membuat Related Post di Bawah Postingan kali ini. Selamat mencoba. Salam Sukses.

Cara Membuat Related Post Pada Blog

BOS TUTORIAL - Cara Membuat Related Post Pada Blog. Artikel Terkait itu bahasa Indonesianya. Namun para blogger lebih familiar dengan sebutan RELATED POST. Blog ini menggunakan bahasa RELATED ARTICLE, kebenaran bawaan dari template yang diberikan oleh mas kolis secara cuma-cuma. Tujuan cuma satu membantu para Pembaca / Pengunjung / Visitor agar bisa lebih gampang mencari postingan /artikel kita yang menyerupai atau satu Kategori / Label dengannya (postingan).

Cara Membuat Related Post Pada Blog
Disamping membantu para pengunjung, membuat Related Post / Related Article / Artikel Terkait / Kamu Harus Menyukai Ini / You Must Like This (ntah apalagi istilahnya... hehehe) juga Mempercantik Blog, sehingga terlihat Elegan/Profesional.

Tutorial ini berlaku bagi kawan-kawan yang menggunakann Related Post di dalam blognya. Apalbila sudah ada, silahkan jangan digubris yah... abaikan saja (baca-baca boleh dong).

Ada beberapa Cara Membuat Related Post Pada Blog
1. Dengan membuat Related Post tanpa gambar
2. Dengan membuat Related Post dengan gambar (thumbail)

Saya jelasin dulu yah satu-satu biar lebih paham.
1. Membuat Related Post tanpa gambar
Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita temukan di bawah postingan.

Ada banyak cara para blogger membuat related post di dalam blog yang mereka kelola. Antara lain dengan menggunakan Scroll dan tanpa menggunakan Scroll. Semua tergantung selera masing-masing. Pada blog Bos Tutorial ini sementara menggunakan Related Post tanpa Scroll. Terlihat lebih simpel sih. Tanpa menggunakan Scroll biasanya paling banyak artikel terkaitnya 10 artikel (lebih banyak juga tidak apa-apa), dan hanya di kaitkan pada 1 label atau kategori. Apabila Label / Kategori yang anda buat didalam blog anda lebih dari 1 Label/Kategori biasanya yang di kaitkan hanya 1 label / kategori saja. Sedangkan yang menggunakan Scroll bisa lebih dari 1 kategori / label.

2. Membuat Related Post dengan gambar (thumbail)
Penjelasannya hampir sama saja dengan diatas, bedanya ya related post menggunakan Gambar. Kelemahannya adalah apabila dalam postingan kawan-kawan tidak menggunakan Gambar, maka gambarnya tidak muncul.

Membuat Related Post dengan gambar (thumbail) ada 2 cara juga, pertama dengan menyatukan script (kode) related post pada blog kita. Cara kedua adalah dengan memanfaatkan pihak ketiga. Yang paling populer adalah menbuat related post dengan Linkwithin. Linkwithin adalah salah satu penyedia script untuk memasang related post di dalam blog kita. Masih ada lagi situs-situs pihak ketiga yang menyediakan cara ini, tapi Linkwihtin lebih familiar di mata para blogger.

Menggunakan related post ini semua tergantung anda mau pilih yang mana. Yang penting anda paham apa fungsi dan kegunaan related post.

Kelanjutannya simak Cara Membuat Related Post Pada Blog : (Bos Tutorial akan posting satu-persatu, yang sabar yah)
1. Cara Membuat Related Post di bawah Postingan (KLIK DISINI)
2. Cara Membuat Related Post Dengan Scroll (KLIK DISINI)
3. Cara Membuat Related Post Dengan Gambar (KLIK DISINI)
4. Cara Membuat Related Post Dengan Linkwithin.(KLIK DISINI)