Membuat Related Post Bergambar + Ringkasan Di Posting - BBT: Cara membuat related post dengan gambar dan ringkasan di bawah posting blogger dengan script related post loading cepat untuk blogger

Membuat Related Post Bergambar + Ringkasan Di Posting

Bagaimana cara membuat related post di blogger yang di sertai dengan gambar dan ringkasan di bawah posting ?

Pada tutorial kali ini saya akan menjawab pertanyaan tersebut dengan menuliskan cara membuat related post bergambar dan ringkasang di posting blogger dengan script related post blogger loading cepat (alias tidak terlalu memberatkan loading blog kita).

Related post atau bisa juga disebut dengan artikel terkait merupakan salah satu bagian yang sangat perlu ada pada sebuah blog baik itu blogger maupun blog selain blogger, karena dengan adanya related post di bawah posting blog blogger kita, maka pengunjung akan mendapatkan melihat beberapa bacaan lainnya yang berhubungan dengan posting yang mereka baca, sehingga tidak jarang para master blogger sangat menyarankan untuk membuat related post di bawah posting blog, karena ini dapat meningkatkan pageview blog beberapa kali.

Kenapa membuat related post di blogger dapat meningkatkan pageview blog ?

Seperti yang sudah saya sebutkan di atas tadi bahwa related post akan menampilkan beberapa posting terkait / yang berhubungan dengan posting yang sedang dibuka pengunjung, dan jika pengunjung tertarik dengan posting terkait tersebut maka mereka akan mengklik dan membacanya, dan di saat mereka membaca posting terkait tersebut maka mereka akan menemukan posting terkait / related post lainnya yang mungkin akan membuat mereka tertarik untuk membacanya lagi, dan seterusnya, sehingga yang pada awalnya mereka hanya ingin membaca 1 posting menjadi membaca beberapa posting.

Oke, saya rasa sudah cukup....

Cara Membuat Related Post Dengan Gambar + Ringkasan Di Posting Blogger

Cara Membuat Related Post Dengan Gambar dan Ringkasang Di Blogger
Di sini saya akan menuliskan tutorial / cara membuat related post dengan gambar dan ringkasan di bawah posting blogger loading cepat menggunakan script related post untuk blogger dari DTE, yang mana script related post dari DTE ini memiliki kecepatan loading yang bagus dan tidak terlalu memberatkan loading blog kita.

Adapun langkah - langkah yang harus sobat lakukan untuk membuat related post di bawah posting blogger adalah sebagai berikut :

Masuk ke dasbor blogger

