Home Widget Widget Label Dengan Desain Fenomenal

Assalamualaikum warahmatullahi wabarakatuh.

Salam bertemu kembali dengan blog Karrysta ini ya sobat semua. Kembali saya menghadirkan post yang seadanya dan sesederhan mungkin. Karena keterbenturan dengan faktor kemampuan yang saya miliki. nungkin seperti pada post yang akan saya share ini. Namun apapuni tu yang saya bagikan harapan saya semua sajian saya bisa bermanfaat buat anda semua. bukan tidak ingin menghadirkan sesuatu artikel yang bermanfaat buat anda semua. Setelah kemarin saya publikasikan tentang : Modifikasi tombol Back To Top Dengan Go to Down. Nah pada kesempatan ini masih seputar blogger dan tutorial atau trik Blogger. seperti pada judul yang saya tulis pada blog baru saya "Fenomenal" Maka Widget label itu saya namakan Label Fenomenal dengan style sederhana yang kesan elastis dan bisa di pakai pada semua template blogger dan pastinya ringan dan sudah Lolos dari Validasi HTML 5 + CSS 3. Jika anda berminat silahkan simak cara pemasanganya berikut di bawah ini :

Label Fenomenal :

Sedikit uraian tentang maksud arti dari Definisi 'Fenomenal'. Secara Adjective Fenomenal itu : Luar biasa, Hebat, dan kemampuan/kelebihanya artinya mudah dapat di saksikan dengan pancaindra yang kita miliki secara sempurna. Lalu apa coba hubunganya antara Fenomenal denganWidget yang akan saya share ini coba..?.... Sebetulnya tidak ada kaitanya hanya saja saya menamakan widget ini "Label Desain Fenomenal". Menurut saya Luar biasa dan hebat. Tapi nelum tentu buat anda sama seperti itu. Yang lebih real dan elastis saja yang jelas widget label Fenomenal ini. Lebih friendly buat si empunya blog dan lebih ramah pada semua pengunjung. Dan yang lebih penting bangetnya lebih Responsive dan tidak membuat error pada validasi HTML dan CSS 3. Nah itulah alasan saya menamakan Widget Label ini dengan nama Fenomenal itu.

Cara Pasang Label Di Blogger :

Sobat blogging yang berbahagia jika anda ingin menerapkan Label pada blogger anda dengan style desaian Fenomenal ini mariikuti langkah berikut ini : Pertama Jika pada blog anda belum terpasang widget Label standar blogger silahkan anda membuat label yang ada di dashboar blog anda pada page Tata letak, lalu ADD Widget, selanjutnya pilih "LABEL" contoh lihat pada gambar di bawah ini dengan seksama :

Ingat setiap penambahan widget baru pada template anda sebaiknya hapus kode :
<b:include name='quickedit'/> Agar template anda tetap Valid HTML 5 CSS 3

Menghias Label Dengan Desaian Fenomenal :

Pada paragaf atas sebetulnya sudah jadi andamembuat Label standar bawaan blogger. Namun tampilanya biasa saja. Naah jika anda ingin membuat Label defaul bawaan blogger itu menjadi lebih unik dan menarik maka perlu anda belai element label tersebut dengan ramuan CCS yang sudah saya racik sedemikian rupa. Walaupun tutorila sejenis ini sudah banyak di share di berbagai search, Namun pada blog saya baru kali ini saya bisa berbagi. Silahkan simak cara penempatan kode CSS nya berikut di bawah ini :

Masuk Dashboard jangan lupapa sign in
Pilih template lalu pilih edite template
Tekan CTRL + F Untukmemudahkan pencarian
Cari kode : ]]></b:skin> atau kode : </style>
Setelah ketemu copy kode dibawah ini dan paste tepat di atas
Pada kode : ]]></b:skin> atau kode : </style>

/*Label Fenomenal*/
.Label h2 { background: #fff !important; color: #fff; } 
.Label h2:before { content: &quot;\f02b&quot;; font-family: FontAwesome; font-size: 22px; background: rgba(0, 0, 0, 0.2); padding: 10px 12px; margin: 0 10px 0 0; border-radius: 4px 0 0; }  
.Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff!important; height: 32px; background: #1abc9c; margin-right: 2px; line-height: 32px; text-decoration: none; border: none !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; } 
.Label a:hover{ color:#fff !important; background:#16a085; } .Label a:after{ content: &quot;&quot;; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; }

Setelah semuanya Terpasang dengan benar, silahkan Save/Simpan Template anda. Jika Anda mengikuti Tutorial diatas dengan benar Maka widget label blog anda akan berubah meninggalkan standarisisasi blogger. Dan akan tampak sebuah widget Label dengan style Desain yang sangat Fenomenal, Elastis lebih Friendly dan sangat Ramah dengan load blog anda dan sangat bersahabat dengan semua Sahabat blogging Anda. Selamat mencoba semoga berhasil menerapkan tutorial ini.

Berikut di bawah ini tampilan DEMO nya Klik Demo dan akan nampak pada sidebar kanan blog baru saya Fenomenal. Jangan lupa komentar dan Follownya yah Sob. Biar kebersamaan ini tetap terjalin baik.

DEMO

"Demikianlah kiranya yang bisa saya hadirkan ketengah anda semua. Semoga sajian yang sederhana ini bisa bermanfaat untuk sobat blogging yang membutuhkanya. Jika ada kesulitan silahkan diskusikan atau tanyakan pada kolom komentar dibawah ini. Mohon maaf jika terdapat kekeliruan/kesalahan dalam postingan ini. Dan jika anda dapatkan link url blog ini yang mati atau/brokenlink sudi kiranya memberitahu saya. Terima kasih atas sapa dan salam juga kunjung dan komentar anda pada post ini. Tetap semangat dan berexpresi. Salam sukses dan ceria selalu buat seluruh sahabat blogging yang tercinta. Happy Blogging ...."

Berlangganan lewat email pada post baru Blog : Karrysta.

Widget Label Dengan Desain Fenomenal

Unknown Widget Jumat, Desember 19, 2014 187 comments