Saturday, January 31, 2009

Membuat link tampak rapi di sidebar dengan marque

Dalam perjalanan blogwalking pada suatu malam, gw sempat terdampar di blognya Lookj dan disini gw dapat sedikit tips untuk membuat link tampak agar rapi, nach dari sini gw Thinking out The box ( meminjam istilah kang Mochal - Kalau di Indonesiakan Berpikir keluar kotak...yang maksudnya bahwa setelah kita menimba ilmu/tips dari satu blog atau blognya kang Mochal bagaimana caranya ilmu/tips tersebut kita kembangkan...begitu ya kira...? salut dech pada Om Subagya ). Nach setelah gw dapat tips tadi dari Om Lookj, Tips tersebut gw kembangkan dari membuat link tampak agar rapi menjadi Membuat link di blogspoot tampil rapi dengan Marque.

Disini sobat bisa melihat contohnya disidebar Aceh Blogging selain tampak rapi kita bisa menampilkan semua link serta sangat menghemat tempat.dan satu lagi bukan hanya untuk link saja tapi bisa berfungsi juga untuk marque widget yang lain seperti yang sobat juga lihat disidebar sya ( bisa untuk Top komentator,iklan,Feedjit dll)

Nach kita mulai saja sobat untuk menghemat waktu, disini saya coba dengan 2 cara dan 1 cara bonus:
1. Membuat link atau widget lain tampak rapi dengan marque
2. Membuat link tampak rapi dengan scrolroll
3. Menampilkan widget lebih hemat tempat dengan marque ( BONUS )

1. MEMBUAT LINK TAMPAK RAPI DENGAN MARQUE

<marquee direction="up" width="100%" scrollamount="3" height="200" align="left">
01.<a href="Alamat link1" target="new">Nama Link1</a><br/>
-----------------------------------------------------------------------<br/>
02.<a href="Alamat link2" target="new">Nama Link2</a><br/>
-----------------------------------------------------------------------<br/>
03.<a href="Alamat link3" target="new">Nama Link3</a><br/>
-----------------------------------------------------------------------<br/>
04.<a href="Alamat link4" target="new">Nama Link4</a><br/>
-----------------------------------------------------------------------<br/>
05.<a href="Alamat link5" target="new">Nama Link5</a><br/>
-----------------------------------------------------------------------<br/>
</marquee>


Nanti hasilnya seperti dibawah ini


01.Nama Link1

-----------------------------------------------------------------------

02.Nama Link2

-----------------------------------------------------------------------

03.Nama Link3

-----------------------------------------------------------------------

04.Nama Link4

-----------------------------------------------------------------------

05.Nama Link5

-----------------------------------------------------------------------




Catatan :
- height="200" adalah lebar kolom, sobat tinggal mengganti aja berapaka ukuran kolom yang sobat inginkan.
- Alamat link adalah contohnya http://aneukagamaceh.blogspot.com/2009/01/cut-meutia.html
- Nama Link adalah contohnya CUT MEUTIA
- <br/> adalah jarak baris
- ---------------------------adalah tanda - ( min )yang disambung seperti------, untuk tanda min sobat boleh mengganti ...... ( titik ) atau lain-lain

Kalau contoh lebih jelas seperti dibawah ini

<marquee direction="up" width="100%" scrollamount="3" height="200" align="left">
01.<a href="http://aneukagamaceh.blogspot.com/2009/01/cut-meutia.html" target="new"&gt;CUT MEUTIA</a><br/>

-----------------------------------------------------------------------<br/>

02.<a href="http://aneukagamaceh.blogspot.com/2009/01/teuku-umar.html" target="new">TEUKU UMAR</a><br/>
-----------------------------------------------------------------------<br/>

</marquee>


Nanti hasilnya seperti dibawah ini


01.CUT MEUTIA


-----------------------------------------------------------------------


02.TEUKU UMAR

-----------------------------------------------------------------------






2. MEMBUAT LINK TAMPAK RAPI DENGAN SCROLROLL

<center><div style="border: 1px solid rgb(238, 238, 238); padding: 10px; overflow: auto; width: 300px; height: 200px;">
<div align="justify">
1. <a href="Alamat link1">Nama link1</a><br/>
-----------------------------------------------------------------------<br/>
2. <a href="Alamat link2 ">Nama link2</a><br/>
-----------------------------------------------------------------------<br/>
3. <a href="Alamat link3">Nama link3</a><br/>
-----------------------------------------------------------------------<br/>
4. <a href="Alamat link4">Nama link4</a><br/>
-----------------------------------------------------------------------<br/>
5. <a href="Alamat link5">Nama link5</a><br/>
-----------------------------------------------------------------------<br/>
</div>
</div></center>

Nanti hasilnya seperti dibawah ini



1. Nama link 1

-----------------------------------------------------------------------

2. Nama link2

-----------------------------------------------------------------------

3. Nama link3

-----------------------------------------------------------------------

4. Nama link4

-----------------------------------------------------------------------

5. Nama link5

-----------------------------------------------------------------------





Catatan :
- width:300px adalah lebar kolom
- height="200" adalah tinggi kolom
- padding:10px adalah jarak dari border ke barisan huruf/angka
- border:1px solid #eee ( 1 px adalahketebalan border #eee adalah warna )
- Alamat link adalah contohnya http://aneukagamaceh.blogspot.com/2009/01/cut-meutia.html
- Nama Link adalah contohnya CUT MEUTIA

Kalau contoh lebih jelas seperti dibawah ini

<center><div style="border: 1px solid rgb(238, 238, 238); padding: 10px; overflow: auto; width: 300px; height: 200px;">
<div align="justify">
1. <a href="http://aneukagamaceh.blogspot.com/2009/01/cut-meutia.html">CUT MEUTIA</a><br/>
-----------------------------------------------------------------------<br/>
2. <a href="http://aneukagamaceh.blogspot.com/2009/01/teuku-umar.html">TEUKU UMAR</a><br/>
-----------------------------------------------------------------------<br/>
</div>
</div></center>

Nanti hasilnya seperti dibawah ini



1. CUT MEUTIA

-----------------------------------------------------------------------

2. TEUKU UMAR

-----------------------------------------------------------------------





3.MENAMPILKAN WIDGET LAIN LEBIH HEMAT TEMPAT DENGAN MARQUE( BONUS )

Saya ambil contoh Feedjeet saya

<script src="http://feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=100" type="text/javascript"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

Lalu kita beri marque
<marquee direction="up" width="100%" scrollamount="3" height="300" align="left"><script src="http://feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=100" type="text/javascript"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript></marquee>

Nanti hasilnya seperti ini



Huh...capek juga ya...semoga bermamfaat dan Happy blogging

Related Posts by Categories



20 comments:

Unknown January 31, 2009 at 7:52 AM  

wah.. wah.. wah... empat jempol ke atas nih...
tutorial yang sangat menyegarkan mas baka...
kalo arahnya mendatar berarti pake direction lef atau right ya ... bener nggak nih...

nanggroe January 31, 2009 at 10:40 AM  

waduh tengku... mantap informasi byoe....
baro uroe nyoe lon teupu cara peuget jih lagee nyan....

thank u tengku...

Anonymous,  January 31, 2009 at 10:47 AM  

keren2...ntar dicobain nih..
tapi agak ribet juga nih ngantinya ya...

Anonymous,  January 31, 2009 at 2:11 PM  

Hi friend.. Nice cool post.. Good work.. Do visit my blog and post your comments.. Take care mate.. Cheers!!!

FATAMORGANA January 31, 2009 at 2:36 PM  

siiip...saya copy dulu. ntar ada waktu dicoba

aR_eRos January 31, 2009 at 2:53 PM  

sayah lebih suka scroll roll
kalao marque mesti nungguin :D

Syai Blog January 31, 2009 at 5:41 PM  

Wow, very clear and nice tutorial, boleh saya coba yak...
Terimakasih...Arigatou....
Syai..

Subagya January 31, 2009 at 9:53 PM  

waw komplit sekali bang, seep yang ini ane bookmark, thinking out the box huehuehuehue

Anonymous,  February 1, 2009 at 10:07 AM  

Wah.. ini dia yang q cari mas.. sip.. mohon ijin artikelnya disimpen di kompi..

Jaloee February 1, 2009 at 9:14 PM  

iye seh keliatan rapi.. tapi butuh tenaga jg untuk di lodding.. yg sy tahu cuman di blogspot sj yg sering pake marquee

Baka Kelana February 5, 2009 at 10:34 AM  

@ suryaden : Thanks atas pujiannya,jadi malu saya Bang..sip Bang
@ ilham maulana : Kabereh Tgk Ilham
@ Atca : Yup nona Atca,kagak dong
@ ocean : Thanks ...oke
@ FATAMORGANA : oke Nona
@ aR_eRos : Thanks inspirasinya Bos
@ Syai Blog : Sama2 Bang Syai
@ subagya :Yup Master
@ Danta : Silakan saudara Danta
@ JALOE : Thanks atas wejangannya suhu Jaloe

Anonymous,  February 8, 2009 at 11:14 AM  

mantap nih infonya...emang keren yap kalo kita bisa kembangin apa yang sudah kita dapat.itu suatu ide yang bagus om baka.angkat jempol utk om baka.makasih tipsnya

Anonymous,  March 5, 2009 at 12:13 PM  

wah, mas.. aq ampe bookmark page ini, biar kpn ada waktu bs praktekin.. hehehee

thanks bgt yach, udah share.. ;)

Anonymous,  March 9, 2009 at 12:49 PM  

blog ini tampak rapi banget ya :)

yans'dalamjeda' November 17, 2009 at 5:06 AM  

Tips yg saya cari!!! Terimakasih. Sukses mas!

Bursa Bisnis Gratis May 22, 2010 at 7:19 PM  

Trims untuk tips-tips nya..kami tunggu kedatangan anda di blog kami

idebagus November 2, 2011 at 2:19 PM  

waduh...mantap kali artikelnya bro!!

Sekali - kali mampir dong ke blog ane..

praya July 17, 2012 at 8:28 AM  

keren infonya gan ,oya gan tukeran link yuk , link agan dah q pasang di blog ku,pasang link ku juga ya gan salam kenal

Rinjani Trekking via Aik Berik July 15, 2015 at 9:36 AM  

Terima Kasih Tutorialnya, Ijin CoPas..

Post a Comment

“sekadar meluah rasa, melepas hasrat, melerai ragu. Andai sepi coretan ini, kesepianlah yang sedang bersarang di jiwa.Andai riang coretan ini,kerianganlah yan sedang bertakhta dihati. Mengikut rentak hidupku,musafir dibumi Ilahi. Semoga rahmat-Nya sentiasa memayungi kita bersama”.

Bila artikel ini bermamfaat , tinggalkan komentar kawan

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008 Aceh Blogging

Back to TOP