Cara Membuat Kotak Banner Ukuran 125 X 125 Versi 1

Malvinshare-Tujuan pembuatan blog atau pun web itu bermacam-macam, ada  yang tujuannya hanya sekedar hobi dan adapula yang sengaja membuat blog untuk menghasilkan uang. Banyak cara yang dilakukan para blogger untuk memonetize blognya agar menghasilkan uang secara maksimal. Seperti menempatkan iklan adsense dari google, berjualan link, menawarkan jasa dan membuat space iklan untuk disewakan. Namun pada kali ini yang saya bahas bukan cara memonetizenya, tapi cara membuat tempat untuk memonetizenya.

Seperti yang kita tahu, banyak para blogger yang tidak mementingkan penampilan blognya dan hanya mementingkan monetizenya saja. Akibatnya, blog mereka terlihat acak-acakan dan tampilannya tidak profesional. Hal inilah yang membuat hati saya tergerak untuk memposting tutorial atau Cara Bagaimana Membuat Kotak Banner Ukuran 125 X 125. Berikut akan saya berikan tutorialnya.

DEMO

Cara Membuat Kotak Banner Ukuran 125 X 125

1. Buka account blogger kamu

2. Masuk Template blog

3. Kemudian cari kode berikut ini

]]></b:skin>

4. setelah ketemu kode ]]></b:skin>, lalu masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Banner edit by MalvinShare.blogspot.com */

.kotak-banner {

background:#999;

border:2px solid #c3c3c3;

margin:0 auto 1.7143em;

padding:2% 0 0 3%;

position:relative;

overflow:hidden;

width:300px;

}

/* Banner edit by MalvinShare.blogspot.com */

.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 (mouse) Banner edit by MalvinShare.blogspot.com */

.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-top:4%;

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;

}

5. Simpan

6. pergi ke tata letak

7. klik tambah gadget

8. lalu masukkan kode dibawah ini

    <div class="kotak-banner">

    <div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-CTUdVQfR-dw/T2J2gOh_PwI/AAAAAAAAALw/ZXavpV5w1uk/s125/your-ad-here-500x500.jpg" alt="Banner"/></a></div>

    <div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-CTUdVQfR-dw/T2J2gOh_PwI/AAAAAAAAALw/ZXavpV5w1uk/s125/your-ad-here-500x500.jpg"/></a></div>

<div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-CTUdVQfR-dw/T2J2gOh_PwI/AAAAAAAAALw/ZXavpV5w1uk/s125/your-ad-here-500x500.jpg"/></a></div>

 <div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-CTUdVQfR-dw/T2J2gOh_PwI/AAAAAAAAALw/ZXavpV5w1uk/s125/your-ad-here-500x500.jpg" alt="Banner"/></a></div>

</div>

9. Simpan

Keterangan :
a. untuk tulisan "Banner 125x125" ganti dengan judul iklan
b. ### ganti dengan URL iklan
c. https://lh6.googleusercontent.com/-CTUdVQfR-dw/T2J2gOh_PwI/AAAAAAAAALw/ZXavpV5w1uk/s125/your-ad-here-500x500.jpg ganti dengan URL gambar iklan

Demikian postingan kali ini, semoga bermanfaat.