Finally I have done with this cool widget by going through so many errors. Previously I had shared Share is Sexy Widget For Blogger Blog in Wordpress style but today I will share another Sharing Widget which is originally created by Shahbaz Malik, the author and founder of this Blog. We uses simple HTML tag and CSS properties in creating this widget so that it won't effect your page loading time. You can simply integrate this widget with your blog by adopting following procedure. So lets see how to add this widget on the blog ?
How to Add Sharing Widget To Blog:-
- Login to Blogger Dashboard.
Go to Design / Edit HTML. Click "Expand Widget Templates". Take Backup of your blog template, it is very necessary (More info). Find following piece of code in blogger template.
<data:post.body/>
- Add the following code just below it. If you find <data:post.body/> code in more than one position then add the following code just below the <data:post.body/> on everywhere you find.
<b:if cond='data:blog.pageType == "item"'> <div style='border-top:1px solid #E0E0E0;width:100%;position:relative;margin-top:13px;'> </div> <div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#FF3030;position:relative;top:12px;'><center>If you enjoyed this article then kindly take 5 seconds to share it!!</center></div> <table align='center' cellpadding='8' cellspacing='1' id='myshare'> <tr> <td> <a target="_blank" class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2_VaKP29ToDdhGlc2LJ5zB36Y9yVCbwpDy1-Jl6RF7ksDy2ia8rHbSPnPxK_LOoUcpe0BIPioXGsPWfoG5zSr0a1Cvp8GYNlo_VQIsL6yneuoF_dcfm0-aZE-E3uZTzNukHlBfm5OSw/h120/1.PNG'/></a></td> <td> <a target="_blank" class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqzLU1aUY3-QorEYlWO2xWjqh-9W1IUg5X7KG4gSCOWoM0R8i324jhl-_NI0BYE8V_NexGIitxWWm2VZO9lxnEhgmY7euKaAbGo4DnbBfMHMAUFUknakKd7oFPYf84XaIzQ5KqxzshSQ/h120/6.PNG'/></a></td> <td> <a target="_blank" class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1-s7pLMVN6ucqh2YtLpLTzaca8c7rDwcOTPfwdf9ONtoDZqyFTHai0H64GbFd0ofn3NMGPiGyuBsPzQnU_i5BBmsU4PfilJlHxaNN4ED4IQxVhR7YkO4wzXbl-u1JJDtBaNkRpdymjM/h120/5.PNG'/></a></td> <td> <a target="_blank" class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mKFewZX5POz8q580rmX1fW17bRESFWOFdfmI-TB9B_Jvn7cjTauUIJvfw9eV0ybOudLUGfdRY2Q9y53wECsW5zh4cdFlqFauS4UEpkqMV04XgfGlzaJdDjKaU7fK7rOhcyvJWzoQ4Z8/h120/3.PNG'/></a></td> <td> <a target="_blank" class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHiFTbUmP0p9v26dpeKFvDuno32WwrYyF52q9CbzB8sVmeZqYtuGjwWsCgi3-7UYpAsKEejHzkMzF-3BqwOMTjnS5S2z-mIY4UoBSML1egFsldAiKBdV5MQVHLlFgELF70CISIWdxveE/h120/2.PNG'/></a></td> <td> <a target="_blank" class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNN1vds6BhC8rvmJnaw36Lvee_eSuDQukbETIa98DaEr0f-AzFMWyx82t7IuWJjXZKrEoLT3QIyujjDzPwAN0L40f8ILNRgRBtstoSUT_KXN7XZaymEG5kHo4zFmiHgd3yTmQNGPomCnQ/h120/4.PNG'/></a></td> <td><a target="_blank" class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyDe_VVxIsUPdaZUlFS-RCJ-XGOG9G4-QDoItWebJzynAMsnZk5OKA4mQ65BmpQrMZo9_ZEEoKYjkNsGB7WsEIAyxLEi3gPxVkRBWZPdpJmK5Luplfuq3RBzbpDRS8BRvZ1YGoFbI18Pk/h120/7.PNG'/></a></td> </tr> </table> </div></b:if>
- Now search the following section in the template.
]]></b:skin>
- Add the following CSS code just above it.
#myshare
{width:100%px;
height:50px;
border:0px solid red;
position:relative;
}
#myshare tr td img
{width:50px;
height:50px;
position:relative;
}
- Finally save your template and see the result.
تم النشر يوم
السبت، 6 يوليو 2013 ' الساعة
ليست هناك تعليقات:
إرسال تعليق