Cara Menciptakan Artikel Terkait Dibawah Postingan Blog

Cara Membuat Artikel Terkait dibawah Postingan Blog - Cara Membuat Related Post Dengan Gambar Berjalan - Cara Membuat Artikel Terkait Dibawah Posting Blog - Cara Membuat Artikel Terkait dengan Gambar - Cara Membuat Artikel Terkait dengan Thumbnail itulah judul -judul dalam pembuatan artikel terkait pada artikel Kang Zain Kali ini.

Artikel terkait dibawah postingan blog bermacam-macam, mulai dengan scroll, dengan gambar berjalan atau cuma dengan gambar saja,, Ok ... pada kesempatan ini akan dibawas tuntas sebagai pilihan sahabat dalam menciptakan artikel terkait. hehehe

Cara Membuat Artikel Terkait dibawah Postingan Blog

1. Login ke Dasbor >> Template (Untuk mengantisipasi terjadinya kesalahan Back Up dulu template blog sobat.)
2. Edit Template >> Lanjutkan >> Conteng Expand Template Widget
3. Cari kode <data:post.body/> Untuk mempermudah gunakan F3 atau Ctrl+F. Biasanya akan ada 3 arahan menyerupai itu, kalau memang benar pilih arahan yg ke-2

4. Letakan Kode berikut sempurna di bawah arahan <data:post.body/>

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

5. Jangan Lupa di SAVE

Cara Membuat Related Post Dengan Gambar Berjalan

1. Login ke Blogger dengan memakai akun anda
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Jangan lupa untuk mendownload dulu template anda. dan kalau ada kesalahan dapat dikembalikan kesemula
6. Kemudian cari arahan </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)
7. Copy arahan dibawah ini dan letakan sempurna diatas arahan </head>

<b:if cond='data:blog.pageType == "item"'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: #585858;
    font-family: Georgia, “Times New Roman”, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#FFFFCC;
    }
    #related-posts a:hover{
    color:#000000;
    }
    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://sundaboy.googlecode.com/files/relatet%20post.txt' type='text/javascript'/>
    </b:if>

8. Selanjutnya cari lagi arahan yang menyerupai dengan arahan dibawah ini

<div class='post-footer-line post-footer-line-1'>

9. Lalu Copy dan pastekan arahan dibawah ini sempurna dibawah arahan diatas

<b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != "true"'>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
    <h3><b>Artikel Terkait</b></h3>
    <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
    <script type='text/javascript'>
    var currentposturl="<data:post.url/>";
    var maxresults=8;
    var relatedpoststitle="";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script></marquee>
    </div><div style='clear:both'/>
    </b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    </b:if>
    </b:if>

10. Simpan template dan lihat hasilnya

Cara Membuat Artikel Terkait dengan Gambar

Cara Membuat Artikel Terkait dengan Gambar :

   1. Login Blogger
   2. Masuk Menu Template - Edit HTML - Lanjutkan
   3. Centang pada Expand Template Widget
   4. Cari arahan </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
   5. Lalu Copy arahan berikut dan letakan sempurna diatas arahan </head>

<b:if cond='data:blog.pageType == "item"'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:90%;
    min-height:90%;
    padding-top:0px;
    padding-left:8px;
    }
    #related-posts h2{
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    font-family: Rockwell,Georgia,Serif;
    margin-bottom: 0.8em;
    margin-top:0em;
    padding-bottom:0em;
    }
    #related-posts a{
    color:white;
    }
    #related-posts a:hover{
    color:white;
    }
    #related-posts a:hover {
    background-color:#080;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27JJkFJ4o_i8CiwzJyRjSodVYUcu25-p6RnBWaK-Cxcz6FEcihBmAtQxFmTA4XdAr_easrL3fcZu70gV25VpXGNLYoxae9yQoLvQC49A9Ny44nK-GBO8gvvtH5Ep5ZEu3im26j6-TBlA1/s1600/No+Image.jpg";
    var maxresults=6;
    var splittercolor="#000000";
    var relatedpoststitle="Silahkan Baca Ini Juga:";
    </script>
    <script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
    </b:if>

6. Selanjutnya cari arahan berikut ( Jika ada dua kode, pilih kepingan yang kedua ) :

<data:post.body/>

7. Kalau arahan diatas sudah ketemu, Sekarang copy'lah script berikut :

<b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != "true"'>
    </b:if>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs("<data:post.url/>");
    </script>
    </div><div style='clear:both'/>
    </b:if>

8. Paste'kan arahan script diatas sempurna dibawah arahan :

<data:post.body/>

9. Jika sudah, klik Simpan Template.

Catatan :

Berikut ini yaitu arahan yang dapat sahabat ganti sebelum menyimpan template, gantilah goresan pena berwarna merah sesuai cita-cita sobat.

    Menampilkan jumlah artikel terkait yang muncul max-results=7
    Judul artikel terkait var relatedpoststitle="Silahkan Baca Ini Juga:";
    Warna Tulisan var splittercolor="#000000";

Cara Membuat Artikel Terkait dengan Thumbnail

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Dengan memakai CTRL+F atau F3, cari arahan berikut: </head>
4. Pastekan arahan di bawah sempurna di atas arahan nomor 3 di atas

<b:if cond='data:blog.pageType == "item"'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, Times New Roman , Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvbwFgvPAYgGFbudG-nZCjxpyZ21_ZVZn2mPYsx_0tTVUYhGQ7Y6U6oey4UkEBqto5hNxpogLIX3EKup0BCuyPfCDrvisilxwY2LKx22vnDpwZLLfKU2yQDknIpn4asAGqQQYpFbvKbEo/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Cara Membuat Artikel Terkait dibawah Postingan Blog";
    </script>
    <script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    </b:if>

5. Lanjutkan dengan mencari arahan <data:post.body/> dan pastekan arahan berikut sempurna di bawah arahan <data:post.body/> tadi

<b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != "true"'>
    </b:if>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs("<data:post.url/>");
    </script>
    </div><div style='clear:both'/>
    </b:if>

6. Simpan template sahabat dan lihat hasilnya

Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle="Cara Membuat Artikel Terkait dibawah Postingan Blog"; kau dapat ganti kata Related Posts atau kalimat lain yang sahabat inginkan.

Sampai disini sobat, beberapa tutorial lengkap Cara Membuat Artikel Terkait dibawah Postingan Blog agar bermanfaat. Good Luck Selamat Mencoba.

Referensi:

Cara Menciptakan Artikel Terkait Dibawah Postingan Blog

Cara Membuat Artikel Terkait dibawah Postingan Blog

Cara Membuat Related Post Dengan Gambar Berjalan

Cara Membuat Artikel Terkait dengan Gambar

Belum ada Komentar untuk "Cara Menciptakan Artikel Terkait Dibawah Postingan Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel