Cara Modifikasi Label Cloud Pada Blogspot

Cara Merubah Tampilan Label Cloud List Blogger
Label Cloud Pada Blogger ternyata dapat di modifikasi. Saya sendiri baru mengetahui hal ini setelah belajar mendesain template blogspot secara otodidak. Itu pun sambil membaca tutorial yang banyak bertebaran di internet. Caranya juga sangat mudah dan dapat di implementasikan saat itu juga. Kode css yang diperlukan untuk memodifikasi tampilan label standar blogspot ini juga nggak terlalu banyak.

Berhubung label pada blogger merupakan widget standar bawaan blogspot, saya pastikan kode class yang mengontrol css label ini semuanya sama. Hanya isi css-nya saja yang berbeda karena berkaitan dengan kreatifitas seseorang dalam mendesain sebuah template yang bagus. Tujuan akhirnya kurang lebih sama yaitu mendapatkan kepuasan tersendiri karena telah berhasil membuat tampilan yang lain dari biasanya.

Ada dua mode yang bisa anda modifikasi yaitu model list dan cloud. Namun yang lebih banyak digunakan adalah model cloud karena simple dan banyak variasinya. Pada tutorial kali ini yang akan saya bagikan juga model cloud. Sedangkan model list label widget akan saya bahas pada postingan berikutnya.

Ikuti tutorial cara modifikasi label cloud dibawah ini dengan seksama:
1. Login ke www.blogger.com
2. Klik template kemudian edit template untuk mulai proses pengeditan.
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F agar segera ketemu
4. Salin kode dibawah ini tepat diatas kode tersebut

.label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:right; height:24px; line-height:24px; position:relative;font-size:11.5px; font-weight:bold; margin-bottom: 3px; margin-left:10px; margin-right:5px; padding:0 5px 0 8px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:&quot;&quot;; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:&quot;&quot;; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;} .label-size a:hover{color:yellow;}
.list-label-widget-content ul li a{margin-left:5px;}

5. Simpan template kemudian lihatlah hasilnya.


Demikianlah tutorial singkat dan mudah modifikasi label standar blogspot. Semoga artikel sederhana ini mampu memberi semangat blogger mania yang sedang belajar mendesain template sendiri. Kalau anda tidak mau dipusingkan dengan kode html yang begitu banyak, gunakan saja template gratisan yang ada di blog ini. Kalau mau mendapatkan kualitas yang prima, beli saja yang versi premium karena ada banyak kelebihan yang tidak akan pernah anda dapatkan pada free version.

Share :

Facebook Twitter Google+

E-Book Bisnis Online

Percaya atau Tidak - Website sederhana ini telah mendatangkan banyak pemasukan ke kantong saya. Bisnis Online itu sebenernya sangat mudah, selama kita tahu caranya. Caranya dapat anda baca di Ebook Strategi Bisnis Online - Membidik Target Tepat Sasaran.
1 Komentar untuk "Cara Modifikasi Label Cloud Pada Blogspot"

Dengan berbagi tutorial, insyaallah ilmu kita akan bertambah banyak. Jangan takut berbagi karena hal itu akan mendatangkan berkah. Meskipun hanya sebuah tutorial sederhana.

Please Share & Follow US ON Google+

Back To Top