Cara Membuat Widget Sharing Dibawah Artikel Post - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Widget Sharing Dibawah Artikel Post !! Semoga tulisan dengan kategori
social media !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Widget Sharing Dibawah Artikel Post ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->
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.
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/AVvXsEg-INPf_xywvqcY5eYNyBg6c7769UXQBsnjgJWru1IsTC50adVHOJkFB4vKVXeQ5LLhiunlKTLG4HmhCjEeUPj6q_RfMgMI2_aDB0J0MlJ1vkUxURPIVi_m48bFQXUwU4JJauwd6fNPzJ1M/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFZl6M98itXrPygMoZNAAIkk0NlNbcZLSmOuRmBQTyvjO2ywvbZA1Dqattj-aRxYXAun-lA5ygO1q9aeFVqbEgSYfrg_pTMPmmotZHehX5IShAfOO63LmqWSeETdDttZZP327lMo8kea8/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcU89yy0cwi2CosmEU_Zu8axj6EDBX146LOHEls7KsVfgvInYR-hElfz4Y-n2JHMviEW2fVqJX-Dsw6c2daATC7cVQpLqL7UFv4pshs5Mpm4JbZeG6JkpAuVlxrMsDRfCghuMntQv4nEDz/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9jOUj5u-zrxlzirBugJaNYC4M76BWzU4ZjLUxycUrKvJNVB0w6uMgt6tYenLHi0PUj6QfHcmh7HE7vqyhW4xw0FjAk5pnKUes9mDOH6L_J2n8SlcN09o6ZrqgdWzNjJ5HkBjXdEiowcA/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6f2IkrgiiIWRtU-a3TFWzuI3r2VALIX1OqTqo3qMNUqJr5y8ybKaaIiqj2W0mpfcmTM2bO85b_XuOZtbJL2JsmsOGN8uZ1UVO-coFFHwvXKzCj34D1hedBKW1R_aORS0_jQn42hYmzmjQ/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hpwt8rnn521e1y25HzYmPcbT4hVHwk1oaoqQ98VWBaew_fOgrbNQg17aqFbKeru9WZd4Ux9Mt9rm65EhG53uknr0dFvKHY2af90-P6KRaWL9ZaBcXwwlK_ipZWJMR3KmhwtsqFZd4LaO/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBmjLFwjpEqoFoXLCetDDn05-QdmqgEzKEcRMYorC-I_2q3nBeEGh0JIIwBTNEgNqaDHD_qP_fOGIM1bS63ZbYF-94aogrSvxh9wjeH9l8ZA4bpRFM8KYR9AOkk5IP0kviCOwMjEuQSTq/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/AVvXsEg-INPf_xywvqcY5eYNyBg6c7769UXQBsnjgJWru1IsTC50adVHOJkFB4vKVXeQ5LLhiunlKTLG4HmhCjEeUPj6q_RfMgMI2_aDB0J0MlJ1vkUxURPIVi_m48bFQXUwU4JJauwd6fNPzJ1M/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFZl6M98itXrPygMoZNAAIkk0NlNbcZLSmOuRmBQTyvjO2ywvbZA1Dqattj-aRxYXAun-lA5ygO1q9aeFVqbEgSYfrg_pTMPmmotZHehX5IShAfOO63LmqWSeETdDttZZP327lMo8kea8/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcU89yy0cwi2CosmEU_Zu8axj6EDBX146LOHEls7KsVfgvInYR-hElfz4Y-n2JHMviEW2fVqJX-Dsw6c2daATC7cVQpLqL7UFv4pshs5Mpm4JbZeG6JkpAuVlxrMsDRfCghuMntQv4nEDz/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9jOUj5u-zrxlzirBugJaNYC4M76BWzU4ZjLUxycUrKvJNVB0w6uMgt6tYenLHi0PUj6QfHcmh7HE7vqyhW4xw0FjAk5pnKUes9mDOH6L_J2n8SlcN09o6ZrqgdWzNjJ5HkBjXdEiowcA/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6f2IkrgiiIWRtU-a3TFWzuI3r2VALIX1OqTqo3qMNUqJr5y8ybKaaIiqj2W0mpfcmTM2bO85b_XuOZtbJL2JsmsOGN8uZ1UVO-coFFHwvXKzCj34D1hedBKW1R_aORS0_jQn42hYmzmjQ/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hpwt8rnn521e1y25HzYmPcbT4hVHwk1oaoqQ98VWBaew_fOgrbNQg17aqFbKeru9WZd4Ux9Mt9rm65EhG53uknr0dFvKHY2af90-P6KRaWL9ZaBcXwwlK_ipZWJMR3KmhwtsqFZd4LaO/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBmjLFwjpEqoFoXLCetDDn05-QdmqgEzKEcRMYorC-I_2q3nBeEGh0JIIwBTNEgNqaDHD_qP_fOGIM1bS63ZbYF-94aogrSvxh9wjeH9l8ZA4bpRFM8KYR9AOkk5IP0kviCOwMjEuQSTq/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
Demikian info Cara Membuat Widget Sharing Dibawah Artikel Post, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Widget Sharing Dibawah Artikel Post ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.