Jumat, 13 September 2013

Cara Customize Label atau Kategori Blogger Dengan Efek CSS3

[How To Customize Blogger Label With CSS3 Effects] Cara Customize Label atau Kategori Blogger Dengan Efek CSS3 . Tag Clouds digunakan untu... thumbnail 1 summary

label_cloud_widget_style[How To Customize Blogger Label With CSS3 Effects]

Cara Customize Label atau Kategori Blogger Dengan Efek CSS3. Tag Clouds digunakan untuk menampilkan semua kategori atau label yang ada didalam sebuah blog. Dalam posting ini ditampilkan desain Widget Labelblog. CSS3 Gradien dan sifat Box-Bayangan juga digunakan untuk memberikan tampilan yang lebih stylish. Anda dapat menyesuaikan widget Label Anda dengan menambahkan beberapa kode CSS3. Hal ini animasi melayang efek dan tidak akan mendapatkan lebih banyak ruang dari sidebar Anda. Kita tidak bisa memberikan demo untuk tutorial ini.

Menambahkannya ke blogger

1. Kembali ke Blogger Dashboard >> Anda blog >> Tata Letak >> Tambah Gadget >> Label.
2. Buat pengaturan yang diperlihatkan pada gambar di bawah.

blogger_labels_widget

Menambahkan Style Sheet for Making it Attractive

1. Masuk ke template editor>> EDIT HTML: (Make a template backup before editing)
2. Cari Kode HTML.
]]></b:skin>
3. Paste kode CSS dibawah ini diatas kode ]]></b:skin>:
    .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;}
4. Lihat , yakinkan kalau pengaturan anda sudah benar.
5. Simpan.

Menambahkan simple style sheet for making labels attractive

second_style_for_cloud_lable

1. Masuk ke template editor>> EDIT HTML:
2. Find the following code in your HTML.
]]></b:skin>
3. Paste kode CSS dibawah ini diatas kode ]]></b:skin>:
.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;}
4. Lihat , yakinkan kalau pengaturan anda sudah benar.
5. Simpan
[source]

Tidak ada komentar

Posting Komentar

Review diatas adalah kutipan dari website yang ada di internet dikemas menjadi informasi yang bermanfaat bagi kita semua. setiap post ada link sumber. Lengkapnya baca Disclaimer