Label ialah membuktikan dan menempatkan suatu postingan jadi ber-kategori. Perlu diketahui juga, bahwa Blogger hanya menyediakan gadget label masih tampilan sederhana. Untung saja Blogger bersifat open source yaitu bebas mengedit kapan saja. Sekarang bagaimana kita ubah saja Widget default label pada blogger menjadi keren dengan memakai aba-aba CSS. Label berfungsi untuk pengkategorian suatu artikel dengan judul tertentu yang mempunyai kegunaan memudahkan pengunjung dalam menentukan artikel dalam satu kategori sesuai dengan impian pembaca, sebab dapat menampilkan berupa link yang mengarah suatu artikel dengan kategori tertentu.
Screenshoot :
Baca Juga :
Screenshoot :
Preview Label Cloud :
Cara Membuat Label/Kategori Cloud Pada Blogger jadi Keren
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan <CTRL+F> aba-aba ]]></b:skin> atau </style>
1. Temukan <CTRL+F> aba-aba ]]></b:skin> atau </style>
2. Copy&paste aba-aba berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* CSS Label */ .widget-content.list-label-widget-content {padding:0;} .widget-content.cloud-label-widget-content {display:inline-block;} .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1} .cloud-label-widget-content{text-align:left;padding:10px;} .label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;} .label-count:hover {background:#fafafa;color:#222;border-radius:4px} .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;} .Label li:hover {background:#fff;color:#FF9934;} .Label li:before {content:"\f105";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px; color:#666;transition:all .3s ease-out;} .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;} .Label li a {color:#666;transition:all .3s ease-out;} .Label li a:hover {color:#FF9934;} .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;} .Label li span:hover{background-color:#FF9934;color:#fff} .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;} .label-size:hover{background:#FF9934;border-color:#FF9934;} .label-size a {display:inline-block;color:#444;padding:8px 10px; font-weight:400;} .label-size a:hover {color:#fff;} .label-size a:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px; color:#444;transition:initial;} .label-size a:hover:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;} .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;} .Label li:hover {color:#29abe2;} .Label li a {color:#aaa;transition:all .3s ease-out;} .Label li a:hover {color:#29abe2;} .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;} .Label li span:hover{color:#29abe2} .label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;} .label-size a {display:inline-block;color:#fff;padding:8px 10px; font-weight:400;transition:initial;} .label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;} label-size a:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px; color:#fff;transition:initial;} .label-size a:hover:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;} .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;} .label-count {background:#333;}4. Buka Tata letak/Layout.
5. Tambahkan : <Add a gadget > Choose Label>
6. Jangan lupa pilih dari Daftar menjadi Cloud pada Elemen gadget Label.
Demikian Tutorial Blogger kali ini, Semoga Bermanfaat! Thanks for Reading & Sharing and Visited : Cara Membuat Related Post Thumbnail& Snippet Responsive.
