Responsive Share Button Blogspot SEO Friendly

Membuat share widget blog bertujuan untuk meningkatkan SEO blog serta jumlah kunjungan blogspot. Dengan adanya gadget sharing button dihara...

responsive share button

Membuat share widget blog bertujuan untuk meningkatkan SEO blog serta jumlah kunjungan blogspot. Dengan adanya gadget sharing button diharapkan dapat menarik pengunjung baru melihat artikel yang dibagikan sebelumnya. Jika anda ingin menambah widget responsive share button blogspot yang seo friendly saya ada tipsnya. Namun sebelum saya berikan trik cara membuatnya, penting untuk saya ulas tentang desain responsive agar dapat dibuka di semua gadget.

Design responsive adalah teknik penggunaan css @media-query untuk memisah antara tampilan blog dibuka melalui smartphone, tablet, ipad, dan juga dekstop. Jadi widget share button blogspot ini lebih SEO Friendly daripada widget terkait biasa atau belum responsive. Untuk lebih jelasnya tentang design responsive, lihat artikel tentang design responsive serta SEO didalamnya.


Kembali ke topik kali ini tentang membuat responsive share button blogspot yang SEO Friendly. Saat pertama saya mulai merombak blog setelah sekian lama saya tinggalkan, saya kesulitan mencari artikel terbaru tentang widget share button ini. Setelah mencari dan melakukan percobaan, saya menemukan beberapa permasalahan. Kode yang dipasang tidak sesuai harapan seperti widget tidak tampil, kode usang, dan lain-lain. Belum lagi menghadapi rencana Google+ akan segera ditutup tentu hal yang berkaitan dengan situs tersebut mulai dinonaktifkan. Pemberitahuan mengenai counter atau jumlah share tidak ditampilkan lagi.


Mengenai widget responsive share button blogspot seo friendly saya memilih membuatnya dengan lebih simpel dan sudah banyak beredar dan dipakai blog-blog ternama. Lihatlah screenshoot di bawah untuk hasil dari widget ini! Bagaimana? Anda suka? mari langsung saja ke cara membuatnya. Cobalah di blog anda dan anda akan merasakan perbedaan setelah menggunakan widget ini.
CSS

/* Tombol Share */
.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}
HTML

<div id='share-container'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div id='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><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;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>
Font Awesome
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
responsive share widget blogspot

1. Pada keadaan Edit Template, pasang CSS di atas ]]></b:skin>

2. Cari <data:post.body/> jangan salah karena terdapat 2 hingga 3 kode ini!

3. Letakkan kode HTML tepat pada kode di bawah artikel atau cari kode <data:post.body/> Kode yang berisi "tag item" atau postingan.


<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>Taruh HTML di Sini</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


4. Jika di blog anda belum ada kode font awesome, letakkan kode Font Awesome di atas </head>

5. Setelah menerapkan 3 langkah mudah tersebut, simpan perubahan template anda! dan lihat pada halaman artikel.

Referensi
Setelah anda menambahkan atau melakukan perubahan tersebut, kode akan tampil seperti screenshoot dibawah. Atau untuk design yang lain anda bisa kunjungi artikel dengan alamat berikut. https://penaindigo.com/cara-memasang-tombol-share-keren-di-blogspot/

Kode di atas sangat seo friendly, karena widget share button berkaitan dengan penggunaan link external atau link mengarah keluar dan penambahan rel='nofollow' tepat sekali. Apa itu rel nofollow? Anda bisa melihat ulasan tentang penggunaan rel tag blogspot tersebut! Akhir kata happy blogging!
Name

About US,1,activate,1,ADDMEFAST,1,AdLinkFly,1,Adsense,2,ANALISA WEB,1,android,1,Artikel,11,Backlink,5,Backlinks,18,Backup,1,Best 140+ Do-follow Web 2.0,1,Best 59+ Free Ping Submission Sites For Faster Indexing,1,Best High DA Dofollow Blog Commenting,1,BIN,1,Blog,2,Blog Design,2,Blogger,1,Bounce Rate,1,CDN,1,Copy Artikel,1,cPanel,1,crack,2,Desain,1,DIGITAL MARKETING,1,Disposable E-mail Free,1,domain,1,DropMyLink,1,Dunia Kampus,1,EDU BACKLINKS,5,Express Vpn Premium Account,1,FAQ SCHEME PAGE,1,followers tool,1,Footer,1,free,1,Free Image Submission Sites,1,Free Profile Creations Sites List 2020-2021,1,Free Video Submission Sites List 2020-2021,1,Gmail,1,Google,3,GOOGLE ADS,1,Google Adsense,1,GOOGLE ANALYTICS,1,google drive,2,Google My Business Customer Reviews,1,GOOGLE SEARCH ENGINE,1,GoogleNews,1,Header,3,High Authority Blog Submission Sites List,1,High DA/PA PPT Submission Sites List 2020-2021 for SEO,1,hosting,1,Hotstar Premium,1,How To,1,How to Activate,3,HTML,5,IDM,1,Info Blog,11,Info Google,13,Inspirasi,5,Instagram,2,Instagram Likes,1,Jejaring Sosial,12,JNews,1,JSON-LD,1,Kapita Selekta,3,Komentar,8,Kurikulum 2013,2,Label,3,Link,14,Lynda.com,1,MENINGKATKAN SEO WORDPRESS,1,Menu,2,MICRODATA SEO,1,MyThemeShop,1,Netflix Accounts,1,News,38,newsmag,1,newspaper,1,Noor theme,1,Nord Vpn Premium Account In April 2020,1,NORD VPN PREMIUM ACCOUNTS,1,On Page SEO,8,online shop,1,Opini,10,Page Speed,1,Pagerank,8,PDF Submission,3,PDF Submission Sites,1,Pembelajaran,4,Pixelyoursite,1,plugin,1,plugins,2,post views,1,Posting,10,Privacy Policy,1,Produk,1,PVANISH PREMIUM ACCOUNT,1,RSS,1,RSS Feed Submission Sites List 2020-2021,1,Schema,1,Search Engine,4,SEARCH QUALITY RATERS,1,Secret Hacks,1,SEF,8,seo,93,SEO WORDPRESS,1,Settings,1,Shopping,1,Shortcode,1,Sidebar,2,Spotify,1,Spotify Premium Accounts,1,tagdiv,1,Template,9,themes,2,Tips,2,Tips & Tricks,3,TIPS DAN TRIK,2,Tokoh,1,Tools,10,Tricks,9,Trik,1,Web 2.O Sites List 2020,1,Web Hosting,2,Webmaster Tools,5,Website,3,Widget,10,wordpress,13,WORDPRESS & WOOCOMMERCE TUTORIALS,1,WP Rocket,1,youtube,1,
ltr
item
Trik.My.ID - Trik dan Tips Untuk Semuanya: Responsive Share Button Blogspot SEO Friendly
Responsive Share Button Blogspot SEO Friendly
https://2.bp.blogspot.com/-K8yZAH6US58/XI2-EaHmWOI/AAAAAAAAFDg/peDuUjitblwiDPL7AUEMGCjZWwKqGG6LgCLcBGAs/s640/Widget%2BShare%2BSosial%2BMedia.png
https://2.bp.blogspot.com/-K8yZAH6US58/XI2-EaHmWOI/AAAAAAAAFDg/peDuUjitblwiDPL7AUEMGCjZWwKqGG6LgCLcBGAs/s72-c/Widget%2BShare%2BSosial%2BMedia.png
Trik.My.ID - Trik dan Tips Untuk Semuanya
https://www.trik.my.id/2019/03/responsive-share-button-blogspot-seo.html
https://www.trik.my.id/
https://www.trik.my.id/
https://www.trik.my.id/2019/03/responsive-share-button-blogspot-seo.html
true
3610684226484108978
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 to a social network STEP 2: Click the link on your social network 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 Table of Content