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/AVvXsEjVZuGBcyKzhSacXFtTbfzTf9AJPSHPOkTTRtJJiJSjm02-W3JwQ2mQv3Zq24M_cjgHRv7LROePItqzib6ewPizQP-_C_LLn8hdrCZF7LYHmOV__UuzupOHk9HluzZ77IoRyDExHWw4Pfw/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJEV8h2L-zCGUETQHTePi3zDb6QLjSA_jmATMRBhC5Xeq-1x0rdBtnZD0wBIDDmfsnJ-RdXQPfcOJZSFMy21LbzZM2VMO2ni-pa4yS1wgbfgYvO5SuidaYIn6SZGezGGU7hTG1JQfD0g/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbb3BkQsr_wDhlGAKu_70e9q4s2fF4SiYcKjBFusNQCyU2OIZYQpRMLgCAMYHQH9Qqe4OUuH0UXh56-oXObPF1Epr1M5yZ9q3MxDFCUf8MMiMd0YTWJhNFfEjrNrxQ2bqa1AuhyZftsQc/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPFWOhMIydz3lEVlPhTdTN2Tv33riLYdtV09XtJ3LkJ6K3sT0Qle0Z4JPplTff_qFBl2izxsC0OZLUqyg86l-w2-I0s_5E__IoAXTwlHEdOHokp6mtwrsSzAMzVHz0eyYRAj1GO4csgM/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFxKzHqpzm9T5u1p24czAd0UAnNYx2drGyngL4poNfDdXFE9iuP-0Jikh6fNJs90gc8hWloNskN84SeR7iB6PORT87QG7ocRqZb0rnlPms8Xc5wVp8518lIT3AESODigIqjrj0vfKVdE/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOch42bww3ZxAfrwvAzjgsHqkGNpCNSqax4oBUgNenx4VX-o0n6MnLd1Qj6Mc-iRxPpO_H0zmNmL0AVJGmbDqTy-B3pXIs3eJdQoKtNON5qjC4bN1MOTYkpWzJiDwp-VULocTsPUqclaE/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQrlWHNNwYt-wIC_R8VbUTT2EGS5x-Q36Ay01lorGq6xhxurVYn8euLMDu7OVIOvhL9V4lbaIpBd5uv38U8cRFwMW9zRHFzQ-B5FUjTxDAZToU7wqftjb22ihno1lgYaAWmbBt32qiJU/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_QxHjDvZvlboA88NVYbP1wulGixruNSYBg_bznf32DkyBU7ps2_9cIpo0vlth52I56KjinlKMvxQtUU1k-R_nwM70EmK2JhWJR0jSKjHOKKSg59-2Xf7LcGYs8xdGv5xwi_GmV9Ka5E/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEe0Ufd0s_54fdqvaD1-7tp12Ra_bu3ucWXt_YV2Wt6Zs9ht94AD_WkHQ7b6Z6CwBwuHoUaHVa6b3dARPw5uEAdDetohpp1Y0Dap47SQ2Qm37Od3RTlKQretVRDnvBL_dw5Dj101Wku0J/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.
0 komentar:
Posting Komentar