Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Tampilkan postingan dengan label blogger. Tampilkan semua postingan

Jumat, 15 Agustus 2014

Membikin Artikel terkait atau related post tanpa gambar

     Related post atau artikel terkait sebenarnya memiliki bagian yang penting dalam membuat sebuah blog, hal ini di sebabkan karena artikel terkait bisa membuat blog kita menjadi semakin eksis di dunia maya dan pengunjung dapat memilah dengan mudah bagian yang ingin mereka ketahui lagi. jika seorang blogger dapat membagi – bagi kategori dalam blognya serapi mungkin maka akan banyak pengunjung yang menyukainya karena mereka merasa artikel yang di bacanya benar-benar berhubungan dengan artikel terkait yang di buat di bagian bawah blog. baiklah sekarang saya aka sharekan ilmunya kepada sobat semua tentang cara membuat artikel terkait vertikal tanpa gambar, let’s check it!!!
Membikin Artikel terkait atau related post tanpa gambar1. Login ke Blogger untuk membuka blog anda (just login to your blog and open it).
2. Buka Menu Template pada bagian dashboard blog sobat
3. Lalu pilih Edit Html
4. Setelah itu silakan sobat cari kode berikut kode dengan cara Ctrl+F dan kopikan kode ini </head>, lalu kopikan kode di bawah ini di atas kode </head> 
    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];}}
    relatedTitles = tmp2;
    relatedUrls = tmp;}
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;}
    i++;}
    document.write('</ul>');}
    //]]>
    </script>
6. And next, sobat cari kode berikut : <data:post.body/> dan kopi pastekan kode berikut tepat di bawah kode <data:post.body/> biasanya ada dua kode ini, silakan sobat cobakan dulu pada kode yang kedua
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>
8. Klik Save and than you may look its result!!!!

Catatan/note :
Jika artikel terkait muncul juga di halaman utama (homepage) blog sobat, maka sobat dapat menambahkan kode ini diatasnya ( Langkah 6) :
<b:if cond='data:blog.pageType == "item"'>dan tambahkan juga kode </b:if> pada paling akhir.
Angka merah adalah jumlah artikel terkait yang ingin sobat munculkan di blog sobat

Membuat Artikel Terkait or related post begambar (thumbnail)

    Baiklah sebelumnya saya juga sudah mempostingkan - Cara membuat atikel terkait dalam versi lainnya disini dan kali ini saya juga mempostingkan artikel terkait yang bergambar juga, hal ini bertujuan untuk membuat sobat dapat memilih salah satunya agar tidak terlalu pusing mencarinya di google. Nah sekarang saya ngepostingin Artikel terkait atau Related post yang kayak saya ini ni, jadi sobat ng usah bingung untuk mencari tau bentuknya, kalau udah oke sekarang kita lanjutin aja ke cara bikinnya siap!!!
1. Seperti biasa buka dulu blogger sobat, lalu pilih template dan edit html, Oke!! sudahkah ketemu?
2. Selanjutnya sobat masukan kode berikut di atas kode </head>
<!--Related Posts with thumbnails Start—>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /></b:if> <!--Related Posts with thumbnails End—>
Sebelum kita lanjutkan ke step berikutnya nya sobat harus membaca keterangnan berikut ini terlebih dahulu
Keterangan: Pada kode yang berwarna biru (blue), ini adalah kode dari ukuran gambar/foto yang akan ditampilkan, sobat bisa merubahnya sesuai selera, just depend on you!!
 
3. Setelah itu kita lanjutkan untuk mempastekan kode di bawah ini di atas kode <div class='post-footer'>, kalau kode tersebut ada dua maka sobat bisa mencobakannya kepada salah satunya karena kita memiliki jenis template yang berbeda-beda
<!-- Related Posts with Thumbnails Code Start—>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if> <!-- Related Posts with Thumbnails Code End-->
Keterangan: Untuk kode yang berwarna biru, ini merupakan jumlah dari related postnya, jadi, sobat bisa merubahnya sesuai dengan ukuran dan kehendak sobat, Understand!!!
 
4. Setelah selesai masukin kodenya, sobat bisa langsung nge-Save nya dan liat hasilnya deh

Kamis, 14 Agustus 2014

Membuat Artikel Terkait (related post) di blog

     Artikel terkait yang kita terapkan pada blog dapat membuat blog kita sering di kutak katik oleh orang-orang sehingga blog kita akan menjadi top blog di google, untuk itu jika sobat ingin menambah kemampuan blog sobat dalam menelusuri jendela google, sobat bisa menerapkan sebuah Related post atau Artikel terkait dengan demikian selain mempercantik tampilan blog sobat bisa juga beguna bagi para pembaca untuk melanjutkan bacaan nya pada blog sobat. Untuk menerapkan Artikel terkait ini bukanlah hal yang sulit asalkan sobat mengikuti step-step yang akan saya jabarkan berikut ini
     Ikuti langkah-langkah berikut ini untuk membuat Artike terkait di bawah postingan

1. Masuk ke Blogger sobat dan pilih Template
2. Lalu pilih EDIT HTML dan harap di tunggu sampai Kode HTML terbuka
3. setelah itu sobat harus menemukan kode ]]></b:skin> dan letakan kode berikut ini tepat di atasnya.
/* Related Posts --- */
    .related-post .post-thumbnail {
    z-index: 1;
    position: relative;
    width: 98px;
    height: 98px;
    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: 98px;
    height: 98px;
    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: #000;
    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;
    }
    .related-post:hover .related-post-title {display: block;}
4. Setelah bagian atas selesai sobat lanjutkan dengan mencari kode yang mirip atau hampir menyerupai kode berikut, jika kodenya ada banyak maka pilih yang pertamanya saja
<div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'/>
          <div class='post-footer-line post-footer-line-2'/>
          <div class='post-footer-line post-footer-line-3'/>
        </div>
      </div>
5. Jika sobat sudah menemukan kode yang mirip dengan kode diatas, copy kode dibawah tepat dibawah kode di atas.
<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/AVvXsEhNCoftjZDNzuFrqcfqndDkNhzXatnDAWFngWMXcToL0LO0fblZ8N-wbSWrTekkrNtxwquWrIof_qAorhCGu2iZZ-f4mffwD3QUmxmOX5l7RxrtysRNzZho_LRTjr4sDoVc0r_uLtD-RTYW/'};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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>
Keterangan dari kode di atas:
  • Pada warna Orange yang sobat liat di scrip pertma dapat sobat ganti dengan ukuran template sobat, dan
  • Warna Merah merah pada scrip di atas dapat sobat ganti dengan jumlah artikel yang mau sobat munculkan di blog sobat
6. Silakan simpan template sobat lalu liat hasilnya