Saturday, 30 May 2009

Membuat Animasi Pada Sidebar Widget


http://erge32.blogspot.com Sepertinya ketagihan neh buat Tutorial Blog hehehe kali ini tentang Membuat Animasi Pada Sidebar Widget ... tapi sebelum dimulai ketawa dulu .. wakakakakak .. hahaha .. hihihi ... huhuhu .. itu artinya ucapan terimakasih buat sobat-sobat eRGe semua, karena udah ngasih respon pada artikel sebelum nya tentang Membuat Animasi Judul Blog. Untuk Posting kali ini tetap gak jauh benda ama yang lalu masih diseputaran kilometer Animasi (hehehe) tapi yang ini buat Sidebar Widget sob, untuk contoh nya bisa dilihat pada Blog ini itupun kalo masih ada hehehe mana tau nanti di copot (halah melenceng terus neh). ini dikarenakan ada direquest ama temen lewat shoutmix makanya dipostingin, padahal caranya sangat mudah tidak butuh waktu lama sampai bermenit-menit tapi cukup dengan 5 menit saja paling lama (bagi yang tau maksudnya ... hehehe .. halah sok-sok an)



Untuk Penerapan Tip ini saya pilih Template buatan Anak Negeri sendiri yaitu Megazine R 1-3 madein nya Kang Rohman The Master Of Blog, bagi sobat yang pengen pinter kunjungi aja blog Beliau ini, disana puluhan Tips dan Triks Ngeblog sudah menanti sobat, nah bagi sobat yang masih bingung atau pengen bertanya, langsung aja chat karena fasilitas nya sudah disediakan, para pakar Blog yg ada disana pun siap mengajari sobat ini pun kalo mereka tau (hehehe) seperti Kang Abeh atau Tutor, aaLiL Master Seo, easyblogtrick, noe, Chempluk, Yoyok, Otak's, GONDES, KOESnadi dan masih banyak yang lain, gak rugi deh kalo mampir kesana .. ilmu semua.
Sekarang langsung pada pokok pembicaraan Membuat Animasi Pada Sidebar Widget .. sebenar nya Animasi ini tidak memakai script tapi Animasi image gif sebelum nya sobat harus menyediakan dulu image nya .. nah untuk itu saya ngasih 2 contoh Image gif dibawah ini

Side Bar Photobucket

Alamat Link Image 1 : http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
Alamat Link Image 2 : http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Langkah Pertama :
Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini

pake ctrl + f supaya cepet nyari kemudian isikan
.sidebar h2

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}

Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

atau

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;


terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;
}

kalau udah selesai simpan template kemudian liat blognya .. kalau gak ada aral melintang pasti sidebar nya udah berubah ada lampu-lampu nya .. hehehe

Mudah-mudah tip ini ada mamfaat nya bagi kita semua ... amin, sebelum nya terima kasih bagi sobat-sobat yang mau mengomentari artikel ini ... salam.

61 Komentar: Membuat Animasi Pada Sidebar Widget


Kang Abeh on 30 May 2009 at 04:53 said...

brother saya tertarik dengan banner2 nya. Minta software nya donk

Terima Kasih Sob Kang Abeh Atas Komentarnya.
aan on 30 May 2009 at 05:44 said...

nich info sob...............

mantap abiz deh........

wah blognya jadi campuran ya maz......

wakaka........

tutorial blog

tutorial VB

he.......... :)

Terima Kasih Sob aan Atas Komentarnya.
noe on 30 May 2009 at 08:19 said...

ada yang hitam putih ngga aku mo pasang di sidebarku juga nieh.....

Terima Kasih Sob noe Atas Komentarnya.
yoyok on 30 May 2009 at 09:31 said...

ehmm.....mantahb brother...
oya equest nih,,,kl sempet buat tutorial cara buat image gifnya ya brother....
soalnya q tertarik banget nih...ok
Salam

yoyok

Terima Kasih Sob yoyok Atas Komentarnya.
Richie on 30 May 2009 at 10:47 said...

boleh jg neh pake sidebarnya ...
ia, wa setuju ma yoyok, pengen masang gambar format .gif,kan keren tuh kalo ada gambar gerak" tanpa pke flash ... hehehe

Arti Jawaban Cinta dari Wanita

Terima Kasih Sob Richie Atas Komentarnya.
Lasya on 30 May 2009 at 12:10 said...

sob tukeran link yuuu...
blognya dah ku link.. link balik yahh
thanks sob...

Terima Kasih Sob Lasya Atas Komentarnya.
ems on 30 May 2009 at 13:20 said...

wah, ternyata gitu ya.. kapan ya aku ada waktu..hik.. meh buat kayak gini, kan dah tau caranya dari sini..hihihihi

thanks top ya bro...

Terima Kasih Sob ems Atas Komentarnya.
devianty on 30 May 2009 at 21:24 said...

informasi yang sangat berguna, hasilnya bagus...

Terima Kasih Sob devianty Atas Komentarnya.
Kursus Blog on 30 May 2009 at 21:35 said...

Assalamualaikum warahmatullahi wabarakaatuh,

Akhi, ane punya info terbaru seputar Blogger Muslim

Sekarang antum bisa mendapatkan majalah asysyariah secara gratis hanya dengan memasang bannernya.

Info lengkapnya klik disini.

Barokallohu fiikum.

Wassalamualaikum warahmatullahi wabarakaatuh.

Terima Kasih Sob Kursus Blog Atas Komentarnya.
GONDES on 30 May 2009 at 21:45 said...

emang sobat saya yang satu ini kreatif banget
moga sukses sayang

Terima Kasih Sob GONDES Atas Komentarnya.
Belajar SEO on 30 May 2009 at 23:43 said...

alih propesi neh bos.. dari tukang VB jadi tukang banner,,, hahahahha... keep share yow and sukses selalu.

Terima Kasih Sob Belajar SEO Atas Komentarnya.
kakve-santi on 31 May 2009 at 00:49 said...

luar biasa...


menikmati blog yang bagus nih..

Terima Kasih Sob kakve-santi Atas Komentarnya.
1-1y4n9 on 31 May 2009 at 01:11 said...

Pastekan kode CSS di bawah ini di atas kode <strong>]]></b:skin></strong>






#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}

#mover {
width: 600;
position:absolute;
overflow:hidden;
}

.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}

.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}

.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

Terima Kasih Sob 1-1y4n9 Atas Komentarnya.
1-1y4n9 on 31 May 2009 at 01:15 said...

Pasang kode script ini di atas kode </head><script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Terima Kasih Sob 1-1y4n9 Atas Komentarnya.
1-1y4n9 on 31 May 2009 at 01:29 said...

Buat Element baru HTML/JAVA SCRIPT kemudian Pastekan kode HTML di bawah ini :



<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://ekakom.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://ekakom.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://ekakom.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://ekakom.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://ekakom.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>







Selesai Kang, silahkan di coba, jika kurang pas pada pemasangan, Kang inem bisa mengatur di Kode CSSnya.

Terima kasih...

Terima Kasih Sob 1-1y4n9 Atas Komentarnya.
Li on 31 May 2009 at 04:23 said...

na kl yg ini mbak ngerti utk apa hehehehe...
keep posting Eka...

Terima Kasih Sob Li Atas Komentarnya.
Imoel on 31 May 2009 at 06:47 said...

sebelum berkomentar aku ketawa dulu dech... wkwkwkwkwkwk...
saluttt, postingannya keren abiz.....
ditunggu postingan yang selanjutnya ya...

Terima Kasih Sob Imoel Atas Komentarnya.
asep canda on 31 May 2009 at 07:11 said...

keren tuh sidebar nya kalau pake itu sob mantab

Terima Kasih Sob asep canda Atas Komentarnya.
asep canda on 31 May 2009 at 07:13 said...

langsung copas link nya ya sob minta ijin nih

Terima Kasih Sob asep canda Atas Komentarnya.
wiyono on 31 May 2009 at 11:01 said...

Waduhh…bro, blog anda ini sangat luar biasa, infonya menarik dan berguna untuk yang ainnya..namun demikian kita tidak boleh takabbur ya bro..karena di atas langit masih ada langit. Oiya aku baru saja posting tentang manusia yang rendah hati..silahkan beri komentar, dan jangan lupa dapatkan beberapa tips fia feed gratis tis tis. Apalagi kalau follow wah wah wah bisa aku gak tidur saking senengnya.
Maklum kami blogger pemula

Terima Kasih Sob wiyono Atas Komentarnya.
imamnet on 31 May 2009 at 17:02 said...

makin keren aja neh tutorialnya, saluuuuuuuut ^_^

Terima Kasih Sob imamnet Atas Komentarnya.
ade on 31 May 2009 at 20:33 said...

