edit.

http://www.eburhan.com/jquery-ile-ce...er-olusturmak/

Şuradan dosyayı bilgisayarınıza indiriniz.Masaüstüne rozet adında bir klasör açarak indirdiğiniz zip in içindekileri buna aktarın ve tema klasörünüzün içine atın.Daha sonra..

header.php de </head> kodundan önce şu kodu ekleyin.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/rozet/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/rozet/jquery.easydrag.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/rozet/jquery.easing.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	
		$("div#rozet").easydrag();

		$("div#rozet").ondrop(function(){
			$('div#rozet').animate(
				{ top:'-5px', left:'-60px'},
				{duration: 1000, easing: 'easeOutElastic'}
			);
		});		
	
	});
</script>

Yine header.php de <div id="header"> şu koddan sonra uygun biryere bu kodu ekliyoruz.

<div id="rozet">v2</div>

Son olarakta temamızın (style.css) stil dosyasına css kodumuzu ekliyoruz.

/************************************************
*	Rozet     								*
************************************************/
div#rozet {
	position: absolute;
	width: 77px;
	height: 80px;
	top: -5px;
	left: -60px;
	text-indent: -9999px;
	background: url(rozet/rozet.png) 0 0 no-repeat;
	/* IE 6 için saydamlık probleminin çözümü */
        _background: transparent;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rozet/rozet.png', sizingMethod='scale');
	}

Css kodlarındaki rakamsal verilerle oynayarak temanıza uygun konumlandırma yapabilirsiniz.Kolay Gelsin..