Membuat Kotak Bloggrol

Duh.. minggu yang cerah suasana Jakarta sepi dan tenang sayang nya di gedung ini ada pembangunan jadi berisik hiks....!!
udah lah.. ga papa saya ngga ke ganggu ini hehehe saya kan ada di ruangan.. jadi berisik nya ga terlalu berisik hihihi dah akh.. langsung aja mau bikin postingan
Terlontar sebuah pertanyaan pada saya dari seorang laki-laki yang berambut panjang berbetel Belah dua rambutnya ^^ (kaya betel rambut jaman dulu lah..) katanya jho gmana sih.. buat kotak kamu itu yang di samping kiri yang berisi link-link..??

di situ saya mau ngejelasin cape ngomong akh.. meningan saya posting aja deh di sini dari pada ngomong cape-cape dan nerangin nya cman pada satu orang dwang meningan saya posting deh..
Yuk mari Kita menuju Ke TKP

Pertama Login dulu ke Blogger dan pastikan anda sudah masuk ke Dashboard
trus Pilih Layout»Trus Pilih Add a Gedget Pilih Add script html/css Trus Masukin Script Yang ada Di bawah ini

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 160px;
height: 180px;
text-align: left; ">
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/> <a href="http://romisatriawahono.net">Romi Satria Wahono</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://mansyur.net">Mansyur</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://brainmatics.com">Brainmatics IT Training</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://ilmukomputer.org">Ilmukomputer.com</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://lutviah.net">Lutviah</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://mhulyana.wordpress.com/">Mulyana Saputra</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://kyantonius.com/">Kemas Antonius</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://ikrama.blogspot.com">Ikrama SMK</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://slametrianto.net">Slamet Rianto</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a href="http://jhoe-tkj.blogspot.com">Johani</a>
<br/>
<img src="http://i291.photobucket.com/albums/ll317/jhoejoe/link_arrow.png"/><a http://galaky.blogspot.com/=>YogaPutraNugraha</a>
</div>

Anda tinggal mengganti Link dan namanya <a href="http://mhulyana.wordpress.com/">Mulyana Saputra</a> Dengan link yang anda ingin kan Trus kalo udah tinggal Save deh..!!
Dan liat hasil nya !!
Smoga berhasil ^^

READ MORE - Membuat Kotak Bloggrol

Membuat Menu Horizontal

Hm... Udah lama ngga ngeposting lagi.. Setelah saya pulang ke sekolah ampir 1 minggu hehehe Setelah saya fikir-Fikir Dan banyak sekali pertanyaan dari teman-temen saya yang tanya gmana sih caranya buat yang menu di atas itu...? saya mau ngejelasin nya bingung hehehe meningan saya posting aja deh di sini dari pada pusing-pusing nerangin ia ga... :>

Langsung aja deh, Kita langsung pada tutorial Membuat menu Horizontal Dengan sedikit kasih sentuhan seperti Blogg ku ini, sebagai contoh liat aja menu ku di atas
Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna Merah Diatas diatas.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Silahkan disimpan dan lihat hasilnya.eh.. Ia hampir lupa..Teman-Teman bisa menyesuaikan warna latar dan textnya sendiri ya ^^
Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba ^^

READ MORE - Membuat Menu Horizontal