Fancy Black Skin For LinkWithin Gadget

linkwithin black skinLinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to display related stories by fetching posts that belong to the same category/label or tag. It really loads fast and do help in increasing reader engagement in reading more and more and helps build pageviews. Months ago we introduced a way by which you can customize the look and feel of this plugin by overriding its default stylesheet. You can surely override any Class or ID by simply using the !important property.

The custom CSS code we offered enabled users to change font colors of the text title, edit thumbnail sizes, borders and change background with an image. Today I am sharing the stylesheet for the Black color theme of linkWithin related post widget used on our blog. We coded it using simple styles and effects. It attracts visitors more and provide some neat and clean suggestions. The steps are really easy, so lets make it Fancy!

Without the custom Code the gadget looks as dull and grey as this one:

linkwithin widget  in original look

Step1: Adding the LinkWithin Widget

In order to apply this skin you will first need to install the linkWithin widget to your blog. The tutorial below will help you to add this plugin to your BlogSpot blogs. The plugin will appear in post pages only and will remain hidden on homepage.

Step2: Applying the Black Skin

Now you just need to follow the easy steps below to install the black Skin and change over all dull and grey look of the widget.

  1. Go To blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search for this style tag:
]]></b:skin>

   5.  Just above it paste the following big chunk of Code:

/*---Related Posts---*/

#linkwithin_logolink_0 {
display:none!important;
}

#lws_0 {

clear: both!important;       

margin: 0 0 20px 0!important;    

}


.linkwithin_outer {
    margin: 1px 0px !important;
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5Nj2fYK6Ja975Xj9bMEgDmP40mLJ62zxze64hKXRNzjaxBD6uAAXAi4CE4Xjfpcj1kU3J0Tpx4n0jpdLl5uPLS9Tr6tuPMA5BzFq_weKGlDxTU2bkUxKplHwiLSP3K7n6XuDYj_0CWI/s400/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
    height: 260px;

      width:590px!important;

    padding: 0px !important;
    box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
    border-radius: 5px 5px 5px 5px;
    }

 

.linkwithin_inner {
width:590px!important;
}

 

.linkwithin_text {
margin: 0px !important;
    padding: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif;
    font-size: 1.35em;
    color: rgb(255, 255, 255);
    font-weight: 700;
    line-height: 1.35em;
    text-transform: capitalize;
    background-color: rgb(18, 18, 18);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}

.linkwithin_posts a {
   border-right:0px!important;
    margin: 10px 0px 10px 20px !important;
}


.linkwithin_posts a:hover {
   border-right:0px!important;
    margin: 10px 0px 10px 20px !important; background:none!important;
}

#linkwithin_logo_0 {display:none;}

.linkwithin_img_0 {
    border: 1px solid #666 !important;
    padding: 1px !important;
    width: 100px !important;
    height: 70px !important;
    margin-right: 20px !important;
    overflow: hidden;
   background:#666!important;
}

.linkwithin_img_0:hover {
  border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
    width: 100px !important;
    height: 70px !important;
}

.linkwithin_title {
    color: rgb(255, 255, 255) !important;
    font-size: 1.1em !important;
    display: block;
    padding: 0px 10px 0px 0px !important;
    font-weight: 700 !important;
    line-height: 1.45em !important;
    margin-top: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
   text-decoration:none!important;
  width:120px!important;
}

.linkwithin_title:hover {
text-decoration:underline!important;

}

 

     6.  Hit save and you are all done!

Visit any of your post page to see it working just perfectly. Enjoy the new colors. :)

Suggested Reading:

You may also like checking the first Custom Skin we introduced in august 2012.

You May also find the following widget useful:

Questions?

The widget will display up to 4 thumbnails. If you wish to show more thumbnails  then simply increase the width size highlighted in yellow.  Also set the number of stories to 4 on linkWithin homepage as mentioned in the tutorial where you learnt how to install the widget on your blog.

Despite setting number of stories to 4, our widget displays 4 thumbnails. We have contacted the LinkWithin team to fix this bug on their side. Its not important that the widget will display 3 thumbnails for you as well because such bugs occur rarely for some websites/IDs and requires manual fix from linkwithin team.

If you have any questions then please do not hesitate to let me know. I hope with this new Fancy theme, your readers would enjoy clicking between posts and would spend more time on your blog. Peace and blessings buddies. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

32 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Nice :). gonna try it
    Brother i have sent you a mail through services. can you please kindly check it ?

    ReplyDelete
  2. nice brother its sound good...by quizvook.com

    ReplyDelete
  3. Good One For Bloggers. Thanks for Sharing.. want some seo optimized Templates.....

    ReplyDelete
  4. Thank for this tutorial http://shamsuddeen.com/blog

    ReplyDelete
  5. namaste brother i want to know one thing if you don't mind can u tell me how you add a image of mbt coding in your blockquote and how you created it. please please relay . i have check you all posts from 2009-2012 as i mention in previous comment. and you have posted on blockquote on three or four posts but there is no mention for the inserting image in it. look forward for your response.
    and also see my blog www.careerandtricks.com and comment on one if you like any article.

    ReplyDelete
  6. all my dear friends you can add this code on customize template and go on add css and add this script thanks

    ReplyDelete
  7. Nice post Mohammad bro....It is useful...Brother i have a question can we apply for google adsence programs with co.cc domain name?

    ReplyDelete
  8. bro i want to know about one question how to show this gadget only to post pages

    ReplyDelete
  9. ye brother i got how to show linkwithin only on post.thanx

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. I want to purchase a domain for my blogger blog for custom domain , please suggest me ,which one will be better option,thanks

    ReplyDelete
  12. @Rajkumar Gupta hello rajkumar sir ..if you want to go for custom domain than go for godaddy and use coupon code from below site. http://domainpromocodes.com/coupons/godaddy/
    it is just awsum website for this. and dns setting are very best for that and within 24 hours you will redirct to ur custom domain for your blog enjoy..

    ReplyDelete
  13. Mustafa bhai can you plz correct my blog's individual posts meta tag :) www.internetdreamz.com
    when i type in google site:internetdreamz.com
    It show that most of my inner posts displays Home page default meta tag instead of the posts own meta tag
    and
    also when i share my posts on facebook it syndicate my posts author bio instead of posts content
    pLZ GIVE ME SOLUTION

    ReplyDelete
  14. @Guppu Bossheelo sir please add a following code in below head
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    . and after that when u will add ur description from ur post setting tab than you will see the description in google after write site:internetdreamz.com which u write in search tab in post settings .for refrence see site:www.careerandtricks.com .

    ReplyDelete
  15. @Mohammad Mustafa Ahmedzai brother can you tell me how you manage the comment form like this
    ? and when u give reply than other window will open please please tell me

    ReplyDelete
  16. Assalamualikum ahmed bhai, I need u r help.

    1) Please see this http://i50.tinypic.com/351tquo.jpg . How to remove that blank red space.

    2) And this one too http://i47.tinypic.com/alt9nq.jpg , I want to remove the lines in the circle. and make it look like yours. for example http://i47.tinypic.com/zvsuie.jpg. I want to put headings first and then comments bar on bottom right side of heading. Please help me

    ReplyDelete
  17. Looks really fancy..well done!

    Visit my blog too - http://www.place2how-to.com/

    :)

    ReplyDelete
  18. It’s really a nice and helpful piece of information. I’m happy that you simply shared this useful info with us. Please stay us up to date like this. Thanks for sharing.
    essay

    ReplyDelete
  19. @Guppu Boss sir its working write site:internetdreamz.com in google and go on page 2 n see below url how to install thesis ..dere u will get your custom description.

    ReplyDelete
  20. I am sorry for the late reply buddies.

    @Nihalhaleem

    Buddy could you please send it again. I guess I missed it.


    @Rohit
    Buddy about the image inside a blockquote I wrote a tutorial which you can find here. Check this one: The Blinking bulb

    Use the same concept of hover to create an hover effect. You can check MBT style sheet for reference. Hope this helps :)

    This widget will display only on post pages but if you wish to display it on homepage also then delete the RED highlighted codes.

    For the comment Reply button Please read: Reply button in comments
    @sajjad
    .co.cc are no more even indexed by Google. Adsense wont display on domains that dont belong to the web owner. Kindly read an old post that we wrote last year: Google Banned all .co.cc domains


    @Mi Muba
    Buddy you are no less than a precious gem yourself. Its your kind words that make people like us work even better. I am so glad you found the tutorials worth reading. Always welcomed. :)


    @Rajkumar

    I would really appreciate you read : Why buy domain from Godaddy?


    This is the answer to all your questions. :)



    ReplyDelete
  21. @Guppo

    Buddy for that please first add this code for meta description: Why Meta description not appearing in Post editor?

    Then delete the Meta tag code from your template that shows your blog description and instead write down the description from Settings > Basic > Description

    The code I shared in the link i shared, will automatically add metas for both homepage and posts. Your problem will be solved. :)



    Rohit you are right but Guppo question is not about displaying homepage title after post titles instead he asked for Meta Tags for homepage and Post page. I am glad you tried to help him out. Your method is perfect as we discussed here: Show Post title before Homepage title


    @Syed Abdul Qayyum

    Buddy you will have to reduce the padding size for that div section. Please share the link of your blog so that i could help.

    For changing positions of the items you will have to shift their HTML codes. That will require editing your template. Please share your url so that i could help.

    ReplyDelete
  22. Thankyou brother vey great tip Jobs Portal www.jobsbtech.blogspot.com

    ReplyDelete
  23. how to show this gadget only to post pages

    ReplyDelete
  24. can we apply for google adsence programs with co.cc domain name?

    ReplyDelete
  25. hallo mustfa bhai mana ak blog bnaia ha os ka lia adsens aprove kia lakan onho na disaprove kr dia lakn ab koc arsa ka bad dobara reqst bajna chata ho lakn os jaga musalsal disaprove lika a rha ha earning adsens pr mara email ke jaga plez help me or blog dak ka btai ka adsens ka qabl ha ka nahe abe
    http://worldsofte.blogspot.com/

    ReplyDelete
  26. not working
    link within not showing edit template option....

    ReplyDelete
  27. Thanks dear admin... but i wana make it responsive... just like placed in MBT's current template.. plz suggest the code

    ReplyDelete
  28. Hello sir, this is ajay, got a blog and currently I was using jarid blogger theme, and I have two related posts widget, one was link within and the other was a default one, and I can't even resize the thumbnail of the default related posts widget, I'll post my current template to you if possible please edit it sir, even I don't got any id of u, please contact me through your mail, i'll attach my template, please don't feel about my request, facing this problem since 3months, my mail I'd: cybermaddy823@gmail.com, thanks sir

    ReplyDelete
  29. please i am confused please show with picture

    ReplyDelete