Membuat AutoHide Navbar Blogger

Cara membuat navbar menjadi hilang tapi kalo mouse lewat dia muncul itulah yang namanya AutoHide Navbar. Mau tau kan cara membuatnya. Ikuti langkah2nya berikut ini :

1. Login Ke blogger kalian
2. masuk ke Rancangan / tata letak
3. Masuk ke bagian EDIT HTML ( jangan lupa centang box Expand Widget Templatenya )
4. Kalian cari kode ]]></b:skin>
5. Simpan kode berikut diatas kode tadi :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Wes, gitu tok teman2, mudah sangat kan???

Tooltip

TULISAN KALIAN

untuk membuat tooltip seperti diatas, silahkan ikuti langkah-langkah pembuatannya di bawah ini, okey:

1. Login ke blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>

#easyTooltip{ padding:5px; border:1px solid #000;color: #fff;background:#000;}

5. Sekarang simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- begin Tooltips --> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script>< <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script>

6. Simpan Template kalian

Untuk menggunakannya silahkan kalian gunakan kode berikut:

<a class="tooltip" href="http://www.blogger.com/LINK%20URL" title="PESAN DALAM TOOLTIP">TULISAN KALIAN</a>

Mudahkan??? aku aja bisa, masa kalian tak bisa .... hehehe, SEmoga Berhasil yaks...

Membuat Kursor Blog Selalu Di Ikuti Text

Text yang mengikuti arah lajunya kursor ini bisa kita rubah dengan text sesuai keinginan kita. Dengan bantuan java script ini akan bisa kita buat pada kursor blog. Untuk pembuatannya pun sangat simple karena kalian tidak akan pusing dihadapkan banyak Kode-kode.

Sebelum saya menjelaskan cara pembuatannya, silahkan kalian lihat Hasilnya Disini terlebih dahulu. Gimana??? Cakepkan??? hehehe kayak yang punya Blog Nich * agagagagagag Narcis Sitik tak apalah...

Untuk detail pembuatannya silahkan baca tahap-tahapnya dibawah ini :

Cara Memberi Effect Light Pada Gambar

Sekarang saya akan menjelaskan cara memberi effect light pada gambar. Untuk lebih jelasnya silahkan kalian perhatikan gambar berikut :

Lightbox untuk gambar ini mempunyai kelengkapan dengan adanya fitur sebagai berikut :

1. Tampil berdiri sendiri, Kalo dalam bahasa VB sering disebut ALways ON TOP
2. Adanya Button Next dan Prev untuk gambar lebih dari satu
3. Adanya Button CLOSE untuk menutup gambar

Untuk Membuatnya silahkan kalian ikuti tahap-tahap dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Sekarang simpan CSS berikut diatas kode  ]]></b:skin>

<!-- Start light effect by azis lamayuda--><br /> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}<br /> #lightbox img{ width: auto; height: auto;}<br /> #lightbox a img{ border: none; }<br /> #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }<br /> #imageContainer{ padding: 10px; }<br /> #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }<br /> #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }<br /> #imageContainer>#hoverNav{ left: 0;}<br /> #hoverNav a{ outline: none;}<br /> #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }<br /> #prevLink { left: 0; float: left;}<br /> #nextLink { right: 0; float: right;}<br /> #prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_Fm7TiIAusXk/TKAzmLsMrVI/AAAAAAAAABI/Xwqjr2RAwhs/prevlabel.gif) left 15% no-repeat; }<br /> #nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_Fm7TiIAusXk/TKAzmPM14CI/AAAAAAAAABE/MQlpAGatXcg/nextlabel.gif) right 15% no-repeat; }<br /> #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }<br /> #imageData{ padding:0 10px; color: #666; }<br /> #imageData #imageDetails{ width: 70%; float: left; text-align: left; }<br /> #imageData #caption{ font-weight: bold; }<br /> #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } <br /> #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} <br /> #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }<br /> <!-- End of light effect by azis lamayuda-->

4. Kemudian simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/prototype.js' type='text/javascript'/><br /> <script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/><br /> <script src='http://milikazis.googlecode.com/files/lightbox.js' type='text/javascript'/></code>

5. Simpan Template kalian

Nah... setelah kita berhasil menambahkan kode dalam template kita, sekarang waktunya untuk memasangkannya pada gambar. Untuk pemasangannya ada 2 cara yaitu:

1. Untuk Hanya 1 gambar silahkan tambahkan kode berikut :

rel="lightbox"

contoh :
<a href="URL GAMBAR" rel="lightbox"><img src="URL GAMBAR" /></a>

Nich ntar jadie kayak gini :



2. Untuk Gambar lebih dari 1 silahkan tambahkan kode berikut

rel="lightbox[roadtrip]"

contoh :

<a href="URL GAMBA" rel="lightbox[roadtrip]"><img src="URL GAMBAR"<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR"</a>

Semoga berhasil ...





Sumber dari sini

Capex...

Hadeh... capek jua kalo edit2 blog from Eijpi yaks, harus bolak-balik Copas from Opmi to MobyExplorer, sumpah capex... nih sambil nunggu di humz my Grandmother ada acara gitju, timbang ngantuk kan mending edit2, berbagi iLmu buat para Sobat,,, hehehe tu Kan???

Cara Buat Kotak Comment ber-EmOticon

Ayo2... Kita mulai berkreasi egend, ku ini dapet lagi tutOrial yang bisa buat blog kita tambah cakep, yaitu menambah emoticon di kotak Comment blog kita.


Ok ini cara memasangnya..Sebelum tu Download Full Template untuk langkah berjaga2.

1. Loggin => Layout => Edit HTML. Tandakan pada kotak Expand Widget Template.

2. Tambahkan kod berikut dibawah kod </body>. Di bahagian paling bawah.


<script src='http://www.geocities.com/almansuqie/emo2.js' type='text/javascript'/>

3. Lalu cari kod berikut.. 

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p> 

4. Klao dah jumpa, letakkan kod dibawah selepas kod <p class='comment-footer'> 

<b><img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/21.gif'/><br /> :))<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/39.gif'/><br /> :)]<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/28.gif'/><br /> ;))<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/5.gif'/><br /> ;;)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/4.gif'/><br /> :D<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/3.gif'/><br /> ;)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/10.gif'/><br /> :p<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/20.gif'/><br /> :((<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/1.gif'/><br /> :)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/2.gif'/><br /> :(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/8.gif'/><br /> :X<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/12.gif'/><br /> =((<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/13.gif'/><br /> :-o<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/7.gif'/><br /> :-/<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/11.gif'/><br /> :-*<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/22.gif'/><br /> :|<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/35.gif'/><br /> 8-}<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/32.gif'/><br /> ~x(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/33.gif'/><br /> :-t<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/37.gif'/><br /> b-(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/40.gif'/><br /> :-L<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/14.gif'/><br /> x(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/24.gif'/><br /> =))<br /> </b>

5. Ok selesai, klik save template dan coba lihat hasilnya. Gimana??? bisakan????


Semoga bErhasil...

Salam Sapa...

Hai aLL . . .
Gud Morning . . . Sua again with Kunit hehehe, gimana punya kabar?
Pagi ini udara begitu sejuk , enak banget buat santai sebenarnya , tapi apa mau dikata pekerjaan udah menunggu , hehehe . SEMANGAT !!!!!

Enak e ngapain yoooo... baca koran kali yoo,,, ben gak ketinggalan informasi tentang politik2 itu , kurang suka aku sebenarnya. hualah teulah ,,,, dah tamat bawa Koran , nich dari pada bengong n ngantuks aku mulai ketik2 di bLog ku saiyank , hags hags hags .

Kalo ku lihat2,,,???? Sepertinya teman-teman sudah pada mahir blogging ya??? Oia kalo temen-temen punya tips2 yang baru tentang blog, kasih taullah , saling tukar info gitu . Gimana??? Mau kan? 1 lagi thanks buat temen-temen yang sudah mengunjungi blog ku ini. Jangan lupa tuk tinggalin komentar ya? Coz koment temen2 merupakan penyemangat dan motivasi tuk my blog ben bisa lebih maju.

Key ... thaaaaaa ... Semangat waktue Kerja lagi...

Cara Membuat Efek Link Berwarna-warni dengan JavaScript

Pada postingan kali ini saya akan membahas tentang bagaimana cara membuat link warna-warni. Membuat efek link berwarna-warni di blog sangatlah mudah, kita tinggal memasukkan JavaScript pada blog kita. Apabila sudah memasukkan javascript, maka akan menimbulkan efek link menjadi warna-warni apabila di sorot dengan kursor.

Langsung saja, cara membuat link warna-warni adalah sebagai berikut:

1. Login ke Blogger
2. Klik Rancangan
3. Pilih Elemen Laman
4. Add Gadget
5. Pilih HTML/Java Script
6. Lalu masukkan kode dibawah ini :

<script src="http://sites.google.com/site/javascriptnew/java-script/rainbow.js" type="text/javascript"></script>

Save ,,, jadi dech ^^

Cara Membuat Tombol Select All Pada kotak Text Area

Ada cara untuk memudahkan para pengunjung dalam mengCopy informasi yang mereka butuhkan dari kotak text area yang kita berikan,yaitu dengan menggunakan perintah select all
select all di sini memudahkan para pengunjung untuk memblok atau melakukan select yang pada saat proses copy
berikut adalah kode text area dengan menggunakan sistem select all atau highlight all

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 50px; width: 300px;" wrap="VIRTUAL">cara memblok atau select all</textarea></div>
</form>
</div>
hasilnya sebagai berikut :

cara memblok atau select all

Selamat mencoba , semoga Berhacil ...

Cara Membuat Spoiler

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar n video tidak di load sebelum menekan tombol show.  Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilihan pada pembaca blog untuk membuka atau tidak isi spoiler.

Oke... langsung aja Copas ini Code :

<div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 1px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'spoiler'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 250px;" type="button" value="spoiler" /></div><br /> <div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;"><br /> <div style="display: none;">Isi gambar/text disini <br /> contoh (<img alt="pacaran" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3GLbhgCZHL2b7C3cQevktQ9JiW9BY1u1nf9SDK8YFZkBLDD2k1CrwD6rIU4T4Sf8bMIT0YkNQghdYT1AjeDgGWGPTtYmCzIIDwODJnxna_Te4tcitzUNcsuutzCrYxUYMV_6yhvsDuuX/s400/kiss1.jpg" />) </div><br /> <a href="http://kunitmaulana13.blogspot.com/">get spoiler<br /> </a></div><br /> </div><br /> </div><br />

n hasilnya ntar kayak gini nich :

Isi gambar/text disini
contoh ()

get spoiler