Cara Membuat Menu Diatas Top Header

Bagi para sahabat bloger yang bingung bagaimana cara membuat menu di atas header saya akan menjelaskan caranya...
ya udah gk usah bsa basi lagi cekedot langsung aja lihat langkah-langkahnya

1. Login di blogger dengan ID Cyber Mania
2. Klik menu Layout
3. Klik Tab Edit HTML




Cara Membuat Drop Cap pada Posting

Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

Cara Membuat Drop Cap pada Posting
4. Centang Expand Template Widget agar code dapat terlihat semua

5. Masukan code berikut

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

taruh tepat dibawah code <b:skin><![CDATA[  lalu tarik slide kebawah sedikit dan dibawah code tadi cyber mania pasti akan menemukan serangkaian code perihal deskripsi blog. nah lalu cyber mania code panjang di atas tadi tepat di bawah serangkaian code deskripsi blog.

6. lalu cyber mania cari code <body> gunakan ctrl + F untuk memudahkan pencarian.

7. Lalu cyber mania copas code berikut tepat dibawah code <body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.jendelamusikindonesia.co.cc/'>Home</a></li>
<blink><li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/tangga-lagu-terpopuler.html' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/download-mp3.html' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/download-full-album.html' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/aliran-musik.html' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/old-pick.html' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.jendelamusikindonesia.co.cc/2010/09/request-lagu.html' title='Request Lagu'>Request Lagu</a></li>        
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

yang perlu diperhatikan kata berwarna biru silahkan cyber mania ganti sesuai keinginan cyber mania.

8. Simpan dan lihat hasilnya. Selamat mencoba...
Diposting oleh Unknown 1 komentar
Disable right atau disebut juga no right click dan dalam bahasa Indonesia bisa dikatakan sebagai anti klik kanan berfungsi untuk membuat fungsi klik kanan pada mouse tidak bisa dilakukan. Penggunaan script sederhana ini umumnya dimanfaatkan agar pengunjung tidak mencoba untuk membongkar atau melihat desain blog yang berupa kode html dan javascript. Karena klik kanan pada mouse kehilangan fungsi maka secara otomatis semua aktifitas pengunjung hanya dapat dilakukan melalui fungsi klik kiri.
Sebelum melangkah cara membuatnya, disini saya akan memberikan 2 trik No Right Click yang pertama ada :

1. Disable Klik Kanan Tanpa Pesan. dan
2. Disable Klik Kanan Menggunakan Pesan.

Jadi Sobat Tinggal pilih, mau yang mana,. Oke Langsung saja.

- Disable Klik Kanan Tanpa Pesan



<script type="text/javascript">
//<![CDATA[  /*bgsGR gubhuh reyot -- No Right Click */
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

- Disable Klik Kanan Menggunakan Pesan

<script language='javascript'>
//<![CDATA[
ns6 = document.getElementById; ns  = document.layers;ie  = document.all;if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=mouseDown;}
else{document.onmouseup=mouseUp;document.onmousedown=mouseDown;document.oncontextmenu=mouseDown;}
function mouseUp(){  return false;}
function mouseDown(e){if (ie) var e=0;
if (((document.all)&& (event.button==2)) || ((ns || ns6) && (e.which==2||e.which==3))){
alert("Silahkan Tekan Ctrl-C Untuk Mengcopy");return false;}
else if (((document.all)&& (event.button==1)) || ((ns || ns6) && (e.which==1))){
status = "Left click detected";setTimeout('status="";',400);}}
//]]>
</script>

KET: Teks yang berwarna Orange, sobat ganti dengan pesan yang ada inginkan apabila di klik kanan,.

Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Salah satu Kode CSS diatas, tepat dibawah kode ]]></b:skin>
6. Save, dan lihat hasilnya,..
Diposting oleh Unknown 0 komentar

Membuat Scroll Back to Top "Transparent" Atas/Bawah

Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.

Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas.

Gimana tertarik??
Ok,Caranya cukup sederhana koq, tinggal ikutin proses dibawah ini....
1. Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML
2. Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya kode </body>


<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>

Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body>  adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.

Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.

3. Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>

#bawah{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:55px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-right-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
#atas{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:15px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}

4. Dan langkah terkahir simpan...
Begitulah sehingga postingan ini berakhir
Diposting oleh Unknown 0 komentar
 




Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik