June 2012 ~ Easy HTML Tricks for Blogging

Add Your Latest Pinstagram Pins to Sidebar Blogger / Wordpress

I think you all know by now that Pinterest is the hottest social network around! And as bloggers it is imperative that we jump on board and utilise it to its full potential. Pinterest can be a great source of traffic and you should be pinning your own posts as well as posts from other people. WordPress has a multitude of plugins that help you display your latest pins but of course Blogger lags behind...

Add Follow Links to Bottom of Posts

I recently added links to the bottom of my posts reminding readers that they can follow this blog via Bloglovin, RSS Feed, Twitter etc. Within 24 hours of adding this function to my blog I gained 100 feed subscribers – impressive huh! So today I will show you Blogger users how to add follow links to the bottom of your own posts.So let’s get started:First off you’ll need to log into Blogger and navigate...

Adding Border to Content Areas

I put a call out on Twitter recently asking my followers what they’d like to see on the blog and one request was for how to add border to different areas of your blog. So today I’ll show you how to do this to the different areas of the blog design.So first let me explain the code behind adding borders. The HTML code for borders is actually really simple.Border: 1px solid #000;So to break this...

Customize The Top Tabbed Nav Menu on Blogger

Blogger’s Template Designer is a great resource for editing your blogs design and the addition of custom fonts is a welcome one. But it does have its limitations. So today I’ll be showing you how to customise your navigation menu using the add CSS function that is available in the template designer.By default Blogger adds a border to the whole navigation menu and grey background to the active link....

Add Related Posts Widget to Bottom of Posts Blogger

It is well known that adding a related posts widget to the bottom of your posts increases pageviews and lowers your bounce rate. Link Within is great for this as it adds a thumbnail and is super easy to add to your blog. So today I’m going to show all you Blogger users how to add it to your blog.First of all navigate to http://linkwithin.comFill in your blog details on the front page.Then click...

Add Post Slide Out to Blogger

Login to your Blogger Dashboard.Go to Design / Page Element.Click "Add a gadget" from sidebar.Choose HTML / JavaScript. Paste the following code inside it. <div><div id="bpslidein" style="display:none;"> <div class="help">?</div>...

Add Sharing Widget To Blog

You can simply integrate this widget with your blog by adopting following procedure. So lets see how to add this widget on the blog ? How to Add Sharing Widget To Blog:-Login to Blogger Dashboard.Go to Design / Edit HTML.Click "Expand Widget Templates".Take Backup of your blog template, it is very necessary (More info). Find following piece of code in blogger template.<data:post.body/>Add...

Improve Comment Box with Disqus

Disqus is a global community that improves the discussion on the websites and connects people across the Internet. You can easily update your Blogger comment box to Disqus. It makes commenting easier in your blog and can be implemented into your blog very smoothly by following steps. ...

Add Meta Descripttion to Blogger Post

Blogger has now become more friendly with its new updated features. Blogger now finally introduced most awaited SEO features for Google hosted blogspot blog. Blogger team is trying to get closer to its biggest competitor Wordpress. Now you have no need to hack template for adding meta tags. You can easily add meta description, meta tag to not only for your Blog homepage but also for individual posts...

Pre Tag As Syntax Highlighter

Syntax highlighter are generally used for those blogs, which have scripting tutorials. There are large number of powerful syntax highlighter tool exist over the Internet (Add syntax highlighter with jQuery). Through which you can make your code more readable to the user. It not only highlight the script but also gives the clear idea, how the script is formulated. But the main disadvantage in using...

Make Over The 'pre' tags

Styling preformatted text blocks is one of the more difficult tasks when customizing a blog. In truth, many bloggers may never need to use preformatted text at all, but if you plan on posting code snipits, using this technique is a must.When you post large blocks of code on your blog you will probably be using the <pre>,<code>, your code </code>,</pre>, format. By doing so...

Pre Tag Code for Blogspot Example

<code class="css" style="color: rgb(131, 148, 150); font-family: Monaco, 'Courier New', Courier, monospace; font-size: 12px; display: block; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; letter-spacing: 0px; white-space: pre; "><span class="tag" style="color: rgb(133, 153, 0); ">pre</span> <span class="rules">{ <span class="rule"><span...