Latest Blogger Tips and Widgets

Latest : How to add Contact Form Widget to Blogger/Blogspot

The long wait is finally over and blogger has come up with it’s own contact form. Now you no longer have to rely on 3rd party Contact Form solutions. Blogger has added a new Contact Form Widget which will fit into your Blog’s sidebar. You can also add the same contact form on a separate page and customize it if you want to.
Adding a contact form to Blogger is now really easy. Below steps will guide you in adding the contact form as a sidebar widget.

Login to your Blogger Dashboard and Navigate to the Layout Page
Click on the Add a Gadget Link and select More from the left Menu. You can add the add the brand new contact form the right side list

You can set an appropriate title for the Gadget and Save it.

Once it’s done, you should see the slick and clean Contact Form added to your Blog’s sidebar.

Now your readers can contact you directly using the contact form and the messages will be delivered to your inbox and you can directly reply back to the readercontact-form-email-received
If you want to move the Contact Form to a separate page, then checkout the tutorial on creating a separate contact page for blogger.

Happy Blogging!

Latest :How to add Twitter Cards to Blogger/Blogspot

When you share a post to Facebook or Google+, they display a summary of the post and also a thumbnail if available. Twitter has also come up with a similar solution called Twitter Cards.Twitter has come up with different types of Cards and this tutorial will help you in adding a summary card to your Blogger posts.
Blog Posts which have the summary card added will show a View Summary Option

and when you click on that it will show the actual Twitter Card
expanded-summary
If you need to see live demos, check out our Twitter Page
How to add Twitter Cards to Blogger
Adding twitter cards is really easy and you can do the same by following the below steps
Edit your template and add the Twitter card markup.

- Login to your Blogger account and
and go to Template >> Edit HTML

Click somewhere within the Template Editor and press Ctrl + F to search within the template.
Search for
and paste the below code just above that . You will have to modify the first somebloggertip in the below code with the name of the twitter account which you use for your blog.You can modify the second somebloggertip to the name of the blog author’s twitter account. Since I don’t have a separate one, I am using the same at both places.

so that it looks like

and Save your template.

Next Step is to add Meta Descriptions & images to your Blogger Post – While making a blogger post, make sure that you add a Search Description to it.Also make sure that you have added an image to the post
Final step is to request for approval from Twitter. To do that Go to Twitter Developer Site at https://dev.twitter.com/docs/cards/validation/validator and go to the Validate & Apply tab.

Give the URL of your blog post(To which you have added a search description and image) and click on the go button. Twitter will validate the card markup and if everything is ok it will show an option to request for approval. Do that and once it gets approved you will get an email from Twitter. This process takes around 5-10 day as of now.
Once approved, all your posts which have an image and search description will start showing twitter cards when you or anyone else shares your post to twitter. This will also reflect to old tweets.

Happy Blogging!

How to add Official Facebook Recommendations Bar Widget for Blogger / Blogspot

Latest : Add Related Posts With Thumbnails in Blogger

Steps Of Adding Related Posts Below Blog Posts In Blogger:

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the “Expand widgets template” box;

Step 3. Search CTRL + F for this piece of code:

Step 4. Copy and paste the below code just above
Code



#related-posts{float:left;width:auto}

#related-posts h1{background:none;color:#333;font-weight:700;font:24px Trebuchet MS,sans-serif;margin:0;padding:3px}

#related-posts .MM_img{width:161px;height:110px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;padding:3px 5px}

#related-posts .MM_img:hover{opacity:0.5;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

#related-posts .play-button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKyKvrc5yHhUm3dVD6dA-nnLz9pobtdHd-HbKeNLzywWI_9qhigmLHp9HwjeJKKseeShytVGaKP9-ICfe0gSmdyxaq7AAU0D9XhibXs65jtJeRzvvEnvyGRXbcYVEN6w1s2TuadnuUtzD/h120/MukeshMali.png) no-repeat center;cursor:pointer}

Step 5. Now find the following code: post-footer-line post-footer-line-1

Step 6. And just above it, copy and paste the below code:

Step 7. Save the Template

Latest Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your Blogger blog, then follow the steps below:

recent posts, blogger widgets

How to Add the Recent Posts Widget to Blogger

Step 1. Go To Blogger > Layout and click on "Add a Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Paste inside the empty box, the following code:

    <div class="eggTray">

    <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",

    "pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},

    "hideHeader":"false","height":"500","count": 8 }</script>

    <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://somebloggertips.blogspot.in/2013/05/latest-recent-posts-widget-with.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://somebloggertips.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>

    <style type=text/css>

    .eggTray {margin:10px 0px;padding:0px;}

    .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}

    .pipesTitle {padding-top:0px;}

    .pipesDescription {display:true;}

    .ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtazZTtrSlMmqze9aNEowLzoG7y7J7FzsXTlzqpRTWshbbfw9Yui5R6LIS4XoUJ7ebapBFmnG5OG4xke9_3ntzwmBZeuKdTJ_lYa3bVbBi8hkdKHja6hQtjzBMrrclAyvjR4WkxlEb8M/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}

    .ycdr, .ycdr a {color:#999999;}

    .widget .popular-posts ul {padding-left:0;}

    </style>

Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://somebloggertips.blogspot.com) and look to have no forward slash symbol "/" at the end of your url

Note:

To disable the scroll bar, remove the number 500
By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10 Step

Step 5. Save your widget. And you're done! If you need more help, leave your comment below.