Cara merubah tampilan gambar saat di dekati cursor

Sebelumnya kang mahfidz mengucapkan selamat tahun baru 2011 2012 semoga di hari hari mendatang kita akan menjadi lebih baik mengawali tahun yang baru ini kang mahfid akan membagi bagi ilmu yang kami dapat dari mbah google Script berikut ini sangat lah sederhana tapi hasil nya cukup menakjubkan Coba arahkan cursor juragan ke gambar kang mahfid di atas ......gimana masih ingin tahu cara pembuatan nya ...oke langsung aja kita ke T...K...P....
Gunakan kode script ini di setiap postingan atau pun di HTML java script berikut kode nya





<center><a href="LINK YANG DITUJU" target="_blank"><img onmouseout="this.src=' Url gambar 1';" onmouseover="this.src=' Url gambar 2';" style="width: 144px; height: 221px;" src="Url gambar 1" /></a></center>
Mohon Perhatian Untuk teks yang berwarna merah gunakan url gambar yang sama sedang yang berwarna Hijau Url gambar yang berbeda  ,sedang untuk teks yang berwarna kuning adalah ukuran gambar yang bisa juragan ubah dengan ukuran yang Lain

»»  read more

Cara Membuat Tab View Menu 3 Kolom di Blog

Setelah kesana kemari akhirnya kutemukan juga cara membuat menu Tab view 3 kolom,selain menghemat tempat juga membuat template kelihatan cantik, berikut contoh menu tab view 3 kolom dan cara membuat nya :

• Login dulu juragan ke www.blogger.com dengan id sobat tentunya 
• masuk rancangan >> Edit HTML jangan lupa download lengkap dulu template sobat untuk menjaga kemungkinan ada kesalahan  Klik Expand Templates Widget
•  Cari kode berikut: ]]></b:skin>
• lalu copas kode berikut tepat di atas kode  ]]></b:skin>
div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 103px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; border: 0.5px solid #000000; border-bottom-width: 0; text-decoration: none; font-family: "Arial", Times New Roman, Serif; font-weight: 900; color: #000080; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #CEF6CE; } div.TabView div.Pages { clear: both; background-color: #FFFFFF; border: 0.5px solid #000000; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } 5. Jika sudah maka lanjutkan dengan mencari kode ini: </head> 6. Lalu copy kode di bawah ini dan pastekan di atas kode 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>
• Lalu save template

Langkah selanjut nya adalah cara menempat kan menu tab view nya

• masuk ke rancangan >>tambah gadget>>pilih HTML Java script 
• Lalu masuk kan kode di bawah ini ke dalam konten HTML/Javascript
• berikut kode nya 
<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 350px;"> <a> Tab 1</a> <a> Tab 2</a> <a> Tab 3</a> </div> <div class="Pages" style="width: 290px; height: 250px;"> <div class="Page"> <div class="Pad"> <style>.list { background: url("http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/panah-jalan.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px; } </style> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> <div class="list">< <a href="#" class="nudge">judul isi postingan</a> </div> </div> </div> <div class="Page"> <div class="Pad"> Isi tab 2 </div> </div> <div class="Page"> <div class="Pad"> Isi tab 3 </div> </div> </div> </div></form> <script type="text/javascript"> tabview_initialize('TabView'); </script>
• Lalu save

Selamat mencoba jika postingan tentang Cara Membuat Tab View Menu 3 Kolom di Blog ini bermanfaat isi kotak komentar ya....salaaam

»»  read more

Menu blog melayang

Sebelumnya sudah kita bahas bersama cara membuat menu blog super keren nah tak jauh dari materi sebelum nya kali ini pun kita akan membahas cara membuat menu blog melayang nah sebagai contoh lihat DEMO nya  sedangkan cara pembuatan nya :

1. login ke www.blogger.com
2. masuk rancangan >> Edit HTML>> cari kode  ]]></b:skin> dan masuk kan kode di bawah ini tepat di atas nya berikut kode nya 
#floatMenu { position:absolute; top:200px; left:65%; margin-left:235px; width:80px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:1px solid #999; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; width:80px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#fff; background-color:#333333; border-right:6px solid #999; width:150px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#09f;}
3. Lalu masukkan kode di bawah ini tepat di bawah kode  ]]></b:skin>berikut kode nya
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script> <script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script> <script language="javascript"> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>
4. Lalu save Template

Nah untuk penempatan kode java script nya : Masuk rancangan >> tambah gadget >>Pilih HTML java script lalu masuk kan kode berikut :

<div id="floatMenu">
<ul class="menu1">
<li><a href="#" > Home </a></li>
<li><a href="#" > About </a></li>
<li><a href="#" > Contact </a></li>
<li><a href="#"> Blog </a></li>
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Perhatian : teks yang berwarna HIJAU (top:200px; left:65%;) dapat sobat  ganti apa bila penempatan nya tidak sesuai dengan template sobat ....250%,atau 300% misal nya ...gunakan PRATINJAU untuk melihat hasil sementara .oke selamat mencoba .....salam.....jangan lupa coment nya oke ....

»»  read more

Cara membuat image hover

Image Hover adalah perubahan pada gambar apa bila cursor / mouse berada di atas gambar tersebut untuk mengetahui cara kerja nya klik

DEMO

dan berikut cara pembuatan image hover

1. pertama sobat harus login dulu ke www.blogger.com tentunya dengan ID sobat
2. masuk kerancangan >>Edit HTML >>Cari kode ]]></b:skin> untuk membantu pencarian gunakan Ctrl+F 
3. lalu masuk kan kode Css di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya :
<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>
4. Save template

Nah untuk penempatan Di Postingan gunakan kode seperti di bawah ini :

<div class="hovergallery">
<img src="masuk kan url gambar disini" />
</div>

Perlu di perhatikan untuk teks yang berwarna HIJAU ganti dengan Url gambar yang sobat sukai oke selamat mencoba

»»  read more

Cara merubah bentuk cursor di blog

Buat sobat yang dah berpengalaman mungkin tidak lah terlalu sulit merubah bentuk Cursor yang biasanya berbentuk panah putih dengan bentuk cursor yang berbeda tapi buat yang masih di dunia blogger (seperti penulis)mungkin merasa kesulitan oke untuk mengetahui cara pembuatanya yok kita langsung menuju ke T......K....P...

1. Pertama tentunya sobat harus login dulu ke blogger sobat
2. Lalu masuk ke rancangan >>Edit HTML
3. Lalu cari kode </head>
4. masuk kan kode di bawah ini tepat di atas kode </head>
Berikut kode nya:
<style type='text/css'>HTML,BODY{cursor:url(http://ak.imgfarm.com/images/cursormania/files/22/11202a.gif), auto;}</style>
5. Lalu save Template

Perlu diperhatikan Untuk Teks yang berwarna Hijau adalah alamat Cursor ,bisa di ganti dengan alamat cursor yang lain atau kunjungi blog ini

»»  read more

Cara membuat Semua Link bergoyang

Hay sobat Blogger....Pasti penasaran ...ya....apa lagi yang akan kita buat untuk postingan kali ini....so pasti ...postingan kali ini sangat menarik karena kita akan membuat tutorial tentang cara membuat semua Link di blog bergoyang....oke langsung aja kita menuju ke T...K...P...:

1. Login ke blogger
2. Masuk Rancangan
3. Edit HTML cari kode</head>
4. Lalu Copas kode di bawah ini Tepat di atas kode </head> berikut kode nya:<$2Fli>
   <script src='http://kangmahfid.googlecode.com/files/link_goyang_jquery%2Cmin.js' type='text/javascript'/>
   <script type='text/javascript'>          
   $(document).ready(function()  {           
   $(&#39;a&#39;).hover(function() {  //mouse in           
   $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
   }, function() { //mouse out            
   $(this).animate({ marginLeft: 0 }, 400);           
   });            
   });</script>
   
5. Lalu save template

Oke selamat mencoba semoga berhasil...........jangan lupa masukan dan kritikan nya ...Salaaaaaaaaaamm

»»  read more

Easiest Tooltip and Image Preview Using jQuery

Hallo sobat Blogger pingin nepatin janji nich kan di pertemuan seblumnya dah janji untuk membuat tooltip ,nah kali ini kita akan membahas tata cara pembuatan tooltip dengan kode css yaitu Easiest Tooltip and Image Preview Using
jQuery contoh nya seperti gambar di bawah ini coba sorot dengan cursor apa yang terjadi.....

• 
  
• 
  
• 
  

Gimana keren kan.........nah untuk cara membuatnya ikuti tutorial nya yach..

• Login ke blogger
  
• masuk rancagan
• Edit Html ,jangan lupa Centang kotak Expand Template Widget Lalu cari kode ]]></b:skin>
• Lalu Copas kode di bawah ini diatas ]]></b:skin>
/* --------------- Easiest Tooltip and Image Preview with jQuery ---------------------------------- */ #Imagetip{     margin:0;     padding:0; } #Imagetip li{     list-style:none;     float:left;   +  display:inline;     margin-right:10px; } /*  */ #preview{     position:absolute;     border:1px solid #ccc;     background:#333;     padding:5px;     display:none;     color:#fff;     }
Lalu simpan kode di bawah ini tepat di atas kode </head> berikut kode nya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://kangdadang.googlecode.com/files/main2.js" type="text/javascript"></script>
• Lalu Save Template

Nah untuk cara pemasangan di HTML atau postingan gunakan kode seperti di bawah ini

<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDBUYkLmTPA-UdsIIyxOkoMnGKdAQCgYDvVz0ip18rwqZyNd7dIymuWCnWMeMQiLqVvd3brsCxsVEFwhoGjxBHobsqQObnwP5ZNEqyho6LPq5SCEDn0SQpecq1LBvP4PcAsSlcH1SkuA/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDBUYkLmTPA-UdsIIyxOkoMnGKdAQCgYDvVz0ip18rwqZyNd7dIymuWCnWMeMQiLqVvd3brsCxsVEFwhoGjxBHobsqQObnwP5ZNEqyho6LPq5SCEDn0SQpecq1LBvP4PcAsSlcH1SkuA/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwaCRGX5Slj8SFSsNLODOHpE2W8WF6qfD5yPoM5GUsu-eNWtm3mkkBo-fy_biIiw7d3ght8qaIsdjXegfLbBGqBWTDs96mmn9AGC1mWo5KXB8PgIgS1L8ElbFjEDv4xtUdjNYEdv4uXg/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwaCRGX5Slj8SFSsNLODOHpE2W8WF6qfD5yPoM5GUsu-eNWtm3mkkBo-fy_biIiw7d3ght8qaIsdjXegfLbBGqBWTDs96mmn9AGC1mWo5KXB8PgIgS1L8ElbFjEDv4xtUdjNYEdv4uXg/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-ZpMWcKjQDLiGSLmBIMs7w9QFE3Cc_nWSOdRO6lvoyu7YAgJaT4EOh34chSVny_DTW-a0HqvQYGeUy23eHZ7JSMKbPOkpobqhhyeVWSMNBaaROt4KuV_myYtY25ZH-v_ofzNEGx3nQU/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-ZpMWcKjQDLiGSLmBIMs7w9QFE3Cc_nWSOdRO6lvoyu7YAgJaT4EOh34chSVny_DTW-a0HqvQYGeUy23eHZ7JSMKbPOkpobqhhyeVWSMNBaaROt4KuV_myYtY25ZH-v_ofzNEGx3nQU/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t_H1WnnFcpFUyud6N2VwselO_zG9ddEptlf0iUkOGxdCh3cJGIc67XPVXNnn7G77VmAmgEBA6eTFt51V_1fW54zfjZ2eDNzvEZTSG2rS4nkt67AETogxiHi4Hvm-3a9psgvIdEjklzc/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img  width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t_H1WnnFcpFUyud6N2VwselO_zG9ddEptlf0iUkOGxdCh3cJGIc67XPVXNnn7G77VmAmgEBA6eTFt51V_1fW54zfjZ2eDNzvEZTSG2rS4nkt67AETogxiHi4Hvm-3a9psgvIdEjklzc/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
    </ul>

Selamat mencoba semoga Tidak berhasil salaaaaaam oh ya jangan lupa coment dulu yach

»»  read more