How to Display Reaction Buttons On AMP HTML Blogs

One way to get feedback for blog posts is from the reaction button of the reader. And actually Blogger itself has provided feedback post facility with the reaction button for each blog post, but only a few bloggers who use it.

For whatever reason, many bloggers who do not take advantage of this blogger post feedback button. Could be the reason may be because it does not know it or maybe because it looks less attractive.

Well if you are interested to try the reaction button to find out how readers react to your post, please follow the way below. For DEMO please try the reaction button below this post.

This reaction button is for AMP HTML template users.

Please copy the code below and save it below your blog post in HTML edit.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <span class='reactions-label'><data:top.reactionsLabel/></span><span class='reactions-iframe'><amp-iframe allowtransparency='' expr:src='data:post.reactionsUrl' frameborder='0' height='21' layout='fixed' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no' width='300'>
</amp-iframe></span>
        </b:if>
      </div>
</b:if>

And for the NON AMP blog please replace the amp-iframe code with HTML5 iframe.

Then to look neat, please add the CSS below in custom CSS for post view.

.reaction-buttons{margin:20px 0}
.reactions-label{margin-right:.7em}
.reactions-iframe{overflow:hidden}
.reactions-iframe amp-iframe{vertical-align:-5px;margin-left:-0.7em}

And make sure you have js amp-iframe installed for the post page.

Then please go to layout then click edit on Blog Posts gadget and please check for reaction.

And Good Luck....

Add Related Posts Side By Side With Adsense In Blogger AMP HTML

Actually this is the result of experiments in laying adsense ads in order to increase revenue. One of them tried a 600px high ad unit in the posting area on desktop and mobile.

Finding the right location to implement a 600px high ad, finally the right place is saved adjacent to the related posts. But for mobile viewing, ad units are under related posts, but still show a 600px high ad.

For the appearance can be seen below this post or on the thumbnail above.

If you want to try it too, please copy the code below.

Please save HTML code below post in HTML edit

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post'>
<h4>Related Posts:</h4>
<div class='underpost1'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/kompiajaib/kompi-html/master/relatedposts_light.html?url=https://wdbloggerina.blogspot.co.id/&amp;label=&quot; + data:label.name' frameborder='0' height='620' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>
 </b:loop>
</b:if>
</div>
<div class='underpost2'>
<amp-ad data-ad-client='ca-pub-2124282593xxxxxx' data-ad-slot='xxxxxxxxxx' height='600' layout='fixed-height' type='adsense'>
</amp-ad>
</div>
<div class='clear'/>
</div>
</b:if>

Replace the code https://wdbloggerina.blogspot.co.id/ with your blog's domain. Then adjust the data-ad-client and data-ad-slot with your adsense.

Then please save the CSS below in the amp-custom style for the post page.

.related-post{margin:20px 20px 0;padding:0}
.related-post h4{font-size:20px;margin:0 0 10px;}
.related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
.related-post .underpost1{margin-bottom:10px;}
.related-post .underpost2{margin:20px 0;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
.related-post .underpost1{margin-bottom:0;}
.related-post .underpost2{margin:20px 0 0;}
}

Creating Adsense Units Parallax Style In Blog AMP and Non AMP

Maybe you've seen ads parallax style I mean (not parallax actually hahahaha). Usually this style of ad will use a high ad, while the area to see its ad is a box with a size of 300x250.

That way, high ads (160x600, 180x600, 300x600) can be displayed without spending an area where ads are placed 300x250 in size.

Well, this (parallax ads I mean) we can also make on AMP HTML blog by using amp-fx-flying-carpet to create parallax effect on AMP HTML.

Well if you want to try it, please follow the steps below.

Paralax Ads style for AMP Blog

But be aware, make sure this ad unit is under the viewport / window opening first seen in order to amp-fx-flying-carpet work.

Please keep this amp-fx-flying-carpet js above the code </ head>

<script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

Then copy the HTML code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='above_post'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>

And save above the following code :

 <div class='post-body entry-content' ..........

Then add this CSS to the amp-custom style for the posting page

 .above_post {
  padding-top: 8px;
  width: 300px;
  margin: 0 20px 5px 0;
  display: inline;
  float: left
}

@media screen and (max-width:414px) {
  .above_post {
    padding-top: 10px;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    display: block;
    float: none
  }
}

If your blog uses sticky header, please add the following css to prevent the ad from sticky header.

 .above_post amp-ad {
  margin-top: 60px
}

Paralax Ads style for Non AMP Blog

Please keep the following code above </ head> code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Then save the HTML code below just above the following code.

 <div class='post-body entry-content' ........

Here's the HTML code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBNmWrZt-mSYdiGueMzXs0XJETARQwSPOKr8WrFd_iCfjNkS0xSifrveapLkgUTwHTNQr2TYiNes8sj7bYtRK-UnS_-sB7ewTtsTcTN64qAWptJkvQdyirVoRqPFwQbOUr_CwS8jjJTquU/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>
 

If you use for banner ads (banner with height 600px and width 300px), please replace url image in the code above.

If you use for ads with iframes or adsense (300x600 ads), please replace the <img> tag above with your ad code.

Good luck....

Creating Line And BBM Share Button for Blogger Blog

Previously I've posted about how to make the share button Whatsapp and SMS to contact directly admin blog, now I will post how to create a share button for Line and BBM on the blog.

Share button is very useful for mobile users to share their preferred posts to their social messenger account, especially for Line application users and Blackberry messenger.

Well if you are interested to try it on your blog, please use the code below.

The Line and BBM icons on this button use the SVG icon.

Share Button for Line

 <a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target="_blank" title="Share On Line">
  <svg viewBox="0 0 48 48" class="icon icons8-LINE">
    <path style="fill:#00C300;" d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z"></path>
    <path style="fill:#FFFFFF;" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"></path>
  </svg>
</a>

To use WordPress greetings replace the following code:

<a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target="_blank" title="Share On Line">

Replace with the following code:

 <a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink()?>" target="_blank" title="Share On Line">

Share button for BBM

<a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target="_blank" title="Share On BBM">
  <svg viewBox="0 0 5067 5067" class="icon BlackBerry-Icon">
    <rect height="5067" rx="489" ry="489" width="5067" style="fill: black;" />
    <g>
      <path d="M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z"
      style="fill: white; fill-rule: nonzero;" />
      <path d="M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z" style="fill: white;" />
      <path d="M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
      <path d="M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z" style="fill: white;" />
      <path d="M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
      <path d="M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
      <path d="M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z" style="fill: white;" />
    </g>
  </svg>
</a>

To use WordPress greetings replace the following code:

<a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target="_blank" title="Share On BBM">

Replace with the following code:

<a href="bbmi://api/share?message=<?php the_permalink()?>?ref=bbm&amp;userCustomMessage=<?php the_title(); ?>" target="_blank" title="Share On BBM">

And add the CSS below to set the size of the SVG icon.

.icons8-LINE {
  width: 48px;
  height: 48px;
  margin: -6px 0 0 -6px;
}

.BlackBerry-Icon {
  width: 36px;
  height: 36px;
}

.icon {
  display: inline-block;
  float: left
}

Good luck...

Add Blogger Post Pager With Thumbnail and Post Title

This time we will make post pager in addition to using post title also use image post as post pager thumbnail.

By using thumbnails on next previous post, the post pager view is more interesting. You can see the post image above

How, are you interested in trying to use it?

Please follow the steps below.

Please copy CSS style and save above code </ head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{left:10px}
.panahkanan,.halaman-kanan a div:before{right:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{right:0}
.isihalaman-kiri img{left:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageleft,.current-pageright {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageleft{left:0;padding-left:40px;}
.halaman-kiri a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageright  {right:0;padding-right:40px}
.halaman-kanan a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-left{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Then please replace the blog pager HTML code as below.

<b:includable id='nextprev'>
..........
..........
..........
</b:includable>

Please replace with HTML code below

<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Next Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><i class='fa fa-chevron-left panahkiri'/><span class='pager-title-left'>Next</span><br/>This Is The Current Newest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Previous Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkanan'/><span class='pager-title-left'>Previous</span><br/>This Is The Oldest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
  </div>
<div class='clear'/>
</div>
</b:if>
            </b:includable>
            <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
  <div class='clear'/>
</b:includable>

Then please add the following HTML code below post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if>

So the appearance becomes as below

<b:includable id='post' var='post'>
  <article class='post hentry'.............
..........
..........
..........
  </article>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if>
</b:includable>

Then please add the following javascript code above code </ body>

<script type='text/javascript'>
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data)
            .find('.post-title')
            .text() + "' src='" + $(data)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        newerLink.html(thumb + '<div><h6>Next</h6><h5>' + $(data)
            .find('.post-title')
            .text() + '</h5></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data2)
            .find('.post-title')
            .text() + "' src='" + $(data2)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        olderLink.html(thumb2 + '<div><h6>Previous</h6><h5>' + $(data2)
            .find('.post-title')
            .text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>

And make sure you have installed the jquery library and Awesome Fonts on your blog.

Good luck....