Membuat Label dengan Gambar

Sunday, October 7, 2012

Tips membuat label blog dengan thumbnail atau gambar

Lihat Demonya Langsung

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-28/* Label Thumbnails by ITP+]*/
img.label_thumb {
  float:left;
  padding:5px;
  border:1px solid #8f8f8f;
  background:#D2D0D0;
  margin-right:10px;
  height:55px;
  width:55px;
}
img.label_thumb:hover {
  background:#f7f6f6;
}
.label_with_thumbs {
  float:left;
  width:100%;
  min-height:70px;
  margin:0 10px 2px 0;
  adding:0;
}
ul.label_with_thumbs li {
  padding:8px 0;
  min-height:65px;
  margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-5354code-line:2-5455code-line:2-5556code-line:2-5657code-line:2-5758code-line:2-5859code-line:2-5960code-line:2-6061code-line:2-6162code-line:2-6263code-line:2-6364code-line:2-6465code-line:2-6566code-line:2-6667code-line:2-6768code-line:2-6869code-line:2-6970code-line:2-7071code-line:2-7172code-line:2-7273code-line:2-7374code-line:2-7475code-line:2-7576code-line:2-7677code-line:2-7778code-line:2-7879code-line:2-7980code-line:2-8081code-line:2-8182code-line:2-8283code-line:2-8384code-line:2-8485code-line:2-8586code-line:2-8687code-line:2-8788code-line:2-8889code-line:2-8990code-line:2-9091code-line:2-9192code-line:2-9293code-line:2-9394code-line:2-9495code-line:2-9596code-line:2-9697code-line:2-9798code-line:2-9899code-line:2-99100code-line:2-100101code-line:2-101102code-line:2-102103code-line:2-103function 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/AVvXsEhZfuo3polY0zLqp-HK-Ram1myimI7WCp5D-aPvfHH4CZivLR_N4V-WvBUx7hfeMBLpLIHwEImIVvZ9R3OHdvtjcFv188liJQvgrBW8656jmzjqe5txjrtP4DbIWQOqMIJZh2weXFe_iG87/s1600/k.png';
        }
        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('<strong><a href="' + posturl + '" target ="_top">' + posttitle + '</a></strong><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>');
}

Widget

Tambahkan kode dibawah ini kedalam widget blog Anda

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-11<script type='text/javascript'>
var numposts = 6;
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/-/nama_label_blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan

• var numchars = 60; merupakan jumlah karakter yang akan ditampilkan
• var numposts = 6 merupakan jumlah label yang ditampilkan
• Ganti kode yang ditandai diatas dengan nama label blog Anda.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini