Design responsive yaitu teknik penggunaan css
@media-query untuk memisah antara tampilan blog dibuka melalui smartphone, tablet, ipad, dan juga dekstop. Kaprikornus widget share button blogspot ini lebih SEO Friendly daripada widget terkait biasa atau belum responsive. Untuk lebih jelasnya ihwal design responsive, lihat artikel ihwal design responsive dan SEO didalamnya. Kembali ke topik kali ini ihwal mem.buat responsive share button blogspot yg SEO Friendly. Saat pertama aku mulai merombak blog sehabis sekian cukup lama aku tinggalkan, aku kesulitan mencari artikel terbaru ihwal widget share button ini. Sesudah mencari dan melsayakan percobaan, aku menemukan beberapa permasalahan. Kode yg dipasang tidak sesuai impian menyerupai widget tidak tampil, aba-aba usang, dan lain-lain. Belum lagi menghadapi rencana Google+ akan segera ditutup tentu hal yg berkaitan dengan situs tersebut mulai dinonaktifkan. Pemberitahuan mengenai counter atau jumlah share tidak ditampilkan lagi.
Mengenai widget responsive share button blogspot seo friendly aku menentukan mem.buatnya dengan lebih praktis dan sudah banyak beredar dan digunakan blog-blog ternama. Lihatlah screenshoot di bawah untuk hasil dari widget ini! Bagaimana? Anda suka? mari pribadi saja ke tips mem.buatnya. Cobalah di blog anda dan anda akan mencicipi perbedaan sehabis memakai 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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + 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
Kode di atas sangat seo friendly, sebab widget share button berkaitan dengan penggunaan link external atau link mengarah keluar dan penamkomponen ]]></b:skin> 2. Cari <data:post.body/> jangan salah sebab terdapat 2 sampai 3 aba-aba ini! 3. Letakkan aba-aba HTML sempurna pada aba-aba di bawah artikel atau cari aba-aba <data:post.body/> Kode yg berisi "tag item" atau postingan. <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/>Taruh HTML di Sini</b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> 4. Jika di blog anda belum ada aba-aba font awesome, letakkan aba-aba Font Awesome di atas </head> 5. Sesudah menerapkan 3 langkah gampang tersebut, simpan perukomponen template anda! dan lihat pada hacukup laman artikel. Referensi Sesudah anda menambahkan atau melsayakan perukomponen tersebut, aba-aba akan tampil menyerupai screenshoot dibawah. Atau untuk design yg lain anda bis,a kunjungi artikel dengan acukup lamat berikut. https://penaindigo.com/tips-memasang-tombol-share-keren-di-blogspot/ rel='nofollow' sempurna sekali. Apa itu rel nofollow? Anda bis,a melihat ulasan ihwal penggunaan rel tag blogspot tersebut! Akhir kata happy blogging!
