Membuat Label Blogger dengan Animasi dan Responsive

Membuat Label Blogger dengan Animasi dan Responsive

Dalam Pembutan Label Animasi yang di butuhkan Adalah CSS (Cascading Style Sheet)

CSS Merupakan sebuah style dalam sebuat web atau desain dalam script sebuah pembuatan sebuah Web atau pun Blog.

CSS tidak dapat ditampilkan langsung tanpa source atau script sebuah bahasa pemrograman pada situs website atau pun Blog, Seperti HTML, PHP, dan lainnya.

Rumus :

HTML + CSS = Desain Tampilan WEB

PHP + CSS = Desain Tampilan WEB

 Pada Potingan ini Menerapakan CSS Pada Blogger  yang merupakan sebuah Blog Gratis yang diberikan Oleh Google. 

Pada Blog Google Blogspot.com menggunakan HTML + CSS :

Untuk HTML pada blogspot.com dapat menggunakan default dari blogger tersebut, jadi kita tinggal pembuatan CSS Saja.

Untuk Menambah CSS Pada HTML Blogspot tidak harus membukan Pengaturan HTML Blogger, karena Blog milik Google sudah menyedikan form untuk mengkonfersikan Langsung HTML Blog Tanpa Harus membuka HTML yang harus mencari dalam meletakan sebuah CSS ke HTML, Jadi dengan Form Tambah CSS yang dimiliki Blogspot dalam mengedit sangatlah mudah, Orang Awam Pun Bisa.

Untuk Langkah - langkah Mempercantil Label Kategori dengan Animasi Sebagai Berikut :

1. Login Ke Blogger 
2. Masuk Menu Dasbor
3. Klik Tema --> Sesuaikan --> Tingkat Lanjut --> Tambah CSS
4. Copy Paste Source Code CSS dibawah ini :

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}
.cloud-label-widget-content{text-align:left}
.label-size{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold}
.label-size:hover{border:5px dashed #FA0830;background:#000000}
.label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important}
.label-size{line-height:1.2}

 Seperti Gambar Dibawah Ini :

  

Lalu Klik Save atau Terapkan ke Blog,

Agar Label Dapat Tampil Makan Perlu Pengaturan Sebagai Berikut :

1.  Login Ke Dasbor Blog Anda
2. Pilih Menu Layout Atau Tata letak
3. Tambah Gadget --> Pilih Label
4. Pilih Tampilah Cloud

Seperti Gambar Di Bawah Ini :

 Lalu Save atau Simpan.

 Silahkan Lihat Tampilan Label Blog Anda.

Semoga Berhasil.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: