Assalamu'alaikum wr. wb. - Pada kesempatan kali ini saya akan kasih tutorial "Cara Membuat Related Post Thubnail Ala Google Plus" yang bentuknya bulat bulat tapi tetep keren gan, langsung aja tanpa basa basi silahkan simak tutorial di bawah ini dan saya akan kasih contoh imagenya.
Tutorial :
- Login Blogger terlebih dahulu gan
- Kemudian masuk template lalu klik edit html
- Cari code </head> dengan cara Ctrl + f
- Jika sudah ketemu codenya copy code di bawan ini tepat di atas kode </head> :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 0; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZ2J5JcmAbP2JdE7Gsp53QJ5G3HE5hM1rr2nKe6IpgFsPB-o9JxfjoE2CTbmrEknq_Phndr-A6ldHuCsmTn7POmMlilMdz9fAgh-yPnjB06mCrKdFQJmz132KLlNPnqNJR69uV6PhmpaV/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(json) {
var entry, postimg, postcontent, cat;
for (var i = 0; i < json.feed.entry.length; i++) {
entry = json.feed.entry[i];
if (i==json.feed.entry.length) { break; }
relatedTitles[relatedTitlesNum] = entry.title.$t;
postcontent = "";
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
}
relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = relatednoimage;
}
relatedThumb[relatedTitlesNum] = postimg;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
break;
}
}
relatedTitlesNum++;
}
}
function showrelated() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
var tmp4 = 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];
tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
}
}
relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
for(var i = 0; i < relatedTitles.length; i++){
var index = Math.floor((relatedTitles.length - 1) * Math.random());
var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
}
var somePosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var relsump = r;
var output;
var dirURL = document.URL;
while (somePosts < relatedPostsNum) {
if (relatedUrls[r] != dirURL) {
output = "<div class='relatedsumposts'>";
output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
output += "<p>" + relatedpSummary[r] + " ... </p>";
output += "</div>";
document.write(output);
somePosts++;
if (somePosts == relatedPostsNum) { break; }
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
if(r==relsump) { break; }
}
}
function removetags(text,length){
var pSummary = text.split("<");
for(var i=0;i<pSummary.length;i++){
if(pSummary[i].indexOf(">")!=-1){
pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
}
}
pSummary = pSummary.join("");
pSummary = pSummary.substring(0,length-1);
return pSummary;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
//]]>
</script>
- Code tersebut bisa di edit sesuka agan tapi nanti harus menyesuikan code cssnya lebar dan tingginya di atas udah ada keterangan tapi di sini ane buat yang mirip template ini aja biar gag ribet.(yang di edit bagian yang ane warna aja gan)
- Kemudian cari code /]]></b:skin>
- jika sudah ketemu copy code di bawah ini di atas /]]></b:skin> atau di bawah /]]></b:skin>
.relatedsumposts {
float: left;
margin: 0px 5px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 150px;
height: 223px;
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 13px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 130px;
padding: 5px;
width: 130px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
- Text yang ane kasih color merah itu ukuran kotak per post bisa di edit sesuai kebutuhan anda
- Langkah selanhutnya cari kode sepert di bawah ini :
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
- Kemudian copy code di bawah ini tepat di bawah code yang agan cari tadi :
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
- Maka hasilnya sebagai berikut :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
</b:loop>
- Code warna merah itu code yang di paste
- Kemudian taruh kode widget di bawah ini sesuia keinginan anda mau di taru di bawah posting silahkan ada sesui mod anda :
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div id='relatedpostssum'><div style='text-align: left; font-size: 20px; margin-bottom: 10px; font-weight: bold; border-bottom: 2px solid #000;'>RELATED POSTS</div>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
<!-- Related Post Widget End -->
- Jika sudah preview template untuk mengecek ada kode yang error engga.
- Jika sudah sukses maka simpat template
- Finish
Wassalamu'alaikum wr. wb.
Artikel yang Munkin Anda Cari :
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
wow ribet juga ya
ReplyDeletemudah kug gan itu tinggal copy copy aja
Deletemantap bro, cuman takut agak beratin blog, soal nya skg dah mulai berat gara gara iklan.
ReplyDeleteiya gan simak aja thanks kunjungannya
Deleteseep bro... ijin nyoba
ReplyDeleteMoggo gan
Deletewaah.,. bagus juga nh gan kalau pake ini :) izin coba yaa gan... hehe
ReplyDeletemonggo agan silahkan di coba
Delete