Tuesday, 26 May 2015

Banner CSS Mirip Adsense Dengan Tampilan Berbeda

5/26/2015 Posted by Admin , 12 comments
Banner CSS Mirip Adsense Dengan Tampilan Berbeda

Sebetulnya ini hanya sebuah tutorial yang sederhana. Dengan menggunakan Tag Kondisional, kita bisa mengakali css dan tampil berbeda disebuah template. Dengan demikian, tampilan Iklan seperti ini pun terlihat berbeda dan lebih menarik tentunya. Sebetulnya ini terinspirasi dari pertanyaan seorang teman di group, ia menanyakan apakah bisa random (tampil acak) iklannya? untuk tampilan acak tentulah sangat tidak mungkin, namun kalau tampil berbeda warna bisa. Silakan lihat pada demo bawah ini, setelah anda masuk ke blog demo, coba masuk kepostingan, bagaimana?


Silakan simpan css bawah ini tepat dibawah ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.ads {margin:0 auto;padding:0;position:relative;width:298px;border:1px solid #7CC14E}
.ads-box {background:#fff;width:298px;height:250px;margin:0;padding:0;text-align:center;border:1px solid #ddd}
.tags1 {font:26px Roboto;color:#365DF6;padding:10px 10px 5px 10px;}
.tags2 {font:12px Arial;color:#317107;padding:2px 0;margin:5px 0;}
.tags2:hover {text-decoration:underline}
.tags3 {font:16px Arial;color:#333;padding:2px 20px;margin-bottom:10px;}
.tags4 {background:#365DF6;padding:12px 0 8px 0;border-radius:4px;max-width:40%;text-align:center;margin:0 auto;display:block}
.tags4:hover {background:#5C7BF8;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.ads {margin:0 auto;padding:0;position:relative;width:298px;border:1px solid #000}
.ads-box {background:#030219;width:298px;height:250px;margin:0;padding:0;text-align:center;border:1px solid #000}
.tags1 {font:26px Roboto;color:#42F117;padding:10px 10px 5px 10px;}
.tags2 {font:12px Arial;color:#B2D0ED;padding:2px 0;margin:5px 0;}
.tags2:hover {text-decoration:underline}
.tags3 {font:16px Arial;color:#ddd;padding:2px 20px;margin-bottom:10px;}
.tags4 {background:#32C50D;padding:12px 0 8px 0;border-radius:4px;max-width:40%;text-align:center;margin:0 auto;display:block}
.tags4:hover {background:#46D523;}
</style>
</b:if>

Tambahkan kode pemanggil ini di Add/Gadget

<div class='ads-box'>
<div class='tags1'>Berita inspirasi dan temukan berita yang Anda mau disini</div>
<a href="http://www.googleadservices.com/pagead/aclk?sa=ladiesmail.us" onclick="this.href = 'http://ladiesmail.blogspot.com/'" target="_blank"><div class='tags2'>Ladiesmail.us</div></a>
<div class='tags3'>#Temukan segala impian wanita dan berbagai ragam gaya hidup.</div>
<a href="http://www.googleadservices.com/pagead/aclk?sa=ladiesmail.us" onclick="this.href = 'http://ladiesmail.blogspot.com/'" target="_blank"><div class='tags4'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQNdoPgDPoAcuwjca0s3wypEBuqcMJLhcAA5KWjxIyb5hfvZn_4Rm_TWCmyzCft_ipdUQRRwuuZGPAf22tAS34DfGawzBWf7v5CFJonjcbyI-KRZE45As91XLELjV9yW-95Rnq4GBRfA/s1600/icon_chevron_white.png"/></div></a></div>

Sunday, 24 May 2015

Iklan Banner Mirip Ads Adsense dengan CSS

5/24/2015 Posted by Admin , 5 comments
Iklan Banned Mirip Ads Adsense dengan CSS

Bosan ditolak terus sama iklan Adsense? Ingin blognya dihiasi dengan iklan seperti Adsense tapi masih belum temukan cara yang tepat. Jangan khawatir, dengan css bawah ini blog Anda akan tampil berbeda dan pastinya keren.


01. Ukuran Banned 728x90


<style type='text/css' scoped='scoped'>
.leoads-box {background:#fff;width:726px;height:88px;margin:0 auto;padding:0;text-align:center;position:relative;border:1px solid #ddd}
.leoads1 {font:22px Roboto;color:#365DF6;padding:10px 10px 5px 10px;text-align:left;max-width:70%;}
.leoads2 {font:12px Arial;color:#317107;padding:0;margin:0 0 0 10px;text-align:left;display:block}
.leoads2:hover {text-decoration:underline}
.leoads4 {float:right;background:#365DF6;padding:18px 40px 12px 40px;border-radius:4px;text-align:center;margin:-67px 50px 0 0;display:block;position:relative;}
.leoads4:hover {background:#5C7BF8;text-decoration:none}
</style>
<div class='leoads-box'>
<div class='leoads1'>Mau belajar tutorial dan dapatkan template gratis yang keren?</div>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads2'>leotemplates.us</div></a>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads4'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQNdoPgDPoAcuwjca0s3wypEBuqcMJLhcAA5KWjxIyb5hfvZn_4Rm_TWCmyzCft_ipdUQRRwuuZGPAf22tAS34DfGawzBWf7v5CFJonjcbyI-KRZE45As91XLELjV9yW-95Rnq4GBRfA/s1600/icon_chevron_white.png"/></div></a></div>

02. Ukuran Banned 300x250


<style type='text/css' scoped='scoped'>
.ads {margin:0 auto;padding:0;position:relative;width:298px;border:1px solid #7CC14E}
.ads-box {background:#fff;width:298px;height:250px;margin:0;padding:0;text-align:center;border:1px solid #ddd}
.tags1 {font:26px Roboto;color:#365DF6;padding:10px 10px 5px 10px;}
.tags2 {font:12px Arial;color:#317107;padding:2px 0;margin:5px 0;}
.tags2:hover {text-decoration:underline}
.tags3 {font:16px Arial;color:#333;padding:2px 20px;margin-bottom:10px;}
.tags4 {background:#365DF6;padding:12px 0 8px 0;border-radius:4px;max-width:40%;text-align:center;margin:0 auto;display:block}
.tags4:hover {background:#5C7BF8;}
</style>
<div class='leoads-box'>
<div class='leoads1'>Mau belajar tutorial dan dapatkan template gratis yang keren?</div>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads2'>leotemplates.us</div></a>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads4'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQNdoPgDPoAcuwjca0s3wypEBuqcMJLhcAA5KWjxIyb5hfvZn_4Rm_TWCmyzCft_ipdUQRRwuuZGPAf22tAS34DfGawzBWf7v5CFJonjcbyI-KRZE45As91XLELjV9yW-95Rnq4GBRfA/s1600/icon_chevron_white.png"/></div></a></div>
</div>
</div></div>

Cara pasang juga mudah, tinggal masuk ke >> tata letak >> add/gadget >> HTML/JavaScript, dan masukan kode html diatas, jangan lupa untuk menganti URL yang saya gadisbawahi itu. Selamat mencoba.

Tuesday, 28 April 2015

Konsep CSS Floating Dalam Bentuk Hide dan Show Sebuah Widget

4/28/2015 Posted by Admin 4 comments
Konsep CSS Floating Dalam Bentuk Hide dan Show Sebuah Widget

Cara memunculkan atau sembunyikan sebuah widget di blog bukanlah hal yang sulit, kita hanya perlu sedikit memahami css dan buatlah sebuah konsep yang kita mau. Selain itu widget ini tentu bisa menghemat ruang blog Anda. Meski cara kerja mengandalkan transition, yang tentu tidak sebagus jquery, namun yang jelas sama sekali tidak terpengaruh terhadap loading.


Untuk CSS simpan diatas ]]></b:skin>

.leowidget {
   background:#48d;
   border-radius:2px;
   top:-5px;
   box-shadow:0 0 5px #fff;
   color:#fff;
   float:left;
   height:17px;
   margin-left:125px;
   opacity:.8;
   overflow:hidden;
   padding:6px 10px;
   position:fixed;
   width:120px;
   z-index:9;
   transition:all 1s ease-in-out
}

.leowidget:hover {
   background:#00ffff;
   box-shadow:0 3px 3px 1px #777;
   color:#000;
   height:220px; /* -- Sesuaikan tinggi yang Anda mau disini -- */
   margin-left:20px;
   opacity:1;
   width:340px; /* -- Sebuaikan lebar yang Anda mau disini -- */
}

.leowidget-body{
   margin-top:10px;
   transition:all 1s ease-in-out
}

.leowidget h3{
   cursor:pointer;
   font-size:14px;
   text-align:center
}

Untuk kode pemanggil silakan tambahkan widget yang Anda mau dan simpan di bagi add/gadget

<div class='leowidget'>
<h3>Me Video</h3>
<div class='leowidget-body'>
<center>
Widget simpan disini...
</center>
</div>
</div>

Selanjutkan lihat hasilnya.

Monday, 8 September 2014

Kombinasi Semua Tampilan Facebook di Blog Responsive

9/08/2014 Posted by Admin , 1 comment
Kobinasi Semua Tampilan Facebook di Blog Responsive

Membuat kombinasi semua facebook responsive seperti fans page atau like box bukanlah sebuah hal yang sulit, kita tinggal menggunakan CSS untuk menentukan kelebarannya. Silahkan Simpan CSS bawah ini tepat diatas ]]></b:skin> atau </style>

.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;}