How to show and hide div elements based on dropdown selection in jQuery

The following example will demonstrate you how to show and hide div elements based on dropdown selection or select option value. The div boxes in the example are hidden by default using the CSS display property which value is set to none.

page navigation simple code for blogger

Add Number Page Navigation Widget In Blogger

follow the below simple steps to add this widget in your blog. Please follow all the steps carefully to add this widget in blog. Let go how to add this numbering widget in blogger blog.

Step1:

1. Go to blogger Dashboard:


2. Go to template>>Edit/Html:


3. Now find for the below code:

Here i am writing the  tutorial for those who want to add signature to the bottom of your blogger. As always with Blogger, coding usually depends on the template you are using so I have two methods below on how to automatically add a signature to the end of your Blogger posts. I’ve seen a lot of tutorials that show you how to add an image to to the post template in settings, but this only adds it to posts from then on. That way works fine but it’s harder to change in the future and it doesn’t include previously published posts. Here’s how to automatically add it to every post.
[postwarning]

Create your Signature

The first step is to create the image. To do this I’d recommend using GIMP, a free alternative to Photoshop. Create a new document with a transparent background, add your signature and save it. If you have a transparent background, save it as a .png file. Upload the image to a hosting site such as Photobucket.

customize newer older post links to blogger bottom side

Today’s tutorial is about changing the links for “newer posts” and “older posts” at the end of your blog under your post section on Blogger. When a visitor clicks on the link for older/newer posts, it takes them to the previous/next page of posts. The number of posts shown on your home page will depend

on your settings. There are loads of ways we can change the links, including:

• Change the text of “Newer Posts”, “Home” and “Older Posts”.
• Add images to the links
• Replace text with images
• Change position of links

how to add read more button or link after every post in blogger

Only Post Title and Short Text in Blogger's Blog Homepage

By default Blogger shows your whole posts on your blog's homepage and archive pages. If you write long posts this can be a real pain because your blog's homepage will grow in height a lot and your readers will have to wait a lot for it to load and finally if they are patient enough to wait your homepage load fully they will have to scroll a lot to view your blog's content.

There are many tutorials over the Internet that advices you to deal with this problem by modifying your blog template's HTML

limitations of blogger or blogspot or google blog

Summary of 10 Blogspot Limitations

 we can build website freely by using blogspot or blogger.com  . it has certain restrictions and limitation. 10 things you have to know before creating any website using blog..these are some of the

recent lables display on your blog site using html code

label widget

if you want to place all the label content at once place or scrolling as widget then following is the code for widget

<style>

/* Recent posts by labels

--------------------------------- */ 

img.label_thumb{

float:left;

margin-right:10px !important;

height:72px; /* Thumbnail height */

width:72px; /* Thumbnail width */

border: 1px solid #fff;

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);

box-shadow: 0 1px 1px rgba(0, 0, 0, .4);

}

#label_with_thumbs { text-align: justify;

font: normal 18px Port Lligat Slab;

float: left;

width: 100%;

min-height: 70px;

margin: 0px 10px 2px 0px;

padding: 0;

}

ul#label_with_thumbs li {

padding:8px 0;

min-height:75px;

margin-bottom:0px;

border-bottom: 1px dotted #999999;

}

#label_with_thumbs li{

list-style: none ;

padding-left:0px !important;

}

#label_with_thumbs a:visited {

    text-decoration: none;

    color: black;}

#label_with_thumbs a:link {

    text-decoration: none;

    color: black;}

#label_with_thumbs a { text-transform: none;}

#label_with_thumbs a:hover { text-decoration: underline;}

#label_with_thumbs strong {padding-left:0px; }</style>

<script type='text/javascript'>

//<![CDATA[

function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZljiLMdcDgz2R8dpmjTHL-FWJCC5q4ldPEsrklsyk8Fsr2uiJ-jgoMp4WM18dFZTgMqfggGO55JKb-FPH05wOtTqz9Myk1DtN6bwqYLDcqNOyMZXzbc-zYgjQXBrRxxpzSyxbG7CxU20/s1600/picture_not_available.png';}

var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)

document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}

else

if("summary"in entry){var postcontent=entry.summary.$t;}

else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}

else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}

var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)

{if(flag==1){towrite=towrite+' | ';}

if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}

if(displaymore==true)

{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}

document.write(towrite);document.write('</li>');if(displayseparator==true)

if(i!=(numposts-1))

document.write('');}document.write('</ul>');}

//]]>

</script>

<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script> 

<script type="text/javascript" src="/feeds/posts/default/-/INDIANTECHMASTER?published&alt=json-in-script&callback=labelthumbs"></script>

Replace INDIANTECHMASTER with lable name which you want to tag recent posts 

HOW TO REMOVE AND CUSTOMIZE YOUR BLOGGER ATTRIBUTION

     If you are using a template which is built in  Blogger Template Design, then you find e an attribution at the bottom of your blog. by default, Blogger templates include attribution gadget at the bottom of each template. The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may noticed that gadget is locked and you are unable to delete ,you can only add some text to the "Copyright" statement from the widget.here is the process to remove your blogger attribution........................

Steps :

Important Notice : Always Back Up Your Templates before Making Any Changes On it.

1. Go to Design > Edit HTML

2. Expand your Widget Template.

3. Click Ctrl+F for the browser Find bar to pop up.

4. Search for the code below in your template.

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

5. Now change the locked value 'true' to 'false' in the line of code.

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

6. Now find the code similar below,

<b:section class='foot' id='footer-3' showaddelement='no'>

7. Now change attribute value showaddelement no to yes as below,

<b:section class='foot' id='footer-3' showaddelement='yes'>

8. Save your template.

9. Go back and navigate to Layout tab.

10. Find Attribution element bottom of your page.

11. Click on Edit

12.  Now click on Remove button.

Now Attribution element has been removed. You can add another element using basic gadgets bottom Add a Gadget link to add custom attribution.

CSS CODE:CHANGING AND CONTROLLING COLOR TEMPLETE

CSS CODE CHANGING AND CONTROLLING COLOR TEMPLETE

\\

#header {

margin-top: -10px;

margin-bottom: -10px;

margin-left: -0px;

margin-right: -0px;

}

body {

margin: -59px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-align: center;

font-family: arial,verdana,helvetica,tahoma,Sans-serif;

font-size: 100%;

width: 100%;

}

.widget {

background-color: #;

color: #546554;

}

/* For pages and posts */

.hentry {

background-color: #555654;

color: #256589;

}