loading...

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3PT4MgIjpIOf9N0r_UW8gf267m9-m0VDL1UwNkrYcq6M8aqTIjJiR92uq4XyVzI1i8pzfsDOvHTx3E0PzAkDHar7QLg1OM_vqReeHQEeokW78g-BrIRh84TAwcFDXD6w25krm1v9HKA/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.

195 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. thnx mas walau mash mumet buat apa banner na hehe

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

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

    http://jualsketsel.com/

    BalasHapus
  17. @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
  18. mo tanya..cara merubah templates blog agar menarik caranya dimana.. coba buka www.zuxma.com templatenya kurang menarik bgt...

    BalasHapus
  19. @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
  20. thanks banget nih tutornya, langsung saya coba deh ...

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

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

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

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

    BalasHapus
  25. thx y infonya...

    lmyan ribet sih,
    tp hrus coba dlu deh

    http://fashionpria.indoprofile.com/blog

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

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

    @jamesaldo31 blo9: Terima kasih kembali, gan

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

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

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

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

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

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

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

    BalasHapus
  35. @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
  36. Izin kopas scriptnya...good postd,,,trims!

    BalasHapus
  37. thx ya infonya gan..

    sangat bermanfaat... :)

    http://fashionpria.indoprofile.com

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

    BalasHapus
  39. @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
  40. owhhhh..ya makasih ats infonya tentang banner...bermanfaat buat saya yang pemula...
    salam kenal

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    BalasHapus
  74. Terimakasih Info dan Artikelnya. Wajib dicoba

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

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

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

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

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

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

    BalasHapus
  81. @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
  82. Dpt ilmu baru nich...!!!!!!!

    Makasih bnyak Infonya..!!!!

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

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

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

    BalasHapus
  86. Tipsnya sangat Infomatif, wajib dicoba salam sukses

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

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

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

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

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

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

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

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

    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. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

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

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

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

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

    BalasHapus
  103. Tipsnya sangat Infomatif, wajib dicoba salam sukses

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

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

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

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

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

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

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

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

    BalasHapus
  112. Terimakasih dari saya yang masi nuebie

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

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

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

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

    BalasHapus
  117. 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
  118. INFO KEREN,kunjungan pertama,salam kenal.

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

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

    BalasHapus
  121. 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
  122. terima kasih atas infonya agan...
    tapi blog ane blom banyak pengunjung jadi mau cari trafick dolo...
    salam kenal...

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

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

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

    BalasHapus
  126. wah mksh ya buat infonya. . .

    BalasHapus
  127. izin untuk mempraktekan

    BalasHapus
  128. www.catatan-ninja.info

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

    BalasHapus
  130. owh bermannfaat nih buat blog ane

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

    BalasHapus
  132. 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
  133. bagus postingannya,ijin mencoba bos

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

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

    BalasHapus
  136. keren mas tamplate dan artikelnya bagus..

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

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

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

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

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

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

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

    BalasHapus
  143. salam kenal, nice info

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

    BalasHapus
  145. 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
  146. wah mantap nih :)
    izin menyimak :D

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

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

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

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

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

    BalasHapus
  152. informasinya sangat bermanfaat gan...

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

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

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

    BalasHapus
  156. infonya sangat menarik ... :))

    BalasHapus
  157. bisa dibuat blog aku neeh...seppp gan

    BalasHapus
  158. Pasang iklan pasang iklan, 2 seringgit hehe

    BalasHapus