Cara Membangun Blog - Tips Trick Internet dan Komputer

Cara membuat sub menu ringan sangat di sidebar blog

Salam sehat sahabat blogger Indonesia kali ini Bungas Selalu Berbagi  menuliskan sebuah artikel yang berjudul cara membuat sub menu ringan sangat di sidebar blog. Cara ini mempermudah kita untuk membuat blog menjadi teratur dan tidak memakan tempat sehingga pengunjung bisa dengan cepat mengetahui apa saja yang ada di tampilan blog kita.Selalin membuat blog menjadi teratur dari pengalaman saya cara ini juga lebih meringankan loading blog sehingga membuat pengunjung terasa nyaman saat mengklik - klik isi blog anda. Okeh tanpa perlu basa basi yang panjang langsung saja sahabat ikuti langkah berikut ini :

menu sidebar









   


Pertama : Login dulu ke blog anda

Kedua : Pilih Tata Letak

Ketiga : Tambahkan Gadget Kemudian pilih HTML/Java Script

Keempat : Copy dan Paste script di bawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Recent Post</a>
<a>MENU 2</a>
<a>MENU 3</a>
</div>
<div style="width:298px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<div style="overflow:auto; width:autopx; max-height:autopx; padding:autopx;">
<style>
img.recent_thumb {padding-right:20px;padding-left:padding-bottom:0px;0px;width:50px;height:5opx;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:11px;font-color:green;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;padding-left:0px;padding-right:0px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:10px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://www.jahetbungas.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 2 = ISI DENGAN SCRIPT ANDA
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 3 = ISI DENGAN SCRIPT ANDA
</div>
</div>
</div>
</div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><a href="http://jahetbungas.blogspot.com/2013/04/cara-membuat-sub-menu-ringan-sangat-di_23.html"><i><code>Get Widget</code></i></a>

KETERANGAN :
Warna biru = Silahkan di ganti sesuai keinginan
Warna ungu = Isikan dengan Script yang ingin di sisipkan
Warna hijau = Ganti dengan alamat blog anda
Warna merah = script Recent Post Disana saya hanya mengkosongkan MENU 2 dan MENU 3 sedangkan MENU 1 saya isikan dengan Recent Post Otomatis. Jika anda ingin mengganti Recent Post dengan yang lain gantilah yang berwarna merah dengan keinginan anda silahkan dihapus saja script recent postnya. Semoga Berhasil +Bungas Zahid


31 Komentar untuk "Cara membuat sub menu ringan sangat di sidebar blog"

waahh mantep ni, maju terus untuk blog jahet...
#kunjung balik yah

ayoo tukar link lagi, blognya udh tak pasang... pasang balik yah...

http://pinsukses.blogspot.com/

Nahh ini nih blog yang hasur di kunjungi tiap hari... postingannya bermanfaat banget

nah skarang terpake dech sub menu ini, hehehe, aku dach gnti template het, mohon kunjungi kasi komentar hehehe
#di tunggu

mau tanya kalo mau posting di sub menu gimana?

@edukati kalau sobat ingin posting di sub menu . . tinggal di isi saja yang semula ISI SCRIPT ANDA menjadi isi postingan sobat . . . :)

wahh sangat membantu nihh gan artikelnya :)
Mampir yahh >>>> http:/projectfamily42.blogspot.com/

nah ini kan versi yg add gadget .... kalau untuk versi yang template , bagaimana cara menerapkannya ???
,
but, nice post kawan....
salam kenal.

Ini dia yang dicari
nice (y)

mampir yah http://chelseaindonesia1905.blogspot.com/

Udah saya pasang memang sub menu keren juga ya, makasih sobat.

Kapan2 kunjung balik ya buat nimba ilmu baru hehe, makasih sebelumnya.

mantep isi blog... lanjutkan
hahaha

terima kasih sahabat bungas semua . . . .

@Athe Safaatsama-sama sobat . . . terima kasih atas kunjungan dan komentar sobat

gan, agar widget iklan flash ringan gimana caranya?

Setau saya sob iklan itukan tergantung dari penyedia jasa iklan. Nah script iklan yang digunakan berbeda-beda . . kalau script adsense sih ringan sob. Tapi kalau seperti iklan bidvestiser itu lumayan loading. . saya kurang tau juga tentang itu . . terima kasih sudah mampir . .saya akan mencari tau dan akan menuliskannya dikemudian hari . . ^^

untuk adsense idnetwork berat atau ringan sih? :D

kalau kaya ads Idnetwork dan google rata-rata ringan. . . tidak membuat blog loading lama

Back To Top