Search Engine Screenshot
Blog Screenshot
How To Use
Step 1 :-
- First log in to Blogger
- Go To Dashbord > Design > Edit HTML
- Now Click On Backup/Restore Link
- Now Find This Code ]]></b:skin>
- And just Before it, add this line:
.hrecipe{font:1px oswald;}
Step 2 :-
- Now Find This Code <body> In Your Blog Template
- And just Before it, add this Code:
<div><div itemscope='' itemtype='https://data-vocabulary.org/Recipe'>
Step 3 :-
- Now Find This Code <h3 class='post-title entry-title'>
- & Replace This Code To New Code
<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>
<h3 class='post-title entry-title' itemprop='name'>
Step 4 :-
- then close it with </span></span>
- roughly like this:
<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a><b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a>
<b:else/><data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a><b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a>
<b:else/><data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
Step 5 :-
Copy the code below and place it right under the code <data:post.body/><div class='hrecipe'>
<span class='item'>
<span class='fn'>Blog Title</span>
</span>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
By <span class='author'><b><data:blog.title/></b></span>
Published: <span class='published'><data:post.timestampISO8601/></span>
<span class='summary'><data:post.title/></span>
<span class='review hreview-aggregate'>
<span class='rating'>
<span class='average'>3</span>
<span class='count'>11</span> reviews
</span>
</span>
</div>
<span class='item'>
<span class='fn'>Blog Title</span>
</span>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
By <span class='author'><b><data:blog.title/></b></span>
Published: <span class='published'><data:post.timestampISO8601/></span>
<span class='summary'><data:post.title/></span>
<span class='review hreview-aggregate'>
<span class='rating'>
<span class='average'>3</span>
<span class='count'>11</span> reviews
</span>
</span>
</div>
Step 6:-
- Copy the code below and place it right above the code </body>
</div></div>
Now Save The Template....
Take A ScreenShot...
https://www.google.com/webmasters/tools/richsnippets


Home
Google webmaster team has introduced an easy way of displaying your Google+ profile picture next to the links of your website or blog or any content that you generate. You might have seen profile pictures or image thumbnails of Google developers appearing on search results page. Previously only reserved users had this option but now thanks to the generosity of Google+ social network, even you can display your profile picture next to all your articles or webpages that you own. This will be a proof that you are the sole author and owner of that site or blog. The author information will be shared globally on Google results and your visitors can see your image and author information link next to your article. This is a great way to attract visitors and increase website traffic. Lets learn how to do it!






