cara membuat jquery widget tab random post

Jquery dapat membuat widget tab random post bekerja lebih maksimal valid html 5 dan seo friendly, cara para ahli blog melahirkan suatu widget tab random post yang lebih elegan dan bernuansa animasi sehingga kelihatan menawan dan mempunyai peran yang paling penting pada sebuah halaman blog untuk meningkatkan trafik pengunjung dan keindahan halaman blognya .Jquery Wiget Tab random post yang satu ini adalah salah satu widget yang dapat anda andalkan untuk meningkatkan trafik pengunjung halaman blog kesayangan anda. Tampilan widget ini lebih kren dengan sistem slide dan 2 widget tambahan ( Widget Subscribe dan widget share ) akan menemani wiget random post perlabel pada halaman blog kesayangan anda. Silahkan anda simak tutorial dibawah ini, Untuk melihat tampilan Jquery widget tab random post silahkan klik link dibawah ini.
Silahkan klik DEMO untuk melihat tampilannya

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

/*****************************************
Name : Jquery widget tab random post
By : Rivai Silaban | Blog Design
Update : 04 September 2013
******************************************/
#bdrs_tabberl {width:550px; height:auto;border-top: 5px solid #FF0000;
}
nav {
margin-bottom: 30px;
position: relative;
text-decoration: none;
}
nav ul {
overflow: hidden;
padding-bottom: 10px;
border-bottom: 5px solid #FF0000;
text-decoration: none;
list-style-type: none;
}
nav li {
float: left;
margin-right: 41px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #990000;
font-style: italic;
text-decoration: none;
}
nav li a {
color: #666;
font-weight: bold;
text-decoration: none;
float: right;
margin-left: -30px;
}
nav li a:hover,
nav li a:focus,
nav li a.current {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #990000;
font-style: italic;
text-decoration: none;
}
nav #indicator {
position: absolute;
left: 10px;
bottom: 5px;
width: 12px;
height: 7px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCVZH_FGTirifgyqVyxxRfxBsGOFbHE8DMYSmoH6iQbjaPXshMSAcWO3lPSlz5lIjsNMaSJN0AqJjoieIaHLDEnEfxtyzVmgxFGUohlENL_HsmNB37pI0SqqAOmA4n3Dv5MPOGd6qJNY/s1600/TT.png);
margin-left:-15px;
}
#content section {
display: none;
}
#content p {

max-width: 50em;
}
#BD_random_title {
list-style-type: none;
width: 100%;
padding: 3px;
margin-top:-35px;
}
#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 22px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px;
background-color: #FFFFFF;
}
#BD_random_title a:hover {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px ;
color:#990000;
text-transform: none;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}
.BD_tumb a{
border: solid #EFEFEF 1px;
background-color: #000000;
padding:2px 12px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
color: #CCCCCC;
float: right;
}
.BD_tumb a:focus,
.BD_tumb a:hover,
.BD_tumb a:active{
border: solid #EFEFEF 1px;
background-color: #666666;
color: #FFFFFF;
}
.button a{
background-color:#FA8F25;
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding: 5px 10px;
margin-right: 5px;
border-color: #CCCCCC;
float: left;
font-style: italic;
font-weight: bold;
text-shadow: 0 0px 2px #000;
}
.button a:hover{
background-color:#CD6905;
color: #CCCCCC;
text-decoration: none;
border: solid #0066FF 1px;
text-shadow: none;
border-color: #000000;
box-shadow: 0 0px 2px #000;
}
#riv_sub {
background-color: #CCCCCC;
text-align: center;
width:100%;
padding 10px;
}
#riv_sub .NBTstyle{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#riv_sub .NBT-email{
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
color:#111;
text-align: center;
}
#riv_sub .NBTsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
border-radius: 4px;
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
/*** 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 Jquery Flying Menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/7133131396/jquery-easing-1-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9143133317/jquery-tools-min.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu End -->

Install Program Tag HTML

• Setelah anda sudah memasang Scriptnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Bila tidak berhasil juga silahkan cari kode <data:post.body/> kemudian letakkan kode didalam spoiler tepat dibawah kode <data:post.body/>.
• Save template anda dan lihat hasilnya, selamat berkreative.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="bdrs_tabberl">
<nav>
<script type="text/javascript">

$(function() {

var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width()/2,
lis = $('#tabs').children('li');
$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function(event, index) {
var li = lis.eq(index),
newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');
}
}); }); </script>
<ul id="tabs">
<li><a class="current" href="#">Widget 1 </a></li>
<li><a href="#">SEO 2 </a></li>
<li><a href="#">Trik 3 </a></li>
<li><a href="#">Post 4 </a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">HTML 6</a></li>
<li class="BD_tumb" style="padding-right:5px;"><a href="#">Share artikel</a></li>
<li class="BD_tumb"><a href="#">Subscribe</a></li>
</ul>
<span id="indicator"></span>
</nav>

<div id="content">
<section>
<div id="BD_random_title">
<div class="BD_random_list">

<p><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;'>" + "<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/-/Widget 1?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p> </div></div>
</section>

<section><div id="BD_random_title">
<div class="BD_random_list">

<p> <script src="URL BLOG ANDA/feeds/posts/default/-/SEO 2 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p></div></div>
</section>

<section><div id="BD_random_title">
<div class="BD_random_list">

<p> <script src="URL BLOG ANDA/feeds/posts/default/-/Trik 3 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p> </div></div>
</section>

<section><div id="BD_random_title">
<div class="BD_random_list">
<p> <script src="URL BLOG ANDA/feeds/posts/default/-/Post 4?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p></div></div>
</section>

<section><div id="BD_random_title">
<div class="BD_random_list">
<p> <script src="URL BLOG ANDA/feeds/posts/default/-/Menu 5?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p></div></div>
</section>

<section><div id="BD_random_title">
<div class="BD_random_list">
<p><script src="URL BLOG ANDA/feeds/posts/default/-/HTML 6?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></p></div></div>
</section>
<section><div style="color: #666666; font-size: 14px; font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bold; text-align: center; margin-top: -15px;"Times New Roman", Times, serif">Share artikel pada postingan menggunakan sosial share diatas</div>
<div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: auto; text-align: center; line-height: 1.3em;">Anda sedang membaca artikel tentang " <b><a expr:href='data:post.url'>
<data:post.title/></a></b> " Pergunakan fasilitas share untuk berbagi artikel postingan ini kepenyedia sosial media pad icon share diatas.
<br/>kami tidak bertanggung jawab atas penyalah gunaan dari tutorial dan script yang ada pada postingan blog ini diluar blog ini.</div> <br/>
<div class="button" style="margin-top:1px;">
Share this artikel:<div style='text-align:left; cursor: default;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'>
Facebook</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'>
Twitter</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus">
Google Plus</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title="join to blog">
Join to Blog</a>
<a class="button" href='LINK KONTACT' rel='nofollow' target='_blank' title="Contact">
Contact</a>
</div>
</div>
</section>
<section>
<div id="riv_sub">
<div class='NBT-email' style="float:left;margin-top:-20px;">
<span style="color: #FF0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 21px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 1px #000; line-height: 1.5em;margin-left:10px;">Update Artikel with Subscribe<br/>
Subscribe this Artikel <br/><br/></span>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' 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='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='NBTstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='NBTsubmit' title='' type='submit' value='KIRIM'/><br/>
</form>
</div>
<div style="float:right; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: 180px; text-align: left; line-height: 1.5em;margin-top:-20px;">Silahkan daftarkan email anda untuk mendapatkan Update geratis terbaru dari kami...<br/>
<br/>Silahkan cek email anda untuk melakukan registrasi,<br/>Salam Kami...</div>
</div>
</section>
</div></div>
</b:if><div style='clear: both;'/>

Keterangan Code

• Tulisan kode warna MERAH silahkan anda ganti dengan nama label / kategori blog anda. Perhatikan penulisan nama labelnya harus sesuai dengan penulisan nama label kode kedua.
• Tulisan warna BIRU ganti dengan link anda dan ID FEEDBURNER ANDA sesuai dengan yang itulis paa tutorial ini.
• Kode tulisan warna HIJAU gantikan dengan ID BLOG dan LINK anda sesuai dengan yang tertulis pada tutorial.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Buat para bloger mania widget yang satu ini dapat menjadi andalan buat menarik hati para pengunjung blog, Sebab wiget ini sudah dipadukan dengan beberapa widget untuk keperluan bloging.

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying menu navigasi with email subscribe ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Jquery widget tab random post
Rabu 03 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

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:51 PM