Perhatian : para pengunjung di Larang Pencet / klik judul iklan yg bertentangan dengan SYARIAH ISLAM, harap maklum karena pemilik website tidak bisa mengontrol penuh tampilan iklan. .. terimakasih dan anda berkunjung di blogger tentang modif motor efek chroom, krom, crom, semoga kita semua selalu diberi keselamatan dan kesehatan oleh Alloh SWT. amin ya robbal alamin.

Selasa, 14 Mei 2013

Menggabungkan Widget Related Articles dan Widget Recent Comments

related articles and recent comments
Menggabungkan Widget Related Articles dan Widget Recent CommentsPlugin 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(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/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=&quot;Artikel Terkait&quot;;
    </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 == &quot;item&quot;'>
    <div id='under-wrapper'>
    <div id='related-articles'>
    <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&amp;max-results=12&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    var maxresults=12;
    removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
    </script>

    </div>

    <div id='recent-comments'>
    &lt;h2&gt;Komentar Sahabat&lt;/h2&gt;
    &lt;br/&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        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;}
    &lt;/style&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    //&lt;![CDATA[
        // Recent Comments Settings
        var
        numComments     = 5,
        showAvatar     = true,
        avatarSize     = 35,
        roundAvatar    = true,
        characters     = 40,
        showMorelink    = false,
        moreLinktext    = &quot;More &#187;&quot;,
        defaultAvatar     = &quot;http://www.gravatar.com/avatar/?d=mm&quot;,
        hideCredits    = false;
    //]]&gt;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://multipaste.googlecode.com/files/w2b-recent-comments-w-gravatar.js&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://multipaste.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5&quot;&gt;&lt;/script&gt;

    </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. 
Selamat telah menikmati artikel multi widget, sukses selalu.

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 CommentsPlugin Related Articles

Tidak ada komentar:

Posting Komentar