How to add a ''Recommended Post Slide'' in Blogger / Blogspot

Everyone to want to drive the traffic .Every blogger and webmaster wants to keep the visitor glued on the website for a maximum time. BloggerPlugins recently introduced a very interesting way to keep the visitors on your blog. They introduced a plugin, a notificatio

n plugin, that appears on the blog and recommend your blog users to read another related article. The best thing about this plugin is, its really simple and eye-catching.

Earlier, the idea was developed by Mary Lou, later bloggerplugins made a

number of modifications in the plugin in order to let the plugin work more properly. Here is how the recommended article notification will appear li

ke;

How to Add this Widget?

Its really easy to use this plugin on your blog. Simply click on the picture below and it will add the widget in your desired blog.

Makes Yours Blog in 2 Language With 1 Click

Some time ago I wanted to have two languages on my blog - one for my natives, one international. WordPress have a solution called WPML but it's paid solution. Second thing, I have blogger running so long I don't want to transfer.

I've found simple solution!


This method changes main/home/base adress/domain and leads to same URL on other adress/domain. It's also simple installed, just one HTML/JS widget :)

What you should do before:
1. Create two blogs in two different languages.
2. Go to Settings->Search options and make a link to your own site in "page not found code" just in case :) it can look like:
There is nothing in this link, please continue on <a href="http://olesku.pl">Olesku.pl</a>.
Put your adress instead of mine ;)

---
Now in both of them in Layout, create a widget "HTML/Javascript" and paste this code:

<script language="javascript" type="text/javascript">
document.write ("<a href=" + window.location.protocol + "//" + "theotherlanguageadress.com" + window.location.pathname + ">the other language name</a>");
</script>

Put adress of the second-language-blog in theotherlanguageadress.com and name of language used in another blog in the other language name.

---
Writing new post:
1. go to blog of first language, click New Post
2. put some title
3. put the text, images etc
4. put labels etc.

5. copy all info from points 2,3,4 to New Post in other language
6. publish posts

7. now you can edit post, change titles to the proper ones in both languages, change text in second language post etc
8. don't translate labels!!!

Procedure for new pages is exactly same :)

---
What you need to know:


You must have all links exact same in both languages. That's why you have to publish posts and pages with exact titles (you can edit later, but URL of post will be created at first time). Also that's the reason to have all labels exact same for all languages.

What works? Changing language while reading post, when looking for label, on archive pages.

What is not working? Every URL containing question mark (?) doesn't work. For example links to comments are not working; also changing language while looking for older posts is not -> search works by '?' sign so URLs are being shortened to everything before "?" sign. It's not so important, because most visitors will change language at first; also they probably won't be interested in comments in other language.

Change Colour or Highlight of Author Comments in Blogger

Today , the post is about on How to Highlight of Authors comments in BLogger @ how to do this activity So, i am going to explain you in simple methods. Just Following the Steps .. !

#Step 1: Go To Yours Blogger >> Design >> Edit HTML
#Step 2: Check "Expand widget template" Box
#Step 3:Then Search for this .

]]></b:skin>                    
#Step 4: Just above it paste the CSS code below given,

