Remove the Dots in Blogger Navigation Bar

You can find a dotted line in the navigation bar of  blogger. If you want to remove that , then follow this tutorial. It is a simple trick to follow.

STEP 1 : Login to your Blogger.

Click on Template.

Click on EDIT HTML Button.

STEP 2 : Find the following code ( Ctrl+F for search)

<Variable name="paging.background"
       color="$(content.background.color)"
       description="Background of blog paging area"
type="background"
       default="transparent none no-repeat scroll top center"
value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>

STEP 3 : Replace the code with following code

<Variable name="paging.background"
       color="$(content.background.color)"
       description="Background of blog paging area"
type="background"
       default="transparent none no-repeat scroll top center"/>

Save Template .

Now your Navigation bar will be Dots free !!

Read More

Show List of Post from a specific Label in Blogger

It is an another Blogger widget to show list of posts from a particular or specific label.You can understand more about from the below screenshot.

Here blogging is my label name and posts below label name are the posts from that label. hope you understand the widget. Now let's go to tutorial.

Step 1 : Login to your Blogger.

Click on Layout.

Click on Add a Gadget

Click on Html/JavaScript

Step 2 : Add the following code 

<!-- Recent Posts by Label Start -->
<script type="text/javascript">
 function recentpostslist(json) { document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); }
</script> <script src="/feeds/posts/summary/-/YOUR_LABEL?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->

Step 3 : Customization 
Change YOUR_LABEL with your label name.
Change 8 with number of posts you want to list from a label.
Now Save Widget ! Done !
Note : Use label name as Widget Title .

Read More

Image Gallery Widget for Blogger

Your posts may contain a gallery. Here is a cool widget were you can show recent gallery or posts from a particular label. This widget is more effective for show recent image gallery posts.

DEMO :

Now gets in to tutorial .

Step 1 : Login to your blogger

Click on Templates

Click on EDIT HTML Button

Step 2 : Find the code below (Ctrl+F for search)

</head>

Step 3 : Paste the below code above </head>

<script> // Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url :
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhuH4eXbWOwGVChoV2uZ-Hpw1Q4Gi1xPhBAKjViLsavMuaNMQaEc7lxxk8GGxym8Qs7y3TOgRW_-YtruC7Qgdbh64yXNUOymYWXunri9vcXbR_wWGF3sQz9yfIlNdMOSdXEICdGKrZEBFg/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>'); }
html.push('</div>');
document.write(html.join("")); }
//]]>
</script>

Step 4 : Now we have to add CSS. Find the code below (Ctrl+F for search)

</b:skin>

Step 5 : Paste the below code above </b:skin>

/*Recent Posts Image Gallery CSS Start */
 .bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;} .bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
 .bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;} .bsrp-gallery a:hover img {background: #ee7e22;}
/*Recent Posts Image Gallery CSS End */

Now Save Templates .

Step 6 : Click on Layout
Then click on Add a Gadget

Select HTML/JavaScript

Step 7 : Paste the below code in it .

<script>
 var bsrpg_thumbSize = 150;
 var bsrpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary/-/your label?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Step 8 : Customization
Change the value 150 to your desired image Thumbnail width.
Change the true to false if you don't want to show post title inside Thumbnail.
Change your label to your label name that contains image gallery posts or other posts.

Hope you like this widget.
 .

Read More

How to Display Posts from a Specific Category in Wordpress

This is a little advanced tutorial for wordpress users.  Using this tutorial wordpress usres can display posts from a specific or particular category. You can also customize the number of posts that you want to display from that category.

Following code is using to display  the posts in a specific category in wordpress.

<?php
$catquery = new WP_Query( 'cat=3&posts_per_page=10' );
while($catquery->have_posts()) : $catquery->the_post();
?>
<ul>
<li><h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

<ul><li><?php the_content(); ?></li>
</ul>
</li>
</ul>
<?php endwhile; ?>

From the above code change the 3 to your category id .

Change the 10 to desired number of posts you want to display.

Read More

Automatic Read more with Thumbnail for Blogger

When you start using blog and after making 2 or more posts, the posts will appear in full texts without any "Read more..." or "Continue Reading..." links in Homepage. That will take away the professional look of your blog . In this post i will teach you how to add a "Read more..." option in your blog's homepage.

Demo :

Step 1 : Login to your blogger

Click on Templates

Click on EDIT HTML Button

Step 2 : Find the following code ( Use Ctrl+F for Search )

</head>

Step 3 : Paste the below code Before / Above </head>

//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f} <script type='text/javascript'> summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200; </script>

  Step 4 : Customization of above code.
summary_noimg = 550; : Number of texts to be shown if you are not using images in posts . Change the value 550 to your desired number.
summary_img = 450; : Number of texts to be shown if you are using image in posts. Change the value 450 to your desired number.
img_thumb_height = 150; : Height of the Thumbnail .Change the value 150 with your desired height.
img_thumb_width = 150; : Width of the Thumbnail .Change the value 200 with your desired width.

Step 5 : Now search for the code below ( Use Ctrl+F for Search )

<data:post.body/>

Step 6 : Replace the Above code with Below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

 Now save Templates!

Automatic Read function has been successfully installed on your Templates.

Read More

HTML Basics For Beginners

Hyper Text Markup Language (HTML) is the main markup language which used for creating web pages or other information that can be displayed on web browser. For beginners it is necessary to learn the basics of  HTML.

Following are the some important basics of  HTML.

# Showing text in bold font 

<b> and </b> are the tags using for display text in bold font.

Here is an example : 

<b>This is a sample text</b>

Output :

This is a sample text

# Showing text in Underline

<u> and </u> are the tags using for display text in Underline.

Here is an example :

<u>This is a sample text</u>

Output :

This is a sample text

# Showing text in color

<font color="color name or code"> and </font> are the tags using for display text in color.

Here is an example :

<font color="red">This is a sample text</font>

Output :

This is a sample text

# Showing links 

<a> and </a> are the tags using for display links.

Here is an example :

<a herf="http://www.blogger.com">Blogger</a>

Output :

Blogger

# Showing image

<img src="image link"/> is the tag using for show image.

Here is an example :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gtjBVkd2J82ZGGYnbV4Lshv9kyhyNpn9C1Xpg4U3tgwC1SvJietMuSjUnSZ2mI_ntGxMKUrZEdq2iEtC_A__8_1heIkblgTWRYbjdyYkq1_mYb_uhPN_P5JVkkyfoZ2SjspGwi2As9zY/s200/sample-1.jpg"/>

Output :

Ok . above are the most commonly and important basic HTML codes using on websites. We can also try two codes together . For example if you want to show a colored bold text , You can simply try the following code .

<font color="red"><b>This is a sample text</b></font>

Output :
This is a sample text

Let's try another one .If you want to show a link with bold text , You can simply try the following one.

<a herf="http://www.blogger.com"><b>Blogger</b></a>

Output :
Blogger

Let's try something with image. If you want to show a link with image , You can try the following code.

<a herf="http://www.blogger.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gtjBVkd2J82ZGGYnbV4Lshv9kyhyNpn9C1Xpg4U3tgwC1SvJietMuSjUnSZ2mI_ntGxMKUrZEdq2iEtC_A__8_1heIkblgTWRYbjdyYkq1_mYb_uhPN_P5JVkkyfoZ2SjspGwi2As9zY/s200/sample-1.jpg"/></a>

Output :


In above code change the link "http://www.blogger.com" with your link , where want to go when click on link and change the image link "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gtjBVkd2J82ZGGYnbV4Lshv9kyhyNpn9C1Xpg4U3tgwC1SvJietMuSjUnSZ2mI_ntGxMKUrZEdq2iEtC_A__8_1heIkblgTWRYbjdyYkq1_mYb_uhPN_P5JVkkyfoZ2SjspGwi2As9zY/s200/sample-1.jpg" with your image link.
You may feel little bit hard to learn HTML . But you are really mistaken ! If you really follow HTML you can learn it easily. These are only simplest forms of  HTML. Little bit advanced will learn in next lesson. Hope you understand .

Read More

How to remove the Attribution Gadget from Blogger

You can find Attribution gadget at footer of your blogger blog. It is not easy to remove the gadget in Layout window . There are 2 methods to remove the Gadget.

METHOD #1

Step 1 : Login to your Dashboard .

Then click Templates window.

Then click EDIT HTML button.

Step 2 : Find the following code (  Ctrl+F )

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Step 3 : Change the "true" from the code to "false". Like below 

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

Then click on save Templates.

Step 4 : Then click on Layout Window

Click on Edit in Attribution Gadget. Like below

Step 5 : Then click on Remove button .

Then check your blog ! It will be Attribution free ! 

METHOD #2

Step 1 : Login to your Dashboard .

Then click Templates window.

Then click EDIT HTML button.

Step 2 : Find the following code (  Ctrl+F )

<b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
          <b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
<div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
<b:include name='quickedit'/>
  </b:includable>
        </b:widget>
      </b:section>

Step 3 : Delete the code and click on Save Templates button.

Then check your blog !  It will be Attribution free !

Read More