Trik Membuat Kotak Banner

Posting merupakan tanggapan kami terhadap pertanyaan Saudari Sri Wahyuni dengan menggunakan fasilitas “Kontak” tanggal 14 September 2011. Mungkin mba telah membaca posting sebelumnya yang berjudul “membuat kotak banner”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.

Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan CSS3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum ]]></b:skin> & HTML dimasukkan ke dalam penambahan gadget atau widget. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.

Widget Banner I

Banner
Banner
Banner
Banner
Banner
Banner

CSS

/* Area yang akan digunakan untuk memasang Banner */
.kotak-banner {
background:#999;
border:2px solid #c3c3c3;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

/* Tempat untuk memasang Banner di atas kode ini */
.banner {
background:#c3c3c3;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
position:relative;
width:45.5%;
text-align:center;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}

/* Memunculkan title image saat di dekati tetikus (mouse) */
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
left:4%;
bottom:3%;
width:92%;
position:absolute;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#f1f1f1;
-webkit-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-o-box-shadow:0px 0px 5px #fff;
-ms-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
}

HTML

<div class="kotak-banner">
  <div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-dX3glMH5tEA/TnFeeAlYpOI/AAAAAAAABOw/odp2gkyQgZg/s800/125x125png.png" alt="Banner"/></a>
  </div>

...

</div>

Catatan:

  • Copy & paste dimulai kode <div class="banner"> … </div> pada titik, titik,titik (...) untuk menambah banner.
  • Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.
  • Rubah title (warna biru) sesuai dengan title banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.
  • Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.
  • Tambahkan alt seperti yang dicontohkan pada kode yang diberi warna hijau.

Widget Banner II

CSS

cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubah background, border, dan ditambah sedikit variasi transform:scale (warna orange). Berikut gambaran kode CSS keseluruhannya.

.kotak-banner {
border:2px solid #444;
margin:0 auto 1.7143em;;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#444;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.15);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#eee;
-webkit-box-shadow:0px 2px 5px #333;
-moz-box-shadow:0px 2px 5px #333;
-o-box-shadow:0px 2px 5px #333;
-ms-box-shadow:0px 2px 5px #333;
box-shadow:0px 2px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Widget Banner III (Rotasi Banner Random)

Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner

CSS

.kotak-banner {
background:#fff;
border:2px solid #d4d4d4;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#fafafa;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}

.banner:nth-child(even) {
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-o-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
}

.banner:nth-child(3n) {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
position:relative;
}

.banner:nth-child(4n) {
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
transform:rotate(-4deg);
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#fafafa;
-webkit-box-shadow:2px 4px 5px #333;
-moz-box-shadow:2px 4px 5px #333;
-o-box-shadow:2px 4px 5px #333;
-ms-box-shadow:2px 4px 5px #333;
box-shadow:2px 4px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
position:relative;
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Generalisasi

Anda pun dapat menambah, menghilangkan, & memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “Widget Banner III” mungkin akan lebih baik jika diterapkan dalam image gallery. Lebih jelas tentang penggunaan CSS3 transform dalam polaroids—termasuk juga image gallery—dapat dipelajari pada website ZURBexpo.Silakan memilih bentuk widget banner yang Anda kehendaki.

205 komentar untuk “Trik Membuat Kotak Banner”

  1. Walaupun mempelajari CSS3 begitu sulit. Sedikit-sedikit ada gambaran terus, klo diulasnya seperti artikel di atas.... Thanks Kang, saya jadi semangat Ngobrak-ngabrik blogspot.

    BalasHapus
  2. @Anak Desa: Jangan terlalu diobrak-abrik, gan. Entar malah amburadul, padahal tampilan awal sudah bagus. :D

    @presentations skills tips: Sama-sama, gan. Karena telah mampir di blog ini. Wew, website agan apa hanya untuk dibaca saja—"Comments are closed".

    BalasHapus
  3. wah gan kalo template kita 3 kolom kn sempit, bisa ga d pasang banner kya d atas?

    BalasHapus
  4. @Azay: Yah, kalau kecil seperti blog agan, tidak bisa untuk memuat 2 baris banner. Tapi kalau satu-satu mungkin bisa, gan.

    Kecilin dulu ukuran width pada .kotak-banner yang 300px. Mungkin dibagi dua jadi 150px, kalau pakai persen, khawatirnya nanti tidak sesuai dengan lebar banner image (125x125).

    BalasHapus
  5. @OB : Menggunakan Blog yang lain Gan... Klo yang udah jadi mah, males... Sayang... Nanti klo hasil obrak-abriknya benar, baru di Apply ke blog asli... hihihi....

    BalasHapus
  6. Thanks bgt ilmunya mas...
    walaupun masih pusing, dicoba dulu...

    BalasHapus
  7. makasih banyak y kawan Info and Tutorial nya...
    Thanks dah share...
    :)

    BalasHapus
  8. owh bgitu y,
    tp kayanya ane mo gnti template jja coz yg itu kurang besar partisinya.
    Ada recomend template yg seo friendly n GA ready?

    BalasHapus
  9. Artikelnya bagus untuk menambah pengetahuan blogger, komentar juga ya di blog saya www.indojobfair.com

    BalasHapus
  10. gan mau nanya nih , cara buat tanggal postingan kyk di blog ini http://doodeyerick.com

    kyk mna ya ?

    BalasHapus
  11. @egi: Sorry, gan saya kurang jelas maksud pertanyaan agan. Maksudnya tanggal yang seperti apa?

    BalasHapus
  12. @Azay: Hm... belum ada gan. Mungkin agan bisa kunjungi template 4U atau zoom template

    BalasHapus
  13. Thanks bgt ilmunya mas...
    walaupun masih pusing, dicoba dulu...

    BalasHapus
  14. wow this really good blog content
    visit : http://uii.ac.id

    BalasHapus
  15. thnx mas walau mash mumet buat apa banner na hehe

    BalasHapus
  16. saya baru tahu mas kalao OB ini milik mas Rudy...dan dari dulu saya sering membaca blog ini melalui hp..

    BalasHapus
  17. Wah artikelnya sangat berguna mas, semoga rezekinya dilancarkan.

    http://jualsketsel.com/

    BalasHapus
  18. @FREEDOMETERS, @katils: Bagi yang masih pusing, tinggal getok aja kepalanya, gan :D

    @YOGYAKARTA, @Lukisan Aliran Naturalisme: Thank you for visiting and comment on this blog, gan.

    @Endy: Betul, gan dan adminnya berdua ama saya.

    BalasHapus
  19. mo tanya..cara merubah templates blog agar menarik caranya dimana.. coba buka www.zuxma.com templatenya kurang menarik bgt...

    BalasHapus
  20. @maintain and care for your pets: Waduh gimana cara menjelaskannya yah, gan. Panjang ceritanya. Sebab menyangkut banyak faktor yang perlu disesuaikan, antara lain: tata letak, pewarnaan, widget/gadget yang include, navigasi, dan sebagainya.

    Mungkin untuk bahan pertimbangan awal, agan ingin tampilan blog seperti apa. Kemudian mendesain blog dengan template designer atau mencari template yang free/berbayar di beberapa layanan penyedia template, seperti Template 4U dan Zoom Template.

    BalasHapus
  21. makasih tipsnya... lengkap dan simpel.

    BalasHapus
  22. thanks banget nih tutornya, langsung saya coba deh ...

    BalasHapus
  23. Thanks atas infonya, sangat membantu, berkunjung balik N download film terbaru 2011 Boxs Office just on KabiBoxs21

    BalasHapus
  24. thanks banget nih tutornya, langsung saya coba deh.

    BalasHapus
  25. Terimakasih sharing ilmunya.
    Menambah wawasan dan sangat berguna bagi saya.
    Terimakasih

    BalasHapus
  26. sy coba mas, sy coba untuk footer sy :)

    BalasHapus
  27. @xamthone plus, @learning Arabic, @jauhari mk, @Cek Info: Terima kasih kebali, agan agan. Dan bagi yang mencoba, mudah-mudahan hasilnya tidak mengecewakan. :)

    BalasHapus
  28. thx y infonya...

    lmyan ribet sih,
    tp hrus coba dlu deh

    http://fashionpria.indoprofile.com/blog

    BalasHapus
  29. sangat menarik informasi-informasi yang ada di blog ini. trimakasih kang... :)

    BalasHapus
  30. @Anonim: Betul, gan. Jika sudah tahu ribet tapi tidak mencoba, mungkin ini yang membuat saya heran.

    @jamesaldo31 blo9: Terima kasih kembali, gan

    BalasHapus
  31. nice post gan, nunggu selanjutnya.. :)

    BalasHapus
  32. Makasih mas ndro inponya....nambah2 pengetahuan sedikit nih mas ndro...Timbangan Hewan bagus nih mas ndro

    BalasHapus
  33. asyik....tambah ilmu .....tks ya gan.....

    BalasHapus
  34. Thanks bgt gan.....
    kuliah-sistem-informasi.blogspot.com

    BalasHapus
  35. wah keren mastah. Kalo buka lowongan iklan cocok nih pake trik ini. :)

    BalasHapus
  36. banner nya,.. bisa gak yah di tambahin scroll,.. biar bisa muat smua,.. apa gak ngaruh tuh,.. ??

    BalasHapus
  37. Makasih gan tutorialnya, ane coba nih...

    BalasHapus
  38. boleh di share ama teman IT saya nih gan yg lg design webnya? Nunut ilmunya ya

    BalasHapus
  39. @all: Salam kenal, gan. Terima kasih atas kunjungan dan komentarnya. Manggilnya ngga usah macam-macam, sebut saja saya dengan panggilan OB. :D

    @obat herbal asma: Berapapun jumlah banner yang agan masukkan tetap akan muat. Oleh karena tidak terdapat pembatasan tinggi elemen. Jika agan ingin mengatur dengan ketinggian tertentu, maka yang mesti dilakukan adalah menambah dan merubah beberapa sintak pada selektor .kotak-banner, seperti berikut:

    tambahkan:
    height: …;
    overflow-x:hidden;
    overflow-y:auto; /*Jika banner melebihi ketinggian pada height, maka akan memunculkan fungsi scroll*/

    hapus:
    overflow:hidden;

    @Study in Singapore: Silakan, gan. Alhamdulillah, jika artikel ini dapat mendatangkan manfaat bagi yang lain. :)

    BalasHapus
  40. Belajar dan menyimak sobat...

    BalasHapus
  41. Izin kopas scriptnya...good postd,,,trims!

    BalasHapus
  42. thx ya infonya gan..

    sangat bermanfaat... :)

    http://fashionpria.indoprofile.com

    BalasHapus
  43. kotak banner bgus ny taruh dimana yah??

    BalasHapus
  44. @ON THE SPOT: Lebih baik di sidebar, karena kodingnya memang untuk di sidebar, gan. Jika ingin menaruh ditempat lain—di bawah header atau di atas footer—agar bisa melakukan beberapa kustomasi, terutama width [.kotak-banner] perlu diperbesar.

    BalasHapus
  45. owhhhh..ya makasih ats infonya tentang banner...bermanfaat buat saya yang pemula...
    salam kenal

    BalasHapus
  46. salam kenal semua.
    Mantap2 postingannya OB, aku baru nemu dan sangat membantu aku buat optimasi blog aku, maklum pemula.
    Salam

    BalasHapus
  47. wah wah punya blog rame gini, udah jago ini itu masnya sekarang saya tunggu templatenya aj.

    BalasHapus
  48. bagus kotak banner ny,,
    trimakasih udah berbagi ilmu,,
    bermanfaat untuk saya yang pemula..

    BalasHapus
  49. Sip, mantap, ok.
    jangan lupa mampir ya.

    BalasHapus
  50. terima kasih atas infonya ..kunjungi juga ya websiteku ya
    jasa pembuatan website murah

    BalasHapus
  51. speechless.
    keren banget blognya. penuh dengan variasi CSS! :)
    salut..
    saya sudah follow blog ini, kalau berkenan silakan follow balik ya. :)

    BalasHapus
  52. ini untuk basis blogspot aja ya? ada ngga untuk web ?

    BalasHapus
  53. @obat herbal: Untuk kode banner di atas bisa digunakan untuk web juga, gan. Jadi tidak dikhususkan untuk Blogger.com daja.

    BalasHapus
  54. Kerja Part time 1-2 jam perhari, gaji puluhan juta rupiah. Hanya ada di bisnis ODAP terbukti membayar dan bukan penipuan. http://www.penasaran.net/?ref=wwdq34

    BalasHapus
  55. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  56. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  57. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  58. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  59. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  60. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  61. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimakasih

    BalasHapus
  62. Artikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil

    BalasHapus
  63. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  64. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  65. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  66. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  67. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  68. Ide cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil

    BalasHapus
  69. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  70. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  71. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  72. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  73. Wibesite yang sangat Amazing, Artikel dan Tipsnya boleh dicoba. Semangat !!

    BalasHapus
  74. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimaksih

    BalasHapus
  75. Postingan yang sangat Hebat, Tips boleh dicoba.salam sukses

    BalasHapus
  76. Ilmu yang sangat Hebat, boleh dicoba Artikel dan Tipsnya. Semoga berhasil

    BalasHapus
  77. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  78. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  79. Baru kali ini saya membaca Artikel yang sangat membangun. Boleh dicoba

    BalasHapus
  80. Makasih atas infonya...salam kenal ya gan

    BalasHapus
  81. Terimakasih Info dan Artikelnya. Wajib dicoba

    BalasHapus
  82. Terimaksih untuk info yang sangat efektif, boleh dicoba.

    BalasHapus
  83. Terima kasih untuk info yang bermanfaat, wajib di coba, sukses selalu

    BalasHapus
  84. Tulisan dan Info yang berguna, wajib di coba.

    BalasHapus
  85. Ilmu yang sangat Eefektif dan Infomatif. harsu di coba. salam sukses

    BalasHapus
  86. Ini komentar dari no.63 sampai 94 cuma nebar link aja ya!!!!!!!

    BalasHapus
  87. ini aneh, buat tulisan melayang sebelah komentar gmn gan ???
    klu untuk tengah2 halaman bisa tidak yach ??

    BalasHapus
  88. @propolis murah bandung: Coba agan baca postingan terdahulu tentang Optimasi Kotak Komentar Blogger™. Contohnya sama dengan seperti tulisan di samping kotak komentar dan letaknya di tengah (dalam posting):D

    BalasHapus
  89. Dpt ilmu baru nich...!!!!!!!

    Makasih bnyak Infonya..!!!!

    BalasHapus
  90. ini dia yang gue cari-cari.
    thanks bro

    BalasHapus
  91. wow infonya sangat bagus.. dan dapat membuat kita mengerti arti hidup..

    BalasHapus
  92. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  93. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  94. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  95. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  96. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  97. Ide cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil

    BalasHapus
  98. Sebanyak saya membaca Artikel,baru kali ini saya menemukan Artikel yang Amazing. boleh di coba. Terimaksih

    BalasHapus
  99. Sangat Amazing Artikel dan Info. Wajib di coba.

    BalasHapus
  100. Terimaksih untuk Info yang sangat Amazing, boleh dicoba.

    BalasHapus
  101. Terimaksih untuk info yang sangat efektif, boleh dicoba.

    BalasHapus
  102. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  103. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  104. Ide cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil

    BalasHapus
  105. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  106. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  107. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  108. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  109. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  110. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  111. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  112. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  113. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  114. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  115. terima kasih gan. langsung praktek dan sukses,,kunjungan perdana ne. salam

    BalasHapus
  116. Excellent post however I was wondering if you could write a
    little more on this topic
    http://www.gasas.com.es/
    Gasas

    BalasHapus
  117. Thanks for an insightful post. These tips are really helpful. Again thanks for sharing your knowledge with us.Keep up the good work.
    http://www.guantesdevinilo.es/
    Guantes de vinilo

    BalasHapus
  118. wah kang, canggih bener itu kang. sip kang, ijin pake yeuh...

    BalasHapus
  119. Waahhh..
    Makasih bnyak Tipsnya..
    Sngat berguna bgt nich....

    BalasHapus
  120. makasi infonya gan ..sangat membantu sekali..salam kenal

    BalasHapus
  121. Terimakasih dari saya yang masi nuebie

    BalasHapus
  122. makasih banyak tipsnya gan...

    BalasHapus
  123. Agak banyak ya scriptnya?, coba saya coba dulu thx sebelumnya

    BalasHapus
  124. Numpang beken dulu mastah, bagus banget neh blognya :)

    BalasHapus
  125. tengkyu gan buat ilmunya yg udah dibagi.........

    BalasHapus
  126. makasih mas atas ilmu yang bermanfaat, saya coba skrg.....

    BalasHapus
  127. WEBSITE ANDA SEPI
    PENGUNJUNG??
    SAYA PUNYA SOLUSINYA…!!

    TEMUKAN RAHASIA
    Bagaimana ANDA bisa mendapatkan jutaan pengunjung
    GRATIS dan tertarget setiap hari, secara otomatis, dengan menjadikan website ANDA URUTAN TERATAS di ‘Google’
    dan ‘Yahoo’
    Bila berminat kunjungi website : www.sebarin-iklan.blogspot.com/2011/12/jutaan-backlink-gratisss.html

    BalasHapus
  128. INFO KEREN,kunjungan pertama,salam kenal.

    BalasHapus
  129. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  130. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  131. wah manthabs gan..
    kalau cara buat kotak banner yg kaya punya bang admin bagaimana? saya ingin menerapkannya di blog saya, blog universitas terbaik umy ->

    Renungan untuk pemuda Indonesia

    BalasHapus
  132. terima kasih atas infonya agan...
    tapi blog ane blom banyak pengunjung jadi mau cari trafick dolo...
    salam kenal...

    BalasHapus
  133. Jujur saya bingung, kurang mengerti tata cara yang diatas. hehhee... gaptek

    BalasHapus
  134. sadis yaaa...banyak bgt kreasi yg kita bisa bikin di blog kita...

    BalasHapus
  135. Thanks bgt ilmunya mas...
    walaupun masih pusing, dicoba dulu...

    BalasHapus
  136. wah mksh ya buat infonya. . .

    BalasHapus
  137. www.catatan-ninja.info

    BalasHapus
  138. Terima kasih atas infonya, sobat. akan saya coba nanti

    BalasHapus
  139. owh bermannfaat nih buat blog ane

    BalasHapus
  140. Makasi mas buat tutorialnya, baru tahu saya ada cara yang kaya gini.

    BalasHapus
  141. dari dulu ingin belajar css, ternyata untuk biat kotak aja pusing juga yahh, ya mudah2an sedikit demi sedikit bisa dari tutorial diatas. makasih gan

    BalasHapus
  142. bagus postingannya,ijin mencoba bos

    BalasHapus
  143. wah kalo gitu ane bisa monetize blog ane dengan banner ini hehhee thanks yaa

    BalasHapus
  144. trims udh sharing. lgsung bsa dpraktekin nih..

    BalasHapus
  145. keren mas tamplate dan artikelnya bagus..

    BalasHapus
  146. infone bagus gan :
    http://sarahnetslawi.blogspot.com
    http://umidansarah.blogspot.com/

    BalasHapus
  147. wah menarik... ini yang pengen saya tambahkan di widget ane ntuk navigasi pengunjung n iklan hehe... thanks...

    BalasHapus
  148. itu cara kerjanya gimana gan?!

    BalasHapus
  149. Mantap tutorialnya. Ijin untuk bookmark dulu gaan :)

    Fenomena - http://www.fenomena.tk/

    BalasHapus
  150. waduh.... blog yang bagus untuk dimarkahi neh.... byk triknya.....

    BalasHapus
  151. wah..mantap tutor nya..ane coba dulu ya gan..trims n salam..

    BalasHapus
  152. kunjungan pertama saya
    sangat bagus sekali tutornya..saya sangat sukaaa
    makasih n salam kenal kak

    BalasHapus
  153. gag papakan kalo di kopas htmlnya gan??jhehe

    BalasHapus
  154. makasih nih kodenya keren banget tak simpan dulu deh kodenya

    BalasHapus
  155. terimakasih banyak atas share info dan ilmunya gan, ini sangat membantu bagi saya kerena saya masih newbie, ilmu yang bermanfaat untuk newbie-newbie seperti saya, salam kenal. kapan-kapan mampir ketempat saya gan dan jangan lupa untuk meinggalkan jejak.......

    BalasHapus
  156. Dicoba dulu tipsnya. Thx

    BalasHapus
  157. wah mantap nih :)
    izin menyimak :D

    BalasHapus
  158. Coba dulu, Pernah saya bikin banner sendiri tp ga keren.manatau yg ini lebih keren hasilnya.makasih tips nya Mas

    BalasHapus
  159. css emang sulit untuk pelajarinya,,tapi gak ada yang gak bisa asal kita mau...keren tuh kang tutor nya

    BalasHapus
  160. Thanx gan,, info yang bagus. btw kok tidak pernah update blognya lagi?

    BalasHapus
  161. terimakasih atas tips nya

    BalasHapus
  162. Mangstab infonya modelnya gak hanya satu jadi bisa pilih sesuai selera dan warna blog

    BalasHapus
  163. agak sulit juga ya gan,,, jd pusing,,,

    BalasHapus
  164. informasinya sangat bermanfaat gan...

    BalasHapus
  165. ternyata pake CSS ya. aku kira itu cuma image yang diberi link

    BalasHapus
  166. mantab gan..
    bagus banget, selain dengan corel ternyata bisa denga cara lain ya..
    maksih gan

    BalasHapus
  167. Sangat membantu sekali. Terimakasih banyak mas sudah sharing :)

    BalasHapus
  168. infonya sangat menarik ... :))

    BalasHapus