Langsung ke konten utama

Banner Iklan Dengan CSS3

Banner Iklan Dengan CSS3 - Ketika blogwalking brada tentu sering melihat kolom iklan pada sebuah blog yang ditempatkan pada samping header atau diposisi sidebar dengan ukuran yang bervariasi. Banyak cara membuat kolom iklan supaya terlihat lebih menarik dengan sentuhan efect didalamnya. Untuk melengkapinya , kali ini saya akan memberikan tutorial cara membuat kolom iklan atau space iklan dengan CSS3 yang mempunyai ukuran 125x125 dengan posisi Horizontal. Kolom atau space iklan ini lebih pas ditempatkan disamping header . Untuk lebih jelasnya silahkan brada lihat screenshot dan demonya.

Sebelum Tersentuh Mouse
Sesudah Tersentuh Mouse

Kustomisasi 

  • Masuk pada edit template 
  • Cari kode ]]></b:skin> 
  • Masukan kode dibawah ini diatas kode ]]></b:skin> 
.banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 14px 2px -10px #CCCCCC;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 652px;
    z-index: 15;
}
.corte-img {
    cursor: pointer;
    height: 167px;
    overflow: hidden;
    position: relative;
}
.corte-img > img {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    position: absolute;
    z-index: 50;
    opacity: 1;
    left: 0;
}
.banners-pl:hover .corte-img > img {
    opacity: 0;
    margin-top: -167px;
}
.conten-pl-home {
    position: absolute;
    top: 0;
    z-index: 10;
}
.conten-pl-home a {
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px 0 #333333 inset;
    display: block;
    float: left;
    margin: 13px;
    padding: 6px;
    position: relative;
    text-decoration: none;
    width: 125px;
    height: 125px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.conten-pl-home a:hover {
    background: #07aaee;
}
.banners-pl .conten-pl-home a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-weight: normal;
    right: -20px;
    padding: 3px 6px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    top: 0;
    z-index: 9999;
}
.banners-pl .conten-pl-home a strong {
    opacity:0;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: 500ms;
    -o-transition-property: opacity, top;
    -o-transition-duration: 500ms;
    transition-property: opacity, top;
    transition-duration: 500ms;
}
.conten-pl-home  a:hover strong {
    opacity:1;
    top: 120px;
}
Untuk menempatkan space iklan , silahkan sobat masuk pada layout template brada 
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
<div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="http://i784.photobucket.com/albums/yy130/nakula1212/Spaceiklan_zps1574b011.png" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
</div>
</div></div>
Simpan dan lihat hasilnya

Catatan :
Tulisan "Keterangan Iklan" silahkan ganti
"#" Ganti dengan link iklan
625 Ukuran Lebar
167 Ukuran Tinggi
Label:

Komentar

  1. AnonimSabtu, September 07, 2013

    keren sob, in yang saya cari, mungkin saya simpan dulu kodenya. Jaringan lagi lemot nih, edit html lagi gk bisa :D

    BalasHapus
    Balasan
    1. Staff AdministratorSabtu, September 07, 2013

      Berarti..sama ama sy ding mas joker..jaringan emang lagi super lemot :)

      Hapus
    2. Sopala MultapaSabtu, September 07, 2013

      extra lemot ya mas ... mending ngopi dah

      Hapus
    3. Mas AndesMinggu, September 08, 2013

      tips baru nih kang cara mengatasi koneksi lemot pake kopi.. heuheu

      Hapus
    4. Sopala MultapaMinggu, September 08, 2013

      iya mas .. biar gak terlalu mumet mikirin jaringan haha

      Hapus
  2. Staff AdministratorSabtu, September 07, 2013

    Wah perlu di coba nih kang..semoga bisa bawah berkah dan cepet turun PO nya...hehe :)

    BalasHapus
  3. AnonimSabtu, September 07, 2013

    master emang jago banget deh, mungkin nanti akan saya coba. ^_^

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, September 07, 2013

      gak sanggup saya balas komentarnya .. terlalu dini sob

      Hapus
  4. GupitanSabtu, September 07, 2013

    Keren sob cocok nih buat pasang iklan he,,,

    BalasHapus
  5. Kang IsmetSabtu, September 07, 2013

    eta teh efek 'mengajolkan dirinya' nya :)

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, September 07, 2013

      lain kang tapi gegerepekan haha

      Hapus
    2. M. Alex JoenaediSenin, September 09, 2013

      wkkwkwkkwk, waduhhh bahasa timana eta make aya istilah "mengajolkan Dirinya" jeng gegerepekan.......

      jiganamah kanga "a jojing jingkrak-jingkrakan"

      Hapus
    3. Sopala MultapaSenin, September 09, 2013

      ya itulah nama efecknya kang wkwkwkw

      Hapus
    4. Mas AndesSelasa, September 10, 2013

      numpang a jojing jingkrak-jingkrakan ah.. sambil mlongoo :D

      Hapus
  6. AnonimMinggu, September 08, 2013

    bagus nih kang, ayo pasang bareng kang mau gak.. hehehe

    BalasHapus
  7. Arif BudiharjoMinggu, September 08, 2013

    bagus nih ...

    BalasHapus
  8. AnonimSelasa, September 10, 2013

    KEREN KANG... MAU SAYA PASANG EH NDAK ADA YANG PASANG IKLAN DI BELOG SAYA

    BalasHapus
    Balasan
    1. Sopala MultapaRabu, September 11, 2013

      silahkan pasang mang ... bikin we iklan amang sendiri hehe

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya