Membuat Link Postingan Atau Sidebar Keluar Balon Dengan CSS

Blogger Serabutan 12:49 PM

Responsive Ads

Selamat Siank Sahabat DJ Site Semua,

Ehm, Test Suara dulu ah wkwkw..... setelah tadi pagi saya bagi-bagi Film "Suster Keramas" yang hanya 124 MB (halah promosi lagi), kini saya mau memenuhi janji saya Kepada Sahabat baik saya Om Rame

Emank Si Om rame ReQuest apaan? Sebelumnya saya tanya dulu, anda udah baca Tutorial Dasar Pembuatan Top Menu Keluar Balon Belum? Klo Belum Baca dulu DISINI. Udah baca? baru kita lanjut, nah klo Tutorial yang saya kasih kemaren kan Untuk Top Menu, dan si Om rame Nanya klo untuk Menu Blog Sidebar bisa gak? Dan saya udah jawab bisa dan ini dia tutornya...

Sebelumnya, arahkan dulu kursor anda ke Tulisan MERDEKA!!! Dibawah ini untuk ng'liat bentuknya....

Indonesia MERDEKA!!!

Gimana Udah Paham maksud saya?

Nah, pertanyaannya sekarang gimana cara bikinnya? iya kan hha.... Nie dia caranya

1. Login dengan akun Blogger anda masing-masing(jangan pake Punya orang ya haha)
2. Sampai di Dasbor Pilih Rancangan atau Design
3. masuk ke Edit HTML(centang Expand Template Widget-nya)
4. Biar aman Save Dulu deh mendingan templatenya(takutnya anda gak percaya sama saya wkwkw)
5. Cari Kode Dibawah ini

]]></b:skin>

6. Udah ketemu? klo udah Masukkan Script Dibawah ini tepat Diatas Kode ]]></b:skin> tersebut

/*---------- Bubble DJ -----------*/
a.tt{

Responsive Ads

position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);

KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;

Responsive Ads

background: url(http://i785.photobucket.com/albums/yy131/djnand/BubblenyaBangDJ.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://i785.photobucket.com/albums/yy131/djnand/Bubble_Fillernya_Nie_Bang_Dj.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://i785.photobucket.com/albums/yy131/djnand/BubblenyaBangDJ.gif) no-repeat bottom;
}

7. Save template anda

Nah Ini Dia Script Untuk manggilnya, Script Dibawah ini terserah dan suka-suka anda sih mau dimasukkin Di dalam postingan boleh(Di bagian Edit HTMLnya) dan mau ditaruh di sidebar juga boleh. Intinya sih bisa dimana aja asal anda kuat nulis keterangan isi balonnya aja hhe....

Scriptnya:

Text Postingan <a href="Url yang Dituju" class="tt">Text untuk Urlnya<span class="tooltip"><span class="top"></span><span class="middle">Keterangan Di Dalam balon</span><span class="bottom"></a>

Ps: yang saya beri warna merah silahkan ganti Sesuai dengan kebutuhan masing-masing...

Huah.. tuntas Sudah Tugas Saya.... Buat Sahabat DJ Site Semua, Happy Blogging N Have a nice day....

To: Pak Jiox(Alkatro)

Responsive Ads

Responsive Ads

42 comments

Djangan Pakies September 6, 2010 at 1:39 PM

SIang Kang, lemes-lemes tetap semangat datang ke sini. Akhir-akhir ini ane sering nyanggong ke rumah sebelah Dj Note, banyak copas untuk disimpen kaya DJ note, bisa jadi nanti Djangan Note wkwkwkwk. Ohya ijin copas ya sob sekali lagi ijin bermaterai 6000 wkwkkk

Unknown September 6, 2010 at 2:09 PM

wah,,,,knapa aku slalu pusing kalo liat kode-kode kaya gitu ya...
hahahaha,,otakku gak nyampe...

aku gak minta mas Fer bikinin tutorial,,,tapi aku mau minta mas Fer ngerombak blog ku aja....wkwkwkwwkwk...
lama-lama ngelunjak aku...hehehe

soal pilem tadi,,,kalo pilem barat boleh gak????hehehehe
padahal harddisk eksternalku isinya banyak pilem blum kutonton smua...hehehehe

oya,,gmana niy ngasi undangannya????pacarku gak bgtu apal daerah situ euy...apa dikirim aja ya????

Unknown September 6, 2010 at 2:35 PM

Wah...wah..... ini nih yang saya cari-cari sob,,, buat nampilin di link berapa kapasitas/size download....keren-keren sob,,,,

rafli pratama September 6, 2010 at 3:09 PM

Tips yang bagus sob.. hehe

Nuy September 6, 2010 at 3:10 PM

Hallo lagi kak... hihi mumpung liburan puas-puasin ngeblog daaaah! soal hiatus mah lupakan sejenak! haha... =D

Ooo ini postingan intinya toh, buseeet pembukaannya aja [ake 2 posting segala. ckck...
lucu ihh bikin link kayak gitu, bookmark dulu ah kali aja mau bikin =D

mixedfresh September 6, 2010 at 3:12 PM

Aku ga mudeng nih masalah kode kaya gini....apa adanya dah....

Unknown September 6, 2010 at 3:13 PM

Trims tutorialnya yang amat menarik ini. Salam sukses selalu buat DJ-Site.

Munir ardi September 6, 2010 at 3:21 PM

mau uji coba dulu sob di blog aku yang lain soalnya aku nggak muddeng soal html gini, sering karena mau menambahkan sesuatu malah harus ganti template karena ada kesalahan mkalum masih awam soal ginian

Evet Hestara September 6, 2010 at 3:31 PM

balon itu kayak gimana ya? hehe..internet di rumah lemot nih jadi berat kalo mau kemana2 :D
terima kasih sudah berkunjung ke blog saya ya sob..saya jadi semangat lagi nih blogwalking nih eheh..

syahida September 6, 2010 at 3:48 PM

dengan adanya balon yang keluar lebih memudahkan pembaca postingan untuk memahami isi dari link tersebut. Siiip shob...

Eka Ninjitsu September 6, 2010 at 4:10 PM

Wah... ada yg baru lagi nih...hehehe
Bisa aq coba kapan2 ah....
Biar jadi Mantaft tampilan Blognya... SUKSES KANG..!!

yudex September 6, 2010 at 4:19 PM

Kalo pengen balonnya keluar gambar Aura Kasih gimana caranya?

pertanyaan itu bisa becanda bisa serius lho sob, hehe.

emang kalo nonton film itu sambil ngapain koq mesti keramas? wakakakakkkk

Amdhas September 6, 2010 at 4:38 PM

boleh di koreksi dan mohon di ganti judulnya:

ini bukan css3 aku sedikitpun ga menemukan sintaks css3 di atas,,
aku malah menemukan background, justru css3 malah bisa membuat sebuah background teranimasi bukan menambahkan background agar bisa teranimasi..

css di atas css lama opacity sudah ada sejak lama,

css3 adalah pengembanggan animasi yang mempunyai timing dari trantition ke transform, dengan bala bantuan sintaks moz dan webkit....

sory sob kalu masalah kode aku kritis, kasihan kalu yang menerapkan salah arti mohon di ganti judulnya dengan css saja bukan css3 dan css3 tidak pernah pakai span lebih memakai:

<style type="text/css">
</style>

dan di lebih ke perhitungan matematika untuk mendukung canvas, juga div yang di terapkan

Rela Rahmah September 6, 2010 at 4:49 PM

keren keren keren.. ini kode-kode html gitu nya bikin sndiri ya?

Topi September 6, 2010 at 5:16 PM

Wokee sob , langsung ke TKP & coba 2 dulu ne , ,
thanks ne ^_@

Tihang September 6, 2010 at 6:23 PM

mantap !... ada tutor fresh disini. di save dl nanti kl udah siap langsung di praktekan.

nurgiantoro September 6, 2010 at 6:38 PM

coba gak ya sob.hehehe

pinter script ya ternyata... hemmmm gak bilang-bilang... buat template dong sob yang buagus gitu kayak punya detik gitu aku mau makenya...

alkatro September 6, 2010 at 7:08 PM

tt:tul tip bang dj to? ngomongin suster keramas sama balon ~hubungane opo ya~ waw sereem.. itu link endingnya wis tak klik, kirain dunlot template xexexe.. kalo ada boleh dah.. kapan2 bisa takmutilasi :D

oempak September 6, 2010 at 7:11 PM

nah ini nih, aku pernah nyari yg bginian, tp ga ktmu jg, boleh nih saya catet, bwt referensi nanti utak atik template lg,...asik

anak smp ganti baju September 6, 2010 at 7:19 PM

ngobrolin html5, kelemahanya memang di IE.. Tapi yen takpikir2 malah kebalik. IE yang harus insap untuk memperbaiki diri agar bisa mengikuti pola HTML5.. Wkwkwk.. kemarin dikasih dunlot tmp html5, lagi takpasang belum sempat di obok2 catnya.. lagi ngubah font 1menit, modem e sendlap sendlup.. tak tinggal kaboor

Amdhas September 6, 2010 at 7:39 PM

oia fer kalu aku juga kalu ada yang salah di blogku mohon di koreksi ya?
jujur aku salut ini penciptaan sendiri, dan html5 templatenya..mantap fer,
keep on blogging

achmad taher September 6, 2010 at 7:47 PM

link keluar balon boleh gan dicoba, tp aq dah ada link wordpressnya. disimpan dulu buat blog yang lain. thanks sharenya.

Faril September 6, 2010 at 9:06 PM

malah nobrolin fil suster keramas..ada film suster mandi wajib??

dindasaurus September 6, 2010 at 9:19 PM

wahahahah..ak gamau pilm suster keramas aaah..maunya POCONG SIKAT GIGI..ada gaak ka?

Butik Bella September 6, 2010 at 9:56 PM

Membaca SUSTER KERAMAS ajah dah bikin bulu roma merinding.. Untungnya bukan malam Jum'at nih..hiiii srem srem srem.. wkwkkwkwkk

Nyambung ga' yah.. xixixi

james September 6, 2010 at 10:28 PM

lumayan ne buat mempercantik blog !
nice posting sob ... semoga bermanfaat buat orang yang membaca.

Natural Nusantara September 7, 2010 at 12:49 AM

hi hi keren kang tips nya, hi hi maaf juga baru kunjung nih, jan kalau mepet lebaran gini seba sibuk, he he.....

om rame September 7, 2010 at 3:51 AM

trims banyak banget sekaLi nih Fer, requestnya udah digarap pLus pake acara ngundang2 segaLa Lg pLus digeLarin karpet merah. saya sebagai sang Master Bajakan jd merasa Lbh terhormat aja nih *sambiL mbenerin posisi duduk*. hakhakhak...

cara untuk memasukan scripnya udah bisa dipahami, sedangkan pd scrip yg untuk dimasukan ke pemanggiLnya udah dapet bayangan sih tapi kudu di praktekin duLu di bLog yg khusus untuk ngedit2 tempLate, biar Lebih jeLas. Lagi puLa isi (tuLisan) pada scrip pemanggiL tsb kan perLu kreasi tersendiri biar Lebih menarik.
ditunggu aja yah Fer untuk kabar baiknya, 1 atau 2 hari ini beLum bisa praktek. secara Lg sibuk bayar utang BW yg udah Lbh dari seminggu numpuk, gak enak sama temen2 yg udah konsisten mampir biarpun saya jarang mampir. tentunya jenengan Lbh pernah ngerasain juga kan kayak gini?, jadi sementara harap makLum kaLo prakteknya ditunda beberapa hari.
makLum Fer, semenjak geLar Master Bajakan meLekat di konten saya jd banyak banget temen2 yg pd konsisten mampir, beLum Lg tambahan banyak foLLower baru berdatangan tanpa kasih kabar, saya jadi repot ngeLacaknya kaLo di foto foLLowernya gak tampiL Linknya, gak enak juga kan kaLo gak ngasih foLLow baLik. Laksana "hiLang satu tumbuh seribu", Fer. tapi bikin mumet kudu ngeLacak URLnya duLu, dah tau saya gaptek sama begonoan, pd gak paham kaLi yah.
gak tau tuh pengaruh dari mana, pada takut disentiL kaLi yah?. hakhakhak...

Aulawi Ahmad September 7, 2010 at 6:29 AM

tq ilmunya bro :)

imtikhan September 7, 2010 at 7:11 AM

wah keren sob... ntar tak coba
makasih ya infonya
sukses selalu

Akoey September 7, 2010 at 7:28 AM

Sobat, kalo ada trik baru pasti deh aku pelajarin..
so thanks deh dah share nih yah..
Oke deh.. Happy blogging sobat.. :)

atanotonogoro September 7, 2010 at 9:44 AM

haaaa aku butuh ini banget nih soalnya aku lagi ngerjain website. hehehehe soalnya aku bosen sama menu yang drop down gitu kok kayanya biasa banget ya ;p makasih kak fer *peluk* wink wink.