.mbt-comment-body {background: #008000;color: #FFFFFF;border: 1px solid #FFFFFF;margin:0;padding:0 0 0 10px;width:474px;}

You can use the following to make changes to suit your blogs:
To Change the background color of author comments change #008000
To change font color change #FFFFFF
To change border size change 1px, to change border style change to solid, dashed or dotted  and to change the color of the border change #FFFFFF
To change the width of the comment body change 474px (My blog comment body is 474)
Tip: You can use the color generator/chart from HTML's Colour Codes to make the above changes

#Step 5: Next search carefully for this code in your beautiful template,

Tips : Press Crtl +F and search for one line at a time

<data:commentPostedByMsg/>           </dt> 
          <dd class='comment-body'>             <b:if cond='data:comment.isDeleted'>               <span class='deleted-comment'><data:comment.body/></span>             <b:else/>               <p><data:comment.body/></p>             </b:if>           </dd> 

#Step 6:  Replace it now with the following code,

 <data:commentPostedByMsg/>           </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='mbt-comment-body'> <p><data:comment.body/></p> </dd><b:else/>           <dd class='comment-body'>             <b:if cond='data:comment.isDeleted'>               <span class='deleted-comment'><data:comment.body/></span>             <b:else/>               <p><data:comment.body/></p>             </b:if>           </dd> </b:if>

#Step 7: Save your template , its done!
Thats it Finished .

Another Good Looking Social Bookmarking Widget

People wants that His or Her Blog will be shared in so many social bookmarking sites And Websites readers do the same thing and the Author aspect more from readers. Heres is the new trick to add social icons display using css3 ,to Add this widget in your blog you need to add only 3 things and that are HTML , CSS and jQuery. You need to simply hover over the social media icons too see the beautiful effect of the widget which uses jQuery for the animation .

Steps to Add Social Bookmarking Widget in Blogger :

Note: Before making any changes to your template, take a full backup of your blogger template.

• Step 1#Log in to your Blogger Dashboard and Navigate to Design>>> Edit HTML.

• Step 2 # Copy below code and paste it just before the ]]></b:skin> code.

/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwO4xGwEaJG68lYPx7mI6Bwo_jLTefAaKbZJ-6BJdLwrR1tVt4jKswWJ0Xw8M748XNaHfOfITPQMyB0AZLNZ6ijTgorlSxeKNLGDf6OswsZhlQ1woY8wR8g3xXJSWe7yxdfUAWbBic62r/s1600/delicious.png")
; }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja726KKOK5F1RXvVX1xEgUukMH0oLEc54yv-ORpoudpVY_fFjZU7WE9eeL3B2FhoHBmrHYo2Xg63yMm4JDfhVqdmRn9BYX5UdAMwOpp4jzAvV7NdZB4TLk2gSRi0AVpANHPWSeKdgi1TEw/s1600/digg.png"); }
li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WYg9baFx-y9PK4gvv-y_Xv07NEveFvgyYNtxx4B_aOstOLIy2DsLP0XmWKyKO3rFz6uHcIbSJb3aeAphwfpTenVAxpl6K9BZdVwc7Wreim6FTVIcIXe0zGhRDEnB5xNXWoGwhGEeSKek/s1600/facebook.png"); }
li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAC0J0tPVM0Mtxpb-J5mAH71YAOsBCOVQNFBvSFlpIT3JyarW62wBZ90e29AN7DNXywiTSD14tHXPEE_z0k4Zc2RocKo8rfjwzTVd_4lDcf8nNGF7o4fQlx4NEGoJXyOYCBqvJ1EntA1H/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-5xvcvWi5EDZbhqYHW6fHzmYFMVpVIV7r02Ch5IfGqmnR4lP1EH33XmjmfeCsfoyFGW3U9fL1Ejb_xWKuP9MIJUCbQJeqhImhazNfrAy-qrg5tRPJ5fwuLF5IZwducoOckXu0_yZk-Sv/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqvFjCcP2VVs0oWJobiwamCWY-I9yO_MGhiPS2jAjMGDIzG9tXAMtAsVYyvIpbzktzUSOsdpwzycPA3fwo-Xe0hjZ_bVBPBC9vzbqkzjix8RV9OAaMuQnaF-RsPh9hsT1VUuVjy7w7Kv4/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5CxR9ztOc6DL9HJiWbFANzJEU2SEsL5T3cVXbhyn2B5lihK_QijyqRwo3gvk2N7s-79DbI3rCXTUrpRucMgezZNd-Fu9-FF8CKXcOvotizVcp6JKKTa_5HSv4TOPKn667DJcWhXD0yiF/s1600/rss.png"); }
li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoiJzApPv6MIOcPxY4Xexf8WG-8KElGNiN9yMPlEtrR3dJqbJHgmIT7VlyC1nJraqyAD7UvrO1R-7zhN053antysPf6JGwESUHJnXWpkXUIj9oXNQ45rFoIuiVobXhJYQX8uLpXfl82at/s1600/twitter.png");}

#Step 3. Copy below code and paste it just before the </head> tag. ( No need to add
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
&lt;script type='text/JavaScript'&gt;
$(document).ready(function()
{
// Hide all the tooltips
$(&amp;quot;#jquery li&amp;quot;).each(function() {
$(&amp;quot;a strong&amp;quot;, this).css(&amp;quot;opacity&amp;quot;, &amp;quot;0&amp;quot;);
});
$(&amp;quot;#jquery li&amp;quot;).hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 1,
top: &amp;quot;-10px&amp;quot;
}, 300);
}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 0,
top: &amp;quot;-1px&amp;quot;
}, 300);
});
});
&lt;/script&gt;

- No Need , to add jQuery in above code (first line in above code) if you are already using it.

• Step 4 # Now Save the template and navigate to Design >>> Page Element.

- And now Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.

- Paste the below following code in the HTML/JavaScript Gadget and save the template.

<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://www.delicious.com/'>
<strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href='http://digg.com/'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href='http://www.facebook.com/'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>
<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li>
<li class='reddit' style='opacity: 1;'><a href='http://www.reddit.com/'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='http://feeds.feedburner.com/BestHowToBlogger'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href='http://twitter.com/'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>

• Step 5.# Finally Save template and its done!.

Like This Post Go to Comments : )

Choose Correct Picture Size for Facebook Timeline

Facebook a Biggest Social Network in the World .Facebook has made Timeline now  available for everyone who use facebook. One of the best special thing about Facebook timeline is its Cover where you can show a quite large size of yours picture BUT one must know how to choose the correct size of the picture for Facebook Timeline. 850x315px (width x height)is the exact size for Facebook timeline. You should crop a picture to 850x315px to create a correct timeline cover. Below you can see the specifications about the timeline facebook in video.










What is the minimum width of the Cover Photo??


It is mentioned at the Facebook FAQ that timeline cover image must be at least 720 pixels wide. Images with smaller size will get upload errors So, However, when i tried, i come to know that we CAN upload an image for cover at least 399px wides. So, if you were upload 399px wide picture, Facebook will zoom this picture to fit in the timeline covers.

What if you use cover photo of any other size??


Well, the Facebook would not allow you to upload any image below 399px however if you were upload a cover photo of any other size, Facebook will automatically resize or crops the image to fit the picture into your timeline cover and you may see an out-of-pixels picture, so its better to choose cover photo with 850x315px size.

Can other people save Cover Photos???


Your's Cover Photos are the publicly visible and can be saved by anyone else (friend, blocked friend, public etc). Actually, Facebook will only display a selected portion in the Cover photos (which is the virtually cropped) and whenever someone will save yours cover picture, he/she will get the full uncropped image e.g. if you upload a big full size photo of yourself, and then decide to make the heads as you cover photo, people saving the image can see the full image. So its a good idea to upload the exact size.