Saturday 3 May 2014

POST SHARE WIDGET BUTTON IN BLOG

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:&quot;\f082&quot;;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:&quot;\f0d5&quot;;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:&quot;\f099&quot;;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:&quot;\f0ac&quot;;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'>

<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-button'>
<p>Share this : </p>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow'>Facebook</a>
<a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow'>Google+</a>
<a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' 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
BUTTON PADDING CHANGE HEIGHT WIDTH
-----------------------------------------------------------------------------------------------------------
<html>
<head>
<link href="https://www.blogger.com/static/v1/widgets/1394523530-widget_css_bundle.css" rel="stylesheet" type="text/css">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="post-share-buttons goog-inline-block">
<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=3182179529126073111&amp;postID=7945224882709816027&amp;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&amp;postID=7945224882709816027&amp;target=blog" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); 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&amp;postID=7945224882709816027&amp;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&amp;postID=7945224882709816027&amp;target=facebook" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); 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&amp;postID=7945224882709816027&amp;target=pinterest" target="_blank" title="Share to Pinterest"><span class="share-button-link-text">Share to Pinterest</span></a>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='EditPecilShopifyJs' class='g-profile' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a> 
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
IF U  DON'T USE  BUNDLE  CSS FILE USE THIS CODE


-------------------------------------------------------------------------------------------------------------
<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
-------------------------------------------------------------------------------------------------------------
<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
-------------------------------------------------------------------------------------------------------------
<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>
------------------------------------------------------------------------------------------------------------------

Posted by on Saturday 3 May 2014 at 14:02
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets