Cara Buat Artikel Terkait Dibawah Posting Blogspot
Cara Membuat Artikel Terkait Dibawah Postingan Blog.
Selamat Datang di Blog Mas Bambang , dipostingan kali ini saya akan membawa anda untuk mengetahui bagaimana membuat atau memasang Artikel terkait dibawah postingan blog. Kegunaan dari artikel terkait itu sendiri ialah untuk mempercantik dan memperindah blog yang anda miliki. Selain itu, kegunaan yang paling utama dari Artikel Terkait ini adalah untuk memudahkan para pengunjung/visitor blog anda untuk mengetahui artikel-artikel yang sudah anda buat dan membaca isi dari artikel-artikel di blog anda.
( Baca Juga Cara Membuat Dan Memasang Meta Tag Di Blogspot )
Kita ambil contoh, jika blog anda dikunjungi oleh pengunjung yang sedang membaca artikel yang mereka cari, ketika mereka telah selesai membacanya kemudian mata mereka tertarik pada sebuah judul yang menurut mereka itu bagus, pengunjung blog anda pasti akan mengklik artikel tersebut dan seperti yang saya jelaskan diatas, ini bisa menjadi keuntungan untuk sobat menambah pageview sobat. Maka dari itu kita wajib untuk memasang Artikel terkait ini.
Untuk membuat dan memasang related post atau artikel terkait tepat dibawah postingan banyak berbagai macamnya. Ada para blogger yang suka dengan tampilan bergambar dan ada pula yang hanya menyukai tulisannya saja.
Untuk Modelnya pun cukup banyak ragamnya, ada yang berbaris kesamping dan ada pula artikel terkait yang memanjang kebawah. Untuk tutorial kali ini, saya memberika beberapa contoh Artikel terkait untuk anda coba, mari ikuti langkah-langkahnya :
( Baca Juga Cara Membuat/Menambahkan Icon Gambar Di Samping Tulisan Pada Navbar Blogspot )
A. Artikel Terkait Part I.
Kita ambil contoh, jika blog anda dikunjungi oleh pengunjung yang sedang membaca artikel yang mereka cari, ketika mereka telah selesai membacanya kemudian mata mereka tertarik pada sebuah judul yang menurut mereka itu bagus, pengunjung blog anda pasti akan mengklik artikel tersebut dan seperti yang saya jelaskan diatas, ini bisa menjadi keuntungan untuk sobat menambah pageview sobat. Maka dari itu kita wajib untuk memasang Artikel terkait ini.
Untuk membuat dan memasang related post atau artikel terkait tepat dibawah postingan banyak berbagai macamnya. Ada para blogger yang suka dengan tampilan bergambar dan ada pula yang hanya menyukai tulisannya saja.
Untuk Modelnya pun cukup banyak ragamnya, ada yang berbaris kesamping dan ada pula artikel terkait yang memanjang kebawah. Untuk tutorial kali ini, saya memberika beberapa contoh Artikel terkait untuk anda coba, mari ikuti langkah-langkahnya :
( Baca Juga Cara Membuat/Menambahkan Icon Gambar Di Samping Tulisan Pada Navbar Blogspot )
A. Artikel Terkait Part I.
Berikut tahapannya :
- Pastikan anda login terlebih dahulu ke blog anda.
- Setelah masuk, Pilih menu Template > Edit HTML.
- Sebelum anda melakukan utak atik kode HTML milik blog anda, saya sarankan agar anda memBackup terlebih dahulu untuk menghindari kesalahan dan error nantinya, kemudian centang Expand Widget Templates.
- Kemudian anda cari kode <data:post.body/> (gunakan CTRL+F untuk memudahkan pencariannya).
- Setelah ketemu, kemudian anda perhatikan kode ini biasanya ada tiga bagian, jika memang ada tiga anda pilih kode <data:post.body/> yang kedua.
- Langkah berikutnya ialah anda letakan script di bawah ini setelah kode <data:post.body/>.
- Terakhir save dan silahkan anda lihat hasilnya.
<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>
Catatan : Jika Artikel Terkait Tidak muncul, silahkan anda Pastekan Script di kode <data:post.body/> yang 3. Dan Jika anda ingin mengganti kata "Artikel Terkait" dengan kata-kata lain yang anda inginkan, silahkan anda ganti kode script yang saya beri warna Biru.
( Baca Juga Cara Membuat Judul Artikel/Postingan Berada Di Tengah Blog )
B. Artikel Terkait Part II.
Berikut tahapannya :
- Seperti biasanya, Pastikan anda login terlebih dahulu ke blog anda.
- Setelah masuk, Pilih menu Template > Edit HTML.
- Sebelum anda melakukan utak atik kode HTML milik blog anda, saya sarankan agar anda memBackup terlebih dahulu untuk menghindari kesalahan dan error nantinya, kemudian centang Expand Widget Templates.
- Kemudian anda cari kode </head> (gunakan CTRL+F untuk memudahkan pencariannya).
- Setelah ketemu, anda letakan script di bawah ini tepat di bawah kode </head>.haha
- Langkah berikutnya ialah, cari lagi kode ini <data:post.body/>, lalu copy kembali script dibawah ini tepat dibawah kode <data:post.body/>. Jika Anda menemukan ada dua atau lebih kode <data:post.body/> letakkan script dibawah kode yang pertama.
- Langkah terakhir yaitu klik save dan anda lihat hasilnya.
<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>
<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&callback=related_results_labels&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>
Nah...Itulah sedikit ulasan saya mengenai Cara Membuat dan memasang Artikel Terkait. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat buat anda yang membutuhkannya. Jika berkenan, silahkan tinggalkan komentar di kolom komentar atau di chatbox. Terima kasih dan Salam Blogger.
Post a Comment for "Cara Buat Artikel Terkait Dibawah Posting Blogspot"
Silahkan Coment Yang Sopan