 |
| Click image to enlarge |
If you hover your mouse to share widget button, then you will see awesome performance. If your hover your mouse to related posts image, then you will see awesome performance as well. See the screenshoot below.
What you should to do is simple, just go to your blogger dashboard, click Template tab, click Edit HTML, click Proceed, then give "check" on Expand Widget Templates. After that, find <data:post.body/>. Then put the following code after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id='testardo-fb'>
<div id='testardo'>
<table width='100%'>
<tbody> <tr><td>
<span style='font-style: normal; font-size: 23px; font-family:Georgia,Times New Roman,Trebuchet MS; '>Follow Us On Facebook</span></td></tr>
<tr><td>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/ThreelasCommunity& width=435&height=180&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false' style='border:none !important; overflow:hidden; width:435px; height:180px;'/>
<b> <br>Like this article? Share it with your friends!</br></b>
<ul class='testardo-social' id='testardo-cssanimation'>
<li class='testardo-facebook'>
<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='testardo-twitter'>
<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='testardo-googleplus'>
<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='testardo-pinterest'>
<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='testardo-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='testardo-linkedin'>
<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>
<p style='color:#666; font-weight:bold; font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your email to receive blog updates directly on e-mail</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=TestardoEVerocom;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TestardoEVerocom'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='testardotextbox' name='email' onblur='if (this.value == "") {this.value = "Enter your Email";}' onfocus='if (this.value == "Enter your Email") {this.value = ""}' type='text' value='Enter your Email'/>
<input alt='' class='testardobutton' title='' type='submit' value='Send'/>
</form>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<h2 style='margin-top:28px;font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 15px; color: #000000; font-style: normal; font-weight: normal; font-variant: small-caps; text-align: left; letter-spacing: 0.5px; line-height: 20px;'>Related Posts</h2>
<script src='http://plugin-codes.googlecode.com/files/threelasrelatedposts-v-2.js'/>
<script type='text/javascript'>
var widthplugin = 500;
var feedUri = "<data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/>?alt=json-in-script&max-results=9&callback=?";
</script>
<div id='result'/>
</b:if>
</b:loop>
</td></tr>
</tbody> </table></div></div>
</b:if>
After that, find ]]></b:skin> and put the css code below
#tl-related{
list-style:none;
margin:0;
padding:0;
font-size:13px;
font-family:Times New Roman;
position:absolute;
left:0;
top:0;
}
#tl-related li{
width:72px;
padding:2px;
float:left;
}
#tl-related li .image{
width:72px;
height:72px;
padding-bottom:2px;
}
#tl-related li .title{
width:72px;
height:16px;
overflow:hidden;
}
#expand{
width:152px;
display:none;
position:absolute;
top:0;
left:0;
box-shadow:0 0 13px #565755;
padding:5px;background:white;z-index:500;
}
#result{
position:relative;
}
#result img {
border-radius: 0px 0px 0px 0px;
border: medium none;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
padding: 0px;
}
#testardo-fb {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
box-shadow: 5px 5px 5px #CCCCCC;
background: none repeat scroll 0 0 transparent;
border: 4px double #000000;
padding:10px;
margin-top:25px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:520px;
}
#testardo-fb:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
}
#testardo-fb td{
padding:3px 0;
}
ul.testardo-social {
list-style:none;
display:inline-block;
margin:10px auto;
padding:2px;
}
ul.testardo-social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.testardo-social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.testardo-social 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 li.testardo-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXzi0LzXcwZeflih5aGCcNlS2HRnS48uQLCDc_m8v2ZpZYKh5V1-WEH6e73qZxrhkJ0rmi1556U2CcGtRV9jGVRY6B2FYSQeAJCymz1M5dt6luY9MtEzoSJDM3WuL7NISPFIUD6tB-jc/s50/facebook.png);
}
ul li.testardo-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaq14qOF7NTEDlgUrvEKEj6m0zuHf0bkrEs8361ZcDLWMpOlp4JsU6e2tWCLUim9X2PPEy8SixUgMTwcb9IIBVzF8RnibX8M2WO7XdIueGW27CEqUB61uy-ao34PXRHE6qYblAeUFMrs/s50/twitter.png);
}
ul li.testardo-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2i-NHl-xB7LSdz-_3FaDdRaj_p4E5r84A1fYs48CdIAEOzo1nkupT4GzsPqgIKhzxN679upJz-QY4KfUg0FSNEjURHGn8-LorIhENNgtpp2IVmuJ-5rkh5OxZ5W0ObDCcqntsg4qwp_I/s50/google%252B.png);
}
ul li.testardo-pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtRfp83_VqTG2eQIEgqdIRwHZ4ecfGVHd6KWdxJhi-ekoCpTOhwR3WMCa9mAm5EUGvhRiiy1CxxOuS5cadP0yDzR2pKd0e6YF0I-5QVc8chXsid6TbmvHkiGNcc4CcH-DYnz4_teaB4f0/s50/pinterest.png);
}
ul li.testardo-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimtvWDxC_54o2LrMBZOXqoO3wlPJx7fTa4OLCjQ0_YsEfPna9PxIb3Il3BG7RXFWB_0RM4Nuqu10tufBv6gzhM9hnfCLmFc3xaUt6s-O-KEEpMneJV2BwMGsdNO3RDi8AeDaaLfOXs3As/s50/delicious.png);
}
ul li.testardo.linkedin img:hover{-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
ul li.testardo-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsggPn56sohod-U8gGqdzvTbZo2zLB8XA3mCH7mDQTrE4igE1ShTp0TnzxaBG23-tHvB0eRMB_mcuGGTrTWkt_y3YiwfexXnqdJ9i_Nx42uHQj3ZqNMfEN_8hTfmgIO9W0vOIby6dubEo/s50/linkedin.png);
}
#testardo-cssanimation:hover li {
opacity:0.2;
}
#testardo-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
padding:2px;
}
#testardo-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#testardo-cssanimation li:hover {
opacity:1;
}
#testardo-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
#testardosub{
width:280px;
padding:70px 10px 25px 10px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJyp_qASdAtya1Q6grcPLUEYqorjiChuEYob_JyaMONju6frz3iPaWYkNFNyuZRkRW5wBZw4oyDzZKBy_IwEWds2frG7qVuhus8LtQNldMBzhtN5X8rnrV2NNgUObH8SJ5yo1D0A-kVM/s1600/bloggertricksdotbizemailbg.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.testardotextbox{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7efFCiEkY1EieK77xhSVmoCO-Q9CcK4_xe4b7bQOnjJm6TsIXIt0SGY-hobsAh0qbzJQ_L_hG4Q5Jou0tIQS2yIL7S1TgYAp1qakdrdD_QYDMVVrB3NpI8uv2hSFBqrQIzJ7D79TL9Bo/s1600/BTMAIL.png) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:4px double #666666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:160px;
height:20px;
}
.testardobutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
What you should to do next is to make sure that var widthplugin = 500 must small than red value code above (such as 520px), change https://www.facebook.com/ThreelasCommunity with your Facebook Fan Page Url. If you want to change the width then change width:435 with another value. After that, save your work. Yup, now you have awesome share widget.
Giovanni Aversa is a part time Blogger, Founder of Cucinaecontorni. You can reach Giovanni Aversa by visiting the following +Giovanni Aversa | Follow Us On Twitter | Follow Me On Facebook.
Post a Comment