Showing posts with label web development. Show all posts
Showing posts with label web development. Show all posts

How to Change Blogger Header font Size


I thought this is very simple tips but useful.   Fast log in your blogger account.  Go to the Design> Edit HTML .

Find this code or some think like that.

#header h1 {
font-size:42px;
font-size-adjust:none;
font-weight:bold;
letter-spacing:-1px;
line-height:normal;
margin:5px 5px 0;
padding:1px 1px 3px 0;
text-transform:none;
}

Change  font-size:42px; and save your template.

Posted by: Noor Elahi Shibly 7 comments
Labels: , ,

How to Add Smiley Icon in blogger Comment



Fast log in blogger.

Go to Design> Edit HTM and find this code and click

<b:if cond='data:post.embedCommentForm'>

Paste this code after <b:if cond='data:post.embedCommentForm'> code.

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

You have also find  </body> and paste this code just after.

<script src='https://sites.google.com/site/neshibly24/tuakurti/smiley.js' type='text/javascript'/><noscript><a href="http://blogger-shibly.blogspot.com/" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Now save your template.

Scorch:  http://bloggerstop.net/ and http://MyDataNest.com
Posted by: Noor Elahi Shibly 13 comments
Labels: , ,

How to Change Blogger blog Post font Size


Much time we need to change our blog post font size. We can do it easily.

  • Fast log in your blogger account and go to Design> Edit HTML
  • Now fond this code or some think like that.
.post h3 {
color:#007ACC;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:25px;
font-weight:normal;
text-align:left;
line-height:1.4em;
margin:0;
padding:0 0 8px;
}

  • Change the font-size: or don’t remove the px;.
Just save your template.
Posted by: Noor Elahi Shibly 3 comments
Labels: , , ,

How To Add Widget Beside The Blogger blog Header

How to add widget beside the blogger blog Header? It is very easy and useful to add adsense winget.


1. Fast log in your blogger. Go to Design > Edit HTML and find this code and knew your blog size

#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

2. Now find

#header {
color:#000000;
text-align:left;
}
Some think lick that.

3. Change to

#header {
width: 400px;
float: left;
margin: 5px;
text-align: center;
color:#000000;
}
#header-right {
width: 400px;
float: right;
margin: 5px;
color:#000000;
}

This way you will get header to right and the sidebar widget section to left.

4. Now comes the part where it would add a widget section to blogger header. Find the bellow section:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="YOUR BLOG TITLE (Header)" type="Header">
</b:section>
</div>

5. And replace it with:

<b:div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="YOUR BLOG TITLE (Header)" type="Header">
</b:section>
<section class="header" id="header-right" showaddelement="yes"></section></div>
</b:section>
</div>

Now seve your themplate.
Posted by: Noor Elahi Shibly 5 comments
Labels: , , ,

How to Change Post Title Font Size Blogger Blog

Go to Design>HTML and find the following code:

.post h3 {
color:#007ACC;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:25px;
font-weight:normal;
text-align:left;
line-height:1.4em;
margin:0;
padding:0 0 8px;
}

Now change size and save template.
Posted by: Noor Elahi Shibly 60 comments
Labels: , , , ,

How to use custom favicon in blogger blog

For those who don't know what Favicon is 'Favicon is a small icon(image) displayed at the beginning of the address bar of the browser.It is also called Favourite Icon,Pageicon and urlicon.


The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.





Follow those steps to add your favicon in blogger blog.

1. Fast Create a 16x16 .png format icon.

2. Upload it any host. You can also use draft blogger post.

3. Now the favicon link copy a notepad and log in in your blogger dashboard > layout> HTML.

4. Press CTRL+F and find <title><data:blog.pageTitle/></title> code.

5. Add <link href='PNG FORMET ICON LINK' rel='shortcut icon' type='image/png'/> code just after <title><data:blog.pageTitle/></title>.

Now save your Template.
Posted by: Noor Elahi Shibly 4 comments
Labels: , , ,