Menggabungkan Widget Related Articles dan Widget Recent Comments. Plugin Related Articles adalah salah satu plugin blogger yang sangat penting, karena selain memudahkan pengunjung dalam hal navigasi, dari sisi optimasi SEO blog, juga sangat berpengaruh. Selain dapat meningkatkan PageViews juga dapat mengalirkan Link Juice antar halaman artikel.
Pada kesempatan ini, saya akan membagikan kepada Anda Plugin Related Articles yang digabungkan dengan Widget Recent Comments
dan ditempatkan pada bagian bawah halaman posting dalam bentuk tampilan
dua kolom, seperti yang Anda lihat pada bagian bawah artikel ini.
Related Articles dan Recent Comments
dalam bentuk dua kolom yang terdapat pada blog ini, bagaimana cara memasang Related Aticles dan Recent Comments secara berdampingan ?.
Untuk menyingkat pembahasan ikuti tutorialnya seperti di bawah
ini.
Cara Memasang Related Aticles dan Recent Comments Secara Berdampingan
- Login ke Blogger dengan ID Anda
- Pada halaman dashboard blogger klik link Title Blog Anda
- Pilih menu Templates >> Edit HTML >> Proceed >> beri tanda cek pada kotak Expand Widget Templates
- Cari kode ]]></b:skin> dan tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
- #under-wrapper{float:left;width:100%;border-bottom:1px solid #aaa;margin:10px 0;padding:5px 0 15px}
#related-articles{float:left;width:275px;border-right:1px solid #ddd;margin:5px 0 0;padding:0 15px 0 0}
#related-articles .widget{margin:0;padding:0}
#related-articles .widget h2,#related-posts h2{font:bold 14px Oswald;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#related-articles a{color:#444;font:14px PT Sans Narrow}
#related-articles a:hover{color:#9daf22}
#related-articles li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFEVTv0Saxy9hmdFkTNY8TV2B20aq9Jemdq14klXXgh5fsOhyScyH83gxSu8m0K3y4rCiyLLsXKlvencYYlteu2h4I83KQGvuDTfnXQR6c_3D8zPZcGhr25Hz2Ee3Z24xCY9wHKe5Xpw/s1600/bullet-list.gif) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}
#recent-comments{float:right;width:300px;margin:5px 0}
.sidebar ul,#related-articles ul{list-style:none;margin:0;padding:0}
- Perhatikan angka yang di bold biru, Anda dapat menggantinya untuk menyesuaikan lebar kolom Related Articles dan kolom Recent Comments
- Cari kode </head> dan tempatkan kode di bawah ini tepat di atas kode </head>
- <script type='text/javascript'>
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://multipaste.googlecode.com/files/relatedpost.js' type='text/javascript'/>
- Cari kode <div class='post-footer-line post-footer-line-2'><span class='post-labels'> jika Anda tidak menemukannya cari kode seperti ini <div class='post-footer'><span class='post-labels'> dan tempatkan kode di bawah ini tepat di atasnya.
- <b:if cond='data:blog.pageType == "item"'>
<div id='under-wrapper'>
<div id='related-articles'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=12"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=12;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<div id='recent-comments'>
<h2>Komentar Sahabat</h2>
<br/>
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://multipaste.googlecode.com/files/w2b-recent-comments-w-gravatar.js" rel="nofollow" target="_blank"></script>
<script type="text/javascript" src="http://multipaste.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
</div>
</div>
</b:if>
- Kode yang berwarna merah adalah kode untuk Related Articles, Angka yang ditulis tebal adalah jumlah artikel terkait yang akan ditampilkan. Anda dapat merubahnya sesuai keinginan.
- Kode yang ditulis dengan warna biru adalah kode untuk Recent Comments perhatikan kode numComments = 5 dan max-results=5 (jumlah komentar yang akan ditampilkan); avatarSize = 35 (ukuran image komentator); characters = 40 (jumlah karakter deskripsi komentar yang ditampilkan) silahkan disesuaikan dengan kebutuhan.
- Jangan lupa mengganti url http://multipaste.blogspot.com dengan url blog Anda.
- Simpan perubahan template dengan menekan tombol Save Templates, dan periksa blog Anda
- Anda dapat membuat kombinasi lain dengan cara mengganti kode Recent Comments dengan kode iklan atau kode widget lainnnya.
sekedar keterangan :
multipaste.googlecode.com/files/relatedpost.js
isi didalamnya yaitu :
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h2>"+relatedpoststitle+"</h2>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
saya Fafan artikel ini tentang Menggabungkan Widget Related Articles dan Widget Recent Comments. Plugin Related Articles
Tidak ada komentar:
Posting Komentar