Pada kesempatan ini saya akan membahas tentang cara membuat tombol share di blog. Dari sekian banyak cara untuk meningkatkan lalu lintas blog Anda salah satunya bisa dengan memanfaatkan media jejaring social seperti facebook, twitter dan Google+. Dengan media social itu sangat membantu untuk meningkatkan mesin pencari dalam menemukan blog Anda. Yang perlu kita lakukan adalah berbagi postingan blog kita ke situs media tersebut untuk mendapatkan pengunjung ke blog kita. Oke, langsung saja ikuti langkah di bawah ini untuk membuat tombol sharing atau berbagi posting ke media social Facebook, Twitter, Google Plus, Pinterest, StumbleUpon, Delicious, LinkedIn dan Reddit.
1. Login ke blooger Anda
2. Klik Template - Edit HTML
3. Tekan Ctrl+F dan cari kode :
<data:post.body/>
4. Saat pencarian Anda akan menemukan beberapa kode yang sama, cari kode pertama saat pencarian.
5. Setelah menemukan kode tersebut paste kode di bawah tepat selelah kode di atas.
<!-- share start here http://satu-delapan.blogspot.com/ --><b:if cond='data:blog.pageType == "item"'> <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div> <ul class='social' id='cssanimation'> <li class='facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a> </li> </ul></center></div> <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/> <style> ul.social { list-style:none; display:inline-block; margin:15px auto; } ul.social li { display:inline; float:left; background-repeat:no-repeat; } ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; } ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; } ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUH7Ze1rqB_6CyPw0IQ0rsP3YaNPnTgOY0TDFe9n5obpg8U3CzQ-2q6PFrFN4djZ8AK6onCqSxVO72TI463IhBGppTMNuWOLC99ZYdF-JK0lBBzvQwr-c6yti7GEZX0JURFKuOlGyxpTY/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6F1UzqMy3IHQtYRy8qUGAZ03jGsJZljQH-k_iBXC6gdLqJgdFXM9thFi4vbmg1bJ04IYDbXLNRpO3-p5a63qQa4Fno9KRQIZ3JT2VPzgf-UBH7HEC-qRjYzUqbQANVn0_TolKfQguWw/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHk35_6aQTsVMebcc9ZndMNH40Gz3DItL51CxnrOBbZnR9ZvjMnskaPrmaeYPY5fDkQgK69PzNIX2jXTaG8EecJEZ-v4R1STQQUBE7Hg8i-L0yMWAAXWaNr5Oo2MVcjN3PzGZzDRikFqI/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2IwVTK3R8DGcFV5wH9n8_-QDck5ckT0OylZ7uPIc8WX1TiZEx5Kuq69C1evqkd73hqJrw2cta8zd513ibzu4S6zm_IeZanA3IxuDgeyi3DCJxIzx7xIBHvWmCMkdfBoY92Ku5x74IGo/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CkiYYLZcwuUsKDRh3TSw8cfmeL5khmWGhsm33kxeAHDBbm3-UvmMMWGc7cmj_vzAHsHEWK5ATdkXwCdSHVg374DSQD72U_gTJSq9O2Xy7s3ayYZ80B6_j04zI02Xsb1YZdsyuzV8EU8/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATn1hP1R9lBCuGJyUAr98XOVAqpTXaNLE05XiD1QprkoTqYqEqmM3KYecajV7vvRY9rffaLmU0_GLVg3-5xd_TfAubroaCDIiR5XvXo6L-gyZKwij7iCgw3UsesZmqoiWxp2SIVutey8/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfvuXDoZV1n5KNQhpaY7C7BmVZLdZmTv2UNV5ZoQFxPiZm93EkGs_B18x-nXue5nWtDaVf0thG6tprcFbMwqp3DCE04_GNiDzw0lkgU7k6749Gwf7fnreAYMhxZvIY7tAAXkCqgCB-5o/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOyEZPXAqUohd9C0aUBX3lla0Eb2c3-5KHuynRxgON8iqdQIl8C1I53JuuDQ5c4CIfLV3KdX0am5LJWrp9X0TI0GMxpUAGHanmOwOyt6sgzsm0aUn1LNnFylHeVYUDcAckzJXXekE6uzQ/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBdQKJkCo6XQ-2XVnTSU4AtDgwIpVyIQn5SQQMBK8zobUi3w-h2cP15zqaT-J41mh2ze3EwNauix-8b5o_RHNhM351P8kkJsYRoJkssRpvjjWIWU6UPoBjRYKjNCAgbOrzSyRXbXadg86/s1600/TBI-technorati.png); } #cssanimation:hover li { opacity:0.2; } #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; } #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; } #cssanimation li:hover { opacity:1; } #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{ font-size:25px; font-family: 'Englebert', sans-serif; } .sharelordhtml{ border-top:30px solid #3873CC; padding:16px; -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s; background:#D9D6FF; } .sharelordhtml:hover { background:white; } </style> </b:if><!-- share end here http://satu-delapan.blogspot.com/ -->
6. Langkah terakhir Klik Simpan template. hasilnya seperti gambar di bawah ini:
Gimana cukup mudah kan untuk menambahkan tombol media social di blogger. Apabila ada kesalahan atau tidka jelas silahkan tinggalkan komentar Anda, umpan balik Anda sangat berharga buat penulis . Happy Blogging !
Tidak ada komentar:
Posting Komentar