Cara Memasang hashtag Label Dibawah Postingan Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post-body entry-content" id="post-body-5072687260291234346" itemprop="articleBody"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCi3Jsm28emh37M8EjPnHKzb4G6RP5x45gDECHjKiPaH_SeAxWyga4y244EsY2Fipdt221CWc6Bcyp8C2mMDpE127xg4wAYJLleoDyGKRXkCa7cxCg4Ph40UmSInaEZ7XrVG8jN_MgoiTM/s1600/capture-20170425-152346.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCi3Jsm28emh37M8EjPnHKzb4G6RP5x45gDECHjKiPaH_SeAxWyga4y244EsY2Fipdt221CWc6Bcyp8C2mMDpE127xg4wAYJLleoDyGKRXkCa7cxCg4Ph40UmSInaEZ7XrVG8jN_MgoiTM/s640/capture-20170425-152346.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><b><a href="http://www.lovekarawang.com/2018/03/cara-memasang-hashtag-label-dibawah.html" target="_blank" title="Memasang Tag Label Dibawah Postingan Blog">Cara Menambahkan hashtag atau daftar tag label terkait dibawah postingan blog</a></b>. kali ini <b><span style="color: red;">Love Karawang</span></b> akan Berbagi cara menambahkan tags label terkait dibawah postingan blog.. <br /><br /><b>Tags di bawah postingan blog</b> ini mungkin bisa juga disebut sebagai <b>hashtag</b> yang akan menampilkan daftar label apa saja yang terkait di dalam artikel tersebut.. <br /><br />Mungkin bisa juga disebut dengan <b>Breadcrumb dibawah postingan blog</b> tapi tidak menyertakan judul dari artikel tersebut, melainkan hanya menampilkan judul dari labelnya saja.. <br /><br />Bagi kalian yang ingin mencoba <b>memasang Breadcrumb, hashtag atau label terkait dibawah postingan blog</b>, bisa ikuti tutorial singkat berikut ini.. <br /><h3><span style="font-size: small;">Cara Memasang hashtag, Breadcrumb atau label terkait dibawah postingan blog</span></h3><ul><li>Seperti biasa, kalian wajib masuk dulu ke <kbd><span style="color: red;">blogger.com</span></kbd></li></ul><ul><li>Setelah login Pilih Menu <span style="color: red;"><kbd>Template</kbd>, <kbd>EditHTML</kbd>, </span>Terus Cari Kode <kbd><b><i><span style="color: red;"></head></span></i></b></kbd></li></ul><ul><li>Kalo sudah ketemu, kalian masukan css dibawah ini tepat diatasnya</li></ul><div><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; color: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="border: 0px; color: #fafafa; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">     <style type='text/css'><br />/*Post Label*/<br />.post-labels{float:left;display:block;width:100%;color:#999}<br />.post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}<br />.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent rgba(0,0,0,0.25) transparent transparent;border-style:solid;border-width:12px 12px 12px 0}<br />.post-labels a:after{content:"";position:absolute;top:10px;left:-1px;float:left;width:4px;height:4px;border-radius:2px;background:#fff;transition:all .3s}<br />.post-labels a:nth-child(1){background:#ca85ca}<br />.post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent}<br />.post-labels a:nth-child(2){background:#e54e7e}<br />.post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent}<br />.post-labels a:nth-child(3){background:#61c436}<br />.post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent}<br />.post-labels a:nth-child(4){background:#f4b23f}<br />.post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent}<br />.post-labels a:nth-child(5){background:#46c49c}<br />.post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent}<br />.post-labels a:nth-child(6){background:#607ec7}<br />.post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent}<br />.post-labels a:nth-child(7){background:#ca85ca}<br />.post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent}<br />.post-labels a:nth-child(8){background:#e54e7e}<br />.post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent}<br />.post-labels a:nth-child(9){background:#61c436}<br />.post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent}<br />.post-labels a:nth-child(10){background:#f4b23f}<br />.post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}<br /></style></span></code><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span class="line-numbers-rows" style="border: 0px; color: #e9e9e9; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 48px; left: -3.5em; line-height: inherit; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 3em;"><br /><span style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></code></pre></div><ul><li>Kalo sudah, selanjutnya kalian cari kode <kbd><b><i><span style="color: red;"></article></span></i></b></kbd></li></ul><ul><li>Kalo sudah ketemu, masukan HTML dibawah ini tepat diatasnya</li></ul><div><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; color: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="border: 0px; color: #fafafa; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <span class='post-labels'><br /> <div id='maia-signature'/><br /> <b:if cond='data:post.labels'><br /> <span style='float: left;'>Tags: </span><b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a><br /> </b:loop><br /> </b:if><br /> </span><br /></b:if></span></code><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span class="line-numbers-rows" style="border: 0px; color: #e9e9e9; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 48px; left: -3.5em; line-height: inherit; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 3em;"><br /><span style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></code></pre></div><ul><section>Jika Tags labelnya tidak sesuai misal tampil di bawah related post, kalian tinggal pindahkan html di atas sesuai keinginan kalian.. </section></ul><ul><li>Kalo sudah sesuai, tinggal save template kalian n lihat hasilnya :)</li></ul><br />Cukup sekian dan terima kasih, semoga artikel tentang <b><a href="http://www.lovekarawang.com/2018/03/cara-memasang-hashtag-label-dibawah.html" target="_blank" title="Cara Memasang Hashtag / Tags Label dibawah postingan blog">Cara Memasang Hashtag / Tags Label dibawah postingan blog</a></b> ini bermanfaat ya :) <br /><br />Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar :)<br /><div class="clear"></div></div></div>

Cara Memasang hashtag Label Dibawah Postingan Blog

Cara Menambahkan hashtag atau daftar tag label terkait dibawah postingan blog . kali ini Love Karawang akan Berbagi cara menambahkan tags l...

Baca selengkapnya »

Cara Membuat Widget Label Blog Menjadi Warna-Warni ketika Di Sentuh Mouse, Cursor

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post-body entry-content" id="post-body-3385360936330386478" itemprop="articleBody"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1inDj4MNSQQDjvzpDNoBq3hoTng7TACRIJvDJSxnMKAqm1uT_5wjhbO2CUy-cbzJnQl8lC_1WnHtFpKAafngKodxxVd9LPtTx77vKbCCnnai_2q4PTTpvMkWrty3lurr6QXA7Ma_Y6jTE/s1600/capture-20170425-160001.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="494" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1inDj4MNSQQDjvzpDNoBq3hoTng7TACRIJvDJSxnMKAqm1uT_5wjhbO2CUy-cbzJnQl8lC_1WnHtFpKAafngKodxxVd9LPtTx77vKbCCnnai_2q4PTTpvMkWrty3lurr6QXA7Ma_Y6jTE/s640/capture-20170425-160001.png" width="640" /></a></div><br /><br /><b><a href="http://www.lovekarawang.com/2018/03/cara-membuat-widget-label-blog-menjadi.html" target="_blank" title="Cara Membuat Widget Label Blog Menjadi Warna Warni ketika Di Sentuh Mouse">Tutorial Kali ini kita akan <b>merubah widget daftar label menjadi berwarna</b> ketika di sentuh cursor / mouse</a></b>. Dengan memberikan warna pada widget label, blog sepertinya akan terlihat lebih menarik dan keren tentunya .....<br /><center></center><br />Bagi kalian nyang ingin mencobanya, silahkan ikuti tutorial berikut ini.. <br /><h3>Tutorial Cara Merubah Widget Label Blog Menjadi Warna Warni</h3><ul><li>Login Ke <kbd><span style="color: red;">blogger.com</span></kbd></li></ul><ul><li>Masuk ke tab <span style="color: red;"><kbd>Template</kbd>, <kbd>Edit HTML</kbd>, </span>Lalu Cari Kode Tag <kbd><b><i><span style="color: red;"></head></span></i></b></kbd></li></ul><ul><li>Setelah ketemu, masukan css dibawah ini tepat di atas kode tag tadi</li><li><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; color: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="border: 0px; color: #fafafa; font-family: "consolas" , "monaco" , "andale mono" , "courier new" , "courier" , monospace; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><style type='text/css'><br />/* CSS label */<br />.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}<br />.widget-content.cloud-label-widget-content {display:inline-block;}<br />.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}<br />.cloud-label-widget-content{text-align:left;padding:10px;margin:10px 10px 5px 10px}<br />.label-count {white-space:nowrap;display:inline-block;}<br />#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}<br />#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}<br />#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}<br />#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}<br />#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}<br />#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: "\f07c";padding-right: 10px !important;}<br />#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}<br />#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}<br />#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}<br />#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}<br />#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}<br />#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}<br />#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}<br />#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}<br />#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}<br />#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}<br />#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}<br />#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}<br />#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}<br />.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}<br /></style></b></span></span></code><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span class="line-numbers-rows" style="border: 0px; color: #e9e9e9; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 48px; left: -3.5em; line-height: inherit; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 3em;"><span style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></code></pre></li></ul><ul><li>Tinggal save template</li></ul><ul><li>Sekarang kalian harus merubah tampilan widget labelnya menjadi daftar dan centang pada tampilkan nomornya.. contoh lihat gambar</li><br /><img alt="Cara Membuat Widget Label Blog Jadi Berwarna V.2" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhX78fauX523dZAMt_UM9QWRmzHPv6LoN-pRsEbDnPqoqY4lp8iTIn6Ngb1sHspX3cS8L4fxPKM2G_dQ_FELVNKt4FgiRTKsYPzuIj9NbOfPmWYxPPwYvl9IFRFEgYIfPZGsOxcXxVaKgb/s400/merubah-tampilan-label-blog.jpg" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhX78fauX523dZAMt_UM9QWRmzHPv6LoN-pRsEbDnPqoqY4lp8iTIn6Ngb1sHspX3cS8L4fxPKM2G_dQ_FELVNKt4FgiRTKsYPzuIj9NbOfPmWYxPPwYvl9IFRFEgYIfPZGsOxcXxVaKgb/s400/merubah-tampilan-label-blog.jpg" title="Cara Membuat Widget Label Blog Jadi Berwarna V.2" width="400" /></ul><ul><li>kalo sudah tinggal save widget dan selesai</li></ul>Cukup sekian dan terima kasih, semoga artikel tentang <b><a href="http://www.lovekarawang.com/2018/03/cara-membuat-widget-label-blog-menjadi.html" target="_blank" title="Cara Membuat Widget Label Blog Jadi Berwarna V.2">Cara Merubah widget label pada blog menjadi berwarna dengan efect hover</a></b> ini bermanfaat ya.. <br /><br />Jika ada yang mau ditanyakan, silahkan bertanya di kolom komentar..<br /><div class="clear"></div></div></div>

Cara Membuat Widget Label Blog Menjadi Warna-Warni ketika Di Sentuh Mouse, Cursor

Tutorial Kali ini kita akan merubah widget daftar label menjadi berwarna ketika di sentuh cursor / mouse . Dengan memberikan warna pada wid...

Baca selengkapnya »

Cara Agar Widget Label Blog Menjadi Lebih Berwarna

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post-body entry-content" id="post-body-1628005065577588187" itemprop="articleBody"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbrSCgzNAZQaOBLCgGOUj3fJqWErBA9BbhZ5miarYUegYSB0AxHxQYDTB0EtunzvadT9Qpd_-0qI80OL_FU6x-PcI4qM781Tx87q89P8P2IB_ABND0HTvRjgz3wNh7HdQTUSHcQKlkYaB/s1600/membuat-label-jadi-berwarna-blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="462" data-original-width="600" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbrSCgzNAZQaOBLCgGOUj3fJqWErBA9BbhZ5miarYUegYSB0AxHxQYDTB0EtunzvadT9Qpd_-0qI80OL_FU6x-PcI4qM781Tx87q89P8P2IB_ABND0HTvRjgz3wNh7HdQTUSHcQKlkYaB/s640/membuat-label-jadi-berwarna-blog.jpg" width="640" /></a></div><br /><br />Kali ini kita akan merubah daftar label menjadi warna - warni ketika di sentuh sama mouse... <br /><br />Kita hanya merubah tampilan label yaang d setel ke tampilan Daftar, kalo untuk Cloud tampilannya biasa saja.. <br /><br />Untuk merubah tampilannya jadi berwarna, sangat simple kita hanya menambahkan css dan mengatur tampilan pada labelnya... <br /><br />Langsung saja ke <b>tutorial cara merubah widget label jadi bwerarna</b>... <br /><h3><span style="font-size: small;">Cara Membuat Widget Label Blog Menjadi</span></h3><ul><li>Login ke<b><span style="color: red;"> <kbd>blogger.com</kbd></span></b></li></ul><ul><li>Pilih Menu <span style="color: red;"><kbd>Template</kbd>, <kbd>Edit HTML</kbd>, </span>Cari Kode <kbd><<b><i><span style="color: red;">/head></span></i></b></kbd></li></ul><ul><li>Lalu masukan CSS Dibawah ini tepat di atasnya</li><pre data-codetype="CSSku" title="CSS"><code class="language-markup"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; color: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="border: 0px; color: #fafafa; font-family: "consolas" , "monaco" , "andale mono" , "courier new" , "courier" , monospace; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><style type='text/css'><br />/* CSS label */<br />#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}<br />#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}<br />#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}<br />#sidebar-wrapper .Label li:hover:before {width:100%;}<br />#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}<br />#sidebar-wrapper .Label li a:hover {color:#fff;}<br />#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}<br />#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}<br />#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}<br />#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}<br />#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}<br />#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}<br />#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}<br />#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}<br />#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}<br />#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}<br />#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}<br />#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}<br />.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}<br />.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}<br /></style></b></span></span></code><code class=" language-markup" style="background-image: none; border: none; color: inherit; direction: ltr; display: block; font-family: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span class="line-numbers-rows" style="border: 0px; color: #e9e9e9; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 48px; left: -3.5em; line-height: inherit; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 3em;"><span style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></code></pre></code></pre></ul><ul><li>Save template</li></ul><ul><li>Done, semuanya selesai..</li></ul>Cukup sekian dan terima kasih, semoga artikel tentang <b><a href="http://www.lovekarawang.com/2018/03/cara-agar-widget-label-blog-menjadi.html" target="_blank" title="Cara Membuat Widget Label Jadi Berwarna Di Blog">Cara Membuat Widget Label Jadi Berwarna Di Blog</a></b> ini bermanfaat. <br /><div class="clear"></div></div></div>

Cara Agar Widget Label Blog Menjadi Lebih Berwarna

Kali ini kita akan merubah daftar label menjadi warna - warni ketika di sentuh sama mouse... Kita hanya merubah tampilan label yaang d setel...

Baca selengkapnya »