Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog

 Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog - Menu tab view di blog adalah menu yang mempunyai isi widget yang berbeda dalam setiap tab menu, Kurang lebih seperti itulah definisi yang saya ngerti dan pahami tentang menu tab view. Karena di sini saya telah membuat dan memasangnya di blog DEMO saya.

 Fungsi dari menu tab view ini juga bisa untuk menghemat tempat dalam penempatan widget-widget yang di pasang di sidebar maupun dimana saja pada tata letak blog. Sebab dalam menu tab view ini bisa di isi dengan tiga widget sekaligus atau lebih dalam satu kotak atau kolom.

 Tampilan dari menu tab view ini sekilas mirip dengan menu-menu yang lain, Namun perbedaanya menu tab view ini yang sering di pasang pada sidebar blog dan mempunyai tampilan yang dinamis dan ringkas. Dalam blog DEMO yang saya buat, Menu tab view ini sudah saya isi dengan tiga widget. Diantaranya ada Recent Post (Posting artkel terbaru), Popular Post dan Label Claud (Kategori).

 Ke-unikan dari menu tab view ini adalah semua widget tersebut akan berada pada satu kolom atau kotak, Efeknya yaitu widget akan muncul sesuai dengan tab menu yang sobat klik atau pilih. Hebatnya lagi sobat bisa menggantinya dengan widget-widget yang lain sesuai dengan keinginan sobat.

 Agar sobat tidak bingung dan penasaran lagi tentang bagaimana tampilan dari menu tab view ini, Di sini saya buatkan screenshot gambar dari menu tab view yang saya maksud. Dan sobat juga bisa melihatnya secara langsung pada blog DEMO saya.

DEMO

 Cara pemasangan di blog sangatlah mudah, Karena kita tidak usah repot-repot Edit HTML dalam template blog yang mungkin bisa memakan banyak waktu dan kesulitan dalam edit template blog. menu tab view ini nanti akan kita pasang di sidebar blog dengan cukup hanya melalui Tambah Gadget dalam Tata letak.

 Jika sobat tertarik untuk membuat dan memasang menu tab view ini di blog sobat, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login/Masuk >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Sobat pilih dan klik Menu >> Tata Letak >> kemudian klik >> Tambah Gadget >> Lalu pilih dan klik tanda + pada >> HTML/JavaScript.
3. Langkah selanjutnya, Silahkan sobat Masukkan semua kode script berikut ke dalam kotak  HTML/JavaScript.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 83px; /* 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:#000000; /* 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: #3d85c6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffff; /* 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>Terbaru</a>
<a>Popular</a>
<a>Label</a>
</div>
<div style="width:255px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<script src="http://kucopas.googlecode.com/files/Recent%20Post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
 [ <a href="http://kuc0pas.blogspot.com/2012/09/cara-membuat-menu-tab-view-tanpa-edit.html" target="blank"><b><font color="green">Get Widget<font></font></font></b></a> ]
</div>
</div>
<div class="Page">
<div class="Pad">
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://kuc0pas.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<div id="w2bFlashContent">
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://kuc0pas.blogspot.com/", /* ganti dgn alamat blog sobat */
color          : "000000", /* warna link menu claud  */
hoverColor     : "0000FF", /* hover link menu claud*/
backgroundColor: "transparent", /*  background claud*/
size           : 10, /* ukuran font claud*/
speed         : 100, /* kecepatan animasi claud*/
width          : 210, /* lebar label cloud animasi */
height         : 200 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://kucopas.googlecode.com/files/Label%20Cloud.js"></script>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Jika semua kode sudah sobat taruh dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan:

• Warana ORANGE adalah keterangan dari menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna MERAH adalah kode warna dan ukuran dari tampilan menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna BIRU MUDA adalah Judul bagian atas dari menu tab view.

• Warana PINK adalah ukuran lebar dan tinggi kotak widget dari menu tab view.

• Warna BIRU adalah Kode widget yang ditampilkan  (Recent Post, Popular, Label) pada menu tab view, Sobat bisa menggantinya dengan widget blog atau apapun yang sobat inginkan.

