How to Install a Google AdSense Similar Text Ad Widget

This time I will share a tutorial on how to install the Google AdSense Similar Text Ad Widget. This widget is custom made similar to Google's Google Adsense ad widget. The way it works is the same as when one of the ad links is hovered, then the contents or description of the ad appear with a smooth effect. Added effects are also quite comfortable to see and light enough to install on your blog.

For those who want to try it, please follow the following tutorial:

This widget uses awesome fonts, please add the following CSS link above </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

If the link above has been installed, please skip this step.

1. Login to Blogger> Open Template> Add the code below before ]]></b:skin> or </style>

/* Text Ad */
.ad-text{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.ad-text div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.ad-text h2.ad-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.ad-text h2.ad-header:first-child{border-top:0}
.ad-text h2.ad-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.fill-ad span.ad-title{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}
.fill-ad span.url-ad{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.fill-ad span.url-ad:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.fill-ad span.big-arrow{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.fill-ad span.big-arrow:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.fill-ad span.big-arrow:hover{background:#34495e;color:#fff}
.fill-ad p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

2. Then copy the code below before </body>

<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="ad-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".ad-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".ad-text-sidebar").iklanaccordion();$(".ad-text-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-ad").animate({right:0},500,"easeInOutExpo")},function(){$(".info-ad").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script> 

Once added, save the template.

3. Next open the layout> Create a new widget> Then add the code below in it

<div class='ad-text ad-text-sidebar' id='ad-text'>
    <!-- 1th ad -->
    <div data-header="Your Ad Title Here">
      <span class='fill-ad'>
<span class='ad-title' onclick="window.open('LINKS-YOU');">Advertise here</span>
      <span class='url-ad' onclick="window.open('LINKS-YOU');">your web url</span>
      <span class='big-arrow' onclick="window.open('LINKS-YOU');"></span>
      <p class='isi'>Place Your Ad Here</p>
      </span>
    </div>
    <!-- 2th ad -->
    <div data-header="Your Ad Title Here">
      <span class='fill-ad'>
<span class='ad-title' onclick="window.open('LINKS-YOU');">Advertise here</span>
      <span class='url-ad' onclick="window.open('LINKS-YOU');">your web url</span>
      <span class='big-arrow' onclick="window.open('LINKS-YOU');"></span>
      <p class='isi'>Place Your Ad Here</p>
      </span>
    </div>
    <!-- 3th ad -->
    <div data-header="Your Ad Title Here">
      <span class='fill-ad'>
<span class='ad-title' onclick="window.open('LINKS-YOU');">Advertise here</span>
      <span class='url-ad' onclick="window.open('LINKS-YOU');">your web url</span>
      <span class='big-arrow' onclick="window.open('LINKS-YOU');"></span>
      <p class='isi'>Place Your Ad Here</p>
      </span>
    </div>
    <!-- 4th ad -->
    <div data-header="Your Ad Title Here">
      <span class='fill-ad'>
<span class='ad-title' onclick="window.open('LINKS-YOU');">Advertise here</span>
      <span class='url-ad' onclick="window.open('LINKS-YOU');">your web url</span>
      <span class='big-arrow' onclick="window.open('LINKS-YOU');"></span>
      <p class='isi'>Place Your Ad Here</p>
      </span>
    </div>
    <!-- 5th ad -->
    <div data-header="Your Ad Title Here">
      <span class='fill-ad'>
<span class='ad-title' onclick="window.open('LINKS-YOU');">Advertise here</span>
      <span class='url-ad' onclick="window.open('LINKS-YOU');">your web url</span>
      <span class='big-arrow' onclick="window.open('LINKS-YOU');"></span>
      <p class='isi'>Place Your Ad Here</p>
      </span>
    </div>
  </div>   

 Replace all the text that I have marked

4. Save the widget and see the results. 

See the Pen Cara Memasang Widget Iklan Teks Mirip Google AdSense by Wiendhy (@wiana) on CodePen.

If you want to try a simpler version, add the code below in the widget

<div id='arlina_ppc'>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="Your ad-link" target="_blank" title="Cheap Text Ads"><strong>Cheap Text Ads</strong></a>
  <br />
  <span style="font-size:11px">Only Rp.60,000/month, Put Your Text Ad Here Right Now!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="Your ad-link" target="_blank" title="Cheap Text Ads">stressthinking.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="Your ad-link" target="_blank" title="Cheap Text Ads"><strong>Cheap Text Ads</strong></a>
  <br />
  <span style="font-size:11px">Only Rp.60,000/month, Put Your Text Ad Here Right Now!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="Your ad-link" target="_blank" title="Cheap Text Ads">stressthinking.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="Your ad-link" target="_blank" title="Cheap Text Ads"><strong>Cheap Text Ads</strong></a>
  <br />
  <span style="font-size:11px">Only Rp.60,000/month, Put Your Text Ad Here Right Now!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="Your ad-link" target="_blank" title="Wiendhy Wiana">stressthinking.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#b0130d;" href="Your ad-link" target="_blank" title="Put Cheap Adverts on Wiendhy"><small>Ads by Wiendhy Wiana</small></a>
  <br />
</div>  

Replace all the text that I have marked

Thus, the tutorial How to Install Google AdSense Similar Text Advertising Widgets, hopefully useful.