Cara Membuat Fitur Google Share di Blog

Alhamdulillah saya masih diberi kesempatan untuk berbagi, pada kesempatan ini saya akan berbagi tutorial tentang bagaimana cara membuat tomb...

Alhamdulillah saya masih diberi kesempatan untuk berbagi, pada kesempatan ini saya akan berbagi tutorial tentang bagaimana cara membuat tombol berbagi mirip seperti google! yang sangat simple dan berguna tentunya untuk sobat yang mempunyai banyak artikel.

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.

Tutorial Blogger dan Widget Blogger
Berikut contoh pop-up pada halaman artikel:

ss google share di blogger

Untuk demonstrasi-nya langsung, sobat bisa lihat langsung Disini

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:KangRian.com --><style type='text/css'>.overlay {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); }.google-share h3 {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; }.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; }.google-share input {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; }.bagikan img:hover {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; }@media screen and (max-width : 640px) {.google-share, .overlay, .bagikan { display:none!important;}}</style><div class='bagikan'><img alt='bagikan' src='https://lh5.googleusercontent.com/-LJtGjVW5lUw/VOREluo6uaI/AAAAAAAAAIg/dH2Rd330UUM/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://lh4.googleusercontent.com/-OPqZu9Y5QH0/VOQnwTWauOI/AAAAAAAAAH8/6gFj49rRxIw/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://lh3.googleusercontent.com/-kYqrIfO1Xe4/VOQnwaNZwwI/AAAAAAAAAH4/x50u8fyfmhs/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://lh6.googleusercontent.com/-kIG-L39e4Xc/VOQnx1xy_mI/AAAAAAAAAIQ/OFEFaYJOZFY/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://lh3.googleusercontent.com/-ZQAmRRA2S6M/VOQnw5_PrRI/AAAAAAAAAIA/nAzYItOsXOE/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:KangRian.com -->]

5. Terakhir "Simpan Template"

Selesai, selamat mencoba dan semoga berhasil! :)

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Cara Membuat Fitur Google Share di Blog
Cara Membuat Fitur Google Share di Blog
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s1600/Widget-Header.png
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s72-c/Widget-Header.png
Mas Da Bang
https://blog.itapuih.com/2018/11/cara-membuat-fitur-google-share-di-blog.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/cara-membuat-fitur-google-share-di-blog.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy