Cara Mudah Membuat Fitur Google Share di Blog

Cara Mudah Membuat Fitur Google Share di Blog

Cara Mudah Membuat Fitur Google Share di Blog - mungkin para blogger yang akan membaca ini pasti merasa tidak asing lagi, dikarenakan tutorial ini sudah banyak beredar.

tapi, saya hanya mencoba untuk Posting dalam tampilan yang berbeda, dikarenakan ingin Ngeposting aja ... hehehee

Berbeda dengan plugin Addthis dan sebagainya.. Plugin yang akan saya bagikan kali ini custom dengan menggunakan blogger tag kondisional yang mana ketika seseorang mengunjungi halaman postingan / artikel, maka tombol Google Share ini akan muncul dengan Popup Berbagi setelah semua konten di laman artikel/postingan di load oleh browser.

Screenshot From KangRian

Cara Pemasangan:

1. Login Blogger
2. Klik menu "Template" → "Edit HTML"
3. Pastikan sobat sudah menyimpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

4. Simpan semua kode di bawah ini tepat di atas kode <div class='comments' id='comments'> :

<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- BEGIN [ GOOGLE SHARE ] &#169;2015 Pure By:PAMBAH Corporation --><style type='text/css'>.overlay { position:fixed; z-index:+100000; top:0;left:0; width:100%; height:100%; background:white; opacity:.8; }position:fixed;z-index:+100000;top:0;left:0;width:100%;height:100%;background:white;opacity:.8; }.google-share { border:1px solid #aaa; background:white; padding:33px; width:570px; max-width:95%; position:fixed; z-index:+100001; top:100px; left:50%; margin-left:-285px; box-shadow:0px 5px 10px rgba(0,0,0,0.18); }border:1px solid #aaa;background:white;padding:33px;width:570px;max-width:95%;position:fixed;z-index:+100001;top:100px;left:50%;margin-left:-285px;box-shadow:0px 5px 10px rgba(0,0,0,0.18); }.google-share h3 { clear:both; margin:0px!important; margin-bottom:20px!important; font-size:20px!important; font-weight:normal; color:#333; }clear:both;margin:0px!important;margin-bottom:20px!important;font-size:20px!important;font-weight:normal;color:#333; }.google-share h3 span.close { float:right; cursor:pointer; font-size:25px; }float:right;cursor:pointer;font-size:25px; }.google-share img { margin:5px;margin-right:0px; display:inline-block; border-radius:2px; transition:all .3s ease; } .google-share img:hover { opacity:.7; }.google-share span.small { font-size:14px!important; font-family:arial,sans-serif!important; color:#484848; }font-size:14px!important;font-family:arial,sans-serif!important;color:#484848; }.google-share input { border:1px solid #ccc; width:80%; }border:1px solid #ccc;width:80%; }.bagikan img { position:fixed; z-index:+1000; top:200px; left:0; background:#fff; padding:10px; border-radius:0 3px 3px 0; border:1px solid #ddd; }position:fixed;z-index:+1000;top:200px;left:0;background:#fff;padding:10px;border-radius:0 3px 3px 0;border:1px solid #ddd; }.bagikan img:hover { opacity:.7; cursor:pointer; box-shadow:0px 3px 0px rgba(0,0,0,0.14); top:197px; }opacity:.7;cursor:pointer;box-shadow:0px 3px 0px rgba(0,0,0,0.14);top:197px; }.bagikan img:active { box-shadow:none; top:200px; }box-shadow:none;top:200px; } @media screen and (max-width : 640px) {.google-share, .overlay, .bagikan { display:none!important;}}</style> <div class='bagikan'><img alt='bagikan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWME21Wtko91q_IfshRreEvBGc2UHZx4Pi2QikELmX8Y5ko4ZYIN2DAESpjLGBf9TNjBXjMJ6SBa4j9h7nZjnSmubUArK1h1KnIe79UnWv-crwPvwYgKD50uW5IdFax3nIWlmFNT2rfxI/s1600/share.png' title='Bagikan!'/></div> <div class='overlay' style='display:none;'/> <!-- White Overlay --><div class='google-share' id='google-share' style='display:none;'> <h3><data:post.title/> <span class='close'>&#215;</span></h3> <span class='small'>Klik untuk berbagi di:</span><br/> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan di Google+'><img alt='Google Plus Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaESz6IKPFHViQsYKsa1UCqyLjT3EbBce47GRC-8PlxG2H9NIbebZoY8R6sdO9dlv9HVV5ICaDXqT_jNHsuiFTWHm6nv6ozkZjkWrapRdCFRnOoKjcEML3xHWZHf02aOi7o2e7ZumEvJ0/h33/gplus.png'/></a> <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan di Facebook'><img alt='Facebook Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8h1X0g7KTxoUJj6PA2Zk0a3-7RF_CLBvu3FoyQ7N99oVeAO8ReiBqtCFMdPjXdB0PCa6tVfws7nzi9_RyK5yaA9GmIpujwMrUyqCwZF-04fn2J5V2smCDSIHa2yo_0dTzS1_uVvdMz-8/h33/fb.png'/></a> <a expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url' target='_blank' title='Bagikan di Twitter'><img alt='Twitter Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmluHfCw4wRlI35EvXz1KHTZKVJUPRtmdzhfgwCvDJQ3b0YBKcPTHsZJEiDLV3wAPigbijpKngV8BRpxVoovUHxra31yaFhpcDheqX8V3X5DGumNYLPREC7h8NeK8h0dFn93fg42shap8/h33/t.png'/></a> <a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;amp;body=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan via Email'><img alt='Email Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYcEkGard9qsR6w6AL8wizcKu0qxzAC-Cd9IOeE3LW8JYC0zBlMQ3d8ugkdEWcQETGtHyHJnsIZg6LEMokRtiRsD9iPJMSTcTB89QB_pdaEfFhlV3yNRJuGcwjZKKwByG_dlbfk_l08U/h33/m.png'/></a> <br/> <span class='small'>Atau salin tautan:</span><br/> <input expr:value='data:blog.canonicalUrl' readonly='readonly' type='text'/></div> <script type='text/javascript'>//<![CDATA[$(window).bind("load", function() { $('#google-share, .overlay').fadeIn(1000); $('#google-share input').select();}); $('#google-share input').click(function() { $('#google-share input').select(); }); $('.bagikan').click(function() { $('#google-share, .overlay').fadeIn(500); $('#google-share input').select(); });$(document).ready(function() { $('.close, .overlay, #google-share img').click(function() { $('#google-share').hide(); $('.overlay').hide(); });});//]]></script> </b:if><!-- END [ GOOGLE SHARE ] &#169;2015 Pure By:PAMBAH Corporation -->

5. Terakhir "Simpan Template"

Selesai, selamat mencoba dan semoga berhasil! :)

Tweet