Your Ad Here

Shake Image And Link On Blog



Shake Image And Link On BlogSetelah sekian lama tidak pernah aktif dalam dunia blog dan berkunjung kesini untuk oprek-oprek code dikarenakan kemalasan serta kejenuhan yang melanda, pada kesempatan ini saya hanya ingin berbagi trik sederhana untuk mempercantik blog dengan effect shake atau getar pada gambar serta link.

Ok dech langsung saja pada topik pembahasan dan tidak usah terlalu banyak kata-kata daripada akan membuat kita tambah bingung hehehe...:D
Untuk code lengkapnya para sobat bisa langsung mampir kesini (pencet keras-keras), namun untuk para sobat blogger yang awam tentang coding seperti saya ini pasti akan mengalami kesulitan xixixi...:D

Akan tetapi para sobat tidak usah khawatir karena semua code tersebut telah dirombak dan dimodified oleh sahabat saya yang bernama Joy, sehingga kita tinggal meletakkan saja tanpa harus pelototin code satu persatu wekekek...:D

Langkah pertama yang harus sobat lakukan masuk pada account blogger yang sobat miliki kemudian klik pada bagian Design -> Edit HTML, centang pada bagian expand widget untuk menghindari kesalahan pada saat pengeditan agar bisa dikembalikan seperti semula.

Selanjutnya silahkan sobat cari code ]]></b:skin>, kemudian copy code dibawah ini tepat dibawah code tersebut atau diantara tag head...






<script type="text/javascript">
/*
Shake link/image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
Simplified by CrazyDaVinci - http://crazydavinci.net
*/
var type="a",rector=3,stopit=0,a=1;
function init(which){
stopit=0;shake=which;shake.style.left=0;shake.style.top=0;
}
function rattleimage(){
if((!document.all&&!document.getElementById)||stopit==1)return;
if(a==1)shake.style.top=parseInt(shake.style.top)+rector+"px";
else if(a==2)shake.style.left=parseInt(shake.style.left)+rector+"px";
else if(a==3)shake.style.top=parseInt(shake.style.top)-rector+"px";
else shake.style.left=parseInt(shake.style.left)-rector+"px";
if(a<4)a++;
else a=1;
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1;
which.style.left=0;
which.style.top=0
}
function shakeit(){
link=document.getElementsByTagName(type);
for(i=0;i<link.length;i++){
link[i].style.position="relative";
link[i].onmouseover=function(){init(this);rattleimage()};
link[i].onmouseout=function(){stoprattle(this);top.focus()}
}
}
if(window.addEventListener)window.addEventListener("load",shakeit,false);
else if(window.attachEvent)window.attachEvent("onload",shakeit);
else if(document.getElementById)window.onload=shakeit
</script>



Setelah para sobat selesai meletakkan codenya jangan lupa tekan save, namun apabila code tersebut error dan tidak bisa tersimpan khususnya untuk blogger silahkan sobat parse dahulu code tersebut dan simpan kembali serta lihat hasilnya dech hehehe...:D

Untuk pengguna wordpress org silahkan letakkan codenya pada bagian fotter php, namun untuk pengguna wordpress com sepertinya harus gigit jari dulu dech dikarenakan tidak bisa diedit-edit pada bagian phpnya xixixi...:D

Sekian penjelasan dari saya dan apabila ada kesalahan kata mohon maaf yang sebesar-besarnya, happy tweaking blogger Indonesia...:D

Live preview : Click here.
Specials thanks to : Joy Crazydavinci.

Cara Membuat Flex Drop Down Menu Pada Blog.



Cara Membuat Flex  Drop Down Menu Pada BlogSetelah beberapa hari off dari dunia perblogingan dikarenakan tidak memiliki bahan atau ide untuk diposting, kini saya kembali dengan membahas tutorial lagi hehehe...:D

Pada kesempatan kali ini saya ingin berbagi untuk para sobat Blogger pemula tentang cara memasang atau membuat "Flex Drop Down Menu", untuk dipasang pada blog milik sobat.

Fungsi dari "Flex Drop Down Menu" itu sendiri, menurut saya sich untuk menghemat tempat apabila pada blog sobat memiliki banyak link yang terpasang. Sehingga terlihat memanjang kebawah dan kurang enak untuk dilihat, dengan cara ini kita bisa mengakali masalah tersebut hehehe...:D

