Cara Membuat Menu Floating Image

Oke sekarang mari kita bahas apakah itu menu floating image? menu floating adalah menu yang memiliki posisi tetap/fixed, berada di kanan/kiri dan atas/bawah. Sedangkan image adalah gambar. Berarti dapat di artikan bahwa menu floating image adalah menu floating yang menggunakan gambar. Jika anda seorang kaskuser, maka anda sering menjumpai tampilan seperti ini. 

Floating

Itu yang di tunjuk panah merah yang saya maksud floating. Nah sekarang kita langsung ke cara pembuatannya aja ya. Step,By.Step!!!

1. Log in ke blog anda dengan akun anda.

2. Masuk ke design > Edit HTML

3. Cari kode ]]></b:skin> 

4. Copy dan paste kode berikut di atas kode ]]></b:skin> 

#floating {
position:fixed;_position:absolute;top:170px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan : kode yang berwarna merah dapat anda ganti sesuai keinginan. top=atas bisa di ganti dengan bottom= bawah. left=kiri dapat di ganti dengan right=kanan
5. cari kode </body>
6. Copy dan past kode ini di atas kode </body>

<div id="floating">
<a href="http://abi-galoga.blogspot.com">
<img src="http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2.jpg" border="0" /></a>
</div>

Yang berwarna merah ganti dengan Link anda dan yang berwarna biru ganti dengan alamat gambar anda.

Selesai sudah posting kali ini. Jika berhasil ucapakan Alhadulillah jika gagal jangan menyerah!coba lagi !

sumber

Read more »

Membuat Search Box

Kotak search (search box) yang saya maksud bukanlah search engine, tapi kotak search yang ini di gunakan untuk mencari artikel yang berada di Blog kita. Ok penjelasannya sudah selesai, langsung saja :

1. Login ke blog anda > Layout (tata letak) >> Page Elements (laman elemen) >>> Add a Gadget (tambah gadget) >>>> HTML/Java Script
2. Copy paste kode ini di kotak konten

<form id="searchform" action="/search" style=" text-align:center;" method="get">
<input onfocus="if (this.value == &quot;Cari Artikel&quot;) {this.value = &quot;&quot;;}" value="Cari Artikel" type="text" id="s" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel&quot;;}" size="20" class="inpsearch" name="q"/>
<input id="searchsubmit" value="GO" type="submit"/>
</form>

Lalu lihat hasilnya ....

Read more »

Cara Membuat Float Gambar Melayang

Trik ini sebenernya udah jadul siih, dan udah nggak gue pake lagi. Dan trik ini bisa dipake dengan mengkombinasikannya dengan blog, maksudnya ya menyesuaikan dengan tampilan blog. Gambar ini bentuknya bisa gambar diem atau berekstensi .jpeg/.jpg atau bahkan gambar bergerak/animasi berekstensi... .gif . Udah maksud belum niih? Gambar melayang ini selalu ada di pojok dan tidak akan ikut kemana-mana kalo scroll window digerakkan. Kalo penasaran ya praktekin aja lah, niih caranya:

• Pastinya ya Login di Blogger terus pilih Layout/Tata Letak
• Kemudian pilih menu Edit HTML kemudian beri tanda centang pada Expand template widget
• Sekarang coba cari kode ]]></b:skin> ... Kalo udah ketemu taruh kode di bawah ini di atasnya:
  

  #diesilver_float {
  position:fixed;_position:absolute;bottom:0px; left:0px;
  clip:inherit;
  _top:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

• Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
• Langkah selanjutnya yaitu mencari kode </body> kalo udah tinggal paste kode berikut di atas kode tadi:
  

  <div id="UnoZoneu">
  <a href="http://unozoneu.co.cc">
  <img src="http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif" border="0" /></a>
  </div>

• Ganti alamat link http://unozoneu.co.cc dengan alamat link kamu. Kemudian ganti juga link http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif dengan link gambar kamu. Berikut udah gue cariin beberapa gambar yang mungkin bisa kamu pake:
  
  
  
  

Read more »

Cara membuat Link Membesar ketika Sorot

Sebagai contoh coba anda arah kursor anda di sini. Bagaimana ? membesar kah ? nah... jika anda tertarik anda bisa ikuti langkah-langkah di bawah ini :

1. Selalu Login ke blog anda > Layout (tata letak) > Edit HTML
2. cari kode berikut ini yang mirip-mirip dengan ini (pusatkan pencarian pada bagian paling atas).

a:link {
color:$linkcolor;
text-decoration:underline;
font-size:12px;
}

a:visited {
color:$linkcolor;
text-decoration:underline;
font-size:12px;
}

a:hover {
color:#ff0000;
font-size:18px;
text-decoration:underline;
}

Perhatikan bagian font-size: (jika tidak ada anda bisa tambahkan sendiri). kode ini artinya adalah ukuran huruf link anda.

4. Sesuaikan ukurannya yang setiap bagian berarti :

a:link { adalah ukuran asli link
a:visited { adalah ukuran link jika sudah pernah di buka (saya sarankan yang ini samakan dengan yang di atas
a:hover { adalah ukuran link ketika di sorot oleh kursor (anda bisa ubah ukuran jadi lebih kecil / besa)

5. Save Templates.... Mudah kan, SANGAT MUDAH
Jika anda orang yang pinter, kreatif, genius, dll (seperti ehm...) anda bisa utak-atik kode lainnya loh

Selamat mencoba dan jangan lupa tinggalkan comment

sumber

Read more »

Membuat Tampilan Blog berbeda setiap Halaman

Sangat menarik sekali ya jika blog kita berubah penampilan pada setiap halamannya ,awalnya saya hanya sekedar main-main ,lalu saya menemukan cara ini disini.Baiklah saya akan menerangkan secara Step By Step sepertii pada blog ini :

1. Login ke blog anda > Design > Edit HTML
2. Cari kode ]]></b:skin>
3. Letakan kode berikut setelah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.url == &quot;URL posting yang tampilannya ingin di bedakan&quot;'>
body {
background:url(http://themes.googleusercontent.com/image?id=1PlcOIpvGMP-0UUOAln6SU3f8a6hBUno7T80yhJ_0O-vGlNgYhk-lCPbst9AtRs5z3OAX) center fixed;
}
#outer-wrapper {
width:870px;background-color:rgba(60, 42, 31, 0.6);
}
#main-wrapper {
width:100%;
}
#footer-wrapper, #sidebar-wrapper {
display:none;
}
#header-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUD-mQPzTkP3rsIiYrWMHLU9s-9ZsyMSOH8eSMQZuaATFCPq-AmK9UtjfbmAVtAVjOWjaqFdCrN92SHYjwHTbqcpwQAMczGsLO8LtYvopAZfPfpBCb9BWEPq7lXLtfdWPdyljZnvNPchrw/) center right;
}
.post {
color:white;
}</b:if>
</style>

• Ganti yang berwarna merah dengan URL/Link posting yang tampilannay ingin di bedakan
• Lalu ganti yang berwarna biru dengan style templates anda. Anda harus mengerti penulisan style templates jika ingin mengutak-atiknya

4. Save Templates.

Read more »