Post Game: tab

Showing posts with label tab. Show all posts

Saturday, December 17, 2016

Cara membuat tulisan berjalan di tab

Cara membuat tulisan berjalan di TAB Browser/blogger

assalamualaikum(Ya ahli kubur) haha, ups...
oke sobat gimana kkabarnya nih..? alhamdulillah saya kali ini bisa posting lagi :D
moga aja besok juga masih dikasih umur buat posting lagi :D amien..
karna memang gak ada yang tau toh umur kita itu nyampe kapan..? bisa aja besok kita gak ketemu dzhur lagi, atau gak bisa ketemu sama Ashar lagi..?
nah maka dari itu perbanyaklah amal sholeh, rajin rajinlah bersembhayang, dan dekatkan dirimu dengan tuhanmu hehehe.. *upz haha kenapa saya malah ceramah..? hahha :D
aih ia lupa, saya kali inikan mau kasih informasi atau ilmu buat kalian hehhehe *upz haha kenapa saya malah ceramah..? hahha :D

okedeh kembali ketopik pembahasan, kali ini saya akan membuat atau memberi informasi atau ilmu dah, haha kepada sobat-sobat pengunjung blog ini,
sesuai judulnya, kali ini saya akan membahas tentang tutorial blogger, atau yang tepatnya tentang masalah tab. yah, kali ini sya akan mencoba untuk memberikan sedikit informasi untuk sobat semua
tentang bagaimana "Cara membuat tulisan berjalan di tab" untuk belogger,,. tapi entah kalo untuk wordpress haha,,..
alangkah bagusnya jika Tab situs kita berbeda dari Tab yang lain, mungkin lebih menarik perhatian haha dan mungkin pengunjung akan bulak-balik ke Situs kita haha :D
oh iya jika mau liat contohnya tinggal liat DEMONYA KESINI, tuh yang di atas, gimana bagus gak..?
tertarik gak sobat..?
jika tertarik okedeh saya akan memberitahu caranya, dan jika TIDAK tertarik, yah ngapain ngbuka postingan saya yang satu ini ..? -_- haha :D bener gak..?
okedeh cape basabasi mulu langsung aja saya kasih tau caranya...
simak dengan teliti yah, hhahaha :D lebay, padahal gampang kok sobat

1. masuk ke dasboard blogger sobat
2. pilih menu tata letak (untuk tampilan dashborad lama)
3. selanjutnya pilih "add a widget"
4. pilih menu "Html JavaScript"
5. copy kode dibawah ini

<script language=JavaScript>
var txt="________MonsterKids.Com__________";
var ekhancepetandunk=170;var fress=null;function gerakyuk() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
fress=setTimeout("gerakyuk()",ekhancepetandunk);}gerakyuk();
</script>

6. pastekan kode yang tadi dicopy kekotak add a widget tadi,(sya rekomendasikan jangan dikasih judul)
7. simpan widgetnya, dan lihat blogg sobat, hehe

gimana mudahkan sobat..?

****perhatian : ganti kata "________MonsterKids.Com__________" dengan katakata yang sobat inginkan untuk dijalankan di TAB blogger sobat tapi tanda kutipnya jangan di apuss.. OKE sobat.? :D

nah gimana apakah ada yang kesulitn..? pasti gak ada donk haha

okedeh terima kasih, sekian postingan saya kali ini, jika ada pertanyaan silahkan komentar dibwah atau langsung ke rizkyimam25@yahoo.com

*saya mohon keritik dari semua pengunjung untuk blogger ini agar blogger ini lebih bagus lagi,
*pengunjung bisa REQUEST dengan cara komentar atau mengirim email kesaya :)

Wssalamualikum wr wb.

Go to link Download

Cara Membuat Open New tab untuk Semua Link

Halo sahabat blogger !!! Jumpa lagi nih sama aq, hehehe...
Sekarang aq akan berbagi Cara Membuat Open New tab untuk Semua Link. Sebenarnya sih, cara yang satu ini sudah banyak yang tau... dan kebanyakan, hampir semua blog / website sudah menerapkannya. Tapi... bagi yang belum tau atau belum menerapkannya di blog sobat masing-masing, harap disimak ya... karena menurut aq ini penting untuk blog sobat. Kenapa aq mengatakan kalau ini penting ?!?! Karena, Sistem ini akan memperbanyak review halaman blog dan memperbanyak waktu kunjungan halaman blog sobat. Tidak usah panjang lebar, yup langsung aja sobat lakukan !!! Mudah kok caranya... :)

1. Login ke blogger.
2. Pilih Template => Edit HTML
3. Cari kode <head>
4. Kalau sudah ketemu, Copy kode di bawah ini... lalu pastekan di bawah kode <head>

<base target=_blank />

5. Save template.

Sekian tutorial singkat dariku, semoga bermanfaat. :)
Bye... bye...

Go to link Download

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Widget daftar isi merupakan salah satu yang tidak boleh ditinggalkan. Karena, site map atau daftar isi dapat menginformasikan kepada pengunjung apa apa saja yang di posting oleh blog tersebut. Ya, sebab daftar isi menampilkan semua artikel secara kesluruhan. Tapi ada juga daftar isi yang hanya menampilkan beberapa artikel. Contohnya widget daftar isi berdasarkan satu label.

Widget daftar isi kini sudah banyak di share oleh para blogger. Jenisnya pun juga sudah banyak. Ada yang diurut berdasarkan tanggal, ada yang menurut abjad, widget daftar isi berdasarkan label, dan ada juga widget daftar isi tampilan tab yang keren. Kali ini saya akan bahas lebih lanjut mengenai Widget Daftar Isi Tampilan Tab yang Keren.

Seperti gambar di atas lah tampilan widget ini. Dikiri terdapat Tab Tab yang menampilkan label dari blog, dan di kanan menampilkan judul posting. Keunggulan dari tab ini, pengunjung dapat memilih kategori posting mana yang ingin dia lihat. Jika diklik, tanpa loading di kiri widget sudah muncul judul posting pada label yang dipilih.

Bagus kan? Lihat live demo nya di Site Map blog saya ini. Pada daftar isi, juga sudah saya tambahkan CSS berwarna biru. Supaya kelihatan nyambung dengan tema warna blog Jona Rendra ini yang juga biru. Mau pasang widget daftar isi tampilan tab yang keren ini? Baca selengkapnya artikel ini.

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

1. Login ke blogger

2. Pada dashboard, pilih blog anda lalu masuk ke menu Entri

3. Klik Buat Entri, setelah itu masuk ke edit entri mode HTML (caranya klik saja tulisan HTML yang ada disamping Compose)

4. Copy kode dibawah ini, lalu paste tepat di bagian HTML entri tersebut.



<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#EBEBEC;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#D8D8D8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#676767;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #676767;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#000;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#D2D2D2;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #5C5C5C;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#4D4F4D;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>

5. Sekarang tinggal di kustomisasikan sendiri dengan mengganti url berwarna biru dengan alamat blog anda.

6. Terakhir klik Publikasikan dan selesai. Coba buka halaman daftar isi yang telah anda pasang tadi. Sudah muncul kan?

Ups, kode diatas ternyata kode dengan widget daftar isi tema berwarna putih abu abu. Widget daftar isi style biru kodenya seperti ini



<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>

Jangan lupa ganti url berwarna biru dengan url blog anda

Akhirnya selesai sudah Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Jadi, saya sudah berikan 2 tema warna daftar isi diatas. Tinggal pilih saja widget mana yang kelihatannya cocok dengan blog anda.

Widget ini memang sebaiknya di pasang di postingan. Ini dikarenakan cukup besar. Kalau dipasang di sidebar akan kurang menarik. Tetapi jika anda butuh widget yang dipasang di sidebar, mungkin Widget Daftar Isi Berdasarkan Satu Label akan cocok.

Merasa terlalu lebih banyak CSS yang ada pada widget ini? Mau yang polos? Widget Daftar Isi Berdasarkan Label Tampilan Ringan lah yang tepat. Itulah keseluruhan artikel Jona Rendra yang berjudul Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren, semoga dapat berguna untuk menghias blog anda. Biasanya postingan daftar isi itu diletakkan sebagai menu di menu horizontal. Seperti blog ini.

