Responsive Share Button Blogspot SEO Friendly

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'/>

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!

Design Blogger Responsive Serta SEO di Dalamnya

Good day all! Setelah sekian lama blog ini menghilang dari peredaran khususnya dalam pencarian Google, kini blog ini muncul kembali. Tentu masih banyak yang perlu saya update artikel lama dan optimasi ulang khusunya pada artikel serta SEO On Page template blogspot versi responsive ini. Setelah off selama 6 tahun tentunya banyak perkembangan di era mobile-view/smartphone seperti sekarang ini. So, welcome back to my blog after long time not seen!!

Mengulas design responsive di blogger memang tidak ada habisnya karena versi mobile sebenarnya masih dalam pengembangan. Berbagai perintah CSS dan script maupun aturan-aturan baru terkait mobile blog yang ditemukan untuk memenuhi kriteria design responsive ini. Sebelum mengulas optimasi design blog responsive, sebagai pembuka mari kita kenalan sama aturan responsive ini terlebih dahulu.

1. Real Responsive

Saya berfikir anda telah mengetahui dengan jelas tentang design responsive. Namun apakah kita telah menerapkan model responsive yang sesungguhnya di blog kita? Saya menemukan artikel di web developer google tentang fundamental design responsive. Secara garis besar di sana disebutkan bagaimana design responsive itu diterapkan dan mendeskripsikan aturan-aturan tak wajib namun sangat penting untuk diterapkan. Ini penting untuk seo di blogger!

min-width = menentukan lebar minimal berdasar jendela browser ( Good)

min-device-width = menentukan lebar minimal layar device (Not Recommended)

Terkadang tampilan blog responsive tidak berjalan sempurna dikarenakan perbedaan media query. Dari kedua media query tersebut memang untuk design responsive, namun akan berbeda cara kerjanya. Kejelian mendesign responsive memang dibuthkan karena tidak semua mobile device menerangkan ukuran layar minimal.

2. Check Design Responsive

Sebagai bahan pertimbangan menentukan design selanjutnya pasti membutuhkan alat untuk memeriksa design responsive, berikut ini adalah trik terbaik cara cek design responsive blogger menurut sejuta trik blogger (referensi penulis :d).

a. Google Mobile-friendly Test

b. User Friendly Test

3. Optimasi Design Responsive

Untuk melakukan optimasi pada design responsive dapat dilakukan dengan mengikuti ringkasan dari developer google tentang Ringkasan SEO Seluler. Sudah selayaknya kini orang-orang akan melakukan pencarian atau membuka blog kita dengan mobile device bukan. Kini saatnya kita melakukan optimasi SEO terutama untuk design responsive yang diharapkan dapat berjalan sempurna di semua perangkat.

4. Test dan Evaluasi

Yang terakhir catatan penulis yaitu melakukan test setiap design maupun trik-trik di atas dan melakukan evaluasi terhadap design responsive di dalam blog kita. Dengan melakukan test dan evaluasi maka kekuatan SEO walaupun menggunakan blogger yang sifatnya gratis akan mampu tampil no.1 di dalam pencarian mesin telusur. Sekian artikel ini dari saya, tips trik menarik seputar SEO adsense dan info lainnya akan kami buat seiring update artikel lama di blog ini.

Best regard - sejuta trik blogger