Cara Membuat Share Button Plus Shortener Google Url Di Blogger

Apa Itu Google Shortener?? Google Shortener Adalah Pemendek Url / Link Untuk meningkatkan Traffic Blog kalian .

Untuk demo silahkan klik di bawah ini

Demo

Oke langsung Saja ke tahap Pemasangan.

1.login ke blogger kalian.

2.menuju Tema/template / "Edit HTML".

3.Cari Kode "</b:skin>" jika sudah ketemu silahkan kalian copy CSS di bawah ini dan letakkan di bawah "</b:skin>".

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.google-shortener{font-size:100%;font-weight:bold;color:#666!important}
.google-shortener a.url{text-decoration:none!important;color:#666!important;display:inline-block;margin:0 0 0 5px;border-radius:3px;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all 400ms ease-in-out}
.loading-google-shortener{display:none}
.google-shortener a.url:hover{color:#555;background:#fafafa;border:1px solid #999}
.google-shortener a.url:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
.clear{clear:both}
/*=== Share ===*/
#mblshare{width:100%;text-align:center;display:inline-block}
.noteshare{color:#f9f9f9;background:#ccc;padding:10.5px;}
.mblshare{padding:10px;background:#ccc;display:inline-block;}
.mblshare:hover{box-shadow:0px 5px 5px #f1f1f1}
.mblshare a{color:#f9f9f9;text-decoration:none}
h90{padding:10px;margin:0px -10px 0px 10px;}
@media screen and (max-width:500px){
.noteshare{display:block;margin-bottom:10px;}
}
</style>
</b:if>

4.Jika Sudah Selanjutnya kalian cari kode "<data:post.body/>" yang ke 2/3 jika sudah ketemu letakkan kode HTML ini Tepat dibawah kode "<data:post.body/>".

<div id="mblshare">
<span class='google-shortener'>
Share this with short URL: <a class='url' expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;googl&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>Get Shortener URL</a></span><span class='loading-google-shortener'/>
<div class='clear'/>
<br />
<span class="noteshare">Bagikan Artikel Ke :</span>
<span class="mblshare"><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' target='_blank' title="Twitter Tweet"><i class="fa fa-twitter"></i><h90 style="background:#55ACEE">Tweet</h90></a></span>
<span class="mblshare"><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title="Facebook Share"><i class="fa fa-facebook"></i><h90 style="background: #3B5998;">Share</h90></a></span>
<span class="mblshare"><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title="Google+ Share"><i class="fa fa-google"></i><h90 style="background: #dd4b39;">Share</h90></a></span>
<span class="mblshare"><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' title="Linkedin Share"><i class="fa fa-linkedin"></i><h90 style="background: #007bb5;">Share</h90></a></span>
<span class="mblshare"><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' ><i class="fa fa-pinterest"></i><h90 style="background: #cb2027;">Share</h90></a></span>
</div>
</b:if>

5.Cari Kode "</body>" dan letakkan Javascript dibawah in tepat di atas "</body>".

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/shinchan791/mbillshort/a9235701/short.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

6.Save / Simpan Tema.

Jika Icon Social tidak Muncul , mungkin template anda belum dipasang kode font awesome,.

Demikian Tutorial Cara Membuat Share Button Plus Shortener Google Url Di Blogger jangan lupa Baca Tutorial lainnya yah. "Selamat Mencoba".