Okeh kali saya akan membahas yang pernah aku bahas waktu dulu cara membuat menu tab view di blog dengan persi terbaru editan saya yang bisa di gunakan pada blog atau website anda bisa lihat menu tab view di samping sebelah saya kurang lebih tampilannya seperti itu bila anda kurang suka dengan warnya bisa kamu edit sesuway warna blog anda sekaligus panjang dan lebar nya menu tab view.kan kadang template blog kadang berbeda ukuran ukuran persegi atau panjang dan lebarnya maka dari itu saya akan menjelaskan cara membuat menu tab view dengan sesuwai template anda atau blog anda di bawah ini.menu tab view itu sangat berguna dan banyak di gunkan para blogger untuk Memasang atau Memasukan menu Kedalam Menu Tab View seperti ini
ENTRI PAPULER
MENU LABELS
BLOG ARCHIVE
MENU COMMENTS
Biyasanya dengan ENTRI PAPULER , MENU LABELS , BLOG ARCHIVE MENU COMMENTS agar blog jadi lebih menu Seo friendly dan lebih memperluwas halaman blog kita dengan adaya menu tab View di blog kita ,emang menu Tan View Itu sering dan banyak di gunakan oleh para blogger banyak yang meyukai menu tab view untuk membuat blog nya jadi lebih mirip blog Seo friendly.bila anda tertarik dengan menu teb view yang akan di berikan ke pada anda ,maka ajangan anda siasiakan ke sempatan ini cara membuat menu tab view di blog atau website ,saya kan simak cara dengan di bawah ini
A Kamu pergi sepertibiyasa pergi ke blogger dan pilioh menu Template dan pilih menu Edit Html
B Kemudian tekan kiboar CTRL+F selanjutnya cara kode</head> dan letakan kode di bawah ini di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
C Dan anda cari lagi kode ]]></b:skin> an letakan kode di bawah di atas menu ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 101px; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #000000; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #141414; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
D Kemudian anda lalu save atau simpan dan anda kemudian pergi kehalaman blogger pilih menu dsabor dan pilih menu Teta Letak dan anda pilih aja pilih menu Tambahkan Gagdet dan HTML/javascript
E Dan selanjutnya masukan kode script di bawah ini ke kotak menu HTML/javascript seperti gambar di bawah ini namanya kosongkan aja nya...!!!
G Kemu langsung ajah simpan dan lihat hasil nya mantep coy bila ada mau tau cara Memasukan Menu Ke Dalam Menu Tab View Klik Sini Aja...Bro!! bila ada yang mau di tayakan ke pada saya Cara Membuat Menu Tab View di Blog yang belum tau cara nya atau belum cukup ada yang kurang jelas kami bisa membantu anda atau menayakan silah kan berkomentar di bawah ini semoga saya daniblogger bisa membantu anda.dalam kesulitan Cara Membuat Menu Tab View di Blog .
F Dan masukan kode ini di kotak HTML/javascript paling bawah jangan yang atas itu dalam untuk judul menu nya kalau bisa jangan di kasih nama biyarkan kosong aja.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 310px;">
<a>Labels</a>
<a>Tab 2</a>
<a>Comment</a>
</div>
<div class="Pages" style="width: 310px; height: 450px;">
<div class="Page">
<div class="Pad">
MENU 1
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 2
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
G Kemu langsung ajah simpan dan lihat hasil nya mantep coy bila ada mau tau cara Memasukan Menu Ke Dalam Menu Tab View Klik Sini Aja...Bro!! bila ada yang mau di tayakan ke pada saya Cara Membuat Menu Tab View di Blog yang belum tau cara nya atau belum cukup ada yang kurang jelas kami bisa membantu anda atau menayakan silah kan berkomentar di bawah ini semoga saya daniblogger bisa membantu anda.dalam kesulitan Cara Membuat Menu Tab View di Blog .
Post a Comment