Selamat datang di shingeki no kyojin haha :p ,... Pada postingan hari ini saya sekarang akan saya jelaskan cara membuat Nav Bar di variasikan sedikit biar lebih cantik dengan Menu Dropdown haha, yuk liat di bawah ini !
1. Login ke blogger Anda
2. Pada menu Design ----> Edit HTML
3. Cari kode ]]></b:skin> biar lebih mudah ( Ctrl + F )
4. Copy script di bawah ini dan letakkan diatas kode ]]></b:skin>
#menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding: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-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xWBviuK4qcZ_Mb__kOo7mMiK-6gYHMnajJSToKRkyn-I5dCegtaypVedbyvq33eVqYV4ZMliVEaTqrsjEtxQKj43mXCb_I8qlvq3bRH6K_i5Vt89EwLZJOXclhEGdJVB51n2Yr-Mq5Q/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #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;padding-bottom:5px;-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{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
5. Kemudian cari kode :
1.1. <header> : untuk menu di atas header blog
1.2. </header> : untuk menu di bawah header blog
6. Copy dan pastekan kode dibawah ini dan letakkan di atas kode
1.1. <header> atau 1.2. </header>
7. Keterangan
1.1. Kode #ff0000 adalah warna background anda dan
1.2. Kode 980px adalah lebar menu utama, lebar menu dan lebar menu search ( sesuaikan dengan blog anda )
1.3. Kode berwarna merah adalah URL tujuan, ganti dengan URL Blog anda
1.4. Kode berwarna kuning adalah judul Menu Bar, ganti dengan judul yang anda inginkan
1.5. Kode berwarna biru adalah Sub judul Dropdown, ganti dengan judul yang anda inginkan
1.6. Kode berwarna hijau adalah alamat Pencarian/Search, ganti dengan alamat Blog anda
terima kasih haha :)
2. Pada menu Design ----> Edit HTML
3. Cari kode ]]></b:skin> biar lebih mudah ( Ctrl + F )
4. Copy script di bawah ini dan letakkan diatas kode ]]></b:skin>
#menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding: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-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xWBviuK4qcZ_Mb__kOo7mMiK-6gYHMnajJSToKRkyn-I5dCegtaypVedbyvq33eVqYV4ZMliVEaTqrsjEtxQKj43mXCb_I8qlvq3bRH6K_i5Vt89EwLZJOXclhEGdJVB51n2Yr-Mq5Q/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #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;padding-bottom:5px;-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{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
5. Kemudian cari kode :
1.1. <header> : untuk menu di atas header blog
1.2. </header> : untuk menu di bawah header blog
6. Copy dan pastekan kode dibawah ini dan letakkan di atas kode
1.1. <header> atau 1.2. </header>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='alamat-blog-anda' target='new'>HOME </a></li>
<li><a href='alamat-blog-anda'' target='new'>DOWNLOAD</a></li>
<li><a href='alamat-blog-anda'' target='new'>CONTACT</a></li>
<li><a class='trigger'>DOWNLOAD</a>
<ul>
<li class='hr'/>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>SHINGEKI NO KYOJIN</a></li>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>DATE A LIVE </a></li>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>DEVIL SURVIVOR2</a></li>
</ul>
</li>
<li><a class='trigger'>MULTI SUB </a>
<ul>
<li class='hr'/>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>EPISODE 1</a></li>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>EPISODE 6</a></li>
<li class='hr'/>
<li><a href='alamat-blog-anda' target='new'>EPISODE 7</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://fadhilrossi.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http:/fadhilrossi.blogspot.com'/>
<input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/>
<input id="search-btn" value="Search" type="submit"/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>7. Keterangan
1.1. Kode #ff0000 adalah warna background anda dan
1.2. Kode 980px adalah lebar menu utama, lebar menu dan lebar menu search ( sesuaikan dengan blog anda )
1.3. Kode berwarna merah adalah URL tujuan, ganti dengan URL Blog anda
1.4. Kode berwarna kuning adalah judul Menu Bar, ganti dengan judul yang anda inginkan
1.5. Kode berwarna biru adalah Sub judul Dropdown, ganti dengan judul yang anda inginkan
1.6. Kode berwarna hijau adalah alamat Pencarian/Search, ganti dengan alamat Blog anda
terima kasih haha :)
Cara membuat Menu Dropdown dibawah dan diatas Header
Selamat datang di shingeki no kyojin haha :p ,... Pada postingan hari ini saya sekarang akan saya jelaskan cara mengganti cursor pada blog. biar tambah bagus blognya di kasih variasi anime dikit haha, yuk liat di bawah ini !
"EREN JAEGER"
URL 1 "http://imageshack.us/a/img197/9118/kryw.png"
"MIKASA ACEKREMAN"
URL 2 "http://imageshack.us/a/img405/6876/iw7w.png"
"ARMIN ARLERT"
URL 3 "http://imageshack.us/a/img541/8367/vuir.png"
"LEVI RIVAILLE"
URL 4 "http://imageshack.us/a/img713/3789/c634.png"
2. Pada menu Design ----> Edit HTML
3. Cari kode </style> di dalam HTML
4. URL di ganti dengan 4 contoh url di atas
5. Copy script di bawah ini dan letakkan kode tepat diatas kode </style>
Di copy ----> ( body,*,a,a:hover{cursor:url(URL),auto;} )
contoh:
( body,*,a,a:hover{cursor:url(http://imageshack.us/a/img713/3789/c634.png),auto;} )
6. Jika sudah oke, klik Save Template.
7. Selesai
terima kasih haha :)
Cara Mengganti Cursor pada Blog
Selamat datang di shingeki no kyojin haha :p ,... Pada postingan hari ini saya sekarang akan saya jelaskan cara membuat teks berjalan di menu bar pada blog. udah ada yang tau belum apa itu menu bar? teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.
1. Login ke blogger Anda
2. Pada menu Design ----> Edit HTML
3. Cari kode </head> di dalam HTML
4. Copy script di bawah ini dan letakkan kode tepat diatas kode </head>
<script type="text/javascript">
//<![CDATA[
msg = " -- Shingeki no Kyojin ";
msg = " Shingeki no kyojin " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
Ganti teks yang berwarna merah dengan teks yang ingin anda tampilkan. Angka 100 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila dianggap perlu.
5. Jika sudah oke, klik Save Template.
6. Selesai
terima kasih haha :)
1. Login ke blogger Anda
2. Pada menu Design ----> Edit HTML
3. Cari kode </head> di dalam HTML
4. Copy script di bawah ini dan letakkan kode tepat diatas kode </head>
<script type="text/javascript">
//<![CDATA[
msg = " -- Shingeki no Kyojin ";
msg = " Shingeki no kyojin " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
Ganti teks yang berwarna merah dengan teks yang ingin anda tampilkan. Angka 100 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila dianggap perlu.
5. Jika sudah oke, klik Save Template.
6. Selesai
terima kasih haha :)