• Sitemap
  • About Me
  • Contact Me
  • Privacy Policy
  • Blog Tools ▼
    • Kode Warna
    • Parse HTML
    • Check Pagerank
    • Check Speed Blog
  • Mobile
Ghiyats Blogs
  • Home
  • Blogger
  • Widget
  • SEO
  • Template
  • CSS
  • Menu Bar
  • JQuery
Home » CSS » Tutorial Blogger » Widget » Tutorial Widget Cloud Label With Efek Css3

Tuesday, January 14, 2014

Tutorial Widget Cloud Label With Efek Css3

Tutorial Widget Cloud Label With Efek Css3  | Ghiyats Blogs - Label Adalah salah satu widget yang ada di blogger, Tampilan Widget label yang ada di blogger sangat sederhana, dengan begitu kita harus menambahkan Kode Seperti Css, Untuk memperindah tampilannya.

Tutorial Widget Blogger Css3 Cloud Label

Widget Label yang Saya bagikan ini berbentuk cloud dengan Sentuhan Css3 di dalamnya, dan warna widget ini berwarna biru, Kalau begitu langsung saja kita coba saja membuat widget ini tutorialnya seperti ini :

Pemasangan di Blogger
  • Login Ke Bloggger >> ''Tata Letak'' >> Tambah Gadget >> Label
  • Setelah itu, Setting Pengaturan Widgetnya Seperti ini
  • Centang Cloud di dalam pengaturan tampilan
  • Setelah Klik Simpan

Pemasangan di HTML
  • Login Ke Blogger
  • Pergi ke menu ''Template'' >> Klik Edit HTML
  • Cari kode ']]><b:skin'' >> Setelah ketemu, Taruhlah kode dibawah ini, di atas kode tadi
.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;}

  • Setelah itu Klik Simpan

Demikianlah artikel pada hari ini, Semoga bermanfaat dan mudah untuk di pratekkan oleh sobat semua, Silahkan Beri pendapat tentang artikel ini di kolom komentar dibawah ini,Terrima Kasih...

Via : MyBlogger-Tricks

Unknown Waktu 06:00

2 komentar untuk "Tutorial Widget Cloud Label With Efek Css3"

  1. Valentino Febrian Blogspot.comJanuary 14, 2014 at 6:58 AM

    Keren tuh gan. widgetnya ..kapan2 sy cba

    ReplyDelete
    Replies
    1. UnknownJanuary 15, 2014 at 4:54 PM

      Iya Sob, silahkan di coba.

      Delete
      Replies
        Reply
    2. Reply
Add comment
Load more...

Silakan Tinggalkan Komentar Di Blog Ini
Kami sangat menghargai atas pertanyaan dan komentar sobat, Di harapkan Berkomentar dengan sopan dan tidak menyingung orang lain, Dan tidak mengunakan Link aktif karena akan Terhapus.
Terima Kasih

‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger