Kode CSS untuk Merapikan Tampilan Popular Post, Label, dan Follow by Email di Sidebar Blogger dan Cara Memasangkannya.
Tips blogging kali ini tentang cara merapikan tampilan widget popular post, label, dan follow by email di sidebar Blogger.
Desain dari template bawaan Blogger kurang rapi. Kita bisa mengubahnya menjadi lebih bagus. Berikut ini desain awal dan setelah diubah. Sila bandingkan, lebih bagus ‘kan?
Widget Sidebar Blogger Sebelum Diubah
Widget Sidebar Blogger Setelah Diubah
Anda masih bisa mengubahnya lagi, jika memahami dasar-dasar CSS.
Cara Merapikan Tampilan Popular Post, Label, dan Follow by Email
1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
.sidebar .widget li {list-style: none;}
.sidebar .widget {margin: 0 0 20px 0}
.sidebar ul{list-style:none}
.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}
.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:12px;font-family:inherit}
.FollowByEmail .follow-by-email-inner .follow-by-email-address:focus{border:1px solid #FFF}
.FollowByEmail .widget-content {background-color: #f5f5f5;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: 13px;color: #222;line-height: 1.4em;margin-bottom: 5px;display: block;padding: 0 2px;}
.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;}
.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}
3. Simpan Template!
Demikian Cara Merapikan Tampilan Popular Post, Label, dan Follow by Email sekaligus di sidebar blog Anda. Untuk popular post, tampilkan hanya judul saja biar ringan. Untuk widget Label, pilih “Cloud” (Awan).*
