Cara Membuat Related Posts di Bawah Posting.

Pagi ini saya ingin share turotial tentang Cara Membuat Related Posts di Bawah Posting.
Related posts sangat penting keberadaannya pada suatu blog,
karena selain bisa menunjang SEO,

Related Posts juga berfungsi untuk memudahkan pengunjung untuk mengakses artikel kita yang berkaitan dengan artikel yang sedang di baca oleh pengunjung.

Jadi si pengunjung lebih bisa berlama-lama menelusuri blog kita sobat,
tentunya dengan Related Posts di Bawah Posting ini akan menunjang profesionalitas blog kita.

Nah karena begitu vital fungsinya , saya akan share tutorial ini.
Fungsi dari related posts adalah menampilkan artikel yang berkaitan yang ada dalam blog kita.

Masih belum paham..? Begini lo misalnya sobat memposting artikel dengan label Tutorial Blog, Blogger Tutorial, SEO Blogger, atau apa aja deh maka jika pengunjung mengklik artikel kita yang misalnya
berlabel tutorial blog maka akan muncul menu dibawah postingan kita
yang menyajikan artikel-artikel yang berlabel tutorial blogger.

• Log in ke blogger dengan akun yang anda miliki. 
• Klik rancangan. 
• Edit Html » Centag kotak Expand template widget. 
• Cari kode </head> letakkan kode dibawah ini sebelum kode </head> yang anda temukan. 

<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/AVvXsEiwqn-OfsACzKjLJc3z3FGK-9OMNWYhVYOJnrwixIHs3loXZaWGll8_D7xeoLRnwl3f36XsidMckWQf94xtCsakQF15TcZ-wZYZzzZsOAUAOadwI-nu9CJlJ6KyPQ-WQmo66BaQu84qppc/s1600/1305169909_7.png") 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://arul-borneo.googlecode.com/files/RelatedPosts.js' type='text/javascript'/> 

• Sekarang cari kode <data:post.body/> jika ada dua pilih yang kedua dan letakkan kode di bawah ini dibawah kode <data:post.body/>. 

<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>

• Save template sobat dan lihat hasilnya.

Sekian tutorial tentang Cara Membuat Related Posts Di Bawah Posting
semoga bisa bermanfaat bagi kita semua.
Jangan lupa untuk meninggalkan komentarya yah...

Cara Membuat Author Box di Blogger

Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog.
Author Box Ini adalah Posting Perdana Arul Borneo, Tutorial sederhana yang mengupas tentang cara membuat kotak berisi tulisan atau keterangan di bawah postingan blog. sekalipun sederhana mudah-mudahan tetap menarik untuk disimak dan dicoba..

Bagaimana cara membuatnya? Ikuti petunjuknya dibawah ini....

• Login Ke akun blogger anda 
• Lalu pilih Rancangan ==> Edit HTML, jangan lupa centang Expand Template Widget ya..? 
• Langkah selanjut nya , anda cari kode : <div class='post-footer-line post-footer-line-1'> menggunakan CTRL + F biar lebih mudah. 
• Lalu Copy & Paste Kode di bawah ini, letakkan tepat di bawah kode : <div class='post-footer-line post-footer-line-1'> 

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'> <h4>Ditulis Oleh :
<a expr:href='data:blog.homepageUrl'><data:post.author/>
</a> - Inspiring People</h4> <div class='kontainer'>
<img src=' http://i646.photobucket.com/albums/uu183/seruyan/Arul.jpg' style='border: 2px solid #0000b9;'/> Artikel <a expr:href='data:post.url'>
<data:post.title/></a> ini diposting oleh <data:post.author/> pada hari
<data:post.dateHeader/>. Jika artikel <a expr:href='data:post.url'>
<data:post.title/></a> ini dirasa menarik, anda bisa sebarluaskan lewat blog anda, tapi mohon mencantumkan sumbernya. Terimakasih. Happy blogging. <p>
<span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://bangarulblog.blogspot.com/2012/05/cara-membuat-author-box-di-blogger.html' target='_blank'>::Get This Widget:: </a></span></p>
<div style='clear:both;'/> </div> </div> </b:if>
<!-- Kotak Admin -->

• Langkah Selanjutnya adalah cari kode : ]]></b:skin> pada template anda. 
• Lalu anda Copy & Paste Kode di bawah ini, tepat di atas kode : ]]></b:skin>

.admin-tulisan{
display:block; width:auto; background: #585656;
border:2px solid #fff; box-shadow:0 1px 3px #000;
-moz-box-shadow:0 1px 3px #000;
-webkit-box-shadow:0 1px 3px #000; padding:0;
margin:30px 0 10px 0; font:normal 12px
Arial, Sans-Serif; color:#222; }
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{ background:#8A9C04; border:none;
border-bottom:1px solid #699019;
color:#fff; text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif; padding:5px 10px;
margin:0 0 0 0; display:block; } .admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{ width:70px; height:70px;
margin:0 10px 0 0; float:left; border:1px solid #954B02;
padding:2px; background:#C36702; box-shadow:none;
-moz-box-shadow:none;-webkit-box-shadow:none;
}

• Langkah selanjutnya anda, Pilih Pratinjau, jika tidak ada masalah baru pilih simpan. 
• Selamat Mencoba, dan Semoga berhasil...

Catatan :
Kode yang Berwarna Biru,
itu Adalah Deskripsi Blog Anda Sedangkan Kode yang Berwarna Merah
adalah Photo Author ( Bisa Photo Anda sendiri )