• Warna HIJAU silahkan sobat ganti dengan URL blog sobat.

 Sampai disini saya rasa sobat sudah berhasil membuat dan memasang menu tab view tanpa edit html di blog. Sobat bisa bereksperimen sendiri untuk mendapatkan ukuran maupun tampilan warna dari menu tab view tersebut agar menjadi seperti yang sobat inginkan. Jika sobat menemui kesulitan, Silahkan bertanya dalam form komentar.

 Semoga artikel tutorial blog tentang cara membuat menu tab view tanpa edit html template blog ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Menu Slide Melayang di Pinggir Blog

  Cara Membuat Menu Slide Melayang di Pinggir Blog - Pada posting sebelumnya saya share artikel tentang Cara Menu Drop Down Horisontal Melayang Di Blog, Dan kali ini saya akan berbagi lagi trik tentang Cara Membuat Menu Slide Melayang di pinggir blog.

 Fungsi Menu Slide Melayang di Pinggir Blog ini bisa sangat simpel dan mempercantik untuk blog sobat, karena menu ini cuma kelihatan judul menunya saja. Namun bila mouse diarahkan pada menu ini maka akan terjadi open slide dan akan memperlihatkan semu menu yang ada di dalamnya.

 Oke kita langsung saja ke intinya saja, Bagi sobat yang ingin tahu tentang Cara Membuat Menu Slide Melayang di pinggir blog, Silahkan sobat ikuti panduan dan langkah-langkahnya dibawah ini:

1. Silahkan >> "Login/Masuk" >> ke Blog sobat.

2.  Pilih >> "Rancangan" atau pilih >> "menu Template" pada Tampilan baru Blogger, Kemudian pilih >> "Lanjutkan" pilih >> "Edit HTML".

3. Back up template , untuk antisipasi kalau gagal saat Edit Template.

4. Jangan lupa sobat Centang >> "Expand Template Widget".

5. Langkah selanjutnya sobat cari kode </head>
Gunakan CTRL+F untuk mempermudah pencarian.

