Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

» » widget kategori floating

Wednesday, October 9, 2013

widget kategori floating

Widget kategori atau label dengan efek floating atau yang saya sebut dengan Widget kategori floating, cara membuat widget kategori floating ini simpel dan tidak rumit. Tampilan widget kategori floating sangat menarik dan elegan egan sistem widget yang melayang mengikuti arah mouse bergerak ke atas dan kebawah. Widget kategori floating cocok untuk blog kesayangan anda, disamping tampilan yang menarik, widget kategori floating ini valid html 5 dan CSS 3 serta menganut sistem penulisan tag html yang SEO Friendly begitu juga dengan kode dan script yang ringan.Untuk mengetahui cara pemasangannya pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya, sekalian cek artikel yang bersangkutan dengan widget kategori floating melalui link dibawah ini, oke langsung saja menuju TKP :

Demo


Referensi Artikel


  • Cara membuat label di blogspot
  • Widget label style bubble blue
  • Widget label Drop Down style
  • Widget label post
  • Widget label animasi style

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget kategori floating
By : Rivai Silaban | Blog Design
Update : Rabu, 09 Oktober 2013
******************************************/
#bdrs_flitem {
position:absolute;
top:50px;
left:0px;
z-index:9999;
width:150px;
height:50px;
}
#bdrs_flitem .title{
line-height:50px;
font-family:Georgia;
font-size:24px;
font-weight:bold;
color:#FFFF00;
letter-spacing:2px;
background-color: #333333;
font-style: italic;
text-align: center;
text-shadow: 2px 2px 2px #000;
}
#bdrs_flitem .bdrsitem{display:none;}
#bdrs_flitem .bdrsitem .bdrs-list{
display:block;
background:#000;
color:#bbb;
border-top:1px solid #333;
padding:10px 20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif) 5px 50% no-repeat;
}
#bdrs_flitem .bdrsitem a.bdrs-list:hover{
color:#fff;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif) 5px 50% no-repeat;
}


Install Script



  1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
  4. Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
  5. Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.

<!-- Rivai Silaban | BLOG DESIGN script start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/6218102309/jquery-easing-1-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9595001136/category.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script End -->


Install tag html


  • Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
  • Copy code dibawah ini lalu pastekan dibawah kode " <body> "
    Pada halaman blog pasti mempunyai "<body>" jadi anda pastekan kode dibawah ini tepat dibawah kode<body> blog anda.
  • Save halaman anda dan lihat hasilnya, semoga bermanfaat.

<!-- Rivai Silaban | BLOG DESIGN CODE start -->
<div id="bdrs_flitem">
<div class="title">Category</div>
<div class="bdrsitem">
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 1</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 2</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 3</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 4</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 5</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 6</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 7</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 8</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 9</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 10</a>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE End -->


Keterangan Code
  • Tulisan kode warna MERAH ganti dengan Link kategori anda.
  • Kode tulisan warna BIRU ganti dengan nama link anda, dan untuk [ title="..." ] samakan saja tulisannya dengan nama link anda, agar lebih abdol atau SEO Friendly.
  • Untuk tulisan kode warna HIJAU ganti dengan judul widget anda.
  • Silahkan edit CSSnya untuk menyesuaikan tampilannya terhadap halaman blog anda.

Kesimpulan

Widget kategori floating ini memiliki tampilan yang menarik dengan melayangnya widget tersebut mengikuti arah mouse bergerak keatas dan kebawah, dan valid HTML 5 dan CSS 3 serta koe yang ringan dan penulisan tag html yang SEO Friendly.

Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Widget kategori floating
Rabu, 09 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 10:06 AM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN