Terwujud

Modifikasi Menu Scroll dengan Backround Gambar



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Modifikasi-Terwujud.com
Hampir 3 hari saya merancang Modifikasi Menu Scroll dengan Backround Gambar ini, hal ini saya lakukan dikarenakan rasa penasaran dan ketertarikan sendiri jika menu scroll dilapisi dengan tampilan backround gambar yang dapat diganti-ganti sesuai dengan keinginan.

Usaha dan semangat tinggi yang saya lakukan akhirnya tidak sia-sia, apa yang menjadi keinginan telah terwujud. walaupun modifikasi ini merupakan modifikasi sederhana, namun bagi saya hal tersebut merupakan sebuah awal dalam melakukan modifikasi selanjutnya untuk terus berkreasi dengan tujuan menampilkan sesuatu yang menarik.

Cara Modifikasi Menu Scroll dengan Backround Gambar ini dibuat dengan menggabungkan beberapa kode yaitu kode Border dan kode Scroll, dengan menggabungkan dua kode ini akhirnya jadilah Menu Scroll dengan backround Gambar. Berikut:

Modifikasi Menu Scroll dengan Backround Gambar

1. Masuk ke www.blogger.com
2. Masuk ke menu Posting
3. Buat atau edit artikel anda
4. Copy dan Paste kode di bawah ini

<table border="0" style="background: url(http://2.bp.blogspot.com/-ojn8ZhgcMNE/UwzIeGBzkeI/AAAAAAAAAdo/47eQW4W_vrw/s1600/groundTV-Terwujud.jpg); height: 250px; padding: 0px 8px 46px 8px; width: 450px;">
<tr>
<td>
<center>
<div style="background: white; height: 180px; overflow: auto; padding: 0px 5px 0px 15px; text-align: justify; width: 430px;">

Isi teks atau file serta gambar di sini

</div>
</center>
</td>
</tr>
</table>


5. Publish atau perbaharui
6. Lihat Hasilnya

Keterangan Modifikasi Kode
Pada Kode Border
-Atur kode height: 250px dan width: 450px ( Sesuaikan dengan keinginan anda)
-Padding pada Kode Border (untuk tampilan scroll) dapat anda atur sesuai backround Gambar >> padding: 0px (bawah) 8px (kiri) 46px(atas) 8px (kanan).

Pada Kode Scroll
-Atur kode height: 250px dan width: 450px ( Untuk tinggi dan lebar scroll)
-padding: 0px 5px 0px 15px (Untuk jarak scroll pada atas, bawah, kanan dan kiri)
Modifikasi ini intinya merupakan kreasi dalam mengutak-atik sebuah kode, maka dari itu bagi anda yang ingin bereksperimen untuk membuat modifikasi yang lebih menarik seperti Kode Menu Scroll dengan Backround Gambar di atas atau kode-kode lainnya, maka lakukanlah menurut kemampuan dan imajinasi anda sendiri.

Demikianlah artikel tentang Modifikasi Menu Scroll dengan Backround Gambar, Jika ada yang kurang jelas atau kesalahan dalam penerapannya, silahkan tinggalkan pesan melalui komentara di bawah. Terima Kasih!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 12 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

  1. Hasil kreasi yang bagus dan menarik pak Ibrahim. Memodifikasi menu scroll biasa menjadi lebih bernilai tambah. Terima kasih sudah berbagi tutorial ini.

    ReplyDelete
    Replies
    1. Terima kasih pak uda, semoga menjadi manfaat bagi kita semua.

      Delete
  2. wah kerja kerasnya gak sia-sia, hasilnya keren hehe

    ReplyDelete
  3. jadinya lebih menarik menu scroolnya karena di lapisi dengan gambar
    thanks mas, saya pelajari dulu :)

    ReplyDelete
    Replies
    1. Terima kasih mas, silahkan dipelajari, jika ada modifikasi tambahan, beri tahu saya ya !!

      Delete
  4. Menu Scroll dengan Backround Gambar bisa menambah cantik blogg kita

    ReplyDelete
  5. mantap mas, untuk yang sering bikin artikel tutorial blog kayaknya penting agar artikelnya lebih menarik .. :)

    ReplyDelete
    Replies
    1. Betul sekali pak, langsung dicoba ya, saat ini saya ingin mencoba modifikasi yang lebih menarik, doain ya semoga bisa terwujud

      Delete
  6. ilmu baru dari pa ibrahim.. ijin nyimak ya pak.. :)

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved