• Translate

9/10/2014

Cara Membuat Kotak Banner 125x125 dengan CSS3

Tutorial Blogspot |

Advertisement

Cara Membuat Kotak Banner 125x125 dengan CSS3 | dari judul cara membuat kotak banner 125x125 tapi tampilannya kok bulat ya? Dengan sedikit percobaan menggunakan sedikit sentuhan css3 untuk membuat kotak iklan dengan bentuk bulat dengan hover dengan bentuk kotak.

untuk membuat kotak iklan tersebut kalian bisa meng-copy kode css dibawah ini dan tempatkan diatas kode ]]></b:skin> tapi sebelum melakukan pemasangan kotak iklan 125x125 ini, kalian membuat backup template terlebih dahulu, dengan men-download full template pada Design - Edit HTML untuk menghindari kesalahan.
125x125
#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:0px;-moz-border-radius:0px;-o-border-radius:0px;border-radius:0px;}
setelah di copy diatas kode ]]></b:skin> kemudian save template kalian dan masuk pada Design - Page Element - Add gadget - HTML/javascript dan copy paste juga kode dibawah ini dan save. silahkan test blog anda.
<div id="kotak-iklan-125x125">

<a target="_blank" href="http://www.alltutorials.info"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://www.alltutorials.info"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://www.alltutorials.info"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://www.alltutorials.info"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

</div>
Untuk cara memasang iklannya, kalian ganti saja kode yang berwarna merah dengan alamat dari iklan tersebut, url pertama merupakan url tujuan dan url yang kedua merupakan url gambar. Selamat mencoba.

Semoga bermamfaat ya,

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box