Cara membuat label/kategori blog warna-warni yang keren

Kali ini masih membahas tentang Tips Blogger yaitu Cara membuat label/kategori blog warna-warni yang keren. Cara ini masih menerapkan CSS agar label/kategori Blogger menjadi warna-warni dan tampak cantik. Hal ini tentu akan membuat penggunjung blog sobat betah dengan tampilan blog yang indah. Setiap label akan memiliki warna background berbeda dan dapat sobat rubah dengan mengedit code CSS-nya.

Jika sobat berhasil membuatnya nantinya akan tampil seperti screenshot berikut.

Bagaimana keren bukan? untuk dapat membuatnya silahkan ikuti langkah-langkah berikut.

1. Pertama masuk dulu ke Dasboard Blogger Sobat

2. Pilih Template => edit HTML

3. Silahkan copy-paste CSS berikut dan letakkan tepat diatas </b:skin> atau </style> kalau saya coba yang diatas </style> (gunakan Ctrl + F untuk memudahka pencarian):

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}

CSS di atas hanya digunakan untuk blog yang memiliki sedikit label , jika label blog sobat memiliki banyak label maka gunakan CSS berikut ini:

.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #FF6BFF;
}

5. Simpan perubahan template Sobat.

6. Kembali lagi ke Dashboard Blogger.

7. Klik Layout/Teta Letak > Add a Gadget > pilih Labels

8. Langkah terakhir edit widget Label sehingga sama dengan berikut ini.

9. Simpal Label dan coba lihat tampilan label pada blog sobat sudah berubah seperti screenshot diatas belum. jika belum cek apakah benar CSS yang saya berikan berada tepat diatas </b:skin> atau </style>.

*note: kita harus mempunyai widget Labels dan menambahkan CSS di atas agar label-nya warna-warni.

sumber: jelasinblog.blogspot.com

Cara Membuat Widget Featured Post Sidebar Berdasarkan Label Keren

Cara Membuat Widget Featured Post Sidebar Berdasarkan Label Keren  - Widget Memang Sekarang ada banyak ragamnya. Akan tetapi banyak pula yang hanyamemiliki Simple design ataupun tidak responsive. Tapi kali ini saya akan memberikan tutorial yang menyangkup keduanya. Yaitu Keren Dan Responsive.
 
Oke Guys. Setelah Saya Memberikan Tutorial Cara Membuat Subscribe Form Responsive Dan Keren Kali Saya akan Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive .Cara Memasang nya sangat gampang, bisa dilakukan dengan cara :

Kopy Script Dibawah Ini > Pilih Tata Letak ( LayOut ) > Add a gadget > HTML/Javascript
  Langsung aja Nih Script nya :v
Note : Tulisan warna merah diganti dengan blog kalian dan label kalian :) 

<style> 
.tabs-md {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    z-index: 2;
}
.tabs-md .tab {
clear:inherit !important;
}
.collection .collection-item.avatar {
    height: inherit !important;
    min-height: 64px;
    max-height: 83px; 
}
.collection-md {
   border:0;
   border-bottom: 1px solid #E0E0E0;
}
</style>
<script>
function showrecentpostswiththumbs(json) {
    document.write('<ul class="collection collection-md">');
    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 = 'http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';

        }


        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="collection-item avatar">');


        if (showpostthumbnails == true)
            document.write('<img class="circle" src="' + thumburl + '"/>');
        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('<i>');
                document.write(postcontent);
                document.write('</i>');
            } else {
                document.write('<i>');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</i>');
            }
        }

        var towrite = '';
        var flag = 0;
        document.write('<div>');

        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"><small>READ MORE</small></a>';
            flag = 1;;
        }




        document.write(towrite);

        document.write('</div></li>');
        if (displayseparator == true)
            if (i != (numposts - 1));
    }
    document.write('</ul>');

}
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 150;
</script> 
<div class="row">
    <div class="col s12">

      <ul class="tabs tabs-md">
        <li class="tab col s3"><a class="active" href="#test1">LABEL 1</a></li>
        <li class="tab col s3"><a href="#test2">LABEL 2</a></li> 
        <li class="tab col s3"><a href="#test3">LABEL 3</a></li> 
      </ul> 
    </div>
    <div id="test1" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test2" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test3" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div> 
</div>