Buka halaman Template, kemudian klik Edit HTML untuk membuka halaman template editor
Cara Membuat Related Post Dengan Gambar dan Ringkasang Di Bawah Posting Blogger
Pada halaman template editor tersebut silakan cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-1'> kemudian tempel kode untuk menampilkan related post berikut di bawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Post Widget Start -->
<style type="text/css">
/* CSS Related Post */
.related-post {
margin:2em auto 0;
font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
font-size:150%;
margin:0 0 .5em;
}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
margin:0;
padding:0;
list-style:none;
}
.related-post-style-2 li {
padding:10px;
border-top:1px solid #eee;
overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
width:80px;
height:80px;
max-width:none;
max-height:none;
background-color:transparent;
border:none;
padding:0;
float:left;
margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
font-weight:bold;
font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}
</style>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot;,
numPosts: 5,
summaryLength: 370,
titleLength: &quot;auto&quot;,
thumbnailSize: 80,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 2,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex, showRelatedPost;
(function(a, b, c) {
// Default configuration data
var def = {
widgetTitle: "<h4>Related Post:</h4>",
widgetStyle: 1,
homePage: "//www.blogbacatulis.com",
numPosts: 7,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 72,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Baca Selengkapnya",
callBack: function() {}
};
// Check if the base variable is exist
if (typeof relatedPostConfig == 'object') {
// Replace the default variable with variable value of `relatedPostConfig` if any
for (var i in relatedPostConfig) {
def[i] = relatedPostConfig[i];
}
}
// Remove trailing slash and `?m=1` or `?m=0` query string in the base URL if any
def.homePage = def.homePage.replace(/\/?\?m=\d+|\/+$/, "");
// Dynamic JavaScript loader (using `<script>` tag)
var lo = function(url) {
var s = b.createElement('script');
s.type = 'text/javascript';
s.src = url;
c.appendChild(s);
},
// Generate random number from the range of `min` to `max`
ri = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
// Function to randomize array(s)
shu = function(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
},
// Check if the base variable for the tag/label list does not exist or empty
la = (typeof labelArray == 'object' && labelArray.length > 0) ? '/-/' + shu(labelArray)[0] : "",
// A "random related index" function
// Generate random `start-index` value by loading an empty JSON feed entry
// to get only the `json.feed.openSearch$totalResults.$t` data to fill
// the `max` parameter of the `ri()` function above
rri = function(json) {
var to = json.feed.openSearch$totalResults.$t - def.numPosts,
si = ri(1, (to > 0 ? to : 1)); // Get random `start-index` with the `ri()` function
// Loading the original related post data ...
lo(def.homePage + '/feeds/posts/summary' + la + '?alt=json-in-script&orderby=updated&start-index=' + si + '&max-results=' + def.numPosts + '&callback=showRelatedPost');
},
// A "show related post" function
srp = function(json) {
var ct = b.getElementById(def.containerId),
entry = shu(json.feed.entry),
st = def.widgetStyle,
sk = def.widgetTitle + '<ul class="related-post-style-' + st + '">',
tg = def.newTabLink ? ' target="_blank"' : '',
cl = '<span style="display:block;clear:both;"></span>',
link, tt, title, img, summary;
if (!ct) return;
var entryLength = entry.length;
for (var i = 0; i < def.numPosts; i++) {
if (i === entryLength) break;
tt = entry[i].title.$t;
title = (def.titleLength !== 'auto' && def.titleLength < tt.length) ? tt.substring(0, def.titleLength) + '&hellip;' : tt;
img = ("media$thumbnail" in entry[i] && def.thumbnailSize !== false) ? entry[i].media$thumbnail.url.replace(/\/s\d+(\-c)?\//, '/s' + def.thumbnailSize + '-c/') : def.noImage;
summary = ("summary" in entry[i] && def.summaryLength > 0) ? entry[i].summary.$t.replace(/<br *\/?>/gi, ' ').replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, def.summaryLength) + '&hellip;' : "";
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
break;
}
}
if (st == 2) {
sk += '<li><img alt="" class="related-post-item-thumbnail" src="' + img + '" width="' + def.thumbnailSize + '" height="' + def.thumbnailSize + '"><a class="related-post-item-title" title="' + tt + '" href="' + link + '"' + tg + '>' + title + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + summary + '</span> <a href="' + link + '" class="related-post-item-more"' + tg + '>' + def.moreText + '</a></span>' + cl + '</li>';
} else if (st == 3 || st == 4) {
sk += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + link + '"' + tg + '><img alt="" class="related-post-item-thumbnail" src="' + img + '" width="' + def.thumbnailSize + '" height="' + def.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + tt + '" href="' + link + '"' + tg + '>' + title + '</a></div>' + cl + '</li>';
} else if (st == 5) {
sk += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + link + '" title="' + tt + '"' + tg + '><img alt="" class="related-post-item-thumbnail" src="' + img + '" width="' + def.thumbnailSize + '" height="' + def.thumbnailSize + '"><span class="related-post-item-tooltip">' + title + '</span></a>' + cl + '</li>';
} else if (st == 6) {
sk += '<li><a class="related-post-item-title" title="' + tt + '" href="' + link + '"' + tg + '>' + title + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + img + '" width="' + def.thumbnailSize + '" height="' + def.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + summary + '</span></span>' + cl + '</div></li>';
} else {
sk += '<li><a title="' + tt + '" href="' + link + '"' + tg + '>' + title + '</a></li>';
}
} ct.innerHTML = sk += '</ul>' + cl;
def.callBack(json);
};
randomRelatedIndex = rri;
showRelatedPost = srp;
// Generate random `start-index` data before loading the original related post data ...
lo(def.homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex');
})(window, document, document.getElementsByTagName('head')[0]);
//]]>
</script>
<!-- Related Post Widget End -->
</b:if>
Simpan perubahan dengan cara mengklik Simpan Template

Catatan :
  • Kode related post untuk blogger di atas terdiri dari kode css dan JavaScript, silakan modifikasi kode css untuk merubah style / tampilan dari related post tersebut.
  • Script widget related post untuk blogger di atas terdiri dari 6 jenis, dan jika sobat ingin menggunakan related post dengan jenis lain maka sobat cukum mengganti angka 2 pada kode widgetStyle: 2 dengan angka 1,3,4,5, atau 6. (untuk melihat gambar tampilan masing - masing jenis silakan Klik Di Sini).
  • widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot; silakan ganti tulisan Related Post: dengan kalimat yang sobat inginkan
  • numPosts: 5 Angka 5 adalah parameter untuk menentukan jumlah related post yang akan ditampilkan
  • summaryLength: 370 Angka 370 adalah parameter untuk menentukan banyaknya tulisan ringkasan yang akan di tampilkan
  • thumbnailSize: 80 Angka 80 adalah parameter untuk menentukan besar gambar / thumbnail.
Selamat mencoba cara membuat related post dengan gambar dan ringkasan di bawah posting blogger, semoga berhasil.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Membuat Related Post Bergambar + Ringkasan Di Posting yang ada di blog ini bermanfaat buat sobat