Sample Menu

About Me

Seseorang yang awalnya mengenal Blogger dengan sebelah mata tak lebih, namun sekarang saya berusaha untuk menggeluti Blogger semaksimal mungkin agar lebih memaksimalkan ilmu yang diperoleh dan Re-Share dan tentunya untuk lebih memaksimalkan Side Income dari Online.

Dan kaitan dengan diatas, sejauh ini saya telah menjadi Blogs Owner  untuk Blog-blog yang tersebut dibawah ini :

1.  Dian Motor Cell
2.  Gallery Midi
3.  Panduan Kaligrafi
4.  Refferensi Situs Pilihan
5.  Serba Gratis
6.  Herdiz72 - Blog Pribadi
7.  Desa Karang Sinom - Blog Desa
8.  Blog Directory dan Backlinks
9.  Baclink Top Indo
10.  Percakapan Bahasa Inggris Idiomatic  

Dan Alhamdulillah semua Blog diatas sudah menghasilkan & otomatis menambah pundi-pundi $$ ku.

Salam Blogger Sukses !!!!
herdiz72

Read More »

Label: About me

Cara Mudah Dan Cepat Membuat Menu d'Tree di Blogspot

Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti sudah tidak asing lagi dengan yang namanya menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Letakkan kode/ script berikut di atas kode </head>
   <pre class="JScript" name="code"><span style="color: red;"><link href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css' rel='StyleSheet' type='text/css'/> <script src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js' type='text/javascript'/></span></pre> </li>
4.  Save Template anda.

1. Pada dasbor klik rancangan 
2. Kemudian klik elemen halaman => Tambah Gadget 
3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
   

   <div class="dtree">
   
   

   <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>

   <script type="text/javascript">
   <!--
   d = new dTree('d');
   d.add(0,-1,'Creating Website');
   d.add(1,0,'Folder 01','#.html');
   d.add(2,1,'Sub Folder 01',' #.html');
   d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
   d.add(4,0,'Folder 02',' #.html');
   d.add(5,4,'Sub Folder 02',' #.html');
   d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
   d.add(7,0,'Folder 03',' #.html');
   d.add(8,7,'Sub Folder 03',' #.html');
   
   

   d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

   d.add(10,0,'File[non-folder]',' link anda.html');
   d.add(11,0,'File[non-folder]',' link anda.html');
   d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
   document.write(d);
   //-->
   </script>
   </div>

4. Terakhir Save ( simpan ), dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 

<h2>Arsip</h2>
<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Creating Website'); d.add(1,0,'Daftar Isi','#.html'); d.add(2,1,'Tutorial Blog','http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial%20blog'); d.add(3,1,'Joomla','http://creatingwebsite-maskolis.blogspot.com/search/label/joomla'); d.add(4,1,'Wordpress','http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress'); d.add(5,0,'SEO','#.html'); d.add(6,5,'Tips Dasar-Dasar SEO','http://creatingwebsite-maskolis.blogspot.com/2011/02/tips-dasar-dasar-seo.html'); d.add(7,5,'Kosong',''); d.add(8,5,'Kosong',''); d.add(9,0,'Google','#.html'); d.add(10,9,'Cara Daftar Google Adsense','http://creatingwebsite-maskolis.blogspot.com/2011/02/cara-mendaftarkan-blog-di-google.html'); d.add(11,9,'',''); d.add(12,0,'',''); d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); d.add(14,13,'Kode warna','http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-kode-warna-di-blog.html'); d.add(15,13,'Google Page Rank','http://creatingwebsite-maskolis.blogspot.com/2011/01/google-page-rank-dan-manfaatnya.html'); d.add(16,0,'SEO Tips','http://creatingwebsite-maskolis.blogspot.com/2011/01/seo-tips-dengan-melakukan-blog-ping.html');

document.write(d);
//-->
</script>
</div>

Read More »

Label: Menu, Menu d'Tree, Menu Sidebar, Script menu

Membuat Menu Horizontal Dropdown dengan CSS

Menu web/blog sangat bervariasi salah satunya dibuat dengan css, ada bentuk menu berupa text maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada artikel kali ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css.


Langkah-langkanya sebagai berikut :

Membuat susunan list menu untuk dropdown dalam html, kodenya berikut ini :

<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
    <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>

Dari kode html di atas  menampilkan hasil sementara sebagai berikut :


Kemudian kita buat kode css berikut, dengan menambahkannya pada bagian <head>..</head>

<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px white;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid grey;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>

Kode-kode diatas akan menghasilkan tampilan seperti berikut :

Menu ini sudah dicobakan menggunakan Browser firefox, google chrome, dan internet explorer. Semuanya dapat  dijalankan dengan normal yang artinya menu dropdown yang dibuat dengan css lebih kompatibel dan lebih ringan jika ditampilkan.

Re-share from http://script-media.net/

Read More »

