How To Customize Linkwithin Related Post Widget

In this tutorial we will  add some background colors of the thumbnail images, change the font size and color text  of your Related Post titles, adjust the margin, add hover effects of your preferences, and if you want remove the  linkwithin credit and logo  link that appears  at the right bottom corner  of the widget.   In the  codes below ,we used a blue theme but as I said you can change it as you like or  add your creative new looks to match  perfectly with your blog looks and feel. Lets get the ball rolling!


 customize linkwithin related post


How To Customize Linkwithin Related Post Widget


If you have not yet installed this widget, please click here for assistance
Step 1. Go to Blogger >> Template (Backup your template)
Step 2. Click Edit HTML
Step 3. Find the Code (Control F) below
]]></b:skin>
Step 4. Just above that code, paste the  code below
/* -----Linkwithin Stylesheet by http://bloggingtipsandtrix.blogspot.com/----- */ #linkwithin_logolink_0 {
display:none!important;
}
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important;        margin: 0 0 20px 0!important;  
}

.linkwithin_outer{
margin: 0 8 20px 0!important;  
}
.linkwithin_text {
color:black!important;
font-size:20px!important;
padding-bottom:5px!important;
}
.linkwithin_posts a {
background: blue  !important;
border:5px,5px,5px,5px solid #404040!important;
margin:0px,10px,0px,0px ;
}
.linkwithin_posts a:hover {
background: dark blue !important;
}
.linkwithin_img_0 {
 border: 3px solid #dddddd !important; padding:1px !important;  width:100px!important; height:100px!important;
margin:0px,10px,0px,0px ;
}
.linkwithin_img_0:hover {
border: 2px  solid #333333 !important; padding:2px !important;
}
.linkwithin_title {
color:#020202!important;
font-family:'tahoma', sans-serif !important;
font-size:11px !important;
line-height:14px !important;
text-decoration: none;
border-top:1px solid  #ddd !important;
}
.linkwithin_title:hover {
border-top:1px solid  #333 !important;
}
Step 5.  Preview first and if it is working then save your template


Short Customizations:

Tip.  Use this tool to make changes to the color theme
  • To change the color of the text "You May Also Like"  change the text black
  • To change the font size edit 20px
  • To change the container background color in active mode edit the text blue
  • To change the container background color in mouse hover mode edit the text  dark blue
  • To change the border across each thumbnail in active mode edit #dddddd image
  • To change the border in mouse hover mode edit #333333
  • To change the post title links color edit #020202
  • Remove the  text in red in the above code if you want that the credit and logo link of  linkwithin  will appear in the plug- in
See your blog and see if it matched perfectly!  Enjoy!
Credits goes to My bloggertricks with little modification by me


About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
4 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...