Cara Membuat Widget Sharing Dibawah Artikel Post

Cara Membuat Widget Sharing Dibawah Artikel Post - Ini adalah Widget sharing Sosial Di bawah Post. Widget ini cukup bagus bagus dari segi penampilan karena memiliki efek hover.
Dengan menggunakan widget ini, sobat dapat berbagi artikel ke berbagai social media hanya dengan skali klik. Widget ini menggunakan CSS3 dan HTML, Just check out demo.

Bagaimana cara membuat Widget Sharing Dibawah Artikel Post ini ? silahkan sobat ikuti langkah-langkah berikut ini :

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

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/AVvXsEj_wl5CRQjkHb1823tvPxyXva9qQYEqSSqAn4rKJwQl9BflZc-Iu-gPXfnrHYZVhuXODA71w0XDsKdEur2EGrR0C9IUDdbhNzU2gRexu7ZOKxii64gE_ZrTjnkq0FC9aNyXoQu11_ld94vl/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_ZELt7SPwRnyVehyTh2LIQM2KyB9Lep5eElJVKKzZfSrXnXqpgdUT-FeU5zUs8hb4MDBGDSVnJdjQCSj50hfV_iYyc35IvkPcB7exbRPP8OjJ3FjBa6edAz0VyZq7cV_phfxpGTlHDB7/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2X4XLPRizzVf6rgM0tynW8SKVpKAcABQg9ygaMh8UHcP9_R4dv2HHaQ5M3alSAuCO7y2Sr95u66RBbaK49QvRrTem0hI8Pj91fdDGQKteo8NFz2y6SZs5d-wnhJcpWnJU5H5-0Xbtclqa/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hqPOPfsxTWJWTFOntpJr3vuZeZLBKdJ6fEHnurOh0c-XEpIAY2Exdosn5iYel7W9OCQFDg4jDXKWJYLrWQlvYMx-6NWsZ7s9EtUluLY3wyLhJnD5RH3j3EodQ6iCiY53hian6GTaF_El/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJhEINsXpaJgLam7C51nrWK6DqnymhollRPM8agSpoXf_u4Uoy8Ab1O-yGdl_XQEwDe2Oik4wxhbHegbU8EhA7flXZSnLHlBZ_hwAIWp0yj8BrtNjx0ocME0K7lddzjIGhq9lnH7jwEvd/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvgJSpfDaYVATOF9h9uV33yW31bL55FUVDysY1M6zVFLvzYdVxcTaQxPGJPYsg8M5cD-e3PR-w8icaRqdtKwwssckQqu7RW0kSEfJzgbkCs0cupUxQ8oaW2O-W5BgkeNuDOtuWJxVjiwT/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKFoIG_a4_ytZWfNU0tgoPA1EgEQG9JDijMB-B-PI0nOO4aX5jdLpCIDmq1xuBazgqtTbyik15VkFknXuPaviMtKbGyhW2ComtXLr1PvAWGOie4EjznZOk9nky8c_Reqy0HxQzwp19KQU/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;'>Share this article with your friends.</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'>Facebook</a>
 </li>
 <li class='abtwitter'>
 <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</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'>Google+</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'>Pinterest</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'>StumbleUpon</a>
 </li>
 <li class='abdig'>
 <a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Dig</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'>LinkedIn</a>
 </li>
 </ul>
</b:if>

8. Terakhir save template.

Source : www.bloggertrix.com

Cara Membuat Widget Sharing Dibawah Artikel Post

0 Response to "Cara Membuat Widget Sharing Dibawah Artikel Post"

Post a Comment