Cara Menciptakan Widget Sharing Dibawah Artikel Post
Thursday, October 2, 2014
Add Comment
Dengan memakai widget ini, teman sanggup membuatkan artikel ke aneka macam social media hanya dengan skali klik. Widget ini memakai CSS3 dan HTML, Just check out demo.
Bagaimana cara menciptakan Widget Sharing Dibawah Artikel Post ini ? silahkan teman ikuti langkah-langkah berikut ini :
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvb4EdrABhHaidGP4KHQlq55e3jxdYbegkuSsCjGJ4b3KXPTT7kB3rv7RGKkGotBlhpfvr68ynS7okE9U7o5fMhdnHwj8AzRcchyphenhyphenfgFig1GG-YvyOFYiGEXOL045BgvgideTUeRNCpTprK/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7x2jRulJGPbSBvMxb73h3okMALpqPu9NjMdYQA1XFdqjzwSEy1kcvSU9XZXc85eNmSVYnqZ1KDBS2xnR5-LHyqWjeLv2134KdoTTH7XdeNrUdS8QJ7HkA7V5w7iwjEC2daPSZtG_i-S4h/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRsLjn1OrMoGGipOVD0eZxScDgEpCWGipd2HoFRhqTsGjXDZafnK8OUdUB7BEMYhVAxLnOzWERwzQK_jot8zgKAlsTlu4txQIFpP9NMgER1qVgr8cMiymeGhaD46qNwweJkMz54T698Mqo/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcuCI_r2uM7OJ7yO7PDgj34rR0q0AF83buUdmLN-NY8EOqkimeTqALggI7epRrnIB4xW3_rKSDpvCHcXE2bYhAug2XC5CkK20hFjUGAlpQ8LdQTd6r9Ue-JotM83UNoR8gdJ8sonOhRyt/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tjWrVOLcVJzbN2qPHctIed6w2szbxJN3TczxYtm0t_IDJpKcYSumRwyoNCUn8t3DEO2qtiYaoPWlkKdaR5vLXbtTRj7L5a0xLVvVpKPO4omOGgDFfX9coRjSG3qVbqluBBfGloKU1eAR/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWhN7AygZ9ZCF7n0pVCkcbq4N5_mG5kTZyPv57pNwZOi7wX3zTCDPubrM7QCSTvkdc2IW2MRgbJg60tJEhyEpOHmOljwsja8kDJqAo6ndvJIgjF4P74vH_ngJXcZMPh1Xkk_oxAUE2DGS/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQS9K1pphyVBPNAJjKe0M6uRABuL3YlLDHXun4CbMcP_Y21SUEtHuS65VxEVAI2cDfhluVKPgj9UcNApV26SdapU7gkLRLw7bJ8l2CrFGne5NEX7tVnylvYWbmyIWXbGk8CttS7wp9OIg/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvb4EdrABhHaidGP4KHQlq55e3jxdYbegkuSsCjGJ4b3KXPTT7kB3rv7RGKkGotBlhpfvr68ynS7okE9U7o5fMhdnHwj8AzRcchyphenhyphenfgFig1GG-YvyOFYiGEXOL045BgvgideTUeRNCpTprK/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7x2jRulJGPbSBvMxb73h3okMALpqPu9NjMdYQA1XFdqjzwSEy1kcvSU9XZXc85eNmSVYnqZ1KDBS2xnR5-LHyqWjeLv2134KdoTTH7XdeNrUdS8QJ7HkA7V5w7iwjEC2daPSZtG_i-S4h/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRsLjn1OrMoGGipOVD0eZxScDgEpCWGipd2HoFRhqTsGjXDZafnK8OUdUB7BEMYhVAxLnOzWERwzQK_jot8zgKAlsTlu4txQIFpP9NMgER1qVgr8cMiymeGhaD46qNwweJkMz54T698Mqo/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcuCI_r2uM7OJ7yO7PDgj34rR0q0AF83buUdmLN-NY8EOqkimeTqALggI7epRrnIB4xW3_rKSDpvCHcXE2bYhAug2XC5CkK20hFjUGAlpQ8LdQTd6r9Ue-JotM83UNoR8gdJ8sonOhRyt/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tjWrVOLcVJzbN2qPHctIed6w2szbxJN3TczxYtm0t_IDJpKcYSumRwyoNCUn8t3DEO2qtiYaoPWlkKdaR5vLXbtTRj7L5a0xLVvVpKPO4omOGgDFfX9coRjSG3qVbqluBBfGloKU1eAR/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWhN7AygZ9ZCF7n0pVCkcbq4N5_mG5kTZyPv57pNwZOi7wX3zTCDPubrM7QCSTvkdc2IW2MRgbJg60tJEhyEpOHmOljwsja8kDJqAo6ndvJIgjF4P74vH_ngJXcZMPh1Xkk_oxAUE2DGS/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQS9K1pphyVBPNAJjKe0M6uRABuL3YlLDHXun4CbMcP_Y21SUEtHuS65VxEVAI2cDfhluVKPgj9UcNApV26SdapU7gkLRLw7bJ8l2CrFGne5NEX7tVnylvYWbmyIWXbGk8CttS7wp9OIg/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
6. Find this tag by using Ctrl+F <data:post.body/>
7. Paste below code Before <data:post.body/> tag
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>
8. Terakhir save template.
Source : www.bloggertrix.com
0 Response to "Cara Menciptakan Widget Sharing Dibawah Artikel Post"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda