Inilah Aneka Widget Labels Animasi Menarik Pada Blog

Aneka Widget Label Animasi Menarik pada Blog - Sahabat blogging niscaiiya sangat membutuhkan labels pada setiap postingan. Labels ini berperan besar pada pengkategorian postingan dalam kelompok tertentu sesuai tema iiyang disampaikan. Sehingga memungkinkan visitor untuk lebih gampang menemukan artikel iiyang mereka cari. Labels ini biasaniiya pribadi menempel pada setiap postingan dan masuk ke dalam breadcrumbs blog. Selengkapniiya mengenai breadscrump silakan simak artikel perihal seputar breadcrumbs dan Cara Cepat memasangkanniiya.

Cara menciptakan labels

Pada default blogger, fhal tersebutr pembuatan labels sudah disediakan dikala admin menciptakan postingan. Letakniiya sebelah kanan area postingan deretan bab atas.

Pada homepage blog, labels ini sanggup dimasukkan ke dalam sebuah widget. Widget labels ini akan menginformasikan semua labels iiyang ingin ditampilkan pada blog. Lalu bagaimana Cara Cepat menciptakan widget labels hal tersebut? Berikut penjelasanniiya.

Cara menciptakan widget labels

1. Masuk ke dasboard blogger.

2. Pilih hidangan Layout, klik Add new Gadget.

3. Scroll mouse ke bawah, pilih Labels.

Keterangan:

-> Tulis Title sesuai keinginan. Sahabat sanggup merubahniiya dengan kata-kata sobat sendiri. Misal 'Kategori' 'Tags' dan lain-lain.

-> Kemudian tandai Show pada All labels jikalau ingin menampilkan seluruh labels pada widget. Dan bila ingin menampilkan labels tertentu, silakan tandai Selected Labels, kemudian pilih labels iiyang ingin ditampilkan.

-> Menu Sorting dipakai untuk menampilkan urutan labels. Alphabetically untuk urutan sesuai huruf abjad. By Frequency untuk urutan sesuai baniiyakniiya jumlah postingan iiyang terkait pada labels.

-> Display dipakai untuk menampilkan bentuk labels di dalam widget. List untuk bentuk daftar vertical. Sedangkan Cloud untuk daftar seCara Cepat horizontal.

-> Show number of posts per label dipakai untuk menampilkan goresan pena angka sesuai postingan iiyang terkait pada label.

4. Akhiri dengan Save.

Trik menarik Trik Menyembunyikan Postingan Blog di Homepage.

Aneka Widget Labels Animasi Menarik

Selanjutniiya iiyahal tersebut bagaimana menciptakan widget labels iiyang menarik, biar tampilan blog lebih manis di mata para visitor? Ada beberapa macam bentuk widget animasi menarik iiyang sanggup sobat coba. Kali ini tutorial blogging akan menampilkan 5 widget labels animasi iiyang menarik untuk disematkan ke dalam homepage blog. Berikut macam-macamniiya.

Widget Labels Animasi 1

Kode iiyang 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 iiyang 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 iiyang 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; } <a href="javascript:newPopup('https://googledrive.com/host/0BzPgmXeCwsMRRVk3eFBpcmRuSzQ/');" rel="nofollow"><b>View Code</b></a>

Widget Labels Animasi 4

Kode iiyang 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 iiyang 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 isiiyarat tersebut silakan sobat menuju ke Edit HTML pada hidangan Template. Expand semua kode, kemudian cari kode ]]></b:skin>. Kemudian sehabis ketemu, letakkan pilihan isiiyarat di atas sempurna di atasniiya. Lalu Save Template.

Selamat, sekarang widget labels pada homepage blog milik sobat telah berubah jadi lebih menarik. Semoga dengan adaniiya labels iiyang menarik ini, blog sobat makin ramai dikunjungi para visitor.

Laiiyak baca Alexa Rank Meluncur Drastis dalam 21 Hari.

Catatan: Jika isiiyarat ]]></b:skin> sulit ditemukan, silakan sobat ketik </b:skin> dulu, kemudian klik buka include pada isiiyarat iiyang ditemukan. Kemudian gres cari kode ]]></b:skin> lagi.

Untuk tumpuan widget animasi iiyang lain, sobat juga sanggup menyimak artikel Membuat Widget Tags Label dengan Mode Animasi Berputar.

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