how to add Related posts widget in blogger

METHOD II

Now here we can find the another very simple method to add Related posts widget in each blogger posts as follows.

Step 1: Go to http://www.linkwithin.com

Step 2: Give the required details and click on "Get Widget".



add related posts widget in blogger



Step 3: Click "Install Widget" as given in the following screen.


how to install linkwithin widget in blogger



Step 4: Now click on "ADD WIDGET". Then Related posts widget will be added to your blog layout. 


add linkwithin widget in blogger


Just Drag and drop the widget in the layout wherever you needed.

Step 5: Now "Save Arrangement" and enjoy blogging...

SETTINGS:

Replacing the text "You might also like" Linkwithin Widget


Go to Blogger Dashboard >> Layout >> Edit the Linkwithin Widget.

Add the following line of code before  <script src="http://www.linkwithin.com/widget.js">  tag.


<script>linkwithin_text='Related Posts:'</script>
edit text in linkwithin


Now "Save" the widget and enjoy posting.....



Changing the Background colour and styles of Thumbnails



1. Go to Blogger Dashboard >> Template >> Edit HTML

Find the following piece of code


]]></b:skin>


2. Add the below CSS style code just above  ]]></b:skin>  tag.



 .linkwithin_div {
background: #EEEEEE; /* Background color for the related posts container */
padding: 0 10px;
border-top: 1px solid #DBDBDB;  /* Top border for the related posts container */
border-bottom: 1px solid #DBDBDB;  /* Bottom border for the related posts container */
}
.linkwithin_text {
font-family: Cambria,Georgia,sans-serif;
font-size:18px; /* Size for the related posts title */
color:#898989; /* Color for the related posts title */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 500px !important; /* Width for the related posts container */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #F5F5F5 !important; /* Background color on mouseover */
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px solid #C1C1C1;
padding: 2px !important;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #ffffff;
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title {
color: #242424 !important; /* Color for titles */
font-family: Cambria,Georgia,sans-serif;
font-size: 12px !important; /* Font size of posts titles */
line-height: 24px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Color of posts titles on mouseover */
}

3. Now search for the following code.
<b:include data='post' name='post'/>
4. Then paste the below code, just below the above code.
<div class="linkwithin_div"></div>
Now Save the template and the style of Thumbs will be changed.




Previous
Next Post »
Related Posts Plugin for WordPress, Blogger...