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

Monday, September 9, 2013

cara membuat jquery widget scroll valid html5

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

  1. Sistem Artikel random
  2. Widget Contact
  3. Label
  4. Profil Blog
  5. Form Email subscribe
  6. Admin Profil

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 : Jquery Widget Scroll
By : Rivai Silaban | Blog Design
Update : Senin 09 September 2013
******************************************/
.box {
margin: 0 auto;
height: 400px;
width: 280px;
position: relative;
border: 1px solid #999;
}
#box {
overflow: auto;
position: relative;
}
h6 {
background: #999;
margin: 0;
opacity: 1;
padding: 10px;
color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
text-shadow:2px 0 1px #000;
background-color: #990000;
}
#box div {
margin: 0px;
}
.box .box {
border: 0;
}
#BD_random_title {
list-style-type: none;
width: 95%;
padding: 3px;}
#BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 2px;
background-color: #FFFFFF;
margin-left:1px;
}
#BD_random_title a:hover {
color:#990000;
text-transform: none;
background-color: #EEEEEE;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
list-style-type: none;
}
.bdlabel ul li a{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #990000;
font-style: italic;
font-weight: bold;
text-shadow: 2px 0 1px #ccc;
list-style-type:none;
padding:2px 6px 5px 15px;
text-decoration: none;
margin-left:-25px;
padding:2px 6px 5px 15px;
background: url("http://2.bp.blogspot.com/-qVbNQFRqzW4/UXLs07LPvJI/AAAAAAAAAsk/88N5KzZSWRc/s1600/mm_arrow.gif") 0px 50% no-repeat;
}
.bdlabel ul li a:hover{
list-style-type:none;
color: #000000;
text-shadow: none;
}
#bdauthor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
padding:5px;
margin-bottom:10px;
}
#bdauthor img {
width: 50px;
height: 50px;
text-align: left;
border-radius:50%;
}
#bdauthor .name {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #0066FF;
padding:10px;
font-weight: bold;
text-shadow: 1px 0 1px #999;
font-style: italic;
padding:10px;
border: solid #CCCCCC 1px;
margin-left:30px;
background-color: #FFFF95;
}
#bdauthor .text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
padding:15px 5px 5px 5px;
text-align: inherit;
line-height: normal;
}
#bdauthor .more a{background-color:#F7F7F7;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding:2px 10px;
border-color: #DBDBDB;}
#bdauthor .more a:hover {background-color:#F3F3F3;
color: #666666;
text-decoration: none;
border: solid 1px;
text-shadow: 0 1px #ccc;
border-color: #999999;
box-shadow: 0 0px 2px #999;}
.BD-text {
color:#333333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
padding: 5px;
font-style: italic;
text-align: center;
}
.BD-input {
border: 1px solid #B9C1C6;
width: 170px;
height: 25px;
font-size: 12px;
padding:3px 4px 4px 10px;
border-radius: 5px; background-color: #F4F4F4;
margin-bottom:8px;
}
.BD-input:hover {
border: 1px solid #B9C1C6;
background-color: #FFFFFF;
}
.BD-submit {
border: 1px #000 solid;
color:#E4E4E4;
font-size:13px;
font-family:Arial,Tahoma,Verdana;
margin-left:5px;
padding:3px 5px 3px 5px;
font-weight:bold;
border-radius:7px;
background-color: #666666;
text-transform: uppercase;
text-shadow: 0 2px #000;
}
.BD-submit:hover {
color:#FFFFFF;
background-color: #666666;box-shadow:0px 0 2px #333;border: 1px #fff solid;text-shadow: none;
}
/*** Blog Design CSS and ***/


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. 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.

<!-- Rivai Silaban | BLOG DESIGN script widget start -->
<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 .

<!-- Rivai Silaban | BLOG DESIGN widget start -->
<div class="box" id="box">
<h6>Artikel Terkait</h6>
<div id="BD_random_title" class="BD_random_list"><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div style='border-bottom: dotted #ccc 1px;w'>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="URL BLOG ANDA/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div>
<h6>Label</h6>
<div class="bdlabel">
<ul style="list-style:none">
<li><a href="LINK LABEL " target="_blank" title="html">Html</a></li>
<li><a href="LINK LABEL" target="_blank" title="css">CSS</a></li>
<li><a href="LINK LABEL" target="_blank" title="tutorial">Tutorial</a></li>
<li><a href="LINK LABEL" target="_blank" title="jquery">Jquery</a></li>
<li><a href="LINK LABEL" target="_blank" title="script">Script</a></li>
<li><a href="LINK LABEL" target="_blank" title="seo">SEO Friendly</a></li>
<li><a href="LINK LABEL" target="_blank" title="html 5">Valid HTML 5</a></li>
<li><a href="LINK LABEL" target="_blank" title="template">Template </a> </li>
</ul>
</div>
<h6>Contact Admin</h6>
<div style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#0000FF; margin:8px; font-size: 11px; line-height: 1.5em;">
Basecam : Tarutung Hutabarat Partali<br/><br/>
Tlp : 0123456789<br/>
Tlp : 2341 - 4536 - 322<br/>
Fax : 22123<br/>
Fax : 00123<br/>
Fax : 45123<br/><br/>
Admin<br/><br/>
Selvy Melany <br/>
Dodi Hermanto <br/>
</div>
<h6>Profil Blog</h6>
<div class="BD-text">Design Blog adalah halaman blog yang menyediakan artikel geratis dan menjaga penuh semua konten artikel yang terposting dengan lisensi commont 3.0
Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik kontribusi dalam tag tag html serta dengan XML. </div>
<h6>Free Subscribe</h6>
<h3 style="color:#666666; text-align:center; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px;">Update Artikel Via Email</h3>
<div class="BD-text"> Dapatkan artikel berlangganan geratis via email langsung dari blog ini.
Daftarkan alamat email anda pada form dibawah, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel terbaru yang terbit di
<font color='#990000'>
Blog Design
</font></div>
<div style='padding:5px 0 0 0; text-align: center;margin-bottom:10px;' >
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER ANDA&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'>

<input class='BD-input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='title' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BD-submit' type='submit' value='Subscribe' title="subscribe"/>
</form></div>
<h6>About Me</h6>

<div id="bdauthor"><div style="float:left"><a href='http://rivai-silaban.blogspot.com' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://lh4.googleusercontent.com/-3TFxlGaJYqU/USE9N_fvQOI/AAAAAAAAAO8/0_ocwXMKYkw/h120/rivai.jpg' width='100' title="my image"/>
</a></div><div class="name" style=" text-align:center">RIVAI SILABAN</div><div class="text">Nama saya adalah Rivai Silaban, saya seorang yang suka dengan bloging. Saya seorang design grafis dan fotograph, tapi masih memiliki seikit ilmu dibandingkan orang lain.<br/><br/>Tunduk bukannya saya takut , tapi saya sendiri sadar atas apa yang saya miliki merupakan suatu anugerah dari Tuhan hingga tiba saatnya nanti , DIA akan mengambilnya dari saya.</div><div class="more" style='float:right;margin: 15px 5px 20px 5px;'>
<a href=' link PROFIL GPLUS ANDA ' rel='nofollow' target='_blank' title="Profil">
&gt;&gt; Read More
</a>
</div></div>
</div>
<!-- Rivai Silaban | BLOG DESIGN widget End -->

Keterangan Code
  • 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.

Kesimpulan

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:08 PM

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