Widget tabview dengan jQuery dan CSS

Widget tabview dengan jQuery dan CSS

Tab view adalah salah satu widget yang cukup berguna terutama untuk menghemat halaman blog anda, Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. jika blog anda memiliki banyak gadget sebaiknya gunakan menu tabview ini untuk sedikit mengurangi tempat pada halaman blog anda yang terpakai. langsung saja berikut ini cara membuat menu tabview dengan jQuery dan CSS

1. Masuk Dashboard Blogger klik > Tata letak > Elemen Halaman.

2. Klik "Tambah Widget" lalu pilih "HTML / Javascript".

3. Paste seluruh kode berikut dalam widget.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

(Catatan: Jika Anda sudah menggunakan script jQuery pada template Anda, hapus saja kode seperti diatas.)

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9kMvzRaZ2PeFlhy8vIBN7PkfFxuDfiyJ_MntLhK4dhDCK5Bkgu03_Ou3knddePVbN_eZD-AsDwVb-WKvSxg5Os3E5hcW9BiEZijXCvp3yqgSPrcAr21GrdTDF5lGqSaeeZ5A16PsV7Y/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-8G7-NdpgfjZO8TLeWvqSpbXG1T5bEJ23Bp3AYaa4dLSnCx9ilrxQseEtB-NiqYjWCyCxcqx9-30GBi5kymMko764gHxedqD9RGsR9V1xJBqGOkaOYS83SySji0LRYWa6NEJWHXpxSNo/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkegMw9IsBJKBxGYGDX-CRSoNKXL_gzVrCUsSeaO9x_W_2LLKawg4LX94XoHH28QrRBH62pi9P9wlJYfBJUCSgoNGDE-o26ayMswOoUa5ylq_D098XsyO3ypp9bVq5XgY1mTl4RQjDXE/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Tab 3</a></li>
</ul>
<div id="content_1" class="content">

...isi tab view yang anda inginkan...

</div>
<div id="content_2" class="content">

...isi tab view yang anda inginkan...
 
</div>
<div id="content_3" class="content">

...isi tab view yang anda inginkan...

</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://defandaky.blogspot.com/">Dafiin Blog</a></span>
</div>

4. Ganti Tab 1, Tab 2, Tab dan 3 dengan teks Anda sendiri.

5. Ganti ...isi tab view yang anda inginkan... dengan konten Anda sendiri.

6. Simpan widget Anda.

Jika Anda mencari tiga widget Recent Posts, Random Posts juga Popular Posts widget menjadi satu bersama-sama seperti yang ditunjukkan pada screenshot di bawah ini, silahkan gunakan kode berikut:

 

 

<style>
/* Tabbed Menu CSS by defandaky.com */
 #tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}

/* Recent, Random & Popular Posts CSS by defandaky.com */
#featured { color:#000;  margin: 1px 5px; line-height:1.5em;  font-size:13px}
#featured ol{ margin:0 15px; padding:0}
#featured li{border-bottom: 1px dashed rgba(0, 0, 0, 0.1);font-family: "Droid Sans",arial,sans-serif;font-weight:normal;font-size: 12px;line-height: 1.2em; margin:0 5px; padding:0 0 0.25em 0px}
#featured ol li a{color:#333; text-decoration:none}
#featured ol li a:hover{color:#dc0771; text-decoration:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="terbaru" class="tab active">Recent</a></li>
<li><a href="javascript:void(0);" title="pilihan" class="tab">Random</a></li>
<li><a href="javascript:void(0);" title="populer" class="tab">Popular</a></li>
</ul>
<div id="content_1" class="content">
<script type="text/javascript">
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");

    document.write(""+posttitle+"");
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

    if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('');
         document.write(postcontent);
          document.write('');}
      else {
          document.write('');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
          document.write('');}
}
}
}
</script>
<script style='text/javascript'>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<div id="featured">
<script src='http://defandakyw8.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<span id=rcw-cr><a href="http://defandaky.blogspot.com/search/label/Widget?max-results=10">Lihat Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
</div>
<div id="content_2" class="content">

<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('<ol>');
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 = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<div id="featured">
<script src="http://defandakyw8.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-script&start-index=1&max-results=500&callback=randomposts" type="text/javascript"></script>
<span id=rcw-cr><a href="http://defandaky.blogspot.com/search/label/Widget?max-results=10">Lihat Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
 
</div>
<div id="content_3" class="content">
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://defandakyw8.blogspot.com";
</script>
<script type="text/javascript">
/*
 * Popular post or most comment for blogger
*/

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');document.write('<br/><span id=rcw-cr><a href="http://defandaky.blogspot.com/">Dafiin Blog</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>');
</script>
</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://defandaky.blogspot.com/">Dafiin Blog</a></span>
</div></div>

Membuat perubahan setiap tab.

Recent Posts : Jika Anda ingin menampilkan tanggal, ringkasan pos dan jumlah posting silahkan mengubah nilai-nilai seperti yang ditunjukkan dalam warna merah untuk tab recent post.

Random Posts : Ubah numofpost = 10; menjadi sesuai kebutuhan anda berapa banyak random post yang ingin ditampilkan.

Popular Posts : Tampilkan posting populer kemudian mengubah maxshowresult = 5 sebagai acara dalam warna ungu untuk setiap tab untuk populer posting.

Ubah semua url http://defandaky.blogspot.com dengan link blog anda.

Semoga berguna dan bermanfaat

Widget tabview dengan jQuery dan CSS


Widget tabview dengan jQuery dan CSS

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Columbia Mary pada tanggal Sunday, August 11, 2013