Koleksi Kode Desain Widget Blogger: Kotak Pencarian, Label, dan Lainnya

Baca Juga

Berikut ini Koleksi Kode Desain Widget Blogger: Kotak Pencarian, Follow by Email, Label, dan Lainnya.

Kode-kode ini untuk memodifikasi tampilan widget agar lebih bagus, khususnya untuk template standar Blogger.

Kode-kode berikut ini berupa kode CSS yang harus dipasang di atas kode ]]</b:skin> atau kode penutup rangkaian kode CSS di template blog.

Follow by Email Grey

Kodenya:

.FollowByEmail .widget-content{position:relative;background-color: #eee;;padding:15px;}
.follow-by-email-content{position:relative;z-index:5}
.follow-by-email-title{font-size:15px;color:#323946;font-weight:400;text-transform:uppercase;letter-spacing:.5px;margin:0 0 13px}
.follow-by-email-text{color:#656565;font-size:13px;line-height:1.5em;margin:0 0 15px}
.follow-by-email-address{width:100%;height:34px;background-color:rgba(255,255,255,0.05);font-family:inherit;font-size:12px;color:#323946;box-sizing:border-box;padding:0 10px;margin:0 0 10px;border:1px solid rgba(155,155,155,0.22)}
.follow-by-email-address:focus{background-color:f9f9f9;border-color:rgba(155,155,155,0.4)}
.follow-by-email-submit{width:100%;height:34px;background-color:#c71a0e;font-family:inherit;font-size:12px;color:#ffffff;font-weight:400;text-transform:uppercase;letter-spacing:.5px;line-height:34px;cursor:pointer;padding:0 20px;border:0}
.follow-by-email-submit:hover{opacity:.9;box-shadow:0 0 5px rgba(0,0,0,0.15)}
.FollowByEmail .widget-content:before {content: "Enter your email address to subscribe to this blog and receive notifications of new posts by email.";font-size:13px;color:#333;line-height: 1.4em;margin-bottom:15px;display: block;padding: 0 2px;}

 Follow by Email Hitam

Kodenya:

.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;}

Kotak Pencarian

Kodenya

.BlogSearch .search-form{display:flex;background-color:rgba(255,255,255,0.05);padding:2px;border:1px solid rgba(155,155,155,0.17);border-radius:2px}
.BlogSearch .search-input{float:left;width:100%;height:32px;background-color:rgba(0,0,0,0);font-family:inherit;font-weight:400;font-size:13px;color:#464646;line-height:32px;box-sizing:border-box;padding:0 10px;margin:0;border:0}
.BlogSearch .search-input:focus{outline:none}
.BlogSearch .search-action{float:right;width:auto;height:32px;font-family:inherit;font-size:15px;font-weight:400;line-height:32px;cursor:pointer;box-sizing:border-box;background-color:#ff4545;color:#ffffff;padding:0 15px;border:0;border-radius:2px}
.BlogSearch .search-action:hover{background-color:#000000;color:#ffffff}

Widget Label Cloud (Awan)

Kodenya:

.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}

Widget Label List

Kodenya

.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}

Label Dua Kolom

Kodenya:

.Label {display: block;width: 100%;background: #fff;margin: 0 auto;padding:10px 0;}
.Label a:link,.Label a:visited {color:#2b2b2b}
.Label .widget-content { padding: 5px 0; margin: 0;}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0; }
.Label ul li {float: left;width: 42.5%;margin: 0 7px 5px 0;color:#616060;text-decoration: none;padding: 6px;display: block;text-align: left;text-indent: 0px;font-size: 14px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

Pasang Widget Label di Sidebar Blog

Kode Widget Popular Posts

Kodenya:

.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}

Baca Juga: Tutorial dan kode pasang Back to Top.

Demikian Koleksi Kode Desain Widget Blogger: Kotak Pencarian, Follow by Email, Label, dan Lainnya. Good Luck & Happy Blogging! (www.contohblog.com).*