Membuat Scroll Menu Otomatis Buat Arsip Blog

Setelah sekian lama saya mencari kesana kesini tentang cara Scroll Menu Otomatis Buat Arsip Blog akhirnya saya dapetjuga berikut ini adalah caranya silahkan di lihat saja

1.Pertama login dulu
2.Klik Tata Letak
3. klik lagi Tambah Gadget
4.Pilih HTML/JAVASCRIPT

kemudian masukan kode ini :

<script style="java/script" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://siblackhat.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Catatan : ganti teks yang berwarna merah dengan url blog sobat
jika sudah jangan lupa di simpan,

1.kemudian masuk lagi ke Edit HTML
2.Centang Expand Template Widget
Kemudian cari widget HTML/JAVASCRIPT tadi, misalnya widget html/javascript script tadi anda beri nama Arsip Blog Scroll Menu seperti ini:

<b:widget id='HTML4' locked='false' title='Arsip Blog Scroll Menu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
kemudian letakkan kode seperti ini
<div style='overflow:auto;height:200px;'>

...............

</div>

jadi contohnya seperti ini

<b:widget id='HTML4' locked='false' title='Arsip Blog Scroll Menu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto;height:200px;'>
<data:content/>
</div>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Jika sudah klik simpan.

Semoga Bermanfaat....

Cara Menghilangkan Tanda Obeng Pada Blog

Gimana kabarnya nih sobat?mudah2an dalam keadaan sehat2 ja ya, saya sedang UKK nih, minta doanya aja sobat...
Kali ini kita akan menghilangkan tanda obeng, palu, paku dan segala macem yang membuat tampilan blog kita kurang maksimal. Pasti kalian juga pada kesel ngeliat obeng dimana2. Ok langsung pada pembahasan :

 



1.Pertama masuk ke Blogger dulu.
2.Masuk ke Tata Letak –> Edit Html –> centang kolom expand widget template
3.Abis itu cari kode ini ]]></b:skin> kalo udah ketemu, letakkan kode dibawah ini tepat diatas kode tadi.

.quickedit{
display:none;
}
Terakhir disimpan, dan lihat hasilnya...
Wassalamu’alaikum

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

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

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...

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,..

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

Energy Saving Mode Dengan Gambar

Setelah dulu saya share Pasang Energy Saving/Power Save Mode di Blog sekarang saya akan share Energy Saving Mode Dengan Gambar

Langsung aja deh, buat pasang energy saving mode dengan gambar, sobat blogger bisa ngikutin langkah-langkah dibawah ini . . .

Langkah pertama

1. Login Ke Blogger.com
2. Pilih Menu "Design"
3. Klik "Edit HTML"
4. Cari Kode </head> (biar gampang, pake ctrl+f)
5. Copy/Paste kode dibawah ini tepat di atas kode </head>

<!-- blogcunayz -->
<script language='javascript' src='http://agungxzeg.googlecode.com/files/agungxzegscreensaver11.js' type='text/javascript'></script>
<!-- blogcunayz -->

Langkah kedua

1. Masuk ke menu "Page Elements"
2. Klik "Add a Gadget"
3. Pilih "HTML/JavaScript"
4. Masukkan kode di bawah ini

<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(url gambar sobat blogger) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>

 dan lihat hasilnya...

Agar Postingan Kita Tidak Bisa Di Copy Paste

Pada postingan kali ini saya membahas mengenai postingan kita tidak bisa di block, dimana pada postingan sebelumnya pernah membahas no right click.  membaca kalimat tersebut tentunya artikel kita terhindar dari copas dari seseorang yang ingin mengambil artikel kita tanpa seizin pemiliknya, nah untuk pengamanan artikel anda.

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 berikut dibawah kode ]]></b:skin>

<script type="text/javascript">if (typeof document.onselectstart!="undefined") {document.onselectstart=new Function ("return false");}else{document.onmousedown=new Function ("return false");document.onmouseup=new Function ("return true");}</script>

6. Save, dan lihat hasilnya,.

Nah coba cek postingan anda kalau berhasil pasti isi postingan anda tidak bisa di blog pastinya tidak bisa di copy aman nih artikel anda, Selamat mencoba.

Membuat Link Berkedip Pada Saat Disorot Mouse

Posting sesuatu ah tentang Link Berkedip Pada Saat Disorot Mouse tau kan sobat2 kalau belum tau ya cari tau sendiri, heheheh..
Mungkin sydah banyak yang tau mengenai ini tapi apa salahnya ane sharing, mbok2 masih ada yang belum tau.. langsung aja ketekape..

Berikut caranya :

1. Login ke akun blogger
2. Klik Rancangan lanjut klik tab EDIT HTML
3. Cari kode </head>, tekan F3 untuk memudahkan pencarian
4. Kalau sudah ketemu copy paste kode berikut tepat dibawahnya

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

5. Simpan template dan lihat hasilnya
Anda bisa mengganti http://ajurna.googlecode.com/files/rainbow.js dengan java script anda sendiri,
Mudah sekali kan silahkan menikmati link berkedip

Beberapa Efek Transisi Pada Gambar

BlackHat - Hallo sobat apa kabarnih,,?? di tahun 2012 ini saya akan share Beberapa Eefek Transisi Pada Gambar. Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekendol,,

Nih ane kasih beberapa efeknya :

Efek Bumping

.post img{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .post img:hover{ -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,10px); transform:translate(0px,-10px); }

Efek Fade Out

.post img{ -webkit-transition:opacity .5s ease-out; -moz-transition:opacity .5s ease-out; -ms-transition:opacity .5s ease-out; -o-transition:opacity .5s ease-out; transition:opacity .5s ease-out; } .post img:hover{ opacity:0.2; }

Efek Fade In

.post img{ -webkit-transition:opacity .5s ease-out; -moz-transition:opacity .5s ease-out; -ms-transition:opacity .5s ease-out; -o-transition:opacity .5s ease-out; transition:opacity .5s ease-out; opacity:0.2; } .post img:hover{ opacity:1; }

Efek Rotasi

.post img{ -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .post img:hover{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

Efek Membesar

.post img{ -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .post img:hover{ -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); }

Efek Skew

.post img{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .post img:hover{ -webkit-transform:skew(30deg,20deg); -moz-transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); -o-transform:skew(30deg,20deg); transform:skew(30deg,20deg); }

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

1. Masuk Dasboard >> Template >> Edit HTML
2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F
3. Letakan salah satu kode CSS efek transisi di atas kode no 2
4. save and done ^_^