Aneka Widget Labels Animasi Menarik Pada Blog

Aneka Widget Label Animasi Menarik pada Blog - Sahabat blogging niscaya 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 gampang menemukan artikel yang mereka cari. Labels ini biasanya pribadi menempel pada setiap postingan dan masuk ke dalam breadcrumbs blog. Selengkapnya mengenai breadscrump silakan simak artikel perihal seputar breadcrumbs dan cara memasangkannya.

Cara menciptakan labels

Pada default blogger, fitur pembuatan labels sudah disediakan ketika admin menciptakan postingan. Letaknya 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 yang ingin ditampilkan pada blog. Lalu bagaimana cara menciptakan widget labels itu? Berikut penjelasannya.

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 merubahnya dengan kata-kata sahabat sendiri. Misal 'Kategori' 'Tags' dan lain-lain.

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

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

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

-> Show number of posts per label dipakai untuk menampilkan goresan pena 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 ialah bagaimana menciptakan widget labels yang menarik, supaya tampilan blog lebih anggun di mata para visitor? Ada beberapa macam bentuk widget animasi menarik yang sanggup 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; } <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 isyarat tersebut silakan sahabat menuju ke Edit HTML pada hidangan Template. Expand semua kode, kemudian cari kode ]]></b:skin>. Kemudian sehabis ketemu, letakkan pilihan isyarat di atas sempurna di atasnya. Lalu Save Template.

Selamat, sekarang 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 isyarat ]]></b:skin> sulit ditemukan, silakan sahabat ketik </b:skin> dulu, kemudian klik buka include pada isyarat yang ditemukan. Kemudian gres cari kode ]]></b:skin> lagi.

Untuk rujukan widget animasi yang lain, sahabat juga sanggup 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.

Tweet