Download Software WebCam Max Versi Terbaru

Download Software WebCam Max Versi Terbaru

Malam sobat ? zaman semakin berkembang , dahulu kita jika ingin mengirim kabar ke sanak saudara kita selalu menggunakan sarana surat menyurat namun sekarang hal tersebut sudah di permudah dengan adanya hape dan hapepun mulai di tinggalkan dengan adanya fasilitas internet yang sangat gampang di peroleh dan di dukung juga oleh perkembangan gadget yang sangat cepat , sebagai contoh seperti yang saya bilang tadi bahwa dulu kita menggunakan surat untuk mengirim kabar tapi sekarang hanya dengan duduk di depan laptop / komputer dan sedikit koneksi internet kita bisa mengobrol-mengobrol langsung dengan lawan chat dan kita bisa melihat langsung muka lawan bicara kita , hehehe tapi itu semua tidak lepas dari kita harus menginstal aplikasi webcam di laptop atau komputer kita , kali ini saya mau bagi software tersebut kepada sobat , salah satu software webcam yang akan saya share pada malam ini adalah webcam max.

webcam max adalah software atau aplikasi untuk video chat yang di lengkapi dengan fitur-fitur yang menarik . Webcam max bukan cuma untuk video chat , aplikasi ini juga bisa di gunakan untuk mengambil gambar ( foto kita ) langsung dari webcam .

screenshot :

fitur-fitur dalam webcam Max :

• Memiliki efek yang menarik dan kita juga bisa mendownload efek-efek tambahan sesuka hati kita langsung dari official webnya 
• Mudah berbagi foto / video yang sudah kita rekam melalui aplikasi webcam max langsung ke youtube , facebook .
• dan banyak efek lainnya yang harus sobat lihat :)

Download Webcam Max Full Version >>> Disini <<<

Download Software WebCam Max Versi Terbaru

Web Camera (WebCam) Software Terbaik untuk Windows

Bagi yang terbiasa menggunakan web camera, anda juga pasti terbiasa menggunakan web software camera yang disertakan pada perangkat yang anda beli. Tetapi jika anda masih belum puas dengan software camera bawaan pada saat pembelian perangkat, anda bisa menggunakan beberapa software di bawah ini.

Sebagian software yang kami sebutkan berupa trial, sebagian lagi shareware dan sisanya bersifat free software yang bisa anda gunakan dengan gratis. Berikut kami sampaikan aplikasi webcam terbaik menuru kami (berdasarkan pengalaman dan referensi dari banyak website).
1) Cyberlink YouCam
Jika anda membeli notebook beserta windows yang telah terinstall di dalamnya, pasti tahu yang namanya Cyberlink YouCam. Software ini biasanya sudah disertakan pada notebook seperti Lenovo, Acer, Toshiba, Axio dan beberapa merek notebook yang lain. Fitur yang disediakan juga beragam, mulai dari animasi, efek gambar dan beberapa tool lain yang disertakan.

Sebenarnya lisensi Cyberlink YouCam tidak gratis dan untuk menggunakannya harus membelinya terlebih dahulu melalui online store pengembangnya. Tetapi karena di bundle bersama notebook beserta OS-nya, maka anda bisa menggunakannya dengan gratis.
Yang ingin mencoba Cyberlink YouCam, bisamencoba versi trial selama 30 hari yang bisa didapatkan di official website Cyberlink YouCam.
2) ManyCam
Tidak seperti Cyberlink YouCam yang bersifat trial, ManyCam adalah software  gratis yang bisa anda gunakan sepenuhya tanpa harus membeli lisensi pada pengembangnya. Kapasitas software-nya juga lebih kecil saat mendownload software dari official website mereka.

Karena kapasitas file yang kecil, fitur-fitur pada manycam juga tidak sebanyak seperti pada Cyberlink YouCam. Anda tidak akan menemukan banyak animasi, fitur video dan efek camera yang bisa anda pilih.
Ingin segera mencoba? Download ManyCam dar official website-nya.
3) YawCam
YawCam merupakan kependekan dari Yet Another Webcam Software. Software ini lebih sederhana lagi dari manyCam software. Anda sama sekali tidak akan menemui animasi, efek camera dan beberapa fitur menarik yang biasa ada di webcam software.

Kelebihannya, aplikasi ini bisa anda gunakan untuk merekam gambar secara terjadwal sesuai dengan jadwal yang telah anda tentukan. Jadi, selain sebagai aplikasi chatting anda bisa menggunakannya pada camera yang dipakai untuk mengawasi rumah atau kantor yang sedang anda tinggalkan. Jika ingin menggunakannya, download aplikasinya melalui official webiteYauCam.
4) Vitamin D Camera

Kalau yang ini, tersedia tiga versi yang bisa dipilih yaitu starter edition, basic edition dan pro edition. Sesuai namanya, yang pro edition memiliki fitur yang lebih menarik dari versi yang lain. Sedangkan dalam hal lisensi, starter edition bisa dimiliki dengan gratis, sedang yang lain harus membeli lisensi terlebih dahulu jika ingin mencobanya.

Ingin mencoba menggunakan Vitamin D software? Download melalui official website-nya.
5) WebCamXP
Sama seperi YawCam, aplikasi ini bisa digunakan sebagai software untuk mengawasi lingkungan sekitar. Fungsi yang lain, software ini juga bisa digunakan bersama aplikasi chatting seperti yahoo mesenger, skype dan aplikasi yang lain.

Jika ingin menggunakannya secara personal, anda bisa mendowloadnya secara gratis. Tetapi, jika ingin menggunakannya pada banyak perangkat kamera, anda harus membeli lisensinya karena versi gratis hanya tersedia untuk versi personal. Download aplikasinya official website WebCamXP software.
Kesimpulan
Semua software yang kemi sebutkan di atas mempunyai kelebihan dan kekurangan masing-masing. Ada yang memiliki banyak fitur tetapi dengan harga mahal dan ada juga yang gratis tetapi dengan sedikit fitur. Semua tergantung pilihan masing-masing, anda dapat memilih sesuai dengan kebutuhan anda.

Membuat Sliding Login/Register Form Panel di Blog

Membuat Sliding Login/Register Form Panel di Blog

Selamat pagi sob, mumpung masih pagi dan masih ada waktu, pagi hari ini saya akan menepati janji saya kepada sobat niki trik kulo, yang tadi malam req bagaimana cara membuat form login/register di dalam sebuah blog. berikut kutipan lewat komentar dari sobat niki trik kulo "ow ya nih, sekalian bertanya. jika sobat tau,soalnya keliling2 di google udah sampe kesasar sasar + pusing tujuh keliling lebai deh :-). bikin register untuk blog kita sob,agar pengunjung dapat juga menuliskan pengetahuan mereka di blog kita. karena klo untuk login di blogger kan tidak semuanya yang memiliki akun di blogger"

Login Forum yang akan saya bahas hanya Contoh dan tidak dapat digunakan layaknya Login Forum seperti di Facebook, Twitter, atau yang lainnya. Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member.
Sebagai contoh sobat bisa melihat pada screenshot dibawah ini:

Sceenshot/Demo

Form tersebut berada di atas header blog/nafbar blog, dengan efek sliding.
Seperti itulah kiranya yang akan saya buat, bila sobat tertarik, langsung saja berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Lalu carilah kode: </head>
7. Bila sudah ketemu, letakan kode berikut di atas kode </head>

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});
</script>

8. Setelah itu cari kode: ]]></b:skin> setelah ketemu copy paste-kan kode berikut tepat diAtasnya

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

9. Lanjut lagi sob, cari lagi kode: </body> kemudian letakan kode dibawah ini tepat diAtasnya

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Kode Blogger</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://kode-blogger.blogspot.com/2011/05/membuat-sliding-loginregister-form.html' title='Download'>Klik Disini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

Perhatikan kode diatas yang diberi warna Kuning dan Hijau, gantilah tulisan tersebut sesuai keinginan sobat.

10. Seepp, selesai sob, jangan lupa klik Simpan/Save Template, dan lihat hasilnya.

Selamat mencoba, dan semoga bermanfaat. Salam Blogging.

Cara Buat Animasi Loading Di Blog (SUPER KEREN)

Sambil nunggu pertandingan bola nih, dari pada bete nungguin mendingan berbagi ilmu lagi nih!Langsung aja deh sekarang saya mau berposting tentang Cara Buat Animasi Loading Di Blog tetapi kali ini animasinya beda dari yang lain pokoknya keren deh.. ini adalah sreenshotnya:

Gemana? keren kan.. oke langsung aja nih caranya

• Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
• Cari Kode </head> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas </head> .

<style>
/*  henry-multimedia-informasi.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe71B5cVM9TxD-qyc3LCaCIui8U_N-TvGY4atPu7y_Do24QiVNrku1BgULAnCrKjtJxNVH5Q7kUoh6V1tyf8E7n4g82-jvbHubcGkCKYwbz_JVOkWnIXoZfrcYuBGUOQfFzz7wTVEzRwFR/s1600/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

Sekarang cari kode <body> agar mudah dalam penacrian tekan Ctrl+f 
dan sisipkan kode di bawah ini Tepat di bawah kode <body> .

<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>

Bagaimana mudahkan?Oke Cukup sekian, Semoga Bermanfaat..!

Kode Warna

Cara Membuat Menu Melayang Di Atas Header / Floating menu

Pada postingan sebelumnya saya telah membahas Cara Membuat Menu Melayang Di Atas Header, Kali ini saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? yahh jelas sama dong sob..., yang membedakan hanyalah desain penampilanya saja tapi kegunaanya tetap sama kok.!
jika kalian pada bingung ini adalah sreenshotnya:

Oke langsung aja Caranya:

• Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
• Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin> .
  

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

• Ganti 970px untuk ukuran blog sobat.
• Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bkB7MpiRR8tBGdUd8zOOvavtFrs5YNVMS8fLMscMPrZ6kD_ECrFyd8lUNytHEePEs93U0fdeMyyqdt7F1s95EHiprgJ2AR5tEIiNQzPnpMRNs1J03yHD9mxZVK9ZJtf9Q2Saes0RAGw/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

• Klik Simpan

Cara Buat Dropdown Menu di Blog

Cara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhqkEidvw09GiAro3f2uCB9KjA_b8unptE7EFr3pRTyv9J-abBVHfz5Y8HriULYdurizF1zb4WzNVoyFnhvcqBnv3vuM0puf4YAYobbzzhHTJBP6yPnS4SDDhVt_lnUN7G1qonUW3kqU/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbmExZG78rYWZPptXFwz0J0OvKPhnFSwDFSc2AqUUmxCaTZ9FhViiBMmjoIHY-BapFlueTet59efIh6IjP9NuMuRVlX99EGtQ3ryUqLYYfZAp2cv67p4pnS9RVtIm1rWGyQXGlINfV0b9/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3UvHZvr7DpsSnJWQ-EmNRCnjG56iBNJ_nts-_j93-WiuUl2l-7dR2ARuUuF7GOUmcntZfcwJNb7cz5mHDmUoWUV7Rhw7mw2R_3y8gsZq6EVG1qufYCmb6LqYSETnc4W7N9pPkTTp_Lnk/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar 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}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhqkEidvw09GiAro3f2uCB9KjA_b8unptE7EFr3pRTyv9J-abBVHfz5Y8HriULYdurizF1zb4WzNVoyFnhvcqBnv3vuM0puf4YAYobbzzhHTJBP6yPnS4SDDhVt_lnUN7G1qonUW3kqU/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibw4kC2fakZA_CTS_T9_IvPXCAQIp-iRHmOon1CebdOLtzj4xqebCc6JDaL3bMpqlsI9T5ttN4hfKIMjlrfunic2ffw9lalRD-2k_w3MQPnTjywvdEH9dwdROMC72N830KF0kUIcePzE4Y/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</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>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</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>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Perhatian!
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
4. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih

Cara Buat Menu Bar di Blogspot

Cara membuat Menubar di blog - Hmm, sobat sudah pada tau menubar itu apa kan? Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.
oke ini adalah gambarnya

Gemana sob keren kan?
berikut caranya:
1. Login ke akun Blogger sobat

 

2. Sekarang Klik Template

3. Klik EDIT HTML

4. Sekarang Cari Kode </head> agar mudah dalam pencarian tekan Ctrl+f

5. Letakan kode di bawah tepat di atas kode </head>

<style type='text/css'> 
#tabs28 {   float:left;   width:100%;   background:#fff;   font-size:93%;   line-height:normal; border-bottom:1px solid #DD740B;   }
 #tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none;   } 
#tabs28 li {   display:inline;   margin:0;   padding:0;   } 
#tabs28 a {   float:left;   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ysrGfMuVG_1TH5VDrdU35_GTJzhhQ1yaoVtPn5Kt8hgYvZ5ygPSWWjWQJi6yk478-XUqZGLIHlxEXFjDC4tou0SUwYcbm8KQ1Ummy9RKoYGXG6IoXE7vX5q8Br-qVUTbeSJFMZ49cqKD/s1600/slide-left.gif&quot;) no-repeat left top;   margin:0;   padding:0 0 0 5px;   text-decoration:none;   } 
#tabs28 a span {   float:left;   display:block;   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQ3aLCP3Zs1ik5mt3o-0OZRWRe4O2GiN0BhzM_-YC2I5Mq8Zd_sh2M79IaTrqTAKJM9t1GZCfKbzYz3jjZC4VTW92m9FZxVre7VEs_4lSlnue4Eao42CUpJfs0KO5OIoramPalp-PuRDK/s1600/side-right.gif&quot;) no-repeat right top;   padding:5px 15px 4px 6px;   color:#FFF;   } 
#tabs28 a span {float:none;}  #tabsI a:hover span {   color:#FFF;   } #tabs28 a:hover {   background-position:0% -42px;   } 
#tabs28 a:hover span {   background-position:100% -42px;   }</style>

Catatan:
Anda Boleh Ganti tulisan 10 dengan yang anda inginkan(fungsinya untuk panjang jarak atas)
Anda Boleh Ganti tulisan 50 dengan yang anda inginkan(fungsinya untuk panjang sebelah kiri) 

7. Sekarang kita menuju ke layout

 

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<div id="tabs28">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>

</div>

10. Klik Simpan

catatan: ganti tanda # dengan alamat URL
               ganti Link 1 - Link8 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!