Membuat Menu Navigasi Drop Down di Blog

Menu navigasi berfungsi untuk mempermudah pengunjung blog / website dalam  memilah artikel sesuai kategoti atau label, dengan menu navigasi blog akan terlihat lebih cantik.

Menu navigasi drop down sangat  perlu di pasang pada blog yang mempunyai banyak kategori, dengan menu drop dwon semua label bias tercover .

Untuk membuatnya :
1. copy code script di bawah ini :

#navcontainer{background:#fff;height:40px;display:block;overflow:hidden}
#navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/s1600/nav-hover.png) left top repeat-x;;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav a,#subMenusContainer a{text-decoration:none;display:block}
#nav a{margin:0 1px 0 0;float:left;padding:14px 16px;text-transform:uppercase;color:#333;font-weight:bold;font-size:12px}
#subMenusContainer a,#nav li li a{color:#FFF;font-size:12px;text-align:left;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2sln0-jhjfFs8cst-MkhXXBGjCnCmPoBGWJfTO3tPnD7xhL27I0qdFPKl4Nw6eXOut5JYH_LKI2PgwmCwEqYyCErl2S9ria8EyiJl4NoHnH6hIwLShyi7pzZT7kvbvMsYQDz7Q_Twxz0/s1600/submenuscontainer-line.png) left top repeat-x;padding:8px 26px}
#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/s1600/nav-hover.png) left top repeat-x;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav .current-cat a:hover{}
#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:none;color:#8D918A}
.subMenuParentBtn{background:url(../img/arrow_right.gif) right center no-repeat}
.subMenuParentBtnFocused{background:url(../img/arrow_right_over.gif) right center no-repeat}
.mainMenuParentBtn{}
.mainMenuParentBtnFocused{}
.smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}
#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#nav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:40px;display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7tJlChyvEegRycgtBjBV-13zi2tk5mod8ygASVLNes-JuEGM7Uu6fe3gunbm1L13aZ9e4Jpj_4-rgdY_KgisSH9XR56M2vzxO6y9JBxXoSs626qFMFltt7tUtGRVfgb1vPpXB65DNy4/s1600/nav-seperator.png) right center no-repeat}
#subMenusContainer li{list-style:none}
#nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
#nav .children{display:none}
#subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}
.rssbox{background:#FFF;border:1px solid #ECEAEA;padding:10px;margin:10px 0 0 0}
.rssbox:hover{background:#EDEFEB;border:1px solid #DFDDDD}
.rssbox a{color:#2C2E30;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
2. masuk ke menu dashboard>> rancangan >>> edit HTML
3. paste code di atas tepat di atas kode  ]]></b:skin>
4. kemudian cari kode <div id='main-wrapper'>
5. copy code dibawah ini tepat diatas <div id='main-wrapper'>

<div id='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a href='GantiDenganURLBlogKamu'>Home</a></li>
<li><a href='#'>Kategori 1</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>

<li><a href='#'>Drop Down 4</a></li>
<li><a href='#'>Drop Down 5</a></li>
</ul>
</li>
<li><a href='#'>Kategori 2</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>

<li><a href='#'>Kategori 3</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>
<li><a href='#'>Shout-Box</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Directories</a></li>

<li><a href='#'>Contact Us</a></li>
</ul>
</div>

6. Klik save. Dan lihat hasilnya

sumber 

Cara Membuat Iklan Melayang ( Floating Ads) di Header Blog

setelah membuat posting merubah font dan size judul blog serta cara membuat tulisan berjalan, kali ini ane posting tentang meningkatkan pendapatan iklan / adsense di header blog.

Dengan memasang iklan pada posisi yang strategis, pengunjung akan melihat iklan dan melakukan klik, dengan begitu uang akan kita dapatkan dan penghasilan akan meningkat.

Salah satu caranya yaitu dengan memasang iklan melayang atau biasa disebut dengan floating ads pada header blog.

Berikut cara memasang iklan di header blog :

1. Login ke  Blogger .
2. klik Dasbord >>> rancangan.
3. pilih Edit HTML.
4. Jangan lupa Centang Expand Template Widget.
5. Cari kode dibawah ini.
(gunakan Ctrl + f  untuk mempermudah pencarian)

<div id='outer-wrapper'>

6. Letakkan kode dibawah ini tepat dibawah kode <div id='outer-wrapper'> 

<div style='display:scroll; top:0px;position:fixed;'>
<!-- Start code -->
<a href='http://alfians7.blogspot.com/'><img alt='bonus trading forex' border='0' height='50' src=SCRIPT GAMBAR ATAU YANG LAIN
' width='970'/></a><!-- End code -->
</div>

keterangan : Warna kuning diatas adalah nilai tinggi dan lebar iklan, sesuaikan dengan header blog anda, sedangkan untuk yang berwarna merah adalah Gambar iklan.

7. pilih  Save Template.

sumber

Cara Membuat New Tab Di Blog

Open New Tab maksudnya adalah ketika link pada postingan di klik , maka secara otomatis link akan terbuka pada tab baru. Open New Tab sangat bagus di gunakan pada blog / website karena dengan Open New Tab Blog/Web kita tidak akan tertutup atau di tinggalkan oleh pengunjung blog. 

Ada beberapa cara untuk membuat Open New Tab pada blog/web :

Cara Pertama :

menempatkan kode HTML ketika memposting artikel. Kodenya adalah :
 target="_blank" 
setelah agan menulis artikel di menu compose dan memberikan sebuah link, lalu klik menu HTML dan tambahkan kode script  target="_blank"  pada link tersebut.
Cara pasangnya seperti ini :

<a href="http://alfians7.blogspot.com/2012/03/bonus-bonus-instaforex.html" target="_blank">InstaForex</a>

Cara Kedua :


1. login ke Blogger
2. Buat posting baru pada blog di menu Compose
3. Sorot/Blok teks yang akan di beri link
4. Klik menu "Link" yang ada di toolbar bagian atas posting.
5. Maka akan muncul dialog box Web Address
6. silahkan isi dengan alamat web yang di inginkan
7. lalu centanglah pada box "open this link in a new window"
8. klik OK
9. dan secara otomatis link akan terbuka pada Tab baru ketika di klik.

Lihat Gambar:

Cara Ke Tiga :

1. Login ke Blogger.
2. Buka Halaman Dasbord 
3. Klik Rancangan (Design)
4. Klik Edit HTML
5. Cari kode </body>.
     Gunakan tombol Ctrl + F agar lebih mudah dan cepat untuk mencarinya.
6. Copy dan paste  code script di atas kode </body>.
7. Klik Simpan (Save Template).

Kode script nya di bawah ini :

<script type="text/javascript">//<![CDATA[function externalLinks(){if (!document.getElementsByTagName) return;var anchors = document.getElementsByTagName("a");for (var i=0; i<anchors.length; i++){var anchor = anchors[i];if(anchor.getAttribute("href"))anchor.target = "_blank";}}window.onload = externalLinks;//]]></script>

sumber