Jika ada kesulitan saat mengerjakan langkah langkah diatas, widget tidak muncul atau sebagainya, silahkan tanyakan lewat komentar.

Go to link Download

Cara Membuat Link Eksternal Otomatis Terbuka di Tab Baru

Kali ini saya akan membagi informasi bagaimana link eksternal secara otomatis terbuka di tab baru, caranya cukup mudah dan simpel, yuk cekidot

Masuk Dasbor blog anda
Pada Sebelah Kanan Buat Entri Baru, dan Sebelah kanannya lagi Buka daftar Entri
Pilih Template>> Edit HTML
Jangan Lupa Centang “Expand Template Widget”.
Cari kode script </body> (*gunaka ctrl+f untuk mempermudah pencarian).
Setelah ketemu kode </body>, silahkan copas (*copy-paste) kode script di bawah ini dan letakan di bagian </body> atau sebelum tag </body>.

<script type=text/javascript>
//<![CDATA[
jQuery(a).each(function() {
// Lets make external links open in a new tab. var href = jQuery(this).attr(href);
if (typeof href != undefined && href != "" && (href.indexOf(http://) != -1 || href.indexOf(https://) != -1) && href.indexOf(window.location.hostname) == -1) { jQuery(this).attr("target", "_blank");
}
});//]]></script>

Lalu Klik "Simpan template"
Selesai

Go to link Download

Cara Membuat Multi Tab Di Blog

Multi Tabs digunakan sebagai penghemat tempat untuk menaruh widget. Fungsi Multi Tabs Hampir sama dengan footer, Jika Footer Terletak dibawah dan Multi Tabs Terletak di sidebar dan sama-sama Tempat Menyimpan Widget yang tidak terlalu dibutuhkan.

Keuntungan dari multi tabs ini adalah tidak terlalu pusing untuk memasangnya, lebih stylish, Judul mudah diganti. Berminat untuk memasangnya?, Berikut Cara untuk memasangnya:

Silahkan Login Ke Blogger Anda.
Setelah itu, Klik Menu Template, Terlebih Dahulu Anda Backup Template Anda, Lalu, Klik Tombol Edit HTML.
Cara Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
Masukan Script Berikut ini dibawah kode ]]></b:skin> --> YBB Multi Tabs
Setelah itu Masukan Kode berikut ini Diatas Kode ]]></b:skin> :

/*----- YBB Multi Tabs Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgox8U_3A3_znETRwtZE2b3P1DwSB8KfzwengIuqrLwWqvXVRtdUxV09QtqrVt_OF6Xt8VAQqoi3IBpzqU4scVlhDcgM5qVeMkMCh2iipj15jt2QLTw6PdhObtLtbEDF-lk5NypmfN5_E_G/s1600/tabs-widget.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgox8U_3A3_znETRwtZE2b3P1DwSB8KfzwengIuqrLwWqvXVRtdUxV09QtqrVt_OF6Xt8VAQqoi3IBpzqU4scVlhDcgM5qVeMkMCh2iipj15jt2QLTw6PdhObtLtbEDF-lk5NypmfN5_E_G/s1600/tabs-widget.png) left -140px repeat-x;color:#797979;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Cari Kode Berikut ini:

<div class=column-right-inner>

Jika Tidak Ketemu Cari kode berikut ini:

<div id=sidebar-wrapper>
Setiap Template mempunyai Kode yang berbeda-beda.

Masukan Kode Berikut ini dibawah salah satu Dari dua kode diatas :

<div class=tabviewsection>
<script type=text/javascript>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class=tabs-widget tabs-widget-widget-themater_tabs-1432447472-id>
<li><a href=#widget-themater_tabs-1432447472-id1>About</a></li>
<li><a href=#widget-themater_tabs-1432447472-id2>Tags</a></li>
<li><a href=#widget-themater_tabs-1432447472-id3>Archives</a></li>
</ul>
<div class=tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id id=widget-themater_tabs-1432447472-id1>
<b:section class=sidebar id=sidebartab1 preferred=yes>
</b:section>
</div>
<div class=tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id id=widget-themater_tabs-1432447472-id2>
<b:section class=sidebar id=sidebartab2 preferred=yes>
</b:section>
</div>
<div class=tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id id=widget-themater_tabs-1432447472-id3>
<b:section class=sidebar id=sidebartab3 preferred=yes>
</b:section>
</div>
</div>
<div style=height:5px;clear:both;/>

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

thanks for Your-BelajarBLOG

Go to link Download

Cara Membuat Menu Tab View

Ngomong-ngomong menu tab view itu apa ya?.Pasti beberapa dari kalian ada yang nggak ngerti menu tab view,menu tab view itu bentuknya seperti gambar disamping,menu tab view memiliki kelebihan yaitu hemat tempat,yaudah biar gak kelamaan langsung aja

kita mulai tapi sebelum itu usahakan follow blog saya dulu kalo udah follow baru kita mulai:

1.Login ke akun blogger anda

2.Pilih tab rancangan

3.Pilih Edit html

4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"

5.Kemudian cari kode ]]></b:skin> (agar lebih mudah mencarinya gunakan f3)

6.Masukkan kode dibawah ini sebelum kode ]]></b:skin>

/* Menu Tab View

----------------------------------------------- */

div.TabView div.Tabs {widht:100%;

padding-top: 0px;

height: 24px;

overflow: hidden;

}

/* Menu Utama */

div.TabView div.Tabs a {

float: left;

display: block;

width: 110px; /* ukuran lebar menu */

text-align: center;

height: 30px; /* ukuran tinggi menu */

padding-top: 7px;

margin-right:4px; /* jarak antarmenu */

vertical-align: middle;

border: 1px solid #ccc; /* warna border menu */

border-bottom-width: 0;

margin:0px;

padding: 5px 0;

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

font-weight:bold;; /* besar hurup menu */

background-color: #4c4c4c; /* warna latar menu */

color: #FFFFFF; /* warna hurup menu */

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

}

div.TabView div.Tabs a.Active {

background-color: #FFFFFF; /* warna background menu aktif */

color: #000000;

}

div.TabView div.Tabs a:hover {

background-color: #999999; /* warna background menu hover */

color: #FFFFCC;

font-weight: bold;

}

/* Kotak Utama */

div.TabView div.Pages {

clear: both;

border: 1px solid #CCC; /* warna border kotak utama */

overflow: hidden;

background:#FFFFFF; /* background kotak utama */

}

div.TabView div.Pages div.Page {

height: 100%;

padding: 7px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad {

padding: 5px 0px;

font-size: 12px; /* besar hurup kotak utama */

}

/* tabview css end */

7.Pasang kode dibawah ini sebelum kode </head>

8.Kalo udah tinggal disimpan
LANGKAH DIATAS BELUM SELESAI SEKARANG KITA MULAI MEMBUAT KODE UNTUK MEMANGGIL TAB VIEW NYA

1.Login ke akun blogger anda
2. Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>

</div></div></form>
<script type="text/javascript">tabview_initialize(TabView);</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div>

7.Kalo udah tinggal disimpan
NB:Kode yang ditulis tebal bisa diedit sendiri

Semoga bermanfaat

Go to link Download

Post Game

Saturday, December 17, 2016

Cara membuat tulisan berjalan di tab

Cara membuat tulisan berjalan di tab

Monday, November 21, 2016

Cara Membuat Open New tab untuk Semua Link

Cara Membuat Open New tab untuk Semua Link

Wednesday, November 16, 2016

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

Tuesday, November 15, 2016

Cara Membuat Link Eksternal Otomatis Terbuka di Tab Baru

Cara Membuat Link Eksternal Otomatis Terbuka di Tab Baru

Sunday, November 13, 2016

Cara Membuat Multi Tab Di Blog

Cara Membuat Multi Tab Di Blog

Sunday, October 23, 2016

Cara Membuat Menu Tab View

Cara Membuat Menu Tab View