Cara Membuat Tombol Share Media Sosial di Blog

By kamsar Tips Blog

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.

<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/AVvXsEjon5J2FLGZPPdCR4jn0PjXEGcQjatuws3K2hen7hc_ByCE7KxAFdxMKT8M0Cudzym02-n1-ombK5JlfNKSfVxCtR2bJ7PMEkE6uE8Ifd_YfyN24IsubM6yHC5GsM-KyGpY-PlYm1g0AWk/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0OOgohyQrth7VFnE544rciVxZgVk4KQXvWJnDvqQps11zMNClopN1oWbIPUC3pLBeMSMOh_M_WXM1EGSGw48TAtAxIogV2aHM_TdSkIm_u2PrMqYU5s6HooAV-YVdDT_zV8LapMIMD8/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6viPDZGqdTSPns97-Z8w6_EgnSwjIY7D4-ntrBhk4E4VtgT_XuCmqggbGCk2IWXbYEzujZM0ipVLnr3mqg43FJVAUWf5oQV9b9Y-ncRjBU7JSAs6ohpE1_XRRKi8c0g1UqNhwOig4GM/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHg-WOwl49PrSomh6pmoCm86JOAJbhH3RuV2tgjwY6rjWA0OFOqFFJkMUIqndR626GAm7q9sj29oSpRx-FbTaCpCisI51K_grFmX9vtp68pBbSWZt91QELJsDiU4fnjM5tiQQDupjHFYY/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UXDeiK-Ny4-kQrrzu6Ex9nb_fUdDOOWm9sOyKLehxEUFHFvwGL0ES6zfJkLIf-8t-oVliTFx_w2cnYTKxgyDVGsRfu5jtMO2fJJOku5epoEUSmURL3D801pMXohFuh4rK1jfX_MEI3Q/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhguCcpQKgEHlGXS4QffPPJMVAA7gXRiYeMePLfwRoue4IcuDdhj-LM7sZJFXZctmrA_pPeaZHUjSXyIz-jcVKkMlDJYjIrh8FaAPNhCWlWZzgT_eA0Q-xdglDmB8UpXV5fb_C4qXfV2NY/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKC8Op68UsJxBIJv407Qo-PupY1KyJ1Yw6AB0Af5satgC-BVP2o6Aho1tGVLbOLZoQR9wjZ5vwregQpswRHMLNy2gMUV51ulHsho4qDoVkGDRyso2KZEi0ip3M3vn3T3zas3JKykVlKo/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VdplWtlVXj_A-1Mwkb_3qcA-8-9_315VKdXqMwsvMeAwLGWZWpndmJoatfkZX1WX4-doSPE8EO6AMtt6B_6NT54hz2ll8jjP0Xg0GbkZwr9GMVqtdB1ejxdXLCJ8QQS2elu-64UnJOA/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLHWSIF5MeYf7CeP48cgyc1TUbvaKI-YMEM4PtNrsKvGDxuFnKthtDZ-VcmApNJ27tB3w1obsqF2wOz-4sv-7jbb54Y3to0lXiVrlZPx0KBlNfpUb6dS4fWDAQ2WsP2lyLaACIaVNuxZWf/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>

6. Langkah terakhir Klik Simpan template. hasilnya seperti gambar di bawah ini:

KAMSAR

Minggu, 30 Juni 2013

Cara Membuat Tombol Share Media Sosial di Blog

Cara Membuat Tombol Share Media Sosial di Blog

Tidak ada komentar:

© Blog Archive ©