Ok dech langsung menuju topik utamanya yach, dan apabila sobat ingin memasangnya silakan ikuti langkah-langkah berikut...

Langkah pertama silakan sobat buat css eksternal dengan menggunakan code dibawah ini, dan beri nama terserah.css





.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}


.flexdropdownmenu li{
position: relative;
}

.flexdropdownmenu li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: #fae7a9;
border-bottom: 1px solid black;
text-decoration: none;
padding: 4px 5px;
}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: #F0CE7D;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}


Setelah selesai silakan sobat upload file terserah.css tersebut pada hosting yang sobat gunakan, kemudian ambil URLnya.

Langkah yang kedua silakan sobat buat js eksternal menggunakan code dibawah ini, beri nama terserah.js kemudian ikuti langkah seperti yang pertama...





/* Flex Level Drop Down Menu v1.1
* Created: Jan 5th, 2010 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Tweaked by Rchymera at http://www.rchymera.blogspot.com
*/

//Version 1.1 (Feb 19th, 2010): Each flex menu (UL) can now be associated with a link dynamically, and/or defined using JavaScript instead of as markup.

//Usage: $(elementselector).addflexmenu('menuid', options)
//ie:
//jQuery(document).ready(function($){
//$('a.mylinks').addflexmenu('flexmenu1') //apply flex menu with ID "flexmenu1" to links with class="mylinks"
//})

jQuery.noConflict()

var flexdropdownmenu={
arrowpath: 'arrow.gif', //full URL or path to arrow image
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

//***** NO NEED TO EDIT BEYOND HERE
startzindex:1000,
builtflexmenuids: [], //ids of flex menus already built (to prevent repeated building of same flex menu)

positionul:function($, $ul, e, $anchor){
var istoplevel=$ul.hasClass('jqflexmenu') //Bool indicating whether $ul is top level flex menu DIV
var docrightedge=$(document).scrollLeft()+$(window).width()-40 //40 is to account for shadows in FF
var docbottomedge=$(document).scrollTop()+$(window).height()-40
if (istoplevel){ //if main flex menu DIV
var offsets=$anchor.offset()
var anchorsetting=$anchor.data('setting')
var x=offsets.left+anchorsetting.useroffsets[0]+(anchorsetting.dir=="h"? $anchor.outerWidth() : 0) //x pos of main flex menu UL
var y=offsets.top+anchorsetting.useroffsets[1]+(anchorsetting.dir=="h"? 0 : $anchor.outerHeight())
x=(x+$ul.data('dimensions').w > docrightedge)? x-(anchorsetting.useroffsets[0]*2)-$ul.data('dimensions').w+$anchor.outerWidth()+(anchorsetting.dir=="h"? -($anchor.outerWidth()*2) : 0) : x //if not enough horizontal room to the ridge of the cursor
y=(y+$ul.data('dimensions').h > docbottomedge)? y-(anchorsetting.useroffsets[1]*2)-$ul.data('dimensions').h-$anchor.outerHeight()+(anchorsetting.dir=="h"? ($anchor.outerHeight()*2) : 0) : y
}
else{ //if sub level flex menu UL
var $parentli=$ul.data('$parentliref')
var parentlioffset=$parentli.offset()
var x=$ul.data('dimensions').parentliw //x pos of sub UL
var y=0
x=(parentlioffset.left+x+$ul.data('dimensions').w > docrightedge)? x-$ul.data('dimensions').parentliw-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge parent LI
y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y
}
$ul.css({left:x, top:y})
},

showbox:function($, $flexmenu, e){
clearTimeout($flexmenu.data('timers').hidetimer)
$flexmenu.data('timers').showtimer=setTimeout(function(){$flexmenu.show(flexdropdownmenu.animspeed)}, this.showhidedelay[0])
},

hidebox:function($, $flexmenu){
clearTimeout($flexmenu.data('timers').showtimer)
$flexmenu.data('timers').hidetimer=setTimeout(function(){$flexmenu.hide(100)}, this.showhidedelay[1]) //hide flex menu plus all of its sub ULs
},


buildflexmenu:function($, $menu, $target){
$menu.css({display:'block', visibility:'hidden', zIndex:this.startzindex}).addClass('jqflexmenu').appendTo(document.body)
$menu.bind('mouseenter', function(){
clearTimeout($menu.data('timers').hidetimer)
})
$menu.bind('mouseleave', function(){ //hide menu when mouse moves out of it
flexdropdownmenu.hidebox($, $menu)
})
$menu.data('dimensions', {w:$menu.outerWidth(), h:$menu.outerHeight()}) //remember main menu's dimensions
$menu.data('timers', {})
var $lis=$menu.find("ul").parent() //find all LIs within menu with a sub UL
$lis.each(function(i){
var $li=$(this).css({zIndex: 1000+i})
var $subul=$li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
$subul.data('dimensions', {w:$subul.outerWidth(), h:$subul.outerHeight(), parentliw:this.offsetWidth, parentlih:this.offsetHeight})
$subul.data('$parentliref', $li) //cache parent LI of each sub UL
$subul.data('timers', {})
$li.data('$subulref', $subul) //cache sub UL of each parent LI
$li.children("a:eq(0)").append( //add arrow images
'<img src="'+flexdropdownmenu.arrowpath+'" class="rightarrowclass" style="border:0;" />'
)
$li.bind('mouseenter', function(e){ //show sub UL when mouse moves over parent LI
var $targetul=$(this).css('zIndex', ++flexdropdownmenu.startzindex).addClass("selected").data('$subulref')
if ($targetul.queue().length<=1){ //if 1 or less queued animations
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
flexdropdownmenu.positionul($, $targetul, e)
$targetul.show(flexdropdownmenu.animspeed)
}, flexdropdownmenu.showhidedelay[0])
}
})
$li.bind('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI
var $targetul=$(this).data('$subulref')
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){$targetul.hide(100).data('$parentliref').removeClass('selected')}, flexdropdownmenu.showhidedelay[1])
})
})
$menu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
this.builtflexmenuids.push($menu.get(0).id) //remember id of flex menu that was just built
},



init:function($, $target, $flexmenu){
if (this.builtflexmenuids.length==0){ //only bind click event to document once
$(document).bind("click", function(e){
if (e.button==0){ //hide all flex menus (and their sub ULs) when left mouse button is clicked
$('.jqflexmenu').find('ul').andSelf().hide()
}
})
}
if (jQuery.inArray($flexmenu.get(0).id, this.builtflexmenuids)==-1) //if this flex menu hasn't been built yet
this.buildflexmenu($, $flexmenu, $target)
if ($target.parents().filter('ul.jqflexmenu').length>0) //if $target matches an element within the flex menu markup, don't bind onflexmenu to that element
return
var useroffsets=$target.attr('data-offsets')? $target.attr('data-offsets').split(',') : [0,0] //get additional user offsets of menu
useroffsets=[parseInt(useroffsets[0]), parseInt(useroffsets[1])]
$target.data('setting', {dir: $target.attr('data-dir'), useroffsets: useroffsets}) //store direction (drop right or down) of menu plus user offsets
$target.bind("mouseenter", function(e){
$flexmenu.css('zIndex', ++flexdropdownmenu.startzindex)
flexdropdownmenu.positionul($, $flexmenu, e, $target)
flexdropdownmenu.showbox($, $flexmenu, e)
})
$target.bind("mouseleave", function(e){
flexdropdownmenu.hidebox($, $flexmenu)
})
}
}

jQuery.fn.addflexmenu=function(flexmenuid, options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $target=$(this)
if (typeof options=="object"){ //if options parameter defined
if (options.dir)
$target.attr('data-dir', options.dir) //set/overwrite data-dir attr with defined value
if (options.offsets)
$target.attr('data-offsets', options.offsets) //set/overwrite data-offsets attr with defined value
}
if ($('#'+flexmenuid).length==1) //check flex menu is defined
flexdropdownmenu.init($, $target, $('#'+flexmenuid))
})
};

//By default, add flex menu to anchor links with attribute "data-flexmenu"
jQuery(document).ready(function($){
var $anchors=$('*[data-flexmenu]')
$anchors.each(function(){
$(this).addflexmenu(this.getAttribute('data-flexmenu'))
})
})


//ddlistmenu: Function to define a UL list menu dynamically

function ddlistmenu(id, className){
var menu=document.createElement('ul')
if (id)
menu.id=id
if (className)
menu.className=className
this.menu=menu
}

ddlistmenu.prototype={
addItem:function(url, text, target){
var li=document.createElement('li')
li.innerHTML='<a href="'+url+'" target="'+target+'">'+text+'</a>'
this.menu.appendChild(li)
this.li=li
return this
},
addSubMenu:function(){
var s=new ddlistmenu(null, null)
this.li.appendChild(s.menu)
return s

}
}


Langkah ketiga silakan sobat login kedalam blog sobat, kemudian masuk bagian edit HTML cari code ]]></b:skin> dan letakkan code dibawah ini tepat dibawahnya...
<link rel="stylesheet" type="text/css" href="URL TERSERAH.CSS" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="URL TERSERAH.JS">

/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
Apabila setelah selesai silakan sobat tekan tombol save.

Langkah yang terakhir silakan sobat klik bagian design dan tambahkan widget HTML/Javascript, kemudian masukkan code dibawah ini...
<li><p style="text-align:left"><a href="#" data-flexmenu="flexmenu1" data-dir="h" data-offsets="8,0">Nama Target Utama</a></p></li>
<!--HTML for Flex Drop Down Menu 2-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
<li><a href="URL Situs Target">Nama Situs Target</a></li>
</ul>
<li><p style="text-align:left"><a href="#" data-flexmenu="flexmenu2" data-dir="h" data-offsets="8,0">Nama Target Utama</a></p></li>
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="URL Situs Target">Nama Situs Target</a></li>
</ul>
Apabila sobat ingin mengganti silakan ganti pada bagian yang saya beri warna, dan bila sobat ingin menambahkan menunya silakan tambahkan dan urutkan angka pada bagian "flexmenu..." berwarna merah.

Sekian dari saya dan selamat bertweaking ria, serta kembangkan menurut kreasi sobat. Apabila sobat ingin melihat previewnya coba arahkan cursor pada widget specials link blog saya, kalau sobat ingin mencoba full codenya silakan main-main kesini (Pencet keras-keras), selamat mencoba dan semoga berguna...:D

Auto Hide Floating Ads.



Auto Hide Floating AdsHalo para sobat Blogger bagaimana kabarnya nich...?, semoga kabar kita semua dalam keadaan baik serta sukses selalu. Setelah beberapa hari off dari dunia blogging dikarenakan tidak memiliki ide untuk memposting hehehe...:D

Pada kesempatan kali ini saya akan mencoba posting tutorial lagi tentang cara memasang "Auto Hide Floating Ads" pada blog para sobat Blogger semua.

Alasan kenapa saya membuat postingan ini karena setelah melakukan blog walking, kebanyakan para sobat Blogger memakai floating ads yang terdapat tombol button closenya yaitu ketika pengunjung mengklik button close tersebut ads baru akan menghilang.

Jadi pada tutorial ini pengunjung tidak perlu lagi mengklik button close, floating ads akan menghilang secara otomatis. Apabila para sobat masih bingung dan ingin melihat previewnya dapat dilihat ketika para sobat datang pada blog jadul saya ini atau silakan lihat pada gambarnya diatas hehehe...:D

Ok dech kita langsung pada langkah-langkah yang harus sobat lakukan apabila sobat ingin memasangnya, langkah pertama yang harus sobat lakukan buatlah file js ekstensi dengan script dibawah ini dan beri nama terserah.js kemudian upload pada hostingan yang sobat gunakan...





/******************************************
* DHTML Ad Box (By Matt Gabbert at http://www.nolag.com)
* Visit http://www.dynamicdrive.com/ for full script
* Tweaked by Rchymera at http://www.rchymera.blogspot.com/
* This notice must stay intact for use
******************************************/

adTime=10; // seconds ad reminder is shown
chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime)

var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
var calunit=ns? "" : "px"
adCount=0;
function initAd(){
if(!ns && !ie && !w3) return;
if(ie) adDiv=eval('document.all.sponsorAdDiv.style');
else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]');
else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style');
randAd=Math.ceil(Math.random()*chanceAd);
if (ie||w3)
adDiv.visibility="visible";
else
adDiv.visibility ="show";
if(randAd==1) showAd();
}
function showAd(){
if(adCount<adTime*10){adCount+=1;
if (ie){documentWidth =truebody().offsetWidth/2+truebody().scrollLeft-20;
documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
adDiv.left=documentWidth-200+calunit;adDiv.top =documentHeight-200+calunit;
setTimeout("showAd()",100);}else closeAd();
}
function closeAd(){
if (ie||w3)
adDiv.display="none";
else
adDiv.visibility ="hide";
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

onload=initAd;
//End-->
Sekarang silakan sobat masuk bagian edit html pada blog dan cari kode...]]></b:skin>
Kemudian silakan sobat letakkan kode ini dibawahnya serta ganti bagian jsnya...
<style type='text/css'>
#sponsorAdDiv {position:absolute; height:1; width:1px; top:0; left:0;}
</style>

<script type='text/javascript' src='URL TERSERAH JS SOBAT'></script>
Selanjutnya silakan sobat save dan menuju pada bagian page element tambahkan widget baru html/javascript, kosongkan pada bagian judulnya dan letakkan script dibawah ini...
<div id="sponsorAdDiv" style="visibility:hidden">

<table width="445px" height="345px" bg><tr><td align="center" valign="middle">

<!--*****ADS CODE*****-->

CODE ADS LETAKKAN DISINI

<!--*****ADS CODE*****-->
</td></tr></table>
</div>
Nah selesai dech dan silakan sobat lihat hasilnya, semoga bermanfaat salam sukses selalu dari Kediri...:D

Credit: Here.

Award For My Friendship.



Award For My FriendshipSetelah sekian lama jarang online serta melakukan update postingan dikarenakan kerjaan yang tidak bisa saya tinggalkan, akhirnya sekarang bisa kembali online lagi.
Selain dikarenakan kerjaan saya juga terkena "syndrom malas" untuk menulis, jangankan online buka blog saja hampir tidak pernah.

Namun disaat saya mulai kembali lagi membuka blog, tanpa disangka dan diguga ternyata ada seorang sobat saya yang bernama "Mufied" telah sudi memberikan award sebagai penyemangat bagi saya untuk kembali aktif dalam dunia blogging.

Tidak lupa juga saya ingin mengucapkan banyak terima kasih kepada sobat "Mufied", semoga dengan kepercayaannya ini "syndrom malas" yang saya alami beberapa waktu lalu dapat terobati hehehe...:D
Berikut ini adalah syarat yang harus saya kerjakan, yaitu menjawab pertanyaan atau mengerjakan "tag" dibawah ini...
  1. Berapa blog yang kamu punya ? dan berapa umurnya ?
    Kalau dihitung-hitung sich saya hanya memiliki 3 blog dan satu blog diurus oleh istri saya, sedangkan untuk umur blog yang tertua adalah blog ini yaitu sekitar 9 bulanan.
  2. Sejak kapan kamu mengenal dunia blog ?
    Saya membuat blog ini atas ajakan teman saya Joy walaupun sebenarnya saya sudah sejak lama mengetahui dunia blogging, tetapi saya dulu tidak mengerti asyiknya dunia blogging.
    Sedangkan kalau online hanya main-main friendster, namun setelah mencoba buat blog ini ternyata asyik juga hehehe...:D
  3. Mengapa tertarik membuat blog ? dan untuk apa ?
    Saya ikut blogging selain mendapat banyak teman kita juga mendapatkan banyak pengetahuan, dan dapat berbagi dalam dunia maya ini.
  4. Apa kelebihan dan kekurangan dari blog kamu ?
    Kalau bicara kelebihan serta kekurangan dari blog saya, pastinya banyak kekurangannya dibandingkan kelebihannya karena saya sendiri juga jarang sekali untuk update postingan namun kritik dan saran sobat semua amat sangat saya harapkan bagi kemajuan blog ini.
Bagi semua sobat blogger yang berkunjung diblog ini dan bersedia mengerjakan tag diatas juga bisa mengambilnya.

Award For My Friendship
Dan untuk award yang kedua berikut ini datang dari sobat "Four Dream", yang telah dibagikan kepada semua followernya.

Tidak lupa juga saya juga ingin mengucapkan banyak terima kasih kepada sobat "Four Dream", semoga persahabatan dan tali silaturahmi antara sobat Blogger tidak pernah terputus walaupun kita semua belum pernah bertemu.

Sekian dari saya dan terima kasih juga kepada semua sobat Blogger yang namanya tidak sempat saya tulis, happy blogging dan terus semangat Blogger Indonesia...:D
Powered by Blogger