Wow.. Great Post bro..
Thanks very much..

Terima Kasih Sob ade Atas Komentarnya.
erwinyustiawan on 31 May 2009 at 20:46 said...

wehehe rame blognya dengan warna2..:)

Terima Kasih Sob erwinyustiawan Atas Komentarnya.
Pit-Onta on 31 May 2009 at 22:20 said...

keren bro.. aku pake tuh punya kamu brott..hehe...ada yang lain lagi gak nehh ??

Terima Kasih Sob Pit-Onta Atas Komentarnya.
kafeforex on 31 May 2009 at 23:34 said...

Tipsnya bagus untuk mempercantik tampilan blog
Makasih untuk tips + scriptnya

Terima Kasih Sob kafeforex Atas Komentarnya.
Kang rohman on 1 June 2009 at 00:08 said...

Mantap nih erge. thanks sudah mereferensikan template

Terima Kasih Sob Kang rohman Atas Komentarnya.
MU Fans on 1 June 2009 at 01:38 said...

aku ambil satu ya sob....thx infonya yg menarik...

Terima Kasih Sob MU Fans Atas Komentarnya.
Gaban on 1 June 2009 at 02:22 said...

luar biasa emang brader kit satu ini

Terima Kasih Sob Gaban Atas Komentarnya.
Bang Fajar on 1 June 2009 at 02:27 said...

Aku minta ijin ambil satu buat langsung praktekin sob di blog aku...thanks yah

Terima Kasih Sob Bang Fajar Atas Komentarnya.
CentralBorneo004 on 1 June 2009 at 02:29 said...

ternyata keduluan erge bikin artikel ini,padahal aq sdh ada rencana bikin yg kaya' gini & lg koleksi banner,bikin banner he he..
sukses selalu sobat

Terima Kasih Sob CentralBorneo004 Atas Komentarnya.
aLDy Sangdipa on 1 June 2009 at 03:01 said...

mantap sob artikelnya..aq coba ya..

Terima Kasih Sob aLDy Sangdipa Atas Komentarnya.
Domain Gratis on 1 June 2009 at 04:31 said...

domain gratis 1000 dot com dan dot org serta dot net cepetan mungpung lagiu promosi nihhh untuk infomasinya silahkan
http://tinyurl.com/koqkag

Terima Kasih Sob Domain Gratis Atas Komentarnya.
Domain Gratis on 1 June 2009 at 04:33 said...

domain gratis 1000 dot com dan dot org serta dot net cepetan mungpung lagiu promosi nihhh untuk infomasinya silahkan
http://tinyurl.com/koqkag

Terima Kasih Sob Domain Gratis Atas Komentarnya.
easyblogtrick on 1 June 2009 at 04:43 said...

hohohho9...keren...siiiip..!!!

Terima Kasih Sob easyblogtrick Atas Komentarnya.
ndyteen on 1 June 2009 at 06:34 said...

bagus...sob...black black black

Terima Kasih Sob ndyteen Atas Komentarnya.
andro_simar on 1 June 2009 at 06:35 said...

hmm,, mantap infonya mas,, nanti tak cobain,, :D

Terima Kasih Sob andro_simar Atas Komentarnya.
Lampung Camp on 1 June 2009 at 13:39 said...

wih javascript di titlebarnya bagus pak... :-) unik deh :-)
salam kenal

Terima Kasih Sob Lampung Camp Atas Komentarnya.
CAHAYA NURANI on 1 June 2009 at 19:59 said...

hmmm,,, pasang gak yah,,, he,,, thanks infonya sobat,,,

Terima Kasih Sob CAHAYA NURANI Atas Komentarnya.
Fajar_Bukan on 1 June 2009 at 22:59 said...

Coba dlu..... emang kaka.....very coolllll....
by www.fajarbukan.blogspot.com

Terima Kasih Sob Fajar_Bukan Atas Komentarnya.
darma cahyadi on 2 June 2009 at 00:12 said...

ijin mau ambil ilmunya neh, thenk yu sob.

Terima Kasih Sob darma cahyadi Atas Komentarnya.
ukibatam on 3 June 2009 at 23:20 said...

mantab gan
thanks atas tutorial nya ya

Terima Kasih Sob ukibatam Atas Komentarnya.
adi on 4 June 2009 at 02:10 said...

baguzz....

Terima Kasih Sob adi Atas Komentarnya.
sdt-alqudwah on 5 June 2009 at 00:15 said...

infonya bagus... thanks ya..

Terima Kasih Sob sdt-alqudwah Atas Komentarnya.
Imoel on 9 June 2009 at 03:28 said...

postinganyang keren sob...

Terima Kasih Sob Imoel Atas Komentarnya.
dhody on 30 June 2009 at 04:09 said...

kren bgt bang,mnta softwarex dong

hehhehe....

Terima Kasih Sob dhody Atas Komentarnya.
Anonymous said...

bozz template ini di mn nyare nya aku care di ipietoon g ktemu ampek pusing mohon di bantu bozz

Terima Kasih Sob Anonymous Atas Komentarnya.
animation,money n more on 4 July 2009 at 01:09 said...

nmpag baca brow aku coba yah tar aku cari gambar yang pas buat blog ku

Terima Kasih Sob animation,money n more Atas Komentarnya.
niren on 15 July 2009 at 03:56 said...

Hey, you have a great blog here! I'm definitely going to bookmark you! Increasing your web traffic and page views Add, add your website in www.directory.itsolusenz.com/ site, it's pretty awesome too!

Terima Kasih Sob niren Atas Komentarnya.
imam CR7 on 8 August 2009 at 19:56 said...

Makasih ia sob!!

Terima Kasih Sob imam CR7 Atas Komentarnya.
alex prayogo on 20 October 2009 at 06:25 said...

aduh gua coba ne...mksdnya pa tu??

Terima Kasih Sob alex prayogo Atas Komentarnya.
Al Fajr on 20 October 2009 at 08:48 said...

manteb banget informasinya....
izin pake ya....

suskes 4U..

Terima Kasih Sob Al Fajr Atas Komentarnya.
Blogger Timur Bekasi on 30 October 2009 at 06:55 said...

salam kenal bozzzz..makasih banyak atas tutorialnya.
postingin juga dong cara bikin post labels animasi kya punya sampeyan

Terima Kasih Sob Blogger Timur Bekasi Atas Komentarnya.
tips seo blog on 21 November 2009 at 03:24 said...

saya salut sama blog ini banyak sekali tips trik mempercantik..hal kaya gini perlu di bukukan biar ngak lupa

Terima Kasih Sob tips seo blog Atas Komentarnya.
hidup untuk berbagi on 26 December 2009 at 04:57 said...

wah,,, informasinya menarik banget,,, makasih banyak mas atas ilmu2nya,,,

Terima Kasih Sob hidup untuk berbagi Atas Komentarnya.
mbah gendeng on 30 December 2009 at 00:51 said...

keren niy animasinya,,,,, silses selalu

Terima Kasih Sob mbah gendeng Atas Komentarnya.
Rival Aditya on 21 January 2010 at 02:57 said...

wah mantab gan tutornya au jg dh cba koq n hasilnya berhasil..

Terima Kasih Sob Rival Aditya Atas Komentarnya.
randyhawai - hot issue on 2 February 2010 at 08:02 said...

wah mantabh tuh.. dah aku pasang di blog..

Terima Kasih Sob randyhawai - hot issue Atas Komentarnya.
QQ on 25 February 2010 at 04:45 said...

kepingin coba tp masih belum tau apa - apa ..

Terima Kasih Sob QQ Atas Komentarnya.
Bermain Rubik on 14 July 2010 at 12:26 said...

ternyata suka animasi ya........

Terima Kasih Sob Bermain Rubik Atas Komentarnya.
Steve on 21 February 2011 at 19:36 said...

kalau untuk blog WP script nya bisa nggak om eRGe?

Terima Kasih Sob Steve Atas Komentarnya.
™ HeriAnSyAh™ on 25 February 2011 at 04:54 said...

kk wktu q cari enggak ad code .sidebar h2 nya...

jdi gmna kk???

tlonk jwbn.a ya kk???

Terima Kasih Sob ™ HeriAnSyAh™ Atas Komentarnya.

Tanggapan Sobat

Zona Bebas Komentar tapi jangan nyepam.

Kalo nyepam minta maaf nih, dengan terpaksa dilaporkan pada kantor polisi terdekat dihapus, monggo sobat silakan komentar jangan malu-malu.

ABOUT ME

Empu Blog ini

SUPPORT BLOG INI




Submit

Display Pagerank Yahoo bot last visit powered by MyPagerank.Net

IKUTI VIA EMAIL

Enter your email address:

Delivered by FeedBurner

5 Komentar Terbaru