Cara Membuat Menu/Submenu di Blog

Menu dan submenu atau yang lebih familiar dengan nama menu dropdown merupakan kelanjutan dari menu yang lainnya yang pernah saya entri.. Adapun yang saya maksud dengan menu dan submenu yaitu seperti gambar di bawah.

Adapun langkahnya, sama seperti kita membuat menu yang lainnya, yaitu:

1. Login dan masuk ke 'perancangan' -- 'edit HTML'
2. Cari kode ]]></b:skin> dan tempatkan script CSS di bawah sebelum kode tersebut (silakan copy)

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-container{position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvurXajBcn_W63dYk6vXRq-_Fu1IJobuB2yBw6NpXtKgb-sVC1uZEvwoORkkzy0h38laM_yY4r5ufkzl4ILm7AjVGug3srdPfF783xONjaJWfBNmMA4NcoJlSdsfFvA_YxOMRAaYZ_9nd/s0/menu-secondary-bg.png) left top repeat-x;margin:15px 0 15px 0}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:14px 15px 11px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvurXajBcn_W63dYk6vXRq-_Fu1IJobuB2yBw6NpXtKgb-sVC1uZEvwoORkkzy0h38laM_yY4r5ufkzl4ILm7AjVGug3srdPfF783xONjaJWfBNmMA4NcoJlSdsfFvA_YxOMRAaYZ_9nd/s0/menu-secondary-bg.png) left -140px repeat-x;outline:0}
.menu-secondary li li a{color:#fff;background:#E8202D;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{color:#fff;background:#F8424E;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:13px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
.wrap-menu-secondary .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsd3A_ll-_nfU0MVWb3rudJFamGCXfV5hGI_SBOynwvxl43mRODhf1H3dsQrPFog_Re59ZiRVc0JvxLGgrsUVv-TewcxW954f6kWidts2WA_duy0FnxoqidbZuB9F-rsLRWr9t6UYPOCDk/s0/menu-secondary-shadow.png&#39;) no-repeat bottom right}

3. Lalu cari kode </header> dan tempatkan kode HTML di bawah sebelum kode itu </header> atai atas kode </header>. atau terserah Anda mau dipasang dimana., silakan copy

<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>
 <li><a href='http://yukamraya.blogspot.com/'>Tutorial Blog</a></li></ul>
</div>

Keterangan : Ganti Tulisan Warna merah dengan url blog kamu
ganti tanda # dengan url yang dituju
ganti tulisan warna hijau dengan judul yang kamu suka

4. Save template. dan lihat hasilnya.
 Selamat mencoba

Read More

cara membuat sub menu ringan sangat di sidebar blog

Salam sehat sahabat blogger Indonesia kali ini YukamRaya 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 :

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://yukamraya.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>

KETERANGAN :
Warna biru = Silahkan di ganti sesuai keinginan
Warna ungu = Isikan dengan Script yang ingin di sisipkan
Warna hijau = Ganti dengan alamat blog anda

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 sesuai keinginan anda silahkan dihapus saja script recent postnya.

Semoga Berhasil

Read More

Cara Membuat Banner Tukar Link Pada Blog

Hai kawan blogger ...? posting kali ini mengenai cara membuat banner tukar link untuk meningkatkan traffic blog. Untuk membuatnya cukup mudah dan memasang banner pun juga mudah.

1. Langkah pertama yang perlu dipersiapkan yaitu membuat banner terlebih dahulu. Kawan - kawan dapat membuatnya melalui adobe photosop atau corel draw atau program lain yang dapat mendukung misalnya format gambar gif.
 2. Langkah kedua : mengupload gambar atau banner yang kawan buat tadi misalnya di photobucket, imageshack, namun lebih baik kamu upload ke picasa web album. Terkadang kalau di imageshack, misal sudah lama akun kamu tidak kamu upgrade, maka berubah jadi gambar kodok. :

3. Langkah ketiga yaitu membuat kode html banner
- Kode untuk menampilkan banner :
<a href="http://yukamraya.blogspot.com/ /"><img alt="A_B" src="http://i.picasion.com/pic53/2b92817a21dc2d33e1180471cfd4f7aa.gif
"/></a>
- Kode untuk menampilkan kode html dengan textarea
<textarea code="" rows="4" cols="21" name="">
<a href="http://yukamraya.blogspot.com//"><img alt="A_B" src="http://i.picasion.com/pic53/2b92817a21dc2d33e1180471cfd4f7aa.gif
"/></a>
</textarea>

Cara membuat banner tukar link mudah kan ? Jangan lupa ganti kode url menjadi kode url blog anda,serta ganti url gambar sesuai gambar anda.

Read More