Sabtu, 25 Mei 2013
Cara Membuat Tombol Share
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.
<!-- 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/AVvXsEhGvxwlY6koWUq811BbDWhqpVkATPLaeeewTu3Tw8KqN5jWtKarafcw9mnebXTRvNRPLcC3OB7rCFN9S_Xghb0RxOTe7OwVdCoeXAW3JtpDMbPLwB98npkUxbUqXAzKkEh7TmM3Klu4sEQ/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSCn6SoOZ1gAUPus7-k6XZgPrsR-VPD7v6A2Wb_gm9qERWFAnEv_SDflLJFihT90FsaIAZnI0YsZOIbrZTYnuURghyphenhyphenaAtQZe61tYlivu5BHpXqHg72iFma9O8yqLLatz6TkYzAxJQqtA/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtNGXNS4QA4nLFCGG-6DPR0LthJKjKEjgZ27X7uuCA8Lw034VNJ3N1n4FYnq75348hFzGb3LjqpsPTuJYMI5C6EoS_IHIGQJJXF_qjXhYpD77K_xMbZNJou5OvRQ01Pei41vEZSGOs5RI/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9q8qxBVSdP53O_1RhJPARRorw2goZVA_nEnPRVRdnyxsx5EIyeo2BXwJEYEPs4AsyQy8e1sjC7KkICCjiCaAhegwcv9KcCazMFtrLXymVL3du44pFEWFsaVLIF26e9qGLvciwcTpSic0/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IRtW4X45Cmsez6sByEM0Tu3s3oVJZ3hwfwkUMs8UB7genrevt5W53Mk9kbtrNr9BarCP20BoP1wDYQx8DyvMXc5sjvOPQcw8nPLUqEJvmldTFoAzaPiqwwsEJCrUpcBox2v6vzCvC6s/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjO4xiWYm_3Eg-S97TDLCyfMCMC0xG7mrd8BB3kn1fWCUcOgNnDpi-8firojcNhYgKkuzwXav_wyNYtI7zCS9TYDI4WTIygHKniB7tygVoEuhzv7kzuzalsi3lf8yCQqKtzAQ3zE9kHBs/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiyCwVeHL7_rJpcl3QVKgT1ZnUX5JMK9jzNd4Za__AvITowcPlv1fn2A5OjJnChyShxtuqrv_2hUvTVndRBPgbDRFAEFX6yNyj5TsR70zx62eJh4f1h-KH4FgZO6Sf2UtgTS5dsThohs/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkEGyIAo2K57-uErAA9oa6AEnWAFXmVBHoDyUh85RxxNP3LFrFqYPFQVaM8Nf-6xc50MlR3LlXwl7VGjNY-jrI_qLUa3GSrpjREYTgdGj2rahgh6Dg0tye-w9HvBv7I-ADoa6DaaVikY/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCYguLrHoN43VBv3gQBZd75rnCULPRpuA-DGuZNh2CGBGEz-R_8SDh9ze3n4smNK_bJY6FYP81RhXX2utp_8byQZBRxy97Rb1tmySTfl-0X0MtWJaU4V42UmwDI_4nDg3sXYzWDl5TDLS/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:
SHARE THIS POST
Author: Mohammad
Langganan:
Posting Komentar (Atom)
0 komentar: