Widget yang satu ini memakai sistem Jquery valid html 5 dan seo friendly serta loading yang ringan, dengan cara scroll membuat widget ini semakin menarik berada paa halaman blog kesayangan anda. Berberapa widget telah saya padukan sehingga menampilkan widget yang begitu simpel. Jquery widget scroll valid html 5 ini memiliki tampilan yang elegan dan yang paling penting adalah sistem ranom artikel yang saya padukan agar lebih berkualitas. Oke untuk melihat demonya silahkan klik icon demo dibawah ini, dan lihat fitur yang ada pada widget ini serta simak tutorial dibawah ini langsung saja menuju TKP.
Demo
Fitur Widget
- Sistem Artikel random
- Widget Contact
- Label
- Profil Blog
- Form Email subscribe
- Admin Profil
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- 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.
Install Script
- Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
- Pada Edit HTML template anda silahkan cari kode </head>
- Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
- Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $container = $('#box');
var $headers = $container.find('h6');
var zIndex = 6;
var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
var $fakeHeader = $headers.filter(':first').clone();
$headers.each(function () {
var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();
zIndex += 6;
$header.css({
position: 'absolute',
width: $header.width(),
zIndex: zIndex
});
var $spacer = $header.after('<div />').next();
$spacer.css({
height: height,
width: width
});
});
$container.scroll(function () {
$headers.each(function () {
var $header = $(this);
var top = $header.offset().top;
if (top < containerTop) {
$fakeHeader.text($header.text());
$fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
}
});
});
$container.wrap('<div class="box" />');
$fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
$container.before($fakeHeader.text($headers.filter(':first').text()));
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script widget End -->
Install tag html
- Setelah anda sudah memasang CSSnya dan scriptnya saatnya anda memasang kode htmlnya.
- Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
- Silahkan pilih " Tata Letak " pada dasbor blog anda.
- klik "Add gadget " ( Tambahkan gadget )
- Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
- Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
- Edit script dan save .
- Untuk kode CSSnya WIDTH [ 280px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
- Untuk tulisan warna HIJAU pada script/html merupakan judul widget.
- Tulisan kode warna MERAH ganti dengan URL blog, link menu label, ID Feedburner anda.
- Kode tulisan warna BIRU ganti dengan nama label / kategori anda , agar sistem linknya lebih seo friendly samakan nama label dengan title pada kodenya.
- Kode tulisan warna KUNING adalah link gambar , silahkan ganti dengan link gambar anda.
Jquery widget scroll ini dapat ana gunakan untuk berbagai keperluan selain yang tertulis pada tutorial diatas. Widget ini menganut sistem penulisan tag Valid HTML 5 dan SEO Frienly, dan memiliki code yang ringan sehingga tidak mempengaruhi kecepatan loading halaman blog anda.
Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying navigasi animasi ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.
Jquery Widget Scroll
Senin 09 September 2013
By : Admin Blog Design
| Rivai Silaban
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.... !!! .
Admin Rivai Silaban
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 "
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..