March 14, 2019

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

March 14, 2019

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

.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


.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

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

Popular Post


.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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

Post a Comment

Contact Form

Name

Email *

Message *