-->


Cara Membuat Artikel Terkait Sesuai Label Keren Dengan Menggunakan Satu Gambar - Mempunyai tampilan blog yang lebih profesional adalah sesuatu yang di idam-idamkan oleh banyak blogger. Di samping karena tampilan yang lebih bagus, ternyata tampilan blog yang profesional akan dapat memberikan kepuasan tersendiri bagi para pengunjung maupun yang mempunyai blog tersebut.
Bahkan banyak yang berpendapat bahwa tampilan blog sangat mempengaruhi gaya hidup blogger tersebut.

Tampilan blog yang profesional tidak harus memasang banyak widgets di sidebarnya, atau memasang iklan yang melayang kesana kemari, mengganti font artikel yang dapat merusak mata pengunjung, dan lain-lain. Yang di katakan blog profesional adalah blog yang mempunyai tampilan yang enak di pandang dan tidak berkesan berantakan, terlebih dapat membuat penglihatan tidak nyaman. Tampilan profesional adalah tampilan yang lebih di tujukan untuk pengunjung.

Jadi, Anda dapat menilai apakah blog Anda mempunyai tampilan yang profesional dengan cara bersikap seperti pengunjung blog biasa. Hal ini dapat Anda lakukan dengan bersikap seperti halnya Anda berkunjung pada blog lain, Anda dapat menilai apakah blog tersebut mempunyai tampilan yang profesional atau malah berantakan.

Berikut Saya akan sedikit berbagi tentang bagaimana Cara Membuat Artikel Terkait Sesuai Label Keren. Widgets berikut adalah widgets yang dapat memberikan suasana profesional pada blog Anda. Tampilan widgets berikut adalah menampilkan artikel populer berdasarkan label dan terdapat satu thumbnail pada posisi paling atas. Untuk lebih jelasnya dapat Anda perhatikan gambar berikut :

Cara Membuat Artikel Terkait Sesuai Label Keren
  • Masuk Akun Blogger Anda
  • Menuju ke Template, Edit Template
  • Temukan kode ]]></b:skin> dan letakan kode berikut tepat di atas kode ]]></b:skin>
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

  • Temukan kode </head> dan letakan kode berikut tepat di atas kode </head>

</style>
<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>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNLu14IkIKpHYFM2vjF1NqzesdmBvEX1P4by5CLtEFYUQ7neB1tNqD-nyrqJ_91xJFTpTMmc_vuYj6SgbRBJKtqmlMXTdwbbxG_ZRAVbdZLklAoSDQzuaziy6CKvSs0-HCe2oyMfAzaBV/';}

var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('
<li class="clearfix">');if(showpostthumbnails==true)

document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}

var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>
');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>
');}
//]]>
</script>
  • Simpan Template / Save Template
  • Menuju ke Tata Letak, kemudian Add Gadgets
  • Pilih HTML/JavaScript
  • Masukan kode berikut
 
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Komputer?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>
";
 document.write(item);
 }
 document.write('</ul>
');
 }
</script>
<script src="http://ladaskipzen.blogspot.com/feeds/posts/summary/-/Komputer?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://ladaskipzen.blogspot.com/search/label/Komputer" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

  • Simpan, Simpan Setelan
Mungkin hanya sampai di sini saja tentang Cara Membuat Artikel Terkait Sesuai Label Keren. Semoga dengan adanya artikel di atas dapat merubah blog Anda lebih terlihat profesional. Dan jangan lupa untuk memberikan komentar, kritik, saran Anda di Kotak Komentar di bawah ini. Terima Kasih!