widget slider random post

Pada kesempatan kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang widget slider random post. Semoga dengan posting widget slider random post akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

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 Slider Random Post
By : Arieadie | Blog Design
Update : Senin, 16 September 2013
******************************************/
#bdrsslider h2 {
margin-top: -10px;
margin-bottom: 14px;
padding: 0;
border-bottom: solid #999 1px;
width:93%;/*lebar widget*/
font-family: Georgia, "Times New Roman", Times, serif;
color: #0099FF;
text-shadow: 1px 1px 1px #000;
}
#bdrsslider {
width: 580px;/*lebar widget*/
margin: 0 auto;
position: relative;
border:solid #666 1px;
}
#bdrsslider:hover {
box-shadow:0 0 5px #666;
}
.bdrsscroll {
height: 250px;
width: 580px;/*lebar widget*/
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
background-color: #F3F3F3;
}
.bdrsroll div.panel {
padding: 20px;
height: 210px;
width: 580px;/*lebar widget*/
}
ul.bdnav {/*menu tabber*/
list-style: none;
margin: 0;
padding: 10px 0;
background-color: #333333;
border-bottom:solid #00CCFF 4px;
border-top:solid #00CCFF 4px;
}
ul.bdnav li {
display: inline;
margin-right: 10px;
}
ul.bdnav a {
padding: 11px;
color: #CCCCCC;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
ul.bdnav a:hover {
color: #CCCCCC;
text-shadow: 0 0 5px #FFFF00;
border-top:solid #FF0000 6px;
}
ul.bdnav a.selected {
background-color: #666666;
color: #FF0000;
text-shadow: 1px 0 2px #111;
border-top:solid #FF0000 6px;
}
ul.bdnav a:focus {
outline: none;
}
.BD_title {/*CSS Random Post*/
list-style-type: none;
width:93%;
padding: 3px;
margin-top:-10px;
}
.BD_title a {
color: #000000;
line-height:18px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 22px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLpby5nAGs35_bgoVWo3ZBNmDbicAHnliCRhC8VKeSdr-8czxtmNDqPKMoLpV4fg1Z1byPwcswhS2VsX320WtyNeZ6-YOjRXIvZwv0VizTpO6jqq74Gnst_fpvtz1sK1Soca0z6U77w2I/s1600/ico-rss.jpg) no-repeat 0 2px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 11px;
border-bottom: dotted #ccc 1px;
}
.BD_title a:hover {
color:#990000;
text-transform: none;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLpby5nAGs35_bgoVWo3ZBNmDbicAHnliCRhC8VKeSdr-8czxtmNDqPKMoLpV4fg1Z1byPwcswhS2VsX320WtyNeZ6-YOjRXIvZwv0VizTpO6jqq74Gnst_fpvtz1sK1Soca0z6U77w2I/s1600/ico-rss.jpg) no-repeat 0 2px;
background-color: #E4E4E4;
display: block;
padding-left:22px;
} /*** 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. Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.

<!-- sarieadie | BLOG DESIGN script Jquery Flying Menu start -->
<script type="text/javascript" src="http://yourjavascript.com/1650568139/jquery-1-2-6.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1360340911/jquery-scrollto-1-3-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/6329101371/jquery-serialscroll-1-2-1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1016319351/coda-slider.js"></script>
<!-- arieadie | 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.

<!-- arieadie | BLOG DESIGN code start -->
<div id="bdrsslider">
<ul class="bdnav">
<li><a href="#label1">Widget</a></li>
<li><a href="#label2">Menu</a></li>
<li><a href="#label3">Post</a></li>
<li><a href="#label4">Jquery</a></li>
<li><a href="#label5">CSS</a></li>
<li><a href="#label6">Tip's</a></li>
<li><a href="#label7">HTML</a></li>
</ul>
<div class="bdrsscroll">
<div class="bdrsroll">
<div class="panel" id="label1"><h2>Widget</h2><div class="BD_title"><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>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/widget?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label2"><h2>Menu</h2><div class="BD_title"><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/menu?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

<div class="panel" id="label3"><h2>Post</h2><div class="BD_title"><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/post?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label4"><h2>jquery</h2><div class="BD_title"><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/jquery?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label5"><h2>seo</h2><div class="BD_title"><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/seo?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label6"><h2>Tip's</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

<div class="panel" id="label7"><h2>Html</h2><div class="BD_title"><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
</div>
</div>
<!-- arieadie | BLOG DESIGN code start -->

Keterangan Code

• Tulisan kode warna MERAH silahkan anda ganti dengan LINK URL BLOG ANDA.
• Tulisan warna BIRU ganti dengan label halaman blog anda. penulisan nama label sangat sensitif beda huruf saja tidak akan berpungsi.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com