Learn More

Friday, December 21, 2012

Awesome Share Widget With Fan Page And Related Posts

awesome share widget
Click image to enlarge
Getting more traffic from share widget to social networking is very important. Because, it is more believed by your friends than from search engine. However, the share widget with Facebook Fan Page, submit subscribe, and related posts are more awesome. This widget is not only can increasing your traffic, but also can make your visitors to visit another page of your blog just from one widget. So, this widget very good to increase time duration of your visitors on your blog. With this widget you will have more good SEO. Inside this widget is Facebook, Tweet, Google Plus, Pinterest, Delicious, and LinkedIn Share. I am using related posts slideshow expand image from threelas. Ok, let's go to start.

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 == &quot;item&quot;'>
<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&amp; width=435&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;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='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='testardo-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='testardo-googleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='testardo-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute (&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='testardo-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='testardo-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TestardoEVerocom;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your Email&quot;;}' onfocus='if (this.value == &quot;Enter your Email&quot;) {this.value = &quot;&quot;}' 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 == &quot;true&quot;'>
<h2 style='margin-top:28px;font-family: &quot;lucida sans unicode&quot;, &quot;lucida grande&quot;, 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 = &quot;<data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/>?alt=json-in-script&amp;max-results=9&amp;callback=?&quot;;
</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://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png);
}
ul li.testardo-twitter {
background-image:url(https://lh4.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png);
}
ul li.testardo-googleplus {
background-image:url(https://lh4.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png);
}
ul li.testardo-pinterest {
background-image: url(https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png);
}
ul li.testardo-delicious {
background-image:url(https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/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://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/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(http://1.bp.blogspot.com/-8CSaNzPhXNY/UCjB8Ubq9HI/AAAAAAAABoA/yQm1svSk2pk/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(http://1.bp.blogspot.com/-EdS5yBHk8OU/UCi9EKO8SFI/AAAAAAAABnY/avFC1s1asZU/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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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 avers
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.

  1. spot on with this write-up, i like the way you discuss the things. i'm impressed, i must say. i'll probably be back again to read more. thanks for sharing this with us.

    Lee Shin
    www.trendone.net

    ReplyDelete