Display your Google+ Feed in your blog with images

Google+ Feed WidgetGoogle+ is the next big thing in Social Media. According to statistics its growth has been explosive. With loads of never before seen features and Facebook trying to copy them blankly ,its popularity has just increased by the day. But unlike Twitter and Facebook as of now it doesn’t have a Widget to display your latest posts. To do this we will be combining two services. Lets get started

Demo

Step 1: Go to Your G+ Profile and from the Address bar copy your Google+ ID

Google+ Profile URL

Step 2: Go to Zipl.us and select a nickname and paste that Google+ ID. Then press GO

Zipl.us homepage

Step 3: After that you will get your Short URL ,copy it

Zipl.us completion

Step 4: Now go to Widgetbox . firstly register if you haven’t already.

widgetbox homepage

Step 5: After signing in, go to Widgets menu in the header and then click the Blog/Feed Icon

widgetbox create widget

Step 6: Firstly choose the Basic setting (because its free) and paste the URL you got from Zipl.us in the myblogurl field. Here one thing to note is that you will have to add /feed after the URL you got for this widget to work.

widgetbox widget customize

Step 7: Now after Clicking Make Widget ,you will be presented with loads of options to customize your widget according to your wishes. All options are self explanatory. This is how my widget looked after the process:

save widget

Step 8: After completing  the customization Click the Save Blidget and after accepting their Terms and Conditions , Save it.

accept terms

Step 9: In the next screen click the Get Widget and you will be presented with the Code to integrate it into your blog. Now just copy it.

copy widget code

Step 10: Back in Blogger Dashboard create a HTML/JavaScript Widget and paste the code and Save it . You will see your latest post on G+ in your blog/website.

Having problems , feel free to ask

Demo

20 awesome WebFonts

font collection

Fonts are a integral part of a website. With industry wide adoption of @font-face ,WebFonts are the biggest thing today. From paid to free ones, nearly ever site has one.This is a showcase of 20 awesome fonts from Google’s WebFont gallery. They are absolutely free to use and also easy to integrate into blogs/websites.

1. Amaranath

2. Arvo

3. Bangers

4. Chewy

5. Coming Soon

6.Copse

7. Damion

8. Droid Serif

9. Kreon

10. Leckerli One

11. Lobster

12. Mate SC

13. Nobile

14. Nova Slim

15. Nunito

16. Open Sans

17. Oswald

18. Pacifico

19. Salsa

20. Volkhov

Any amazing font that I missed ? Feel free to share them in the comments

Bug Fix : Videofication Template

Bloggers using the recently released Videofication template were experiencing some problems while adding Pages into the Blog. This post explains how to fix the issue of page styling and page title.


To fix the Page Styling Issue
Add the following just before the </head> tag

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>.cstyle, .js-kit-rating {display:none !important;}
.post-outer {height:100% !important;padding:5px;}</style>
</b:if>

Demo

To fix the Page Title Issue

The page title that you would have entered in the Title box in the Post Editor is not visible.

In the Edit HTML of the Page add the following Code at the top

<h2 style="font-family: Chelsea Market;" >TITLE</h2>

Replace TITLE with the respective title of the Page

Also Pages don’t support videos as the JavaScript is specifically written for posts only. Changing it to accommodate the pages into it will be very time consuming.

Alternatively you can add video via the Video option present in the Post Editor.

I think this addresses all the issues present, In case you are facing any problems please feel free to share

How to Enable Google Authorship quickly

Google Authorship Image

In simple words Google Authorship allows you to make Google aware of the stuff you have written. When enabled it shows your name as well as your Google+ Profile image besides the search result. Enabling it just requires a bit of coding and is pretty simple. It adds a kind of authenticity element in the users mind and there is added trust in your content . Lets dig in

Firstly Go to the Rich Snippet Checker tool and check if this is already enabled in your blog/site. In case you see your profile is linked then you don’t need to worry, just jump to the part where I explain How to make sure your image and name appears besides the search result.

Rich Snippet checker tool image

The reason for checking for this linking is because if you have merged your Google+ and Blogger Profile together ,then chances are that Google would have done this for you themselves

For those whose profile information doesn’t appear in the Checker , Follow the steps Below

How To Enable it

Step 1:  Go to your Google+ Profile and copy the URL in the address bar.

Step 2:  Add a HTML/JavaScript widget either in the Sidebar or Footer and then add the following code into it.

<a href="PROFILE-URL" rel="author" >Google+</a>

Replace the PROFILE-URL with your actual profile URL and then Save it
Also you can replace Google+ with your Name or other relevant Information. Here the main thing is the rel Author tag which tells Google that this Profile is the producer of the content.

Step 3:  Now Go your Google+ Profile and there click the Edit Profile button. Now in the right side Under the Contributor To tab, add your Blog Name and URL. Save the changes

Contributor To Tab in Google+ Image

The reason for doing is to make sure this method is spam proof. Like for example if somebody puts your profile URL in a website with objectionable content ,but you don’t put that site in your contributor tab. Then Google will not show your image beside that websites search

Enabled It but Name and Image don’t appear beside the Search Result
This was the case with me too. I had Enabled it for a long time back but the Name & Image didn’t accompany Search Results.

Here is the what you have to do ,Replace your current code:

<a href="PROFILE-URL" rel="author" >Google+</a>

with

<a href="PROFILE-URL?rel=author" rel="author" >Google+</a>

I did this a week back and now all the Stylify Your Blog results are accompanied with my Name and Image.

Hope it helps you and feel free to ask about problems you face while implementing it

Effects of using JavaScript Redirect

effects imageIn the last post ,we discussed how to redirect your blog to blogspot.com always. This simple trick has really far reaching effects on the Load Time, Usability, SEO, etc. We will be discussing them in-detail, in the following post. JavaScript Redirects are not really used much on the web as 301’s and 302’s can handle the job. The reason we are using them is because Blogger doesn’t give us Server side access. Lets get started now

1. Load Time
As there is redirect involved , there will be some extra time taken at the user-end. After rigorously testing it with GTmetrix ,it averaged around 1 second. Here is a picture describing it

An extra second will not hurt much, but the best possible solution to this is to place the JavaScript near the top of the page, for best results just after the <head> tag

2. Usability
As the URL changes , the person visiting the blog might not either be able to notice it or think there is something sneaky with the site. If the person does notice it ,another effect can be the less likability of clicking it again.

3. SEO
This is a multifaceted thing. There are lots of angles to it.

a) Indexing
According to various articles , Web crawlers do not take into account JavaScript in the pages. But the Search-Bots are being constantly updated. In the Past, the nature of these kind of redirects has been a bit shady but there is no need to worry. As all the pages of your blog have rel=Canonical tag. This tells the search-bot that the current page is just a copy of the original page. Accordingly now, the best place to place the redirect JavaScript is after the following code in the Edit HTML of your blog:

<b:include data='blog' name='all-head-content'/>

b) Reputation
There is no effects on the Search Engines evaluation of your blog as the presences of the Canonical tag nullifies the effects of the Redirect.

c) Country specific problems
As ccTLD’s were introduced to make it easier for Governments to ban a blog in their region ,this might become a problem. I started a thread in the Google Webmaster Forum, and here are some of the replies:

An Level 11 moderator replied to it and slightly suggested that Google might not like it. You can also drop-by and voice your opinion on the thread . Here is the Link

4. Alexa Ranking
This is the biggest plus of using the Redirect script. As all traffic is channeled to .com domain, the Alexa ranking remain consistent all throughout. As the rank is not distributed between country specific URLs, its easier for Alexa to estimate your rank correctly.

All-in-all the Redirect Script has a positive effect on your blog. Rest we will see as it unfolds. Have you experienced any thing unusual while using the Redirect, feel free to share it.

New Blogger Template : Videofication

This is my 4th template. I tried to make it a bit different. The idea was to make a YouTube type thing in Blogger. It has simple layout and some other functionality like Rater widget, Threaded Comment,etc. Here I wanted to mention that the base template and JavaScript was originally made by BloggerzBible ,I just did some modifications to the JavaScript and looks.

Videofication Blogger Template image

Demo

Download


Complete List of Features

-Fixed Design
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Stylish commenting system
-Attractive Post Title 
-CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-80%+ Google Page Speed score 
Integrated Search Box
CSS3 shadows around post area and footer
Attractive web fonts like Jim Nightshade and Chelsea Market
-RocketBar jQuery Menu
-Inbuilt 5 star rating widget for each post


How to configure the features:

1.Menu
The menu widget is included separately in the Download Package. Just copy the contents of the widget into the HTML / JavaScript widget present below the Header. As you will observe , there will be two distinct menus present in the widget. The upper one is the one that will appear when you open the page the other one will appear while you scroll the page. Make the changes accordingly to them.

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.



3. Adding Videos
To add videos to a post. Just enclose the Youtube URL within [youtube]..[/youtube]

For example: [youtube]http://www.youtube.com/watch?v=gKWNUyTGqss[/youtube]

Make sure this is included in the top of the post. After that you can write your post the usual way. In the homepage you will see a automatically generated thumbnail of the video along a small extract from the post.

This is a YouTube template, so no other video sharing website URL will work.

4. Recent Post Widget
It is included separately in the Download package and you can just copy-paste it into a HTML/JavaScript widget .It will work smoothly. To do any changes in it, here are the following available option:

var numposts = 3; 
var showpostthumbnails = true; 
var displaymore = true; 
var displayseparator = true; 
var showcommentnum = true; 
var showpostdate = true; 
var showpostsummary = true; 

I believe you will like the template and feel free to ask about any difficulties you face while using the template.

Demo

Download

Top Resources for Blogger Templates : Part 1

lots of Templates images

When starting a new blog ,the importance of design cannot be underestimated. Even though content has its own significance but Design plays a vital role in the way readers interpret your blog. We all have a rough idea how our blog should look but due to lack of skills or time we are unable to make it look that way. Here these resources come to rescue. These resources contains thousands of designs to choose from and find the design that satisfies your needs.

1. bTemplates


The biggest directory of Blogger templates on the web. Has nearly 4000 templates to choose from. Very well structured and simple user interface.

2. Deluxe Templates




3. BestThemes



4. Premium Blogger Templates




5. Blogger Themes



6. Templates Block




7. Best Blogger Templates


8. Custom Blogger Templates


Have I missed some of them, feel free to share them in the comments .

Check out the second part of this post

5 Threaded Comment styles

Threaded comments are awesome but their default styling is just so simple. Modifying it is a very simple and only requires CSS. I am sharing 5 different styles for the comment sections which you can implement easily into your blog. The motivation for this post came from 54BLOGGER post about some nicely designed Comment sections. I tried to convert them so that they looked very similar to the originals.

Note: Before going any further make sure you have Threaded Comments enabled. Refer this article on how to enable them

Update: Blogger has added some code from behind and therefore all the comments avatars with circular images have a bit of problem. To solve it just add the following CSS:

.comments .avatar-image-container img {max-width: 40px !important;}

CSS-Tricks Comment Section Demo

Copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Line25 Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:460px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: white url(http://3.bp.blogspot.com/-UWrv65VFdEI/T0-ZPhajVyI/AAAAAAAAC2I/LdHCRWRXS6g/s1600/light-grid.png);left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 390px;font-family:arial;font-size:10px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background: url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);}

Noupe Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: transparent;position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:0px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: transparent ;left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:41px !important;height:40px !important;background: silver;padding: 2px;border-radius:5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;width:42px !important;height:43px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comments .comments-content .datetime {position: relative;right: 0px;top:-15px;font-family:arial;font-size:15px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background:transparent;}

WebDesignerWall Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:10px;background: url(http://2.bp.blogspot.com/-dw-hSAwxrn0/T0-fYPssihI/AAAAAAAAC2g/_TQ8-9FHeBc/s1600/dashed-single.png) no-repeat 4.3em center;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comment-actions:before {content:"21AA";}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: white;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .comment-block {padding: 11px !important;}
.comment-thread ol div.continue {display:none !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: silver;padding: 2px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:43px !important;width:42px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .datetime {position: relative;right: 5px;top: 5px;font-family: arial;font-size: 15px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comment-actions.secondary-text {width:400px !important;}

SYB current Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: #F8F8F8;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: white;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}

Some of these styles require a bit more of work to make them look the exact replica of the original. Did you like them ? I will be sharing more of these in the future.

Limiting the use of Web Fonts

Web fonts have drastically improved the way we look at and read the web. The ability to remotely load a font in a web page has been possible as early as CSS2. In the past few years this got a lot of attention due to services like TypeKit and Google Web Fonts. Nowadays its a common thing on the internet. Even Blogger has a inbuilt support for Web Fonts. But now we have started overusing it and there are some disadvantages to it.

Recently I visited SmashingMagazine’s website. They have done a total redesign in the past month. They are using web font (a.k.a. Skolar Regular and a couple of others) for all the text in the page. Its being served by Fontdeck and so there is a extra step involved for validation to check the Font is being only used by the website that bought the rights for it.

As you will observe the Black highlighted portion is actually text. It is taking a lot of time load.

Problems

-In general Web Fonts take a heavy toll on the Page Speed as well as Page Size. They are like scripts ,the more you have the higher the page load time.

-Another problem with web services like TypeKit ,Fontdeck ,etc is that they perform a validation check to make sure that Fonts are being used by their customers alone and not anybody else. This also increases time lag as server side action from there side is required.

Solutions
-Solution to this problem is to limit the number of fonts being used on a single page. The ideal number is around 3 or 4 per page. Opinions vary on this but the rule of the thumb is to use what you really need.

-Another possible solution is to include these fonts in the Head of the page. This will make sure that they are loaded in the starting.

-One more way is to load the Fonts asynchronously. This makes sure that once the Page is loaded then only will the Fonts will be loaded. This sometime might show blank pages but a nice method for clean loading.

TIP: If you are using Google Web Fonts, then whenever you go on the details of any font in the directory, you come across a odometer kind of diagram on the right side. This denotes the effects of using that particular font on the page load times.

Make sure you check it and make decisions wisely. Lesser the value better the load speed.

Web typography and content go hand in hand. What is your take on this issue ?