Label: Dropdown Menu, Menu, Menu Horizontal, Script menu

Menu dan Sub Menu Cantik dan Sederhana

Berikut ini adalah salah satu Script dan Preview Menu Horizonatal beserta Sub menu yang cukup sederhana namun kelihatan cantik dan elegan untuk mempercantik tamiplan menu Blog/ Website sobat. Dan cara memasangnyapun cukup simple tanpa melalui proses edit HTML.



Ikuti langkah-langkah berikut :

1. Login ke Blogger
2. Pilih Tata Letak => Add Gadget => HTML/ Java Script
3. Masukkan Script dibawah ini
   <style>/* -- Menu Horizontal + Sub Menu-- */
   #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
   #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
   #cat-nav a:hover { color:#fff; }
   #cat-nav li:hover { background:#000; }
   #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
   #cat-nav .nav-description { display:block; }
   #cat-nav a:hover span { color:#fff; }
   #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
   #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
   #secnav li { float:left; width: auto; height:35px;}
   #secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
   #secnav li ul li  { height:30px; border-top:1px solid #fff; }
   #secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
   #secnav li ul ul  { margin: -30px 0 0 180px; }
   #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
   #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
   #secnav li:hover,#secnav li.hover  { position:static; }
   #cat-nav #secnav {width:100%;margin:0 auto;}
   </style>
   <div id='cat-nav'>
   <ul class='fl' id='secnav'>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Menu 1</a></li>
   <li><a href='#'>Menu + Sub Menu</a>
   <ul id='sub-custom-nav'>
   <li><a href='#'>Sub Menu 1</a></li>
   <li><a href='#'>Sub Menu 2</a></li>
   <li><a href='#'>Sub Menu 3</a></li>
   </ul>
   </li>
   <li><a href='#'>Menu</a></li>
   <li><a href='#'>Menu + Sub</a>
   <ul id='sub-custom-nav'>
   <li><a href='#'>Sub 1</a></li>
   <li><a href='#'>Sub 2</a></li>
   <li><a href='#'>Sub 3</a></li>
   <li><a href='#'>Sub 4</a></li>
   <li><a href='#'>Sub 5</a></li>
   <li><a href='#'>Sub 6</a></li>
   </ul>
   </li>
   <li><a href='#'>Menu</a></li>
   </ul>
   </div>
   <div style="text-align: right;">
   <a href="http://dhecun.blogspot.com/2012/11/script-menu-horizontal-sub-menu.html" target="_blank"><span style="font-size: small;">[ Get Widget ]</span></a></div>
4. Edit Sesuai keinginan
5. Klik Save ( Simpan )

Hasilnya seperti dibawah ini :

Read More »

Label: Menu, Menu Horizontal, Script menu

Cara Mudah membuat Menu Horizontal Dengan Mudah dan Praktis

Berikut ini adalah cara termudah membuat Menu Horizontal dan Sub Menu di Blog, Silahkan simak dan ikuti dengan seksama :

1. Login ke Account Blogger sobat
2. Pilih Tata Letak ==> Pilih Tambah Gadget
3. Pilih HTML/ Java Script
4. Copy Paste kode dibawah ini

5. Save ( Simpan )
6. Lihat hasilnya.

Demikian tutorial ini Semoga bermanfaat ...

Read More »

Label: Menu, Menu Horizontal, Script menu

Script Menu Horizontal Cantik Untuk Memperindah Blog

Berikut ini adalah tutorial cara memasang script menu Horizontal cantik di Blog :

Read More »

Label: Menu, Menu Horizontal

Beautiful Accordion Menu Widget For Blogger

Navigate to your Blog's Dashboard --> Template --> Edit HTML.
Press Ctrl+F and search for <head>.
Add the below code under <head> and save the template.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="accordion"><ul><li><h3>Main Heading 1</h3>
<ul><li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 1</a></li>
<li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 2</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 3</a></li></ul></li>
<li><h3>Main Heading 2</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 4</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 5</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 7</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 8</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 10</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 11</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 12</a></li></ul></li></ul></div>

<style type="text/css">#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; width: 250px;} #accordion h3 {font: 15px Arial; padding: 9px; color:#fff; cursor: pointer; background:#FF0080 ; border-bottom:1px solid #fff;} #accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} #accordion ul ul li a {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 12px Verdana; display: block; padding: 8px 0 8px 8px;} #accordion ul ul li a:hover {padding-left:15px; background-image:url(http://4.bp.blogspot.com/-jxfJ5gu2Awo/VEnYYEWxE2I/AAAAAAAAHZ8/B_mVrXyBmN4/s1600/pink.png); background-position:left; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion li.active ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}</style>

<script>$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Important:

To change the color of Accordion, change the values in Pink,
Replace "http://samplescriptmenu.blogspot.co.id/" with your link.

Read More »

Label: Menu, Menu Accordion, Script menu