POST SHARE WIDGET BUTTON IN BLOG

Saturday, 3 May 2014

POST SHARE WIDGET BUTTON IN BLOG

------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE BEFORE B SKIN TAG

]]></b:skin>
-----------------------------------------------------------------------------------------------

/* SHARE BUTTON */
#share-button{margin:0 0 8px -25px;padding:6px 3px 6px 18px;overflow:hidden;background:#E6E6E6;font-weight:400;box-shadow: 0 -1px 0 rgba(0,0,0,.2);}#share-button a{position:relative;float:left;background:#fff;border-radius:4px;border-bottom:1px solid #808080;display:block;color:#696969;padding:5px 8px 5px 31px;margin:0 3px 3px;font-size:15px}#share-button a:hover{box-shadow:0px 0px 3px rgba(1,1,1,.1)}
#share-button p{float:left;display:block;margin:3px 5px 0px 7px;border-radius:6px 6px;color:#696969;font-size:15px;font-family:Oswald,sans-serif;text-transform:uppercase}
.facebook:before{content:"\f082";font-family:fontAwesome;position:absolute;font-style: normal;font-weight: normal;text-decoration: inherit;font-size:25px;color:#2a69ad;padding:0;
opacity:0.9;top:0px;left:5px}
.gplus:before{content:"\f0d5";font-family:fontAwesome;position:absolute;font-style: normal;font-weight: normal;text-decoration: inherit;font-size:25px;color:#cf4438;padding:0;
opacity:0.9;top:0px;left:5px}
.twitter:before{content:"\f099";font-family:fontAwesome;position:absolute;font-style: normal;font-weight: normal;text-decoration: inherit;font-size:25px;color:#2aafdb;padding:0;
opacity:0.9;top:0px;left:5px}
.lintas:before{content:"\f0ac";font-family:fontAwesome;position:absolute;font-style: normal;font-weight: normal;text-decoration: inherit;font-size:25px;color:#d99c2b;padding:0;
opacity:0.9;top:0px;left:5px}

]]></b:skin>

-----------------------------------------------------------------------------------------------------

FIND INCLUDABLE POST TAG LINE AND RED CODE

<b:includable id='post' var='post'>

-------------------------------------------------------------------------------------------------------

<b:includable id='post' var='post'>

<b:if cond='data:post.title'>

<b:if cond='data:post.link'>

<b:else/>

<b:if cond='data:post.url'>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<div id='share-button'>

<p>Share this : </p>

<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow'>Facebook</a>

<a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow'>Google+</a>

<a class='twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow'>Twitter</a>

<script>

//<![CDATA[

var uri = window.location.href;

var ttle = document.title;

document.write("<a class='lintas' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' >Lintaskan</a>");

//]]>

</script>

</div>

</b:if>

<div class='clear'/>

-----------------------------------------------------------------------------------------------------------

OR USE THIS CODE

http://blogger-hints-and-tips.blogspot.com/

BUTTON PADDING CHANGE HEIGHT WIDTH

https://fbgadgets.blogspot.com/2018/09/padding-change-into-width-and-height.html

-----------------------------------------------------------------------------------------------------------

<html>

<head>

<style>

a {

color: #C02CB0;

outline: none;

-webkit-transition: all 0.14s ease 0s;

-moz-transition: all 0.14s ease 0s;

-o-transition: all 0.14s ease 0s;

}

a:visited {

color: #C02CB0;

}

a:hover,

a:focus,

a:active {

color: #333;

}

</style>

</head>

<body>

<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&postID=7945224882709816027&target=email" target="_blank" title="Email This"><span class="share-button-link-text">Email This</span></a><a class="goog-inline-block share-button sb-blog" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&postID=7945224882709816027&target=blog" onclick="window.open(this.href, "_blank", "height=270,width=475"); return false;" target="_blank" title="BlogThis!"><span class="share-button-link-text">BlogThis!</span></a><a class="goog-inline-block share-button sb-twitter" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&postID=7945224882709816027&target=twitter" target="_blank" title="Share to Twitter"><span class="share-button-link-text">Share to Twitter</span></a><a class="goog-inline-block share-button sb-facebook" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&postID=7945224882709816027&target=facebook" onclick="window.open(this.href, "_blank", "height=430,width=640"); return false;" target="_blank" title="Share to Facebook"><span class="share-button-link-text">Share to Facebook</span></a><a class="goog-inline-block share-button sb-pinterest" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&postID=7945224882709816027&target=pinterest" target="_blank" title="Share to Pinterest"><span class="share-button-link-text">Share to Pinterest</span></a>

</a>

</div>

</body>

</html>

-------------------------------------------------------------------------------------------------------------

IF U DON'T USE BUNDLE CSS FILE USE THIS CODE

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK0Lprl8tACSfrVOS_q0YI8UYjVMx7wCnQRnKtqZQxPfsT2tAWO0QzzNDvy2Tm9YVaV_GMwPoRXUw_hc3z9Tvw0ZiCu99JMXC02kXBun3Yha6w31_CcqYMaBmiDUD2o1V0eqfBigDAyhNx/s0/share_buttons_20_3.png

http://www.bloggerbuster.com/2008/07/how-to-add-quick-edit-pencil-to-blogger.html

-------------------------------------------------------------------------------------------------------------

<style>

a {

color: #C02CB0;

outline: none;

-webkit-transition: all 0.14s ease 0s;

-moz-transition: all 0.14s ease 0s;

-o-transition: all 0.14s ease 0s;

}

a:visited {

color: #C02CB0;

}

a:hover,

a:focus,

a:active {

color: #333;

}

.post-share-buttons {

display: inline-block;

margin-top: .5em;

vertical-align: middle

}

.share-button {

width: 20px;

height: 20px;

background: url(https://www.blogger.com/img/share_buttons_20_3.png) no-repeat left !important;

overflow: hidden;

margin-left: -1px;

position: relative

}

.dummy-container,.google-plus-share-container {

vertical-align: top;

padding-left: .3em

}

a:hover.share-button {

text-decoration: none;

z-index: 1

}

.share-button-link-text {

display: block;

text-indent: -9999px

}

.sb-email {

background-position: 0 0 !important

}

a:hover.sb-email {

background-position: 0 -20px !important

}

a:active.sb-email {

background-position: 0 -40px !important

}

.sb-blog {

background-position: -20px 0 !important

}

a:hover.sb-blog {

background-position: -20px -20px !important

}

a:active.sb-blog {

background-position: -20px -40px !important

}

.sb-twitter {

background-position: -40px 0 !important

}

a:hover.sb-twitter {

background-position: -40px -20px !important

}

a:active.sb-twitter {

background-position: -40px -40px !important

}

.sb-facebook {

background-position: -60px 0 !important

}

a:hover.sb-facebook {

background-position: -60px -20px !important

}

a:active.sb-facebook {

background-position: -60px -40px !important

}

.sb-buzz {

display: none !important

}

.sb-pinterest {

background-position: -100px 0 !important

}

a:hover.sb-pinterest {

background-position: -100px -20px !important

}

a:active.sb-pinterest {

background-position: -100px -40px !important

}

.sb-google {

background: url(https://www.blogger.com/img/plusone/plusonepreview.png) no-repeat;

height: 20px;

vertical-align: top;

width: 82px

}

.goog-inline-block {

position: relative;

display: -moz-inline-box;

display: inline-block

}

* html .goog-inline-block {

display: inline

}

*:first-child+html .goog-inline-block {

display: inline

}

.goog-custom-button {

margin: 2px;

border: 0;

padding: 0;

font-family: Arial,sans-serif;

color: #000;

text-decoration: none;

list-style: none;

vertical-align: middle;

cursor: default;

outline: none

}

.goog-custom-button-outer-box,.goog-custom-button-inner-box {

border-style: solid;

border-color: transparent;

vertical-align: top

}

.goog-custom-button-checked .goog-custom-button-outer-box,.goog-custom-button-checked .goog-custom-button-inner-box {

border-color: #ccc

}

.goog-custom-button-outer-box {

margin: 0;

border-width: 1px 0;

padding: 0

}

.goog-custom-button-inner-box {

-moz-box-orient: vertical;

margin: 0 -1px;

border-width: 0 1px;

padding: 3px 4px;

white-space: nowrap

}

* html .goog-custom-button-inner-box {

left: -1px

}

* html .goog-custom-button-rtl .goog-custom-button-outer-box {

left: -1px

}

* html .goog-custom-button-rtl .goog-custom-button-inner-box {

right: auto

}

*:first-child+html .goog-custom-button-inner-box {

left: -1px

}

*:first-child+html .goog-custom-button-rtl .goog-custom-button-inner-box {

left: 1px

}

::root .goog-custom-button,::root .goog-custom-button-outer-box {

line-height: 0

}

::root .goog-custom-button-inner-box {

line-height: normal

}

.goog-custom-button-active,.goog-custom-button-checked {

background-color: #faf6bc;

background-position: bottom left

}

.blog-mobile-link {

padding: 15px

}

#mobile-share-button {

height: 18px;

padding: 1px 10px;

text-align: center;

vertical-align: top;

margin: 0

}

#mobile-share-button a {

display: block;

height: 100%;

line-height: 18px;

width: 100%

}

.mobile-share-panel-outer {

background: #444

}

.mobile-share-panel-inner {

background: #fff;

border-bottom-left-radius: 2px 2px;

border-bottom-right-radius: 2px 2px;

border-radius: 3px;

-webkit-border-radius: 3px;

font-family: Arial;

font-size: 18px;

color: #666

}

.mobile .mobile-share-panel-inner a {

display: block;

color: #666

}

.mobile-share-panel-title {

background: #f5f5f5;

border-bottom: 1px solid #eee;

border-top-left-radius: 2px 2px;

border-top-right-radius: 2px 2px;

height: 25px;

line-height: 25px;

padding: 10px 10px 10px 20px

}

.mobile a.mobile-share-panel-button {

background: #fff url(/img/mobile_share_icons4.png) no-repeat left !important;

border-bottom: 1px solid #eee;

height: 50px;

line-height: 30px;

padding: 10px 0 10px 65px;

width: 100%;

-webkit-box-sizing: border-box

}

.mobile-share-panel-button-close {

font-size: 26px;

float: right;

height: 25px;

line-height: 25px;

text-align: center;

width: 25px

}

.mobile a.mobile-share-panel-button-email {

background-position: 10px 0 !important

}

.mobile a.mobile-share-panel-button-facebook {

background-position: 10px -50px !important

}

.mobile a.mobile-share-panel-button-twitter {

background-position: 10px -100px !important

}

.mobile a.mobile-share-panel-button-googleplus {

background: #fff url(https://www.gstatic.com/images/icons/gplus-32.png) no-repeat left !important;

background-position: 19px 9px !important

}

.mobile a.mobile-share-panel-button-buzz {

background-position: 10px -150px !important;

border-bottom-left-radius: 2px 2px;

border-bottom-right-radius: 2px 2px

}

.svg-icon-24 {

height: 24px;

width: 24px

}

</style>

-------------------------------------------------------------------------------------------------------------

ADD TO ANY WIDGET ON BLOGGER

http://blogknowhow.blogspot.com/

https://speckyboy.com/custom-css-javascript-social-sharing-button-code-snippets/

https://www.addtoany.com/buttons/customize/image_sharing

-------------------------------------------------------------------------------------------------------------

<script>

var a2a_config = a2a_config || {};

a2a_config.overlays = a2a_config.overlays || [];

a2a_config.overlays.push({

services: ['pinterest', 'facebook', 'houzz', 'tumblr'],

size: '50',

style: 'horizontal',

position: 'top center',

});

</script>

<script async src="https://static.addtoany.com/menu/page.js"></script>

<img src="https://www.w3schools.com/css/img_5terre.jpg"  width="400" height="400">

-------------------------------------------------------------------------------------------------------------

OR USE THIS CODE

http://yourjavascript.com/22013621302/sharethis.js

-------------------------------------------------------------------------------------------------------------

<script src='https://platform-api.sharethis.com/js/sharethis.js#property=61730d7c6c54f40014a7faf3' type='text/javascript'></script>

<img src="https://i.ebayimg.com/00/s/MTYwMFgxMjE5/z/hNoAAOSwQqRfy94H/$_57.JPG" alt="Primzon">

-------------------------------------------------------------------------------------------------------------

HOW BUTTON IMAGE SHARE ON FACE BOOK

https://www.w3schools.com/howto/img_snow.jpg
OR USE
https://fbgadgets.blogspot.com/2016/08/button-change-into-dropdown-menu.html
-------------------------------------------------------------------------------------------------------------
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/howto/img_snow.jpg">
<button class="btn">Facebook Button With W3 School Link</button>
</a>
-----------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
POST SHARE WIDGET
FACEBOOK IMAGE ON BACKGROUND IMAGE
------------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html -->
<style>
.RelativeBackGroundImage{
height:300px;
width:300px;
border: 1px red solid;
cursor: pointer;
/* RelativeBackGroundImage POSITION */
position: relative;
top: 0;
left: 0;
}
.AbsoluteFrontImage {
display: none;
}
.RelativeBackGroundImage:hover .AbsoluteFrontImage {
display: block;
height:60px;
width:60px;
/* AbsoluteFrontImage POSITION */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<body>
<div  class="RelativeBackGroundImage" style="background-image: url(https://www.w3schools.com/css/img_5terre.jpg);">
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/css/img_5terre.jpg">
<div class="AbsoluteFrontImage" style="background-image: url(https://img.icons8.com/ios-glyphs/2x/facebook.png);"> 
</div>
</a>
</div>
</body>
------------------------------------------------------------------------------------------------------------------