By Education | At 03.40 | Label :
Tutorial Blogger
| 0 Comments
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 sobat dalam
membuat 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 kode seperti itu, jika memang benar pilih kode yg ke-2
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 kode seperti itu, jika memang benar pilih kode yg ke-2
4. Letakan Kode berikut tepat di bawah kode <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 menggunakan 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 bisa dikembalikan kesemula
6. Kemudian cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)
7. Copy kode dibawah ini dan letakan tepat diatas kode </head>
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 bisa dikembalikan kesemula
6. Kemudian cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)
7. Copy kode dibawah ini dan letakan tepat diatas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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>
<!--Related Posts with thumbnails Scripts and Styles End-->
8. Selanjutnya cari lagi kode yang mirip dengan kode dibawah ini
<div class='post-footer-line post-footer-line-1'>
9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas
<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<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>
<!-- Marquee Nobi Related Posts with Thumbnails Code End-->
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 kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
5. Lalu Copy kode berikut dan letakan tepat diatas kode </head>
1. Login Blogger
2. Masuk Menu Template - Edit HTML - Lanjutkan
3. Centang pada Expand Template Widget
4. Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
5. Lalu Copy kode berikut dan letakan tepat diatas kode </head>
<!--Start Related Posts-->
<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/AVvXsEjdgVC9ZBPGFQDEJHIkeG6MB40b2HKLueAtXP6en5ubM3IDz61f0CdmbgzUCOjG_U60CylkoZYluh69sgy3bcKeiJGuA0pVj5WOYo4TPe8GAsTyoxg0C-E7F7QMV_L0VGW88w6tMEDQ9SOx/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>
<!--End Related Post-->
6. Selanjutnya cari kode berikut ( Jika ada dua kode, pilih bagian yang kedua ) :
<data:post.body/>
7. Kalau kode diatas sudah ketemu, Sekarang copy'lah script berikut :
<!-- Start Related Posts-->
<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>
<!-- End Related Posts-->
8. Paste'kan kode script diatas tepat dibawah kode :
<data:post.body/>
9. Jika sudah, klik Simpan Template.
Catatan :
Catatan :
Berikut ini adalah kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan berwarna merah sesuai keinginan 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 menggunakan CTRL+F atau F3, cari kode berikut: </head>
4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEheAbHMZHxlMKNoRr_agB3dSvBo68wOME1_Pjf1Q9cQvB7FBby9Qiq_IiUtFPfZROi8gZfizmH6xT3-vWPHXDSzTn3-vTqE1rcV4Ei05QYcevJ_ouXeCKqoafeRzBwHDP53lpZRjAe11RY/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/> tadi
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
6. Simpan template sobat dan lihat hasilnya
Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle="Related Posts"; kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.
