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

Thursday, August 29, 2013

widget tabber random post per label

Widget random post per label dengan Jquery dengan sistem tampilan sliding, akan menambah tampilan halaman blog anda semakin lebih propesional. Tampilan widget sliding random post Jquery ini memang terkesan unik dan sangat langka untuk tampilan random post pada umumnya. Script dari widget ini menampilkan artikel postingan secara random dan mempunyai menu untuk memilih bagian label yang akan kita lihat. Oke saya beranggapan bahwa anda sudah lebih paham arti random post dari pada saya, saatnya kita menuju TKP dan lihat demonya melalui link dibawah ini.
untuk melihat demonya KLIK DISINI lihat bagian sidebar halamannya.


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 : Random Post Sliding
By : Rivai Silaban | Blog Design
Update : 29 Agustus 2013
******************************************/
*{
margin:0px;
padding:0px;
}
#bdrscontent{
margin:5px auto;
text-align:center;
width:300px;// Lebar widget
position:relative;
height:100%;
color:#444444;
font-size:13px;
font-family:"Century Gothic", Helvetica, sans-serif;
background-color: #FFFFFF;
}
#bdwrapper{
box-shadow:0px 0px 3px #aaa;
border:2px solid #fff;
width:230px;
overflow:hidden;
}
#rivai{
width:200px;
overflow:hidden;
}
.slbn{
float:left;
width:200px;
}
#navigationbd{
background-color:#e9e9e9;
border-top:1px solid #fff;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigationbd ul{
list-style:none;
float: left;
position: absolute;
z-index: 100;
top: 0px;
right: 0px;
}
#navigationbd ul li{
margin-left:3px;
padding-left:3px;
;
}
#navigationbd ul li a{
display:block;
background-color:#666666;
color:#FFFFFF;
outline:none;
text-decoration:none;
padding:5px 5px;
border:1px solid #333;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
border-radius:0 0px 7px 0;
text-shadow: 1px 1px #111;
font-weight: bold;
}
#navigationbd ul li a:hover,
#navigationbd ul li.selected a{
color:#999999;
background-color:#333333;
}
#rivai form fieldset{
border:none;
padding-bottom:px;
}
#rivai form legend{
text-align:left;
background-color:#333333;
color:#CCCCCC;
font-size:14px;
text-shadow:1px 1px 1px #000;
font-weight:bold;
float:left;
width:224px;
padding:5px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
font-family: Georgia, "Times New Roman", Times, serif;
}
#BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000099;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
text-align: left;
}
#BD_random_title a:hover {
color:#990000;
text-transform: none;
background-color: #CCCCCC;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
line-height:10px;
letter-spacing:0.1em;
text-decoration: 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. 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 random post start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fieldsetCount = $('#formElem').children().length;
var current = 1;
var stepsWidth = 0;
var widths = new Array();
$('#rivai .slbn').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#rivai').width(stepsWidth);
$('#navigationbd').show();
$('#navigationbd a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#rivai').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
}); });
</script>
<!-- Rivai Silaban | BLOG DESIGN script random post 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 id="bdrscontent">
<div id="bdwrapper">
<div id="rivai">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="slbn">
<legend>Tip's & Trik Blogspot</legend>
<span>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;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 id='BD_random_title' style='border-bottom: dashed #999 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="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 1 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE </legend>
<span>
<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 2 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 3 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/LABEL ANDA 4 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 5 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG /feeds/posts/default/-/LABEL ANDA 6 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 7 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 8 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 9 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 10 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>

<script src="LINK URL BLOG/feeds/posts/default/-/LABEL ANDA 11 ?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </span>
</fieldset>
<fieldset class="slbn">
<legend>JUDUL PAGE</legend>
<span>
</form>
</div>
<div id="navigationbd" style="display:none; ">
<ul>
<li >
<a href="#" title="TOMBOL LABEL 1 " >TOMBOL LABEL 1 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 2 ">TOMBOL LABEL 2 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 3 ">TOMBOL LABEL 3 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 4 ">TOMBOL LABEL 4 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 5 ">TOMBOL LABEL 5 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 6 ">TOMBOL LABEL 6 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 7 ">TOMBOL LABEL 7 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 8 ">TOMBOL LABEL 8 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 9 ">TOMBOL LABEL 9 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 10 ">TOMBOL LABEL 10 </a>
</li>
<li>
<a href="#" title="TOMBOL LABEL 11 ">TOMBOL LABEL 11 </a>
</li></ul></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN widget End -->


Kesimpulan

Lihat kode warna MERAH pada spoiler Code HTML silahkan ganti dengan URL blog anda dan nama menu anda ikuti sesuai tutorial yang tertulis.

Kode warna BIRU Judul page widgetnya, ganti tulisan pada kode dengan judul page, sesuaikan judul pagenya dengan label nya.

Kode warna HIJAU adalah nama tombol menu widgetnya, silahkan ganti sesuai dengan Nama Label blog anda agr lebih sinergis, dan untuk bagian tulisan warna HIJAU pada title samakan dengan nama label dan menu anda.

Kode tulisan huruf 10 pada script adalah jumlah tampilan judul post per label yang akan ditampilkan oleh widget ini.

Widget Sliding Random Post per label ini menganut sistem penulisan tag html yang EO Friendly dan Valid HTMl 5. Semua script dan penulisan kode HTML serta CSSnya sudah diuji kelayakannya begitu juga dengan lisesinya memakai DMCA Protected dan Commont 3.0

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.

Widget Sliding Random Post Per Label
Selasa, 29 Agustus 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 : 4:27 PM

2 comments :

  1. Salam Bang Rivai S..
    iDZIN SIMAK yah Bang di artikel yang baru dan sangat membantu
    Buat saya yg masih super newbie di blogging,.ini random posts yang
    Gimana tampilanya yah Bang..? Bang Rivai jarang ngasih gambaran..hkhkkh
    Tapi pasti niat baik ini sangat bermanfaat buat semua. salam sukses Bang

    OOT : Mau tanya Bang cara merubah tampilan avatar foto pada komentar
    gimana yah Bang..? seperti avatar foto komentar yang di blog Abang Rivai
    Keren dan kecil tampilanya mungkin sudah pasti bisa mengurangi beaban
    Loading,..sekalian cara membuat teks diatas kolom komentar dan ber Link
    Kalau gak sibuk dan gak keberatan mohon balas yah Bang..? terima kasih

    ReplyDelete
    Replies
    1. soal gambar ya.. tapi saya sudah buat link untuk melihat DEMO nya bang kan lebih bagus heheeh. Lihat tulisan warnah MERAH " Klik Disini " pada postingan diatas.

      Untuk Avatar Commentnya coba lihat kode :
      .avatar-image-container atau .avatar-image setelah ketemu kecilkan ukuran width:..px; dan Height:..px; nya.
      Untuk membuat tampilan sudutnya melengkung atau tidak persegi, silahkan sematkan kode :

      border-radius: 1px 2px 3px 4px;

      keterangan kode :
      1px adalah siku kiri atas, 2px siku kanan atas, 3px siku kanan bawah dan 4px siku kiri bawah.
      Semakin besar angka yang tercetak semakin bulat tampilan gambarnya.

      Untuk membuat pesan komentar yang seperti ini sabar ya bang saya akan posting, tapi saya sudah buat sih postingan tentang pesan komentar juga.

      Delete

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