6. Kemudian Taruh semua kode script dibawah ini, tepat diatas atau sebelum kode </head>

    <script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>

    <script>

    YOffset=150;

    XOffset=0;

    staticYOffset=30;

    slideSpeed=20

    waitTime=100;

    menuBGColor=&quot;red&quot;;

    menuIsStatic=&quot;yes&quot;;

    menuWidth=120;

    menuCols=3;

    hdrFontFamily=&quot;verdana&quot;;

    hdrFontSize=&quot;2&quot;;

    hdrFontColor=&quot;black&quot;;

    hdrBGColor=&quot;#FF0000&quot;;

    hdrAlign=&quot;left&quot;;

    hdrVAlign=&quot;center&quot;;

    hdrHeight=&quot;15&quot;;

    linkFontFamily=&quot;Verdana&quot;;

    linkFontSize=&quot;2&quot;;

    linkBGColor=&quot;white&quot;;

    linkOverBGColor=&quot;#FFFF99&quot;;

    linkTarget=&quot;_top&quot;;

    linkAlign=&quot;Left&quot;;

    barBGColor=&quot;red&quot;;

    barFontFamily=&quot;Verdana&quot;;

    barFontSize=&quot;2&quot;;

    barFontColor=&quot;white&quot;;

    barVAlign=&quot;center&quot;;

    barWidth=20; // no quotes!!

    barText=&quot;MENU&quot;;

    // ----- Mulai Edit Menu

    ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu

    ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]

    ssmItems[2]=[&quot; About Me&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[3]=[&quot; Tutorial Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[4]=[&quot; Tips Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[5]=[&quot; Buku Tamu&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;_new&quot;]

    ssmItems[6]=[&quot; Trik Facebook&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

    ssmItems[7]=[&quot; Sport&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

    buildMenu();

    //----- Selesai Edit Menu

    </script>

7. Silahkan sobat klik >> "Pratinjau" (Preview), jika hasilnya sudah seperti yang sobat inginkan, kemudian klik "Simpan" dan lihat hasilnya.

Keterangan:

• Warna BIRU ganti dengan Judul Menu sobat.

• Warna MERAH ganti dengan URL link sobat.

 Semoga tutorial tentang Cara Membuat Menu Slide Melayang di Pinggir Blog, Sangat bermanfaat untuk sobat KUCOPAS semua.

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Menu Drop Down Horisontal Melayang Di Blog

  Cara Membuat Menu Drop Down Horisontal Melayang Di Blog - Kali ini saya akan share artikel tentang Cara membuat Menu di Blog, Namun menu yang akan saya kasih triknya ini sangat mudah untuk membuat dan memasangnya di blog, karena sobat tidak akan menggunakan Edit Template, cukup hanya dipasang pada Tata Letak Atau Rancangan Blog saja, Menu yang saya maksud adalah Menu Drop Down Horisontal Melayang Di Blog.

 Untuk Cara Membuat Menu Drop Down Horisontal Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
1. Silahkan >> "Login/Masuk" ke akun blog sobat.

2. Kemudian pilih >> "Rancangan" atau "Tata Letak" >> "Tambah gadget", Lalu pilih >> "HTML/ java script".

3. Langkah selanjutnya silahkan sobat masukkan semua kode script berikut di bawah ini:

<style type="text/css">

#kucopas ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kucopas li li a:hover, #kucopas li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMaDN1P0GmkH-Gqbr1BRw2tEqdTcVpjyZezw8RKH39OYhOXPPujRYJYyut5mJFQHXT7gqlx7QEhaWDnPz68rNYhAmZnwFvH1Rcccfd6JaTQ9jX_v5RrNxfGTApsbDWhjJ1-dVpbjkbIKp/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}

</style>

<div id='kucopas'>

<ul id='kucopas'>

<li><a href='http://kuc0pas.blogspot.com/'>Home</a></li>

<li><a href='Ganti link sobat' target='_blank'>Daftar Isi</a></li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>Download</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Download Aplikasi</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Game</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Icon</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download MP3</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Software</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Template</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>VIDEO</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>VIDEO FILM</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO ORKES</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO LAGU</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' target='_blank'>Tips And Triks</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Tips Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Facebook</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Handpone</a></li>

<li><a href='Ganti link sobat' target='_blank'>Pernak-pernik Blog</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/'>Tutorial Blog</a>

<ul class='children' target='_blank'>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Photosop</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' title='tv online' target='_blank'>Tv Online</a>

<ul class='children'>

<li><a href='Ganti link sobat'>INDOSIAR</a></li>

<li><a href='Ganti link sobat' target='_blank'>RCTI</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'><blink>Tukar Link Blog</blink></a></li>

<li><a href='www.geonggeong.com' title='GEONG GEONG' target='_blank'><blink>GEONG GEONG</blink></a></li>

</ul>

</div>

4. Silahkan sobat Simpan dan Lihat hasilnya.

Keterangan:

• Silahkan sobat ganti Link Url nya yang berwarna PINK dengan URL yang sobat inginkan.
•  Warna MERAH adalah Menu yang akan di tampilkan, silahkan sobat ganti.

 Semoga artikel tentang Cara Membuat Menu Drop Down Horisontal Melayang Di Blog, sangat bermanfaat untuk sobat KUCOPAS semua.

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Menu Di Bawah Header Blog

 Cara Membuat Menu Di Bawah Header Blog - Hallo sobat, Selamat berkunjung ke blog saya KUCOPAS yang Ndeso ini. hehehe... Setelah kemarin saya share dan posting Tips dan Trik tentang Cara buat Menu Vertikal Dengan Icon/gambar, Sekarang saya akan kasih tips dan trik lagi buat sobat semua tentang Cara membuat menu dibawah header blog.

 Pada  menu dibawah header blog yang versi ini kelebihannya adalah ketika pointer mouse di arahkan, maka hasil nya akan tampil menu-menu lainnya yang mengarah ke bawah alias Menu Horisontal DropDown, Seperti yang sobat lihat di gambar dan pada menu Blog KUCOPAS ini.

Gimana.??? Sobat tertarik dan ingin membuat nya.!!!
Oke sobat, Mari kita langsung menuju ke TKP, hehehehe...
Langkah-Langkah yang harus sobat lakukan untuk membuat menu dibawah header blog adalah:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih dan klik Menu >> Template >> Edit HTML >> Lanjutkan.

3. Jangan lupa sobat Centang pada >> "Expand Widget Templates".

4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian taruh Kode Script di bawah ini tepat diatas atau sebelum kode ]]></b:skin>

 #catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60JNJjye0EwEGPjG4qdf5qeR91CVOOPLQWRHmzhlYJ4ITaGpucdzHXKoEwbYTKLkAYJRrA6ubtu0yB8t8tgBwVG1Qzzh56ksdvbpv6GTpYJ0HiyEhtXX6sKT1tuYmNYaQcke2yPkNdb6V/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi914NiSwBOY0jdlxHHddZWOM0y36z_wyXb354IHuVKl82sGMyTRtYSNlG1TZAaR54YoQ4nQP1lHt1baO8d8nk7sUNMBLot8pZTMe5rN72e5uhGXmXYswei_e966vhQv82y31kZR4mMqfnW/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT4-zvkuj6f8hyphenhyphenHYZADPazQNMNnA3w0M34giqGwK_cB5WNK_B875r5VWZGlkfCzC4FLZw-nbozMWtKkShcb9mYOj4HZchAjI47SR4LXslDZzwbKzaIZrthVq_QA_3pkUzZH69Q_uAdKpZ/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT4-zvkuj6f8hyphenhyphenHYZADPazQNMNnA3w0M34giqGwK_cB5WNK_B875r5VWZGlkfCzC4FLZw-nbozMWtKkShcb9mYOj4HZchAjI47SR4LXslDZzwbKzaIZrthVq_QA_3pkUzZH69Q_uAdKpZ/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}


#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Catatan:

• width:1000px; adalah Ukuran Lebar menu, Silahkan sobat ganti nilainya agar sesuai dengan ukuran lebar template blog sobat.

5. Jika sudah, Masih dalam Edit HTML Template, Silahkan sobat cari lagi kode <div id='content-wrapper'> (Gunakan CTRL+F  untuk mempercepat pencarian).

6. Kemudian copy kode dibawah ini dan paste-kan tepat di bawah atau sesudah kode <div id='content-wrapper'>

 <div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='http://NAMA LINK BLOG ANDA'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</div>
</div>
<div class='clear'/>

Catatan:

• Your-Link-Here Ganti dengan Link target tujuan isi menu sobat.
• Link-Title Ganti dengan title yang sobat inginkan.
• Link-Name Ganti dengan Nama menu sobat yang ingin di tampilkan.

7. Setelah sobat selesai mengedit, Silahkan sobat klik >> Pratinjau atau Preview dulu sebelum di SAVE template-nya, Lalu lihat hasilnya. Jika sudah berhasil dan cocok seperti yang sobat inginkan, Jangan Lupa di Save atau Simpan yach...

NB:

 Jika sobat tidak menemukan kode yang dicari template blog sobat, Berarti cara di atas tidak berlaku untuk Template blog yang sobat gunakan. Namun sobat masih bisa memasangnya di blog sobat.

Caranya:

• Masuk >> Dasboard >> Tata letak >> Tambah Gadget >> pilih >> HTML/JavaScript >> Taruh semua kode script yang ke dua diatas di dalam kotak HTML/JavaScript >> Simpan dan lihat hasilnya.

 Semoga artikel tutorial blog yang membahas tentang Cara Membuat Menu Di Bawah Header Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. selamat Berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Menu Dengan Icon Gambar Di Blog

 Cara Membuat Menu Dengan Icon Gambar Di Blog - Setelah kemarin saya posting artikel tentang trik Cara buat Daftar Isi Dengan Label Tertentu Di Blog, Dan kali ini saya akan berbagi  artikel tentang trik lagi, Tentunya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik. Caranya yaitu dengan menambahkan Menu Vertikal Dengan Icon atau gambar.

 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilannya dengan icon gambar.

 Nah sekarang saya punya trik untuk sobat semua supaya tampilan menu di blog sobat jadi lebih menarik dan bagus lagi, Sobat bisa membuat dan memasang Menu Vertikal Dengan Icon gambar.


 Agar sobat tidak penasaran dengan tampilan menu yang menggunakan icon gambar, Sobat bisa melihat contoh gambar screenshot di bawah ini, Atau melihat langsung pada blog DEMO KUCOPAS.

DEMO

 Jika sobat sudah tidak sabar lagi ingin membuat dan memasang Menu Vertikal Dengan Icon gambar di blog sobat, Nanti saya akan kasih tahu caranya. Karena caranya terbilang sangat mudah sekali untuk di pahami, Asalkan sobat mengikuti langkah-langkahnya yang akan saya jelaskan dengan cermat. Okelah kalau begitu kita langsung saja menuju ke TKP. huahh...

Berikut langkah-langkahnya cara membuat dan memasang Menu Vertikal dengan Icon Gambar di Blog:

1. Silahkan sobat >> Login atau Masuk >> Ke Blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blog baru, Pilih menu >> Tata Letak >> Tambah Gadget >> HTML/Java Script.

3. Kemudian masukkan semua Kode di bawah ini pada kotak HTML/Java Script.
Masukkan semuanya dan jangan sampai ada yang terlewatkan ya sobat.

<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLUo9bBRDHzEYfl2iXmf4f_nBr9WYNzZpBvrJ-NhaiSTj-rePutDNaSuhxrXZ997ZmSFXNpQisFwdTq4wjS0CcHBRdnBzf5Pg5MoOsQUCd3jI7o7YGsyCwqT5n3ze9PAsNcXeSxO6Iq3c/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Daftar Isi</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Download Template Blog</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwItpoUtvHaTH6YJWcZKY9o6_hmfEJJ-idTLXydIeuvFzMsFVsUa2PSTeUCjUK_Q8nWnDGPK7BBcVlBhqCbVMAPW5wnidPm39oqRZ03k9TcX8LX_9AuiQhNr05gIxaeUUs9_h5GWdF-o8/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg01mhnU4PkC5LRXKA09QfeLxS5JKFNJoKQblaG-gdyG19qDFnmboOUpqkj9oXE5qV8_oODow12sQQ05fbkhDRn-vp787_S7N1wzUslwPB-LnKAVXnr2oUJY9h0SNcxssHwkqdq8jOilPDK/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVpD9SczL20EPQI9uXcYbKWxfhx8P31QsyAQb4wXcSrDFuY8mdQbHZtSXS4WQH4pScXo6dUEL-PY14Re75Wm5I1SwbJa_HJVUKTqNrpR739lcx_Mk6gdkWROkO2mPGPuqp0U8oaihPGpP/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Feedburner</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Kumpulan Icon</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

4. Setelah semua kode sudah sobat masukkan pada kotak HTML/Java Script, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan :

• Berikut keterangan beberapa Kode yang bisa sobat edit atau ganti:

- Warna Biru silahkan sobat ganti warna backgroundnya sesuai dengan selera sobat.

- Warna Pink silahkan sobat ganti dengan URL Icon gambarnya sesuai dengan keinginan sobat.

- Warna Hijau silahkan sobat ganti dengan alamat URL tujuan atau target Menu.

- Warna Merah silahkan sobat ganti dengan Nama Menu yang ingin sobat tampilkan.

 Jika sobat tidak punya atau belum punya alamat URL Icon atau gambar, Silahkan Sobat bisa lihat dan pilih-pilih Kumpulan Icon Keren DISINI. Sobat bisa memodifikasi icon atau gambarnya sesuai dengan keinginan dan selera sobat.

 Semoga tips dan trik blog tentang Cara Membuat Menu Dengan Icon Gambar Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...