Membuat Tab View / Multi Tab di Blog

Bagi kamu yang mempunyai pertanyaan 'bagaimana cara menyatukan 3 widget atau lebih menjadi satu?' disini akan membahas cara membuatnya, sebenarnya namanya adalah Tab View, dengan membuat tab view kita dapat menghemat banyak ruang pada sidebar kita karena beberapa widget dapat kita satukan pada tab view, buat kamu yang masih bingung apa dan bagaimana itu Tab View silahkan lihat contohnya: Klik Disini nah lihat disana saya menyatukan widget 'recent post' 'entri populer' dan juga 'label' menjadi satu. Oke, langsung aja yuk sob belajar cara membuat tab view / multi tab di blog.

1. Masuk ke Dashboard blogger (saat artikel ini dibuat saya masih menggunakan tampilan blogger lama / lawas) , klik rancangan, klik edit HTML.
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode ]]></b:skin> tadi

div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px; 
padding-top: 3px;vertical-align: middle;border: 1px solid #999999; 
border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; 
font-weight: 900;color: #1E62B6; 
}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
}div.TabView div.Pages{clear: both;border: 1px solid #999999;
overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama


3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi

<script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;var i = 0;
do{if (Tab.tagName == &quot;A&quot;){i++;Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;Tab.blur();}}while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;var i = 0;
do{if (Page.className == &#39;Page&#39;){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;Page.style.overflow = &quot;auto&quot;;Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;}}while (Page = Page.nextSibling);}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>

4. Klik simpan template, lalu kembali ke page element / edit tata letak, klik add gadget atau tambah gadget lalu pilih HTML / Javascript, kemudian masukkan kode berikut didalamnya:

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 230px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 240px; height: 265px;">
<div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /></div></div>
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>

Keterangan:
- kode berwarna hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)

5. Klik simpan lalu lihat hasilnya
baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren

keyword: cara membuat tab view di blog, membuat multi tab di blog, membuat kolom tab di blog, membuat tab menu di blog, membuat tab di blog, menyatukan beberapa widget menjadi satu, trik menghemat ruang di blog

Read More »

Add Comment

Unknown Blogs

Membuat Link Pada Gambar Terbuka Otomatis Saat di Sentuh Mouse

Sebenarnya Trik Membuat Link Pada Gambar Terbuka Otomatis Saat di Sentuh Mouse ini cuma kode modifikasi dari Trik Membuat Link Terbuka Otomatis Saat di Sentuh Mouse, berhubung ada sobat blogger yang bertanya bagaimana agar link pada gambar juga dapat terbuka otomatis saat di sentuh mouse maka gak ada salahnya kalau Andi Techno share kodenya kali ini.
Kalau masih ada yang bingung, silahkan arahkan mouse kamu ke gambar berikut:

nah, ketika kamu menyentuh gambar tersebut dengan mouse maka linknya otomatis terbuka kan sob?

berikut ini kodenya:

<a href="http://cello-share.blogspot.com/" onmouseover="window.location=this.href"><img src='http://URL GAMBAR'/></a>

#Keterangan
- ganti kode yang berwarna hijau dengan link yang akan dibuka saat disentuh mouse
- ganti kode yang berwarna biru dengan url gambar kamu

keyword: link otomatis terbuka, link pada gambar otomatis terbuka saat disentuh mouse, gambar otomatis terbuka saat disentuh mouse, link pada gambar auto klik

Read More »

Add Comment

Unknown Blogs

Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor

Hai sob, kembali membawa trik buat blogger, yang merasa udah master blogger boleh lewatin artikel ini sob, ini cuma trik newbie sob. Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor, gimana tuh maksudnya? coba sobat arahkan kursor sobat ke gambar dibawah ini:

nah gambarnya gerak kan sob saat disentuh kursor mouse, mau tau cara membuatnya?
check this on:

1. Masuk ke Blogger (saya masih memakai tampilan blogger lama saat artikel ini ditulis) > Klik Rancangan > Klik edit HTML
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F agar lebih mudah, lalu letakkan atau paste kode dibawah ini setelah / dibawahnya kode ]]></b:skin> tadi.
kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.post img {border:3px solid #1e1e1e;-webkit-transition: all 0.4s ease-in-out;}.post img:hover{margin-left:20px}</style> </b:if>

3. Klik simpan template.

sekarang coba lihat salah satu artikel sobat yang ada gambarnya dan arahkan kursor ke gambar tersebut.

semoga berguna :D baca juga: Membuat Menu Navigasi Vertikal Keren di Blog dengan Efek Transisi

keyword: gambar bergerak saat disentuh mouse, membuat gambar keren pada artikel blog, trik blogger, bagaimana cara membuat gambar yang bergerak saat disentuh kursor mouse

Read More »

Add Comment

Unknown Blogs

Membuat Gambar Bergetar Disetiap Artikel - Trik Blogger

Oke sob, pada Tutorial Blog kali ini akan menjelaskan bagaimana cara membuat gambar disetiap posting bergetar , kalau belum tau bagaimana itu gambar bergetar silahkan lihat contohnya klik disini. Nah sesuai dengan judulnya, trik gambar bergetar ini berfungsi terhadap setiap gambar pada setiap artikel, sehingga kamu tidak perlu lagi memasukkan kode satu persatu disetiap posting menarik bukan? Yuk coba membuatnya

Membuat Gambar Bergetar Disetiap Artikel :

Disini saya menggunakan blogger dengan tampilan lama / versi lawas

1. Buka dashbord blogger, lalu klik Rancangan > Edit HTML
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah, lalu pastekan / letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

/* Efek getar by andi-techno.blogspot.com */
.post img {
animation-name: x-gengetar;
-moz-animation-name:  x-gengetar ;
-webkit-animation-name:  x-gengetar;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  x-gengetar  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  x-gengetar  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  x-gengetar  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

3. Cari kode </body> lalu pastekan / letakkan kode dibawah ini tepat diatas kode </body>

<script src='http://x-gen.googlecode.com/files/x-gengetar.js' type='text/javascript'/>

4. Simpan Template, lalu lihat salah satu artikel pada blog kamu yang ada gambarnya, pasti bergetar :)

keyword: cara membuat gambar bergetar di blogger, membuat gambar pada artikel blog bergetar, membuat gambar bergetar otomatis di artikel blog, cara membuat gambar bergetar, membuat gambar disetiap posting bergetar

Read More »

Add Comment

Unknown Blogs

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren

Hai sobat, sebelumnya Saya telah membuat Trik Blogger berjudul Cara Membuat Gambar pada Artikel Blog Bergetar, nah pada Trik Blogger kali ini saya ingin berbagi Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren. Untuk contoh Menu Sidebar Melayang Jquery yang saya maksud ini bisa dilihat di link ini: http://id-web.16mb.com/jsider . Nah keren kan sob? Ayo pasang diblog kalian :)

Pada saat tutorial ini dibuat saya menggunakan tampilan blogger lama / lawas, jadi bagi sobat blogger yang menggunakan tampilan blogger baru tinggal menyesuaikan ya :)

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>

/* Starts Menu Sideabr Jquery melayang by andi-techno.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ1yvb3WorJ1ori4cDTt7b_wLdE_WiWN40EycZa8N9TmaSgoe6zvqL1ba_0bN8efrTawO9SohQv8gVJ2MAkPa4ntw3NRHnf9s8x9gmbqsPnbwqQvofs7eNBQ1XK_yNpEESNGXp13LgPhM/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafPr17rVy32CaaWu0yHtjekz-gxFxkXohghQFQ3Vf-g3EZfmFEi_upFn21jC2IOCJNpxzhEx1vtRhZwtWv8EraIslXJcNczeo9aVSuBmLrs82REpi7_3qcZE-BJ3D_jCgBPcdqz8ZCCY/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjardtEFwqNLDVP4vBgHHXhNJDarS9KwWzYKqx_9KEgXlDB6ZwmPjsiF3VDadR5qoJjjgCX_AFX6wvP4QYM3SU00Uy5qNmj4HE3QbIPLooRH7AZKnSg5qG4_7BI8slGCgGnRmP9vIzPf9w/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIh_KVnjBffudTmbA0YHI1D0kc8hKmV2zyinnRaqFzosaaci6cGn_FdHhtuenoi_Yh7KIpbwOacPTMerdRI8T95xk0OVLuUZqUeDHqYJOoH9xLx9wyoJ83NB4GkPdfvtUD2G1WwQyy-Bc/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgouAAFKuaUO0wblEabRBfM_jMYkm7C-B2PsZ10mThAJDDb_Eoqb4X-zKLYbeH88E2d8L_Ame0HHJ9IUo2rprBaFmg_3ZYRuiCyGE_e0IvPZ71_ZHpnAowhkdhits7pCPCrNemULh-V44E/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEili52e6_odaBLhGdfG0BYzWvIPi2jwJishfsXqYkcsWtHACSj0f_2P9IiwKT4XG1FXabCf2OTgePbQHrIXS04n-MY4S3Uh-qL5YjbPnVaqIY434yqAsMSn7hwhyphenhyphen73I2YhcUtQV_APjO54/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FbgeNIpWUHXMlEl2uIL3q7Gqg3A7Tb-gW8PdIuBpifmtLDpqHXWyED9UCA8TKa84GQqgO3XEnZGbZ2dXs5KFuFt65RsKQmeWdQhrkphDUSfLrOmCqVGemFPTSWan6ecKt1ye7TBWkEQ/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhRvcvlXkU8F4L-PaWzsFIAGEdWGvJadbpMev7yy04TgW7iwrDAC2cckhZGDXe6gXBFP8jfWxSP0av6KO1sKSUBs-Ponaf28LcTvJkqJqTX96aMReDqgz9tJ4KYTXOi5GgXedAEXeWJo/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYI4p4m3oFBHEeEuDEBhlhQui8HYqOH9joGvXo00SkcdBl6fjD3yPDK509Ux8_fKl23MpawyueMxMKKNwhjMVhjhDzZGh6qMlO-5oPjVZnKQxj9P0ZnMJVdFcRZI7hNCBto7RAaoui7Q/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.blogspot.com End*/

3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);
}
);
});
</script>

4. Klik Simpan Template

5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:

<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://andi-techno.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://andi-techno.blogspot.com' target='_blank' title='About us'></a></li>
<li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://fb.com/andi.techno' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/Andi_Xgen' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/xgen' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>

#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)

keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren

Read More »

Add Comment

Unknown Blogs

Mematikan / Disable Klik Kanan di Blog dengan Peringatan

Hai sobat, Sata akan share tentang tutorial / trik dasar blogger, yaitu cara mematikan / disable klik kanan di blog dengan peringatan, cara ini dilakukkan untuk berjaga-jaga agar tidak terjadi pembajakan konten blog atau biasa disebut 'copy paste / copas'. Yuk ikuti langkah-langkahnya.

Disable klik kanan denan peringatan | Check This on:
1. Masuk Ke Dashboard blogger
2. Klik 'Tata Letak' lalu klik 'Tambah Gadget'
3. Klik HTML / Javascript, lalu masukkan kode berikut ini:

<script>var message="Teks Peringatan";///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function("alert(message);return false")</script>

keterangan: ganti teks yang berwarna merah dengan kata-kata peringan kamu
4. Klik Simpan 
5. Buka Blog kamu lalu coba klik kanan pada mouse dan lihat hasilnya, klik kanan sudah tidak bisa lagi :)

keyword: cara memasang anti klik kanan di blog, disable klik kanan di blog, anti klik kanan di blog dengan peringatan, memasang disable klik kanan di blog dengan peringatan, tutorial blog

Read More »

Add Comment

Unknown Blogs

Menu Horizontal Keren dengan Efek Suara

Hai pembaca setia sekarang akan share sebuah trik blogger yaitu trik membuat menu horizontal keren dengan efek suara. Ya, sesuai dengan judulnya, yang membuat menu horizontal ini lebih unik dan keren daripada menu horizontal lainnya yaitu ketika kamu menyentuh (hover) menu di dalamnya maka akan menghasilkan suatu bunyi. Kalau masih bingung silahkan lihat demo/contohnya:

Menu Horizontal Keren dengan Efek Suara:
[ DEMO ]

Cara Membuat Menu Horizontal Keren dengan Efek Suara:

1. Masuk ke dashboard blogger

2. Klik Template, klik edit html, klik lanjutkan

3. Cari kode </head>, agar mudah dalam mencarinya silahkan pake CTRL+F, lalu pastekan atau letakkan kode berikut ini diatas kode </head> tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
(function($) {
$.fn.lavaFlash = function(options) {
var that = this;
var settings = {
container: 'ul',
cursor: '#lava-cursor',
current: '.current',
speed: 800,
sound: $('#sound', that)[0],
volume: 5
};
options = $.extend(settings, options);
return that.each(function() {
options.sound.volume = parseFloat(options.volume / 10);
$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
$('li', $(options.container)).each(function() {
var $li = $(this);
$li.mouseover(function() {
$(options.cursor).animate({
left: $li.position().left
}, options.speed, function() {
options.sound.play();
});
});
});
});
};
})(jQuery);
$(function() {
$('#navigation').lavaFlash({speed: 500});
});
</script>

4. Cari kode ]]></b:skin> lalu pastekan atau letakan kode berikut ini diatas kode ]]></b:skin> tadi

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #000;
border-top: 1px solid #00bfff;
border-bottom: 1px solid #00bfff;
position: relative;
}
#navigation ul {
margin: 0.4em 0 0 0;
padding: 0;
list-style: none;
height: 2.6em;
font: 90% 'Open Sans', sans-serif;
}
#navigation li {
float: left;
width: 6em;
height: 100%;
display: block;
margin-right: 1em;
}
#navigation a {
float: left;
width: 100%;
height: 100%;
color: #90ff00;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {font-weight:700;padding-left:15px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;
color: #000;background:#90ff00;
}
#xgen11 {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#xgen11-cursor {
width: 6.4em;
height: 100%;
background: #90ff00;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}

5. Cari kode id='Header1' kira-kira kode lengkapnya seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog (Header)' type='Header'/>
</b:section>
</div>

6. Lihat kode </div> yang berwarna merah diatas? letakkan kode berikut ini tepat dibawah kode hijau tersebut

<div id="navigation">
<div id="xgen11">
<div id="xgen11-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://plus.google.com">Google+</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://youtube.com">Youtube</a></li>
</ul>
<audio id="sound">
<source src="http://system-svn.googlecode.com/svn/mp3/sound.mp3"></source>
</audio>
</div>

keterangan:
- link yang berwarna kuning adalah link suaranya, silahkan ganti punya kamu sendiri untuk berjaga-jaga jika suatu saat link itu dihapus
- link yang brewarna merah adalah isi menunya, silahkan ganti dengan link kamu

7. Klik pratinjau, jika sukses silahkan klik simpan

sekian artikel tentang cara membuat menu horizontal keren di blog dengan efek suara, silahkan koment jika ada kesulitan. COPAS sertakan SUMBER link aktif ke blog ini

keyword: membuat menu horizontal keren dengan efek suara saat disentuh, cara buat menu horizontal, menu horizontal di blog bersuara ketika disentuh, horizontal menu css, horizontal menu with sound

Read More »

Add Comment

Unknown Blogs

Cara Dapat Top Level Domain Unlimited Gratis Terbaru

Setelah sekian lama tidak ada kabar lagi untuk mendapat Top-Level Domain (TLD) secara gratis, akhirnya saya telah menemukan cara baru untuk mendapatkannya secara unlimited & tentunya gratis. Dan domain gratis tersebut saya dapat dari Intuit dan telah saya praktekkan untuk semua member di Hosting saya, hasilnya saya telah mendapatkan domain yang saya inginkan secara gratis. Cara ini dengan menggunakanCredit Card khusus untuk Intuit yang bisa order ratusan domain Intuit dalam satu Credit Card. Nah bagi kalian yang ingin mendapat domain .com .org .net .info .biz .name secara gratis seperti saya, silakan ikuti langkah-langkah berikut!

1. Daftar Di sini untuk mendapatkan akunnya.


2. Jika sudah daftar, silakan Sign Out dari akun & biarkan akun tersebut selama 1 atau 2 hari lebih supaya akunnya tidak ditutup sama pihak Intuit. (Kalau saya sampai 2 hari, biar lebih afdol)
3. Setelah sudah 1 atau 2 hari kemudian silakan Sign In kembali di Intuit, lalu klik "Choose a domain (www.yourname.com) for your website".
4. Masukkan nama domain yang kalian inginkan.
4. Jika domain yang kalian inginkan tersedia klik "Get Domain".
5. Selanjutnya isi semua data seperti Nama, Email, Nomor HP, dll.


6. Berikutnya, jangan dicentang Domain Privacy, centang I agree to the Terms of Service dan Submit.


7 . Kemudian akan muncul halaman pop out yang tujuannya untuk meminta informasi dan alamat penagihan domain kalian (Domain yang kalian minta gratis, tapi untuk melindungi terhadap penipuan mereka membutuhkan informasi penagihan domain kalian.). Pada bagian Credit Card, masukkan Credit Cardkhususnya, silakan isi seperti di gambar!


8. Terakhir klik Purchase dan selamat Anda sudah mendapatkan Top-Level Domain (TLD) 1 tahun gratis!


9. Untuk mengatur Nameserver atau DNS nya silakan tunggu 24 jam sampai proses domain selesai.


10. Jika kalian mau order domain lagi cukup dihapus saja domain yang sebelumnya. (Domain tidak akan mati). Pastikan juga Nameserver atau DNS nya sudah diatur.




11. Dan ulangi lagi seperti nomor 4, begitulah sampai seterusnya. Tidak perlu menunggu 1 atau 2 hari lagi.

Dengan satu akun kita bisa order domain sepuasnya.

NB:
Bagi yang sudah punya akun Intuit yang dulu/sebelumnya bisa juga pakai cara ini.
Nameserver atau DNS hanya bisa digantikan sekali saja.
Domain hanya gratis 1 tahun dan tidak bisa diperpanjang.
Tolong jangan memperjualbelikan domain ini supaya trik ini tidak mati.

Read More »

Add Comment

Unknown Blogs