Cara Membuat Iklan ala Google Adsense [ Modified ]


Google Adsense | Kali ini saya akan membagikan tutorial untuk membuat iklan teks yang hampir menyerupai google adsense, ya ini adalah versi penyempurnaan dari miliknya Kang Ismet.

Sebenarnya script ini saya dapatkan dari blog mas Risky.

Penampakannya sendiri bisa dilihat disidebar saya, menarik bukan.

Dan Sesungguhnya ini hanya memanfaatkan teknik JQuery Saja, baiklah tanpa banyak kata langsung aja ke tutorialnya.

Berikut Tutorialnya

Langkah 1 : Simpan kode dibawah ini tepat diatas </head>
<script src='//googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/iklan-teks-ag-ga.js' type='text/javascript'></script>
Langkah 2 : Simpan kode dibawah ini tepat diatas ]]></b:skin> atau </style>
/* CSS Iklan Adsense */
#iklan-teks{height:275px;background-color:white;position:relative;overflow:hidden;margin:0 auto}
#iklan-teks h2.iklan-header{cursor:pointer;background-color:white;background-image:none;font:normal 20px Verdana,Tahoma,Serif;color:#f0523f;border-top:1px solid #d8d8d8;padding:10px;margin:0;position:relative;text-transform:none;letter-spacing:0}
.iklan-teks-post-footer .iklan-header{border-bottom:0}
#iklan-teks h2.iklan-header:first-child{border-top:0}
#iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent}
#iklan-teks div{height:120px;padding:10px 70px 10px 10px;z-index:1;background:white;font:normal 13px Verdana,Tahoma,Serif;color:white;position:relative;border-top:1px solid #d8d8d8}
.judul{font:normal 20px Verdana,Tahoma,Serif;color:#f0523f;margin:0 0 5px 0}
a.judul{font:normal 20px Verdana,Tahoma,Serif!important;color:#f0523f!important;text-decoration:none;display:inline-block}
a:hover.judul{font:normal 20px Verdana,Tahoma,Serif!important;color:#2c343e;text-decoration:underline}
.isi-iklan a{font:normal 13px Verdana,Tahoma,Serif;color:green;text-decoration:none;display:block;margin-bottom:10px}
.isi-iklan a:hover{color:green;text-decoration:none}
.isi{padding-top:15px;color:#222;text-align:left!important}
.panah-besar{background:#f0523f;border-radius:50%;cursor:pointer;height:34px;float:right;margin-right:-60px;margin-top:-40px;width:34px;text-align:center;line-height:34px}
.panah-besar:hover{background:#2c343e}
.info-icon{width:15px;height:15px;position:absolute;top:-4px;z-index:2;right:0;cursor:pointer}
.info-iklan{background:#f2f2f2;height:15px;border-bottom-left-radius:4px;position:absolute;top:0;right:-103px;color:#000;z-index:2;font:normal 11px Arial,Sans-Serif;text-align:left;overflow:hidden;padding-right:19px;padding-left:5px}
Langkah 3 : Simpan kode dibawah ini pada widget HTML/Javascript
<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Blogger Tutorial' style='border-top:none'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Blogger Tutorial</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Blog yang berisi seputar kode-kode web pada platform blogger.</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>
Cukup sekian saja, kalau ada yang kurang jelas atau ada kritik silahkan berkomentar dikolom yang tersedia.
Sekian terima kasih, semoga bermanfaat.

http://malescode.blogspot.com/2014/02/iklan-teks-google-adsense-ala-malescode.html
Previous
Next Post »

9 comments

Click here for comments
Anonymous
admin
July 2, 2014 at 9:59 AM ×

ini yang saya cari cari.. izin pasang dulu gan :ngacir

Reply
avatar
July 2, 2014 at 1:50 PM ×

Saya kira iklan google adsensenya yang di modif, nyatanya tidak :g

Reply
avatar
Unknown
admin
July 3, 2014 at 4:18 AM ×

Keren sob artikelnya,, Saling follow blog yuks

http://tipsfadhil.blogspot.com Makacih.. :) :)

Reply
avatar
Unknown
admin
July 3, 2014 at 4:19 AM ×

silahkan dipasang sob :cool

Reply
avatar
Unknown
admin
July 3, 2014 at 4:38 AM ×

ini modifikasi iklan goolge adsense milik kang ismet

Reply
avatar
Unknown
admin
July 5, 2014 at 7:40 PM ×

warnanya bisa di gantigak gan ? :cool

Reply
avatar
Unknown
admin
July 6, 2014 at 2:53 AM ×

bisa ko' sob..
tinggal ganti color dan background ..

Reply
avatar

Berkomentarlah dengan sopan.
Berkomentarlah sesuai topik yang dibahas #ThinkHIGH! ^_^ ConversionConversion EmoticonEmoticon