Monday, September 6, 2010

Membuat Link Postingan Atau Sidebar Keluar Balon Dengan CSS


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 katanya si Om dia ini gak ganteng tapi ngangenin, Penasaran? sambangi kemarkasnya wkwk

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!!!Katanya sih Gtu Brotha N Sista, tapi kenyataannya entah, saya juga gak tau hhe..

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{
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;
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)Aku Wes Bikin template HTML 5 yang Valid 100%, Cuma belum tak bikin Top Menunya

42 komentar:

Djangan Pakies said...

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 said...

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 said...

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

rafli pratama said...

Tips yang bagus sob.. hehe

Nuy said...

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 said...

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

Unknown said...

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

Munir ardi said...

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 said...

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 said...

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

Eka Ninjitsu said...

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

yudex said...

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 said...

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 said...

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

Topi said...

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

Tihang said...

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

nurgiantoro said...

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 said...

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 said...

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 said...

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 said...

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 said...

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

Faril said...

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

dindasaurus said...

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

Butik Bella said...

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 said...

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

Natural Nusantara said...

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

om rame said...

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 said...

tq ilmunya bro :)

imtikhan said...

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

Akoey said...

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

atanotonogoro said...

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.

ntiems said...

wahh mantap nih tar di pake ahh... makasih bang..

Gudang Informasi said...

Keren DJ, harus ku coba nich buat nambah pengetahuan di dunia blogger. makasih infonya DJ

Muhammad A Vip said...

pengin otak-atik beginian tapi takut, sumpah!

Unknown said...

Halo teman,
Informasi yang bermanfaat bagi para blogger.
Terima kasih atas sharingnya.

multibrand.blogspot.com

Matahari Free Download Mp3 said...

Keren sob. Nice info. Thanks. :D

Rizkyzone said...

keren sob saya pernah pasang juga model seperti ini tp tak lepas lagi

Bejo said...

Waw

keren sob

tampilannya bisa siganti gambar gak sob?

salam human dan salam kenal. hahaha
mampir ke blog human ya!

Download Software | WMP 11 Full said...

sippp mksi mas buat tutorialnya,,
thnks infonya salam kenal dari gieterror...

achmad taher said...

Met lebaran, maaf lahir bathin kawan...

Iwansky said...

thankyou for your information dude
i am iwansky from paris van java
please visit my blog too
http://www.iwansky82.blogspot.com
peace the world

DJ Site - Since 2009 Until Now

Creative Commons License
Blog Content by Ferdinand is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Based on a work at https://dj-site.blogspot.co.id/.

Themes by blogcrowds. Design With ❤ for Blogger Serabutan