How to Highlight Authors Comments Latest

 

 Hello Just Follow Simple Steps:

1. Choose Edit HTML tab
2. Check Expand Widgets (i.e., Tick Expand Widgets check box)
3. Find ]]></b:skin> Tag in Your template
4. Add Bellow code Before it

   .comment-body-author {
       background: #CEF6E3;
       border: 2px solid #FA5858;
       padding: 5px;
   }

   #Change Background and Border Colors as you need
5. Now Save your template

THEN

1. Just Find Below in  TEMPLATE
2. I am not sure the code exactly like bellow
   But <data:comment.body/> tag must present in code
   So Find <data:comment.body/> tag and then select entire code like bellow

   <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>

3. After finding code successfully then Add Bellow code Before it

   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>

4. and Add bellow code After it

   </b:if>

5. After adding Above two codes then Save your template and check your Comments

Your final change in code like bellow

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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>

SO, Dont Forget to Like 

Latest Related Post Widget Blogger/Blogspot

 
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now Add below code before </head> tag.

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Note : If you want you can change font type, font size,width,..... of above code.

5.Now again scroll down to where you see this :

<p><data:post.body/></p>

6.Now add below code after above line.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

Note : You can change the number of max-results as your choice.

7.Now save your template and you are done.It look like this :

New Gadget/Widget Blogger/Blogspot Sudoku

SIMPLY COPY THE BELOW CODE



 


<iframe scrolling="no" frameborder="0" width="200" src="http://free-sudokus.blogspot.com" height="230"></iframe><div style="margin:-8px 0;background:none;text-align:center;width:234px"><a style="font-size:75%;text-decoration:none;" href="http://widgetsforfree.blogspot.com/2008/01/sudoku-widget_500.html">Sudoku Widget</a></div>

Top Widget/Gadget Blogger/Blogspot Dog

 
SIMPLY ADD BELOW HTML/JAVASCRIPT

<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" /><param name="AllowScriptAccess" value="always" /><param name="wmode" value="opaque" /><param name="bgcolor" value="FFFFFF"/></object>

Best Three Widget Set Latest Blogger/blogspot

 
First log in to Blogger.com
Go to Layout -> Click on Edit HTML tab

Now search (CTRL+F) for these code line:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

REPLACE the entire red line in the above code, with this new code:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Now PREVIEW the template, and if no errors are displayed, then carry on:

Find this code:

]]></b:skin>

Then immediately BEFORE / ABOVE it, paste these lines:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Save the template, go to "Page Elements", and add content to the three new widgets !

Latest Label/Tagcloud Widget

 



Step 1: Back it Up
Always make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven't already...

1. Go to Layout >Page Elements .
2. Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"

1. Now go to Layout >Edit HTML
2. Make sure that the "Expand Widgets Template" box is unchecked.
3. Now we need to search for the code that looks like this.

   <b:widget id='Label1' locked='false' title='Tags' type='Label'/>

   Your code may look a little different. So try using your browser's search tool to find type='Label'.

Step 4: Replacing the "Old Code" with the "New Code"

1. Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
2. Replace this code that you've just deleted with the code below:

   /*
   Distributed by John Smith at WidgetsForFree.blogspot.com
   */ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content' style='text-align: justify;'>
   <script type='text/javascript'>
   /*
   Simple Blogger Tag Cloud Widget
   by Raymond May Jr.
   http://www.compender.com
   Released to the Public Domain
   */
   
   //Settings / Variables
   var max = 150; //max css size (in percent)
   var min = 70; //min css size (in percent)
   var showCount = false;  // show counts? true for yes, false for no
   var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all
   
   
   //Begin code:
   var range = max - min;
   
   //Build label Array
   var labels = new Array();
   <b:loop values='data:labels' var='label'>
   labels.push(&quot;<data:label.name/>&quot;);
   </b:loop>
   
   //URLs
   var urls = new Array();
   <b:loop values='data:labels' var='label'>
   urls.push(&quot;<data:label.url/>&quot;);
   </b:loop>
   
   //Counts
   var counts = new Array();
   <b:loop values='data:labels' var='label'>
   counts.push(&quot;<data:label.count/>&quot;);
   </b:loop>
   
   //Number sort funtion (high to low)
   function sortNumber(a, b)
   {
   return b - a;
   }
   
   //Make an independant copy of counts for sorting
   var sorted = counts.slice();
   
   //Find the largest tag count
   var most = sorted.sort(sortNumber)[0];
   
   //Begin HTML output
   for (x in labels)
   {
   if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
   {
   //Calculate textSize
   var textSize = min + Math.floor((counts[x]/most) * range);
   //Show counts?
   if(showCount)
   {
   var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
   }else{
   var count = &quot;&quot;;
   }
   //Output
   document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
   }
   }
   </script>
   <br/>
   <span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
   </div>
   </b:includable>
   </b:widget>

Step 5: Previewing the New Tag Cloud

Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

Free Blogger/Blogspot Template Latest

 Download

Top Widget Blogger/Blogspot Thumb

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".

<data:post.body/> 

5. Copy and Paste following code just Above <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>

6. Widget will display only on post pages and not on Homepage. If you like to display widget in both post pages and Homepage then remove two lines highlighted in blue color from the above code.

7. Now search for below piece of code.

</body>

8. Copy and Paste following script Above </body>.

<script src="http://js-kit.com/ratings.js"></script> 

9. That's It, save your template and see working rating widget under your blog post titles.

10. Check the rating widget by clicking Thumb Up or Thumb Down.

Need any help? use comment section for posting your queries....1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".

<data:post.body/> 

5. Copy and Paste following code just Above <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>

6. Widget will display only on post pages and not on Homepage. If you like to display widget in both post pages and Homepage then remove two lines highlighted in blue color from the above code.

7. Now search for below piece of code.

</body>

8. Copy and Paste following script Above </body>.

<script src="http://js-kit.com/ratings.js"></script> 

9. That's It, save your template and see working rating widget under your blog post titles.

10. Check the rating widget by clicking Thumb Up or Thumb Down.

Need any help? use comment section for posting your queries....1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template.

<data:post.body/> 

5. Copy and Paste following code just Above <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>

6. Widget will display only on post pages and not on Homepage. If you like to display widget in both post pages and Homepage then remove two lines highlighted in blue color from the above code.

7. Now search for below piece of code.

</body>

8. Copy and Paste following script Above </body>.

<script src="http://js-kit.com/ratings.js"></script> 

9. That's It, save your template and see working rating widget under your blog post titles.

10. Check the rating widget by clicking Thumb Up or Thumb Down.

Need any help? use comment section for posting your queries....

Latest Hack Blogger/Blogspot How To Create A Poll

1. Go to PollsDaddy.com.

2. Click on button that says " Sing up for a free account now!".

3. On next screen Choose " Free" service.

4. Now fill up all the required fields and create account.

5. Once account created, you will recevie activation link in your email, click on it.

6. Once you click activation link, it will take you to your Dashboard.

7. Next click on " Create a new" and select "Poll". Refer screen below.



8. Next create your poll Question. See my example below.

9. Next select "Poll Style" and "Poll Options".

10. Next click on button that says "Create Poll".

11. Now copy provided Javascript code and follow next part below.

How To Add Poll To Blog

1. Go to your Design tab ---> Page Elements tab.

2. Click on " Add a Widget" then select "HTML/Javascript" Widget.

3. Add copied JavaScript code inside the " HTML/Javascript" Widget.

4. Save it and view your blog.

If you have any query or need any help feel free to leave a comment below. will reply you soon.

New Blogger/Blogspot Widget Css3 Verticle Slide Menu

 
1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for ]]></b:skin> in your Template.
 5. Paste below code above ]]></b:skin>.

/* Css3 Stylish Vertical Side Menu - info @ http://www.ravisaive.in */
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFqCUKIBM8BS8HhCO79jkdmAAt4ynV8aM8vbaX7sSdJdXzHJg2bb41PJ-iATqSohVw914FBPoGwl_YHZL_k6ZmyCQ6uohQYM_jOm4Bp6YofmTc48LLgJot-WYT6IsRAV1d8ZYLH6RIVOK/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End Css3 Stylish Vertical Side Menu - info @ http://www.ravisaive.in */

6. Save your template.

7. Now again go to your Design tab ---> Page Elements tab.

8. Click on " Add a Widget" then select "HTML/Javascript" Widget.

9. Copy and paste the following code inside the " HTML/Javascript" Widget.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.ravisaive.in/">
<span>Home</span>
</a>
</li>
<li>

<a class="about" href="http://www.ravisaive.in/2011/06/about-us.html">
<span>About Us</span>
</a>
</li>

<li>
<a class="categories" href="http://www.ravisaive.in/2011/10/blogger-beginners-guide.html">
<span>Categories</span>
</a>

</li>

<li>
<a class="services" href="http://www.ravisaive.in/2011/01/write-for-us.html">
<span>Services</span>
</a>
</li>

<li>
<a class="contact" href="http://www.ravisaive.in/2011/07/contact-me.html">

<span>Contact</span>
</a>
</li>
</ul>
</div>

10. Replace the URLs in red with your links and change the scroll out text in green above.

11. Save the Widget.

Best Stat Widget for Blogger/Blogspot

 
1. Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Click on " Add a Widget" then select "Blog's stats (New!)" Widget.

4. Select " Time Period" and "Style" then click on Save Button to Save Widget. Refer below screen.
5. Now View your blog to see working Blog's Stat Widget.

Latest Free Blogger/Blogspot SEO Template

Personal Press is a premium wordpress theme converted to blogger template.Its Offering Nice features and its SEO Friendly too.

Free Downlaod !!!

 

Features::

• SEO Friendly
• Cool Navigation bar with Hover effect
• Customised commenting Form
• Hover effected Ad slots
• Hover effected Read more buttons without javascript
• Compatiable with all browsers
• Automatic Responsive Skin

Customizations::

• To change Logo-Find this code- id='logo' Replace logo with your logo url
• Use Jump link in blogger to hide below part of blog posts

how to create a photo gallery on blogger using jQuery new Latest

 

How to implement this plugin on Blogger

This plugin can be implemented in any websites including blogger. To implement on blogger follow the below procedure. First go to Template and then Edit HTML.
Find ]]></b:skin> and add the following code just after the above code.(#)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link charset='utf-8' href='http://bloggerhow.googlecode.com/hg/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://bloggerhow.googlecode.com/hg/jquery.prettyPhoto.js' type='text/javascript'/>

If you have already the jQuery library in your Template, skip the red colored code.
Before going to next step, we need to check whether $(document).ready(function(){ is present in your template or not. If it is there add following code just after the above code.(#)

$("a[rel^='prettyPhoto']").prettyPhoto();

If the $(document).ready(function(){ is not present in your template, then find <body> add the following code just below.(#)

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Now save the template. You are ready to use this plugin.

How to use this plugin

From now on you can use this plugin. This can be used with any link. Only condition is you should add a rel='prettyPhoto' tag with link. I am giving you some examples on how to use this plugin in your posts.

Using with an inline link

Demo for this type is available in my blog. You can see many (#) links. These are pictorial illustration of tutorial. Below is an example. This method has an disadvantage. Title for each image is not possible in this method. But we can give individual descriptions.

<a href="IMAGE ADDRESS HERE" rel='prettyPhoto' title='ADD DESCRIPTIONS OF THE PICTURE HERE'>LINK TEXT</a>

Using for image gallery with title and descriptions

For this we need thumbnail of each picture. If you are using Picasa for uploading pictures, this is very easy. See the link for a pictorial illustration(#). From there, you will get both thumbnail links and full resolution image links.

Don't use the full resolution picture link for creating link. If you have many pictures in your post, the loading will increase.

Use the following format to implement a photo gallery in your blog.

<a href="fullscreen_image_1.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_1.jpg" width="width of thubmnail" height="some height" alt="Heading for image 1" /></a>

<a href="fullscreen_image_2.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_2.jpg" width="width of thubmnail" height="60" alt="Heading for image 2" /></a>

<a href="fullscreen_image_3.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_3.jpg" width="width of thubmnail" height="60" alt="Heading for image 3" /></a>

Replace the red colored text with thumbnail links and green colored with full resolution links. rel='prettyPhoto[something]' should be same for all the pictures in a gallery. If you want another gallery in the same post, change the something to another name.

Additional configurations

In default, sharing buttons will be there with popup box. You can disable by adding green colored code inside the bracket as below.

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});

  });
</script>

There are many customizations are available. See this page for a full list. If you have any doubt in customization, let me know.

How To Custom 404 Error Pages for Blogger/Blogspot Latest

1. Login to your Blogger account and go to the Template page and proceed to Edit HTML
2. Click on the Expand Widget Templates Check box so that your entire template comes up
3. Now Look for </head> and immediately before that paste this snippet

   <b:if cond='data:blog.pageType == "error_page"'>
   <style type="text/css">
   .status-msg-wrap {
       font-size: 100%;
       margin: none;
       position: static;
       width: 100%;
   }
   .status-msg-border {
       display:none
   }
   .status-msg-body {
       padding: none;
       position: static;
       text-align: inherit;
       width: 100%;
       z-index: auto;
   }
   .status-msg-wrap a {
       padding: none;
       text-decoration: inherit;
   }
   </style>
   </b:if>

   This code snippet will reset the default styling given to the Blogger Message Wrapper.
4. Save the template and go to a page on your blog which doesn’t exist.
5. You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
6. Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.

   <h3>Your requested page was not found</h3>
   <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
   Please check that the Web site address is spelled correctly.</p>
   <b>Other things to try:</b><br/>
   <ul>
   <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
   <li>
   <form method="get" action="/search">
   <table width="100%">
   <tr>
   <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
   <td><input type="button" Value="Search"></td>
   </tr>
   </table>
   </form>
   </li>
   </ul>

7. It will give you something similar to my 404 page.
8. If you are creative, you can add more stuff to the 404 pages. You can find a list of really creative 404 pages on HongKiat for inspiration

Detecting an Error Page

Blogger has introduced a new page type called "error_page" and you can detect it using b:if conditional tags.
The following condition checks if a page is an error page or not.

<b:if cond='data:blog.pageType == "error_page"'>
This is an Error Page
</b:if>

Changing the Error Page Title

By default the title of the Blogger Error Page is your Blog Title. If you want to change it to something else, you can Edit your template and change

<title><data:blog.pageTitle/></title>

to

<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

If you are using my Title Tag Hack or derivatives of that available on the internet, then you will have to change

<!-- Start 
www.blogshelper.blogspot.com: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End www.blogshelper.blogspot.com: Changing the Blogger Title Tag –>

to

<!-- Start 
www.blogshelper.blogspot.com: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
<!-- End 
www.blogshelper.blogspot.com: Changing the Blogger Title Tag –>

How to Add Cool Floating Notification bar in Blogger Latest

• Goto Blogger  => Design => Edit HTML
• Next search for this code (CTRL+F)

<body>

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */
background: linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 ); /* IE6-9 */

border-bottom:2px solid #999;

color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 1px solid #333;
height:38px;
font-size:13px;
position:fixed;
vertical-align: baseline; overflow:hidden;
z-index:999;
width:100%;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#ut-sticky:hover
{

background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#555555&#39;,endColorstr=&#39;#434343&#39;,GradientType=0)

-webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;

 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

}

#ut-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
.ut-cross, a:hover{color:#DDD; text-decoration:none;}

</style>
<div id='ut-sticky'>
<p style='padding-top:17px;'>Add This Floating Notification Bar To Your Blog <a class='ut-button' href='http://www.allbloggingtips.com' target='_blank'>Click Here!</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<br/><br/>
<br/><br/>
<!-- End of Notification code, info - http://www.blogshelper.blogspot.com -->

Mashable Drop Down Navigation New Menu for Website/Blog Latest

1.  
2. Go To Blogger.com >> Template >>
3. Backup your Template
4. Now Edit HTML >> Proceed
5. Search for ]]></b:skin> and just above it paste Following CSS3 Style sheet coding.

/* MBL Mashable Blue Menu Ends*/
div.mashmenu {
/* colors */
background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */
border-bottom: 1px solid #DCE5EE; /* border bottom :  no hover color */
border-top: 1px solid white;
color:black;
}

div.mashmenu div.fnav {
/* colors */
border:2px solid #F3F6F9; /* border top,left,right :  no hover color */
border-bottom:none;
}
div.mashmenu div.fnav:hover{
/* colors */
border:2px solid #0054a2; /* border top,left,right : hover color */
border-bottom:none;
background:white;
}
div.mashmenu div.fnav a.flink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent {
/* colors */
background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */
border:2px solid #0054a2; /* border bottom,left,right : hover color  */
border-top:none;
color:black;
}
div.mashmenu div.fnav div.allContent a.slink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent a.slink:hover {
/* colors */
background-color: #5E88B4;
color:white;
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
/* colors */
background: white;
border-left:1px solid white;
}
div.mashmenu div.fnav div.insideContent a {
/* colors */
color:#0054a2;
border-bottom:1px solid #5E88B4; /* border bottom : hover color  */
}
div.mashmenu div.fnav div.insideContent a span:hover{
/* colors */
background-color: #5E88B4;
color:white;
}

div.mashmenu div.feat a.flink {
/* colors */
color:#0054a2;
}
div.mashmenu div.feat a.flink:hover{
/* colors */
background-color: #5E88B4;
color:white;
border:none;
}
/* ===== MBL Mashable Blue Menu Ends======= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
/* ====================*/
div.mashmenu a { text-decoration:none; }
div.mashmenu img { border:2px solid white; }
div.mashmenu div.fnav div.allContent{ display:none; }
div.mashmenu div.fnav div.allContent div.insideContent{ display:none; }
div.mashmenu {
font-family: "Arial", "Verdana", sans-serif;
font-size:13px;
width: 100%;
position: relative;
padding: 3px 0 0;
}
div.mashmenu div.fnav {
margin:0px 0px 0px 3px;
display:inline-block;
position:relative;
/* css3 */
-moz-border-radius:4px 4px 0px 0px;
-webkit-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
div.mashmenu div.fnav a.flink {
padding:10px;
display:block;
}
div.mashmenu div.fnav div.allContent {
position:absolute;
top:33px;
left:-2px;
max-width:550px;
max-height:250px;
overflow:hidden;
/* css3 */
-moz-border-radius:0px 0px 4px 4px;
-webkit-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
}
div.mashmenu div.fnav div.allContent:hover{
width:550px;
height:246px;
}
div.mashmenu div.fnav:hover div.allContent {
display:block;
}
div.mashmenu div.fnav div.allContent a.slink { margin:1px 0px 1px 1px;
padding:10px;
display:block;
width:140px;
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
display:block;
position:absolute;
top:0px;
left:165px;
width:410px;
height:100%;
padding-left:10px;
}
div.mashmenu div.fnav div.insideContent span.featured ,
div.mashmenu div.fnav div.insideContent a {
width:365px;
float:left;
overflow:hidden;
padding:5px 0px;
position:relative;
}
div.mashmenu div.fnav div.insideContent a img {
float:left;
width:100px;
height:60px;
padding-right:10px;
}
div.mashmenu div.fnav div.insideContent a span {
position:absolute;
top:20px;
left:120px;
padding:3px 3px ;
}
div.mashmenu div.feat {
float:right;
border:none;
margin-right:10px;
margin-top:5px;
}
div.mashmenu div.feat:hover{
border:none;
}
div.mashmenu div.feat a{
float:left;
font-size:12px;
border:none;
padding:5px 5px;
}
div.mashmenu div.feat a:hover{
/* css3 */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
/* =================== */

 5.Then Search For <div id='header-wrapper'> or <header> depends on your Custom blogger template.

6.Now when you find it, keep an eye on the coding and just after </b:section> </div> paste the following HTML coding.

<div class="mashmenu">
<div class="fnav">
<a href="#" class="flink" >Social Media + </a>
<div class="allContent">
<div class="snav" >
<a href="#" class="slink" >All Social Media</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Facebook</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Google+</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Twitter</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Youtube</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
</div><!-- end allContent -->
</div> <!-- end fnav1 -->
<div class="fnav">
<a href="#" class="flink" >Videos </a>
</div><!-- end fnav -->
<div class="feat">
<a>Featured : </a>
<a href="Your-FB" class="flink" >Facebook </a>
<a href="Your-G+" class="flink" >Google+ </a>
<a href="Your-RSS" class="flink" >RSS</a>
</div><!-- end fnav feat -->
</div><!--end mashmenu -->

Customization:

• Replace Write-Title-Of-Featured-Post-Here with the little description of your post.
• Replace Your-Image with the image URLs of specific posts. 
• Replace Your-Post-URL with the URLs of your posts. 
• Replace Your-FB, Your-G+ and Your-RSS  with your personal URLs. 

If you want to add more Drop down menus then in above coding search for <!-- end fnav1 --> and just below it paste the Following Code. if you want 5 drop down menus paste the following coding Five times.

 <div class="fnav">
<a href="#" class="flink" >Social Media + </a>
<div class="allContent">
<div class="snav" >
<a href="#" class="slink" >All Social Media</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Facebook</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Google+</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Twitter</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Youtube</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href=" Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
</div><!-- end allContent -->

</div>

<!-- end fnav1 -->

Enjoy Buddy !!!