Aneka Widget Labels Animasi Menarik pada Blog

Aneka Widget Label Animasi Menarik pada Blog - Sahabat blogging pasti sangat membutuhkan labels pada setiap postingan. Labels ini berperan besar pada pengkategorian postingan dalam kelompok tertentu sesuai tema yang disampaikan. Sehingga memungkinkan visitor untuk lebih mudah menemukan artikel yang mereka cari. Labels ini biasanya langsung melekat pada setiap postingan dan masuk ke dalam breadcrumbs blog. Selengkapnya mengenai breadscrump silakan simak artikel tentang seputar breadcrumbs dan cara memasangkannya.

Cara membuat labels

Pada default blogger, fitur pembuatan labels sudah disediakan saat admin membuat postingan. Letaknya sebelah kanan area postingan deretan bagian atas.

Pada homepage blog, labels ini dapat dimasukkan ke dalam sebuah widget. Widget labels ini akan menginformasikan semua labels yang ingin ditampilkan pada blog. Lalu bagaimana cara membuat widget labels itu? Berikut penjelasannya.

Cara membuat widget labels

1. Masuk ke dasboard blogger.

2. Pilih menu Layout, klik Add new Gadget.

3. Scroll mouse ke bawah, pilih Labels.

Keterangan:

-> Tulis Title sesuai keinginan. Sahabat bisa merubahnya dengan kata-kata sahabat sendiri. Misal 'Kategori' 'Tags' dan lain-lain.

-> Kemudian tandai Show pada All labels jika ingin menampilkan seluruh labels pada widget. Dan bila ingin menampilkan labels tertentu, silakan tandai Selected Labels, lalu pilih labels yang ingin ditampilkan.

-> Menu Sorting digunakan untuk menampilkan urutan labels. Alphabetically untuk urutan sesuai huruf abjad. By Frequency untuk urutan sesuai banyaknya jumlah postingan yang terkait pada labels.

-> Display digunakan untuk menampilkan bentuk labels di dalam widget. List untuk bentuk daftar vertical. Sedangkan Cloud untuk daftar secara horizontal.

-> Show number of posts per label digunakan untuk menampilkan tulisan angka sesuai postingan yang terkait pada label.

4. Akhiri dengan Save.

Trik menarik Trik Menyembunyikan Postingan Blog di Homepage.

Aneka Widget Labels Animasi Menarik

Selanjutnya adalah bagaimana membuat widget labels yang menarik, agar tampilan blog lebih bagus di mata para visitor? Ada beberapa macam bentuk widget animasi menarik yang bisa sahabat coba. Kali ini tutorial blogging akan menampilkan 5 widget labels animasi yang menarik untuk disematkan ke dalam homepage blog. Berikut macam-macamnya.

Widget Labels Animasi 1

Kode yang digunakan:

.Label a{ background: rgb(0,100,180); background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .Label a:hover{color:#000 !important; background:#123d60;}

Widget Labels Animasi 2

Kode yang digunakan:

.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}

Widget Labels Animasi 3

Kode yang digunakan:

.label-size a { margin: 0 2px 6px 0; padding: 8px; border: solid 5px #32E097; border-radius: 3px; float: left; color: #FFF; background-color: #E52C79; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; word-spacing: 8px; } .label-size span { margin: 0 2px 6px 0; padding: 8px; border: solid 1px #C6C6C6; border-radius: 3px; float: left; color: #FFF; background-color: #932CE5 !important; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; font-weight: bold; word-spacing: 8px; } .label-size a:hover { margin: 0 2px 6px 0; padding: 8px; border: solid 5px #32E097; border-radius: 3px; float: left; color: #FFF; background-color: #D22CE5; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; word-spacing: 8px; zoom: 1; } <script type="text/javascript"> // Popup window code function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a href="javascript:newPopup('https://googledrive.com/host/0BzPgmXeCwsMRRVk3eFBpcmRuSzQ/');" rel="nofollow"><b>View Code</b></a>

Widget Labels Animasi 4

Kode yang digunakan:

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none;font-size:10px;color:#666;} .label-size:hover { border:1px solid #6BB5FF; text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; }.label-size a:hover { text-decoration: none; }

Widget Labels Animasi 5

Kode yang digunakan:

.Label a{ background: rgb(0,100,180); background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .Label a:hover{color:#000 !important; background:#123d60;}

Untuk meletakkan kode tersebut silakan sahabat menuju ke Edit HTML pada menu Template. Expand semua kode, lalu cari kode ]]></b:skin>. Kemudian setelah ketemu, letakkan pilihan kode di atas tepat di atasnya. Lalu Save Template.

Selamat, kini widget labels pada homepage blog milik sahabat telah berubah jadi lebih menarik. Semoga dengan adanya labels yang menarik ini, blog sahabat makin ramai dikunjungi para visitor.

Layak baca Alexa Rank Meluncur Drastis dalam 21 Hari.

Catatan: Jika kode ]]></b:skin> sulit ditemukan, silakan sahabat ketik </b:skin> dulu, lalu klik buka include pada kode yang ditemukan. Kemudian baru cari kode ]]></b:skin> lagi.

Untuk referensi widget animasi yang lain, sahabat juga bisa menyimak artikel Membuat Widget Tags Label dengan Mode Animasi Berputar.

Demikian tutorial seputar labels dan aneka widget labels yang menarik. Semoga bermanfaat. Jika ada yang ditanyakan, silakan tulis dalam kolom komentar.