Kode Widget Label, Popular Post, dan Follow by Email Simple Keren

Baca Juga

Berikut ini Kode Widget Label, Popular Post, dan Follow by Email sederhana. Meski simple, tapi keren. 

Widget Label adalah elemen blog yang biasanya dipasang di sidebar. Ada dua macam, list label dan cloud label.

Jika nama label diklik, maka akan terbuka halaman label, yaitu halaman yang berisi postingan di label yang sama.

Popular Post adalah widget yang berisi daftar postingan terbanyak dibaca. Ada tiga jenis, judul saja, judul dan gambar, serta judul plus gambar dan snippet. 

Follow by Email --disebut juga subscription form-- adalah formulir bagi pembaca untuk berlangganan postingan di blog. Begitu ada postingan baru, akan dikirimkan oleh Google ke email pembaca.

Kode Widget Label, Popular Post, dan Follow by Email 

Berikut ini Kode Widget Label, Popular Post, dan Follow by Email. Live demonya bisa dilihat di template Write Up. Juga dipasang di beberapa template yang ada di Galeri Template CB.

Cara memasangnya sangat gampang. 

1. Tema > Edit HTML

2. Masukkan kodenya di atas kode ]]></b:skin>

3. Save!

Cloud Label Widget

.cloud-label-widget-content{text-align:left; overflow: hidden;}
.cloud-label-widget-content .label-count{background:#446CB3;color:#fff!important;margin-left:-3px;white-space:nowrap;border-radius:0;padding:1px 4px!important;font-size:12px!important;margin-right:5px}
.cloud-label-widget-content .label-size{background:#f5f5f5;display:block;float:left;font-size:11px;margin:0 5px 5px 0}
.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span{height:18px!important;color:#2f2f2f;display:inline-block;font-size:11px;font-weight:400!important;text-transform:uppercase;padding:6px 8px}
.cloud-label-widget-content .label-size a{padding:6px 10px}
.cloud-label-widget-content .label-size a:hover{color:#fff!important}
.cloud-label-widget-content .label-size,.cloud-label-widget-content .label-count{height:30px!important;line-height:19px!important}
.cloud-label-widget-content .label-size:hover{background:#446CB3;color:#fff!important}
.cloud-label-widget-content .label-size:hover a{color:#fff!important}
.cloud-label-widget-content .label-size:hover span{background:#2f2f2f;color:#fff!important;cursor:pointer}
.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}
.label-size-1,.label-size-2{opacity:100}

List Label Widget

.list-label-widget-content li{display:block;padding:8px 0;border-bottom:1px solid #F3F3F3;position:relative}
.list-label-widget-content li:first-child{padding:0 0 8px}
.list-label-widget-content li:last-child{padding-bottom:0;border-bottom:0}
.list-label-widget-content li a:before{content:'\203a';position:absolute;left:0;top:2px;font-size:22px;color:#2f2f2f}
.list-label-widget-content li:first-child a:before{top:-7px}
.list-label-widget-content li a{ padding-left: 15px;font-weight: 400;text-transform: uppercase;font-size: 14px;color: #333;font-family: "Roboto", Arial, sans-serif;}
.list-label-widget-content li a:hover{color:#446CB3}
.list-label-widget-content li span:last-child{color:#999;font-size:11px;font-weight:400;position:absolute;top:8px;right:0}
.list-label-widget-content li:first-child span:last-child{top:2px}

Follow by Email

.FollowByEmail td{width:100%;float:left;box-sizing:border-box}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{margin-left:0;width:100%;border-radius:0;height:30px;font-size:11px;color:#fff;background-color:#446CB3;font-family:inherit;text-transform:uppercase;font-weight:400;letter-spacing:1px}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#3a3a3a}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{padding-left:10px;height:30px;border:1px solid #FFF;margin-bottom:5px;box-sizing:border-box;font-size:11px;font-family:inherit}
.FollowByEmail .follow-by-email-inner .follow-by-email-address:focus{border:1px solid #FFF}
.FollowByEmail .widget-content{ background-color: #2f2f2f;margin-top: 20px;padding: 20px;
max-width: 270px;}
.FollowByEmail .widget-content:before{ content: "Enter your email address to subscribe to this blog and receive notifications of new posts by email.";font-size: 12px;color: #f2f2f2;line-height: 1.4em;margin-bottom: 5px;display: block;padding: 0 2px;font-family: "Roboto";}

Popular Post Widget

.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{padding:0;width:90px;height:65px}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #F3F3F3}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{font-size: 14px;line-height: 1.4em;margin: 2px 0;
-ms-word-wrap: break-word;word-wrap: break-word;
font-weight: 600;color: #333;font-family: "Roboto", Arial, sans-serif;}
.PopularPosts ul li a:hover{color:#446CB3}
.PopularPosts .item-title{margin:0;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}

Itu dia Kode Widget Label, Popular Post, dan Follow by Email Simple Keren. Good Luck & Happy Blogging! (www.contohblog.com).*