MEMBUAT MENU DROP DOWN HORIZONTAL PADA BLOGGER

Nah Bagai mana caranya, langsung saja :
Pastikan kamu sudah login ke Dashbord Blog kamu
Dari Dashbord blog kamu Pilih Templete untuk mengakses halaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
Jangan lupa untuk Download Lengkap Template terlebih dahulu ( Baca : Cara Back-Up dan Upload Template Blogger)
Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin>


/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP9ZMDJQhNbWMpYnqRdpK21zsjR6f9l450WTYWzDiNuddPFnoEWiqV2K710Ua_baaB8edWDbZLtpDBbd_9VodEvYW1HqExkmVoRS_APDVodq2K_kZxgWWbvnghUf-pfVn1LX28iD3GBc9L/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhURGZCLbuPA4V74Ald071zytMxxDYruOegRc8IajE1csr6B6q4BOtIp0duntNtkkXsjTaVDpV6_ad6qhBs8OBddj7FAxfDNR9WoNWNlGz98zqBA3jhc1Fb9KhglKvBZIAz63Q2ZtaqE/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

Kalau sudah, langkah selanjutnya cari salah satu kode berikut :<div id='header-wrapper'> 
(disini nanti letak kode menu dropdown)
</b:section>
    </div>

Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini<div class='header-outer'>
   (disini nanti posisi kode menu dropdown)
</b:section>
    </div>

Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah ini salah satu kode Diatas

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>

1.shobat tinggal menganti tanda"#"yang berwarna biru di atas dengan link shobat
2.shobat tinggal menganti tulisan"sub menu 1"atau smua tulisan yang berarna merah di atas
3.kemudian di save/simpan dan lihat de hasil nya

Read more

Memasang Kode Warna Pada Blog

Halo teman-teman.. ? Bagaimana kabar anda hari ini.. ?

Saya sangat stress setelah lebih dari 20 postingan blog saya terhapus secara tidak sengaja membuat saya menyesal dan berfikir untuk berhenti blogging. Tetapi setelah dipikir-pikir sayang juga blog ini untuk ditinggal begitu saya, karena page views perhari sudah tetap antara 1400-2000 visitor. Baca post sebelumnya Cara mendapatkan approve google adsense dengan mudah.

Oke, hari ini saya akan menerangkan tentang bagaimana membuat sebuah tabel kode warna untuk blog. Tabel warna ini sangatlah penting dan perlu ada bagi website yang memilih niche tutorial blog. Tabel warna ini membantu pengunjung untuk memilih warna yang diinginkan. Untuk tutorial kali ini saya akan menerangkan 2 pilihan tabel warna. Kedua code warna ini saya dapat dari website bloggingbolt.

Code Warna Style Sederhana

Itulah tampilan kode warna pertama, bagaimana menurut anda? jika tertarik anda dapat mengikuti step by stepnya dibawah ini:

1. Pertama-tama masuk ke akun blogger anda
2. Tentukan ingin diletakan dimana kode warna tersebut. Di sidebar kah, atau di pages blog, atau di postingan anda ?
3. Jika ingin memasang di sidebar, masuk ke Layout > Add gadget >> Add HTML/Java Script >>> Masukan kode warna dibawah ini.
4. Jika ingin memasang di Page blog, masuk ke Pages > New Page >> Blank page >>> Masukan kode warna dibawah ini.
5. Jika ingin memasang di postingan blog, masuk ke Post > New post >> Masuk mode HTML (bukan compose) >>> Masukan kode warna dibawah ini.

KODE WARNA

<center> <object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"> <embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"> </embed> </object> </center>

Code Warna Style Stylish

DEMO

Itulah tampilan kode warna keduanya, bagaimana menurut anda? Saya hanya menampilkan screenshotnya saja, karena kalo dipasang secara bersamaan pada 2 post akan menyebabkan error. Jika tertarik anda dapat mengikuti step by stepnya dibawah ini:

1. Pertama-tama masuk ke akun blogger anda
2. Tentukan ingin diletakan dimana kode warna tersebut. Di sidebar kah, atau di pages blog, atau di postingan anda ?
3. Jika ingin memasang di sidebar, masuk ke Layout > Add gadget >> Add HTML/Java Script >>> Masukan kode warna dibawah ini.
4. Jika ingin memasang di Page blog, masuk ke Pages > New Page >> Blank page >>> Masukan kode warna dibawah ini.
5. Jika ingin memasang di postingan blog, masuk ke Post > New post >> Masuk mode HTML (bukan compose) >>> Masukan kode warna dibawah ini.

KODE WARNA

 <center> <object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480">  <param name="movie" value="http://www.2createawebsite.com/build/col.swf"> <param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/col.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"> </embed> </object> </center>

Read more

Cara Membuat Tombol Back To Top Dengan jQuery

JQuery - Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website/blog. Sehingga memudahkan pengunjung suatu website/blog untuk kembali ke atas tampa menggunakan scroll.

1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

3. Simpan dan lihat hasilnya. Pasti kamu senang.

Read more

Cara Membuat Kotak Widget Subscribe Dengan Efek Hover

Widget - Sudah lama saya tidak berkelana di dunia blogger, hanya mengupload Naruto Episode yah itu kesibukan di dunia luar, namun sekarang saya akan menerbitkan artiekl tentang cara membuat Kotak Widget Subscribe Dengan Efek Hover. Widget subscribe ini sangat special dan lebih keren karena ditambah dengan icon facebook, twitter dengan efek hover seperti gambar di bawah ini.

Untuk membuatnya sangat mudah Anda cukup menggunakan sebuah situs untuk membuat widget ini. Klik disini untuk membuat widget (Copyright @ MYBLOGGERTOOLS.ORG)

Nanti Anda disuruh masukin

Google+ ID : (Example : https://plus.google.com/114849896378202892510)
Facebook Username : (Example : http://www.facebook.com/BLAZERBLOG)
Twitter Username : (Example : https://twitter.com/blazer_blog)
Feedburner Username : (Example : http://feeds.feedburner.com/blazer_blog)

Anda cukup masukin kode yang berwarna merah sesuai dengan username milik Anda masing-masing. Setelah selesai klik Generate. (Ingat Anda harus sudah login ke blog Anda)

Read more

Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog

Kali ini saya akan membahas bagaimana cara membuat widget recent comment dengan avatar untuk blog. Fungsi widget ini akan menampilkan komentar terbaru secara otomatis ditambah avatar, yang dimaksud avatar adalah gambar profil orang yang berkomentar.

Berikut cara membuat widget recent comment dengan avatar

1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML/JavaScript.
3. Copy kode di bawah ini. SCRIPT BY BLOGGERBUGIS

<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://blazerracing.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script>
</div>

Sekarang perhatikan baik-baik kode yang berwarna merah.

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)

Read more

Cara Mengganti Tulisan "Poskan Komentar" Dengan Gambar di Blog

Tutorial blog - Kali ini saya akan membahas cara mengganti tulisan poskan komentar dengan gambar di blog. Bagi Anda yang bosan dengan tulisan tersebut dan berniat untuk menggantinya, disini Blazer Blog akan kasih tutorial nya.

1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Tempalte.
3. Cari kode

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

4. Setelah ketemu ganti kode di atas dengan kode di bawah ini (pilih salah satu saja).

GAMABAR 1

<img src="http://4.bp.blogspot.com/-VKsbM1fOKhw/UAq8e1KZ78I/AAAAAAAAEVI/19WqON5j5AM/s1600/comment+cloud.png" />

GAMBAR 2

<img src="http://3.bp.blogspot.com/-9LeIWFl6Zvk/UAq8qnQRnpI/AAAAAAAAEVQ/tlDwriE0gnw/s1600/comment+here+flowers.png" />

GAMBAR 3

<img src="http://4.bp.blogspot.com/-Ww7olREOYY4/UAq8r1NfT1I/AAAAAAAAEVY/KJUYYyMyxAA/s1600/PostAComment+(6).png" />

GAMBAR 4

<img src="http://1.bp.blogspot.com/-ENIB9bgeb8A/UAq8ttCqf_I/AAAAAAAAEVg/SCQzdU8ta-s/s1600/PostAComment+(2).png" />

GAMBAR 5

<img src="http://3.bp.blogspot.com/--xW4OujM2JE/UAq8w-MIvwI/AAAAAAAAEVo/dVZSRSV46UE/s1600/PostAComment.png" />

GAMBAR 6

<img src="http://3.bp.blogspot.com/-iKEIa-EBGoc/UAq8y3XdcOI/AAAAAAAAEVw/yZUbjVljfeA/s1600/PostAComment4.png" />

Read more

Cara Memasang Meta Tag Yang Benar di Blog

Tutorial Blog - Semuanya pasti sudah mengenal apa itu meta tag namun apakah Anda tahu cara memasang meta tag yang benar dan SEO Frindly. Meta Tag adalah tag yang menjelaskan situs Anda dan memberitahu ke berbagai seacrh engine seperti google, yahoo, msn dan lain-lain.

Meta Tag sangat penting dalam sebuah blog, dengan ini situs atau blog Anda akan lebih dikenal oleh mesin pencari, perlu Anda ketahui memasang meta tag tidak harus selalu lengkap cukup meta description dan meta keywords itu saja yang penting.

Meta Description, menjelaskan deskripsi blog Anda, ini merupakan tag yang paling penting dalam sebuah situs atau blog. Dengan kata lain ini adalah jalur komunikasi dengan seacrh engine agar lebih akurat.

Perhatikan baik-baik cara memasang meta tag yang benar.

1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode

<b:include data='blog' name='all-head-content'/>

3. Setelah ketemu letakan tag di bawah ini tepat di bawah kode nomor 2.

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/> 

Ganti kata DESCRIPTION HERE dengan deskripsi blog Anda.
Contoh: Blazer Blog adalah sebuah situs yang berisi berbagai macam artikel menarik dan berwawasan.
Notice: Perhatikan penggunaan bahasa kata dan sejenisnya yang lebih sopan, menarik.

Ganti kata KEYWORDS HERE ganti dengan kata kunci blog atau situs web Anda.
Contoh: Blazer Blog, Tips kesehatan, blogger dan lain-lain
Notice: Pisahkan dengan tanda baca koma.

Ganti kata AUTHOR NAME HERE dengan nama penulis atau pemilik blog.
Contoh: Fajar Lesmana.

Read more