4.30.2015

Blogger DIY - Customise Linkwithin


Not so long ago I stumbled upon an amazing free widget for blogger/wordpress, Linkwithin. It automatically generate related stories after each posts. It is a great way to catch reader's attention and boost traffic! It's super easy to install and no sign-up is needed, so if you haven't heard of it, I highly recommend it.
However, there is limitations to Linkwithin..
We can't customise the appearance of it. It's narrower than my blog's width, also when the mouse hover on a post, the background turns into lilac. It's not dramatic but who doesn't want things neat?
In the image below I have explained what each section of code does, so feel free to experiment with the code and find your best settings! You can customise the width, padding, title, background and etc.

Steps:
1. open your html editor. If you are not familiar with it, this post can be really helpful! 
2. find this line: ]]></b:skin>
3. put the code right above it. You can find the code at the end of this post.

customise linkwithin
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.linkwithin_posts {
width: 150% !important;
}

.linkwithin_inner{
width: 150%;
margin: 0px auto;
}

.linkwithin_posts a {
display:inline-block;
border: 0 !important;
padding-right: 20px ;
padding-left: 35px ;
}

.linkwithin_outer{
padding:auto;
}

.linkwithin_posts a:hover {
background: #ffffff ; 
}

.linkwithin_title {
color: #eabab2;
font-family: Optima,Georgia,sans-serif;
font-size: 13px !important; 
text-decoration: none;
}

Feel free to ask anything if it's not clear and happy blogging!
xo,
Jessie