Blog Tech World

It's a faith in technology.

Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. Show all posts

Stylist Blog Archive

Length of the Blog Archive material are increased several times so that the readers to see him constantly have to scroll it. But we have some option to make Blog Archive fit on a small windows and we can see all blog archive in once at a time without using any scrollbar. It’s a nicely coded Script using for fit your Blog Archive in Small Box with Marquee Animation.



Code 1
Layout>Add a Gadget>HTML/JavaScript


<marquee scrollamount="2"
direction="up" loop="true"><script language="JavaScript"
src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fblogtechworld.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=999&desc=0&date=n&targ=n"
type="text/javascript"></script><noscript><a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fblogtechworld.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=999&desc=0&date=n&targ=n&html=y">View
RSS feed</a></noscript>
<!-------------http://www.blognlike.com ------------------>
<!-------------http://www.blogtechworld.com ------------------>
</marquee>

Code 2 (If you bring your mouse over the content will stop.)
Layout>Add a Gadget>HTML/JavaScript

<marquee onmouseover="this.stop();" onmouseout="this.start();"scrollamount="2" direction="up" loop="true">
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2F blogtechworld.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=999&desc=0&date=n&targ=n" type="text/javascript"></script><noscript><a
href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2F blogtechworld .com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=999&desc=0&date=n&targ=n&html=y">View RSS feed</a></noscript>
<!-------------http://www.blognlike.com ------------------>
<!-------------http://www.blogtechworld.com ------------------>
</marquee>
Add any one code of them.Note:- Change blogtechworld.com to your own blog url.
1:03 AM

Add Yahoo Smileys Emotions in blogger

You may notice that this blog has a feature : Yahoo emoticons above blogger comment form. Yup, it allows visitors too use combined character to shows yahoo emoticon on their comment. It could be useful for your visitors to express their emotion by giving smiley emoticons on blogs comment (smile, laughing, wink, big grin, frown, etc).


If you want to add yahoo emoticons above comment form to your blog, first it is better to set your blog "comment setting", set its placement to "Embedded below post". How? Go to Settings - Comments - set Comment Form Placement to "embedded below post". Done? good, lets move to the next steps:

1. Go to Layout - Edit HTML - click (tick) Expand Widget Templates (don't forget to backup your template)

2. Copy and paste this code just before </body>

<script src='http://sites.google.com/site/angga123site/smiley.txt' type='text/javascript'/>

3. Find this tag <b:if cond='data:post.embedCommentForm'>

4. Copy and paste the code below just after
<b:if cond='data:post.embedCommentForm'>

--------------------------------------------------------------------------------------

<div style='overflow:no; width:100%px; height:100%px; padding:5px 5px 5px 5px; background:#FFFFFF;'>
<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>

 5. Done! Save your template now!
 Now you can see the result whether yahoo emoticons above blogspot comment form is worked.
3:42 AM

Customize Blogger Fonts And Colors

Here's what it means. If you want to quickly change some colors or fonts, you'll go to the Layout --> Fonts and Colors page like the one on top. This is the easiest way to customize your own template if you don't know how to play around with the code.

But sometimes the things you can change are limited. For example, if you use the basic templates provided by Blogger, you have only about 10 - 20 items to customize. Other free templates also provided a limited number of things to change from, at most probably about 40 items.

But when using the templates provided here at Ourblogtemplates.com, you can change around 70 - 100 items, depending on the templates you use. That's way a lot more than the rest. This option is great if you got easily bored looking at the same templates, or if you want something a little bit different with your own taste.

If some of the items you want to customize don't change if you choose different colors or fonts, don't worry because those items might have been left there from a previously designed templates and are not meant for the templates you're using. The rest of the customizable items will work just fine.

If you're still not sure what I mean by all this, just try using one template designed here on a test blog that you can easily create (don't try on your main blog yet if you're not sure). You'll see how easy it is to customize the template.
3:38 AM

Move to Top of Page For Blog

Send to top is nice tool for blog. If you writing long long article on your blog and visitors want to bottom to top by mouse scroll is taken two much time. This sort tutorial and code helps you to solve you problem. Now Learn How to Add Send to Top Code For Blogger.

1. Login to blogger.com and go to Design and then click at the Page Elements
2. Next thing that you need to do is click the 'Add a gadget'
3. Choose and click the HTML/JavaScript button. Then, a HTML/JavaScript box will be appeared.
4. Copy and paste the code shown below in the 'HTML/JavaScript' below.

<!-------------blogtechworld.com Send to Top Code------------------>
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:130px;' title='Back to Top'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgNDN5AdBbjgScfnt5cl1PvpYWqqyEUAbYLbIXqHjrM6Y3lGET4kOGbphQ8DE38_-MkK_-2NKH0PFFkL82iBeDzbNGk-QLLquBfkwuGgf2GSYifvBVHIRnpSbAdWEmXy1tPOuU3mtrq1e/s1600/Arrow+Up.png '  
alt="blogtechworld.com" width="50" height="70" /></a> <!-------------http://blognlike.com ------------------>

<!-------------blogtechworld.com Send to Top Code------------------><a href='#' style='display:scroll;position:fixed;bottom:5px;right:130px;' title='Back to Top'><img src='  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IDfiuZq-0b5XEroigsI1d-cAhU6m1VYUSzv8pBJcTn_-XHtBy9t24x0hXhQOFpg7BpjRxCuBjCD2kXfVxjg1qkwz5qr71ciCFLFBYgy8YIBxHweOlsd-mJObn3gyTmECy7LdW-NoEvf9/s1600/Up+Arrow+Image.png  '  alt="blogtechworld.com" width="50" height="70"/></a> <!-------------http://blognlike.com ------------------>


 <!-------------blogtechworld.com Send to Top Code------------------><a href='#' style='display:scroll;position:fixed;bottom:5px;right:130px;' title='Back to Top'><img src='   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFty6lW7te7vkXqssiOgQpvhf7Y-WilSFS3CtV5MZMlEac_nc7KSbYmi9p8WF6Xa3H5gApKmN-dzLrv5Zggv1T09ENNH9knchGN86RrJhd5hYrNWfJ2WuTCkYOf8EZAP2QxRf13QLgpQeb/s1600/up.png   '  alt="blogtechworld.com"width="50" height="70"/></a>  <!-------------http://blognlike.com ------------------>

Choose any one of them and Enjoy Using Send to Top.
6:40 AM

Google Plue (+) Button Before Each Post

Google plus is fastest growing social networking site because of Google and today I am writing about how to add Google button. This is a Quick and Easy method of adding Google Plus Button on Each post of Blog.

Locate this code in your HTML code (For blogger users, go to Design > Edit HTML. Then, tick expand widget templates)

Add the given code below just above the </head> tag.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Search  <div class='post-header-line-1'/>

If you can not find <div class='post-header-line-1'/> in your blogger template, paste your google plus one button code just after <data:post.body/>

Now Copy Given Code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

Save You Work and Open Your Blog For See The Changes
11:49 PM

Add to Homepage Code

What made your blog popular....Visitor and Your Valuable Contacts. Blogger have to provide Friendly Interface for there Visitors to re-visit on there Blog or Site. Now this code shown how to add code for Visitors click and get your blog add to Home Page. This is really very useful code for Blogger to re-visit there visitors.



Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)
<!--  http://www.blogtechworld.com -->
<FORM>
<INPUT TYPE="button" VALUE="Make This Site Your Home Page" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.blogtechworld.com');">
</FORM>
<!--  http://www.blogtechworld.com -->
Save Your Changes and Open to Check Home Page Button Code.
Note :- Change http://www.blogtechworld.com' to Your Own Blogger Url.

You can also Modify with add Home Page image to Make more attractive.
10:45 PM

Moving Title Blogger Code

Blogger Always Want to Show there Blog Unique and Different From Other Blog. They Spend Lots of Time to Make There Blog Unique and Beautiful. Benefit of Unique Blog is User may return on you blog again and again. Today I am Showing How to Add Moving Title in Your Blog. This is also a good code to Impress you blog visitor.

Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)
<!--  http://www.blogtechworld.com -->
<SCRIPT language=javascript>
msg = "Welcome in blogtechworld";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos >  msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
    </SCRIPT>
<center>
<a target="_blank" href="http://www.Blogtechworld.com/"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDl8gy0mxIpQKVJiiQxP3T0KpkQPem7wA6f3EMkYyz4zTBkvhcWDy8QrVft7DZIVR0gMtEc4-30Y1j9hhC98aBx0b3B9o8vw62L6qgxdKr_d1IfbNR63-sB_DaYN3r59mGB62vS-ExaobX/s1600/button.png"><br> <a href="http://blognlike.com/">
<img border="0" src="http://blognlike.com/button/button1.jpg" alt="Blog 'N' Like - Blogger Social Community" width="100" height="30"></a></center></a></img>
Note : Change Welcome in blogtechworld to Your Own Massage Want to Shown to Your Visitors.
Save Your Template and Open Your Blog to See The Changes.
1:15 AM

Bookmark Us Button Code For Blogger

Add Bookmark Us link in your blog and keep the connection between new and old blog visitors. Follow some given steps and give your blog new look.


Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)


<!-------- www.blogtechworld.com--------->
<script language="JAVASCRIPT" type="TEXT/JAVASCRIPT">
var url = "http://www.blogtechworld.com";
var title = "Make Blog like Web Site";
function makeLink(){
if(document.all)
window.external.AddFavorite(url,title)
}
</script>
<a href="javascript:makeLink()">
<img Src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsWelWmIXptOsDrNyAUZZxrg5SOizpG49R4BBkpDB_S4elPHiMyqlmUJQHQCp5LOh2BvUmaKAOZRT28SoIUi08H1y6mShRZ4i6yn-2zPdTU6C0l35dp5sFG_ae-daV7VLSZB-FOBlNkbx/s1600/faves_button.gif"></a>
<p></a>



Note :- Don't Modify any Code. Change http://www.blogtechworld.com and Make Blog like Web Site
4:00 AM

Popup Window for Blogger

If You want to Popup You another blog use this code for popup. This code is nicely written in Java script and Popup block can't block. its mean its a forcefully open you another blog. If you have more the one blog this is use full tricks for you.

Follow Some Instruction to Add Popup code in Your Blog

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<script type="text/javascript">
document.body.onclick= function(){
window.open('http://www.blogtechworld.com/', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=800, height=800, left = 300, top = 150');
}
</script>

Change www.blogtechworld.com to your own blog. Save You Sating and Open You blog to See the Changes.
2:08 AM

Stylist Feedburner Email Subscribe Box For Blogger

Feedburner Subscribe is one of the best method to attach your blog reader. If you are posting valuable post for reader your reader will be subscribe your blog using Feedburner Subscribe. if you are building a high traffic site, this is an important point. When you publish a new post, it is blasted out to your RSS subscribers and that takes bandwidth from your site. When you enable Feedburner, you are sucking bandwidth from the Feedburner site. This will become more and more important as your blog grows. Feedburner providing Email Subscribe box is simple and some time your visitors can't attract to Subscribe now you can replace Feedburner Email Subscribe box to your own customize Attractive Feedburner Email Subscribe method is given below. Try it and Attract your blog Visitors to Subscribe Your Blog.


Copy Entire Code given Below and Paste at your Desire place.



Note :- Change bloghacktips  to Your Own Feedburner Id
10:06 PM

Special Characters in Blogger

Add Special Characters For Blogger Like Copyright, Registered trademark

 &trade;    ™       Trademark
&amp;      &        Ampersand
&reg;       ®        Registered trademark
&copy;     ©        Copyright
&dagger;  †         Dagger
&raquo;    »         Right pointing double angle quotation mark
&laquo;    «         Left pointing double angle quotation mark
&#151;   —         Em-dash
&deg;     30°       Degree
&frac14; ¼         Quarter
&frac12; ½         Half
&frac34; ¾        Three quarters
&middot; ·         Middle dot
&iexcl;     ¡         Inverted exclamation mark
9:40 PM

Print This Page For Blogger Code

Lots of blogger providing lots of good article and visitors want to take a print out of thees article. Student also want to directly take a print out of blog post. "Print This  Page" This Code save your Visitors time to make copy and paste in Word Document and it also shows nice Impression to your blog reader.

 Go to Layout–>Page Elements then Add a Gadget–>HTML/JavaScript Add Code given below.

<!--  www.blogtechworld.com-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"> To Print this page!</form>');
}
// End -->
</script>
<!--  www.blogtechworld.com-->
Add Print This Page Just Below Header.
Press Ctrl + f & find <data:post.body/> you'll see some code like this:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Paste the code just before the above code.
<div class='post-body entry-content'>
Your Code Goes Here
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Save Your Template.
Open Your Blog and See the Changes.
9:14 PM

Google plus (+) widget for blogger and WordPress

Google plus is Most Popular Social Networking Site and Fastest Growing Social Networking Site. Its Added approximately 20 million users Having lots of New and good facilities  for Blogger. In Google Plus You can easily Add any User in Your Friends list and For Blogger and Webmaster You can shear you post with your Friends to get help to Improve Your Blog hits. Use Google plus to grow you blog hits. Now I am Writing about how to  Add Google plus (+) widget in You blog. Open Widgetsplus
Fill All required box and Click on get Code.

Login to your Blogger Account, go to Design then under the Page Elements Section go to Add a Gadget, from the given list find and choose HTML/JavaScript, paste the code there and click Save. Go back to your blog and preview it. Your Google Plus Widget will appear on the sidebar.

Google plus (+) widget for WordPress
But if you are a WordPress user, just login to your WordPress Dashboard, under Appearance section click on Widget. From the Widgets available find Text, click on it and drag and drop it on the sidebar, paste the code and save it.
2:19 AM

Google translate For blogger widget

Google Translate is a tools gives opportunity to translate you blog language to visitor desire language. Its a great tool provided by Google. Google Translate tools help you to become a popular blogger become a far from you language This tool also helps you visitors to understand you post in there own language. Try this....


Go to Layout–>Page Elements then Add a Gadget–>HTML/JavaScript Add Code given below.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Save Your Template. Open Your Blog and Try Your New WIDGETS.
1:47 AM

Resize thumbnails image in blogger

Some time Blogger want to increase or decrease size of thumbnails image of our blogger post. Blogger admin want to adjust Image as per there requirement. This template Hack shows how to resize thumbnails image in blogger post. You have to made some changes in you template.
Note: Must Take a Backup of Your Template Before Changes any Code.




Search Using Ctrl + F 
var thumbnail_mode = &quot;float&quot; ;
Search Code Look like this
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 200;
img_thumb_width = 200;
</script>


Change Numerical value of 200 

img_thumb_height = 200;
img_thumb_width = 200;

Save Template and See Your Changes.
9:33 PM

Adsense below post title in Blogger

Adsense in One of The Most Paying Advertisement Network and Most of The Blogger want to raise money from Adsense. Blogger below Post title is the best place for show your Advertisement. Use can easily see your Adsense Ad, visitors might be click on you ad and  you can earn good money. Around the blogger title is the best place for show your advertisement. Today i am writing about  How To Place Adsense Below Post Title. Its very simple, follow some steps.

Adsense below post title in Blogger
1. Make Compatible with Blogger format. Convert Your Adsense Code (Convert Adsense Code Here)
2. Login in your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.
3. Take a BACKUP of Yoru Template 
4. Press Ctrl + f & find <data:post.body/> you'll see some code like this:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

5. Paste the converted ad code just before the above code.

<div class='post-body entry-content'>
Your Adsense Code Paste Here
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
6. Save Your Template.
7. Open Your Blog and See the Changes.
11:36 PM

Open Blogger Link in New windows

If You want to open your all link in New windows try this code. All Blogger hyperlink will open in new windows will help you to write code for all link its save you time.

1.Login to your blogger dashboard--> Go to Template >> Edit HTML. (In old blogger Go to Design ) Edit HTML>> And then click on Expand Widget Template.

2. Search Using (Ctrl + F) <head>

3. Now copy below code and paste it just after <head> tag

<base target='_blank'/>

4.Click on "Save Templates" and you are done.
10:13 PM

Related Post Without Thumbnail For Blogger

If Your Want to Increase Your Blog Visitors Read Your Article in Your Blog this Widgets will helps for Spending more time on you Blog. Most of the Blogger using related post Widgets. this Widgets is also helping your visitors to show similar post want to read. Now try using Related post Widgets in your blog, Just Follow some steps to setup Related Post Widgets in your blog.


Go to Template >> Edit HTML. (In old blogger Go to Design ) Edit HTML>> And then click on Expand Widget Template.

Find </head> Using CTRL+F and just above it paste the code given below. 

<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }


#related-postz a { text-decoration : none; }
#related-postz a:hover { text-decoration : underline; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url(&quot;&quot;) no-repeat 0 0;
padding-left : 21px;
padding-bottom : 1px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blognlike.com/amrit/Host/related.js' type='text/javascript'/>
Find <data:post.body/> and just below it, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postz'>
<font face='Verdana' size='4'><b>Related Posts:</b></font>
<b:loop values='data:post.labels' var='label'><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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script><div align='left' style='font-size:12px'><a href='http://blognlike.com'>Promote Your Blog</a>
<div align='right' style='font-size:11px'><a href='http://www.blogtechworld.com/2012/02/related-post-without-thumbnail-for.html'>Add This</a></div></div></div>
</b:if>
Save Your Template and Open Your Blog to See Changes in Your Blog. If you Got any Error Please Put Comment here we will feel happy to solve your error.
2:23 AM

Colorize Author's Comment in Blogger

If you write a post that many of the questions are asked and you want to answer there question. It is helpful for any good blogger. in this tutorial you can learn how to Colorize Author Comment or Reply by the Admin of that particular Query Asked by User.

1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box:
2. Find the following piece of code ]]> in your blogs Html : (Click Ctrl and F for a search bar to help find the code )
3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

4. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line and work from there.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>


5. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in blue.

<b:if cond='data:comment.author == data:post.author'>
<dd>
<p><data:comment.body/></p>
</dd>
<b:else/><dd>
<b:if cond='data:comment.isDeleted'>
<span><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd>
<span>
<a expr:href='"#comment-" + data:comment.id'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

6. Save Your Work and Try Your Colorize Comment Box.
9:34 PM

Add Google Adsense To Blogger Header

Today I am Writing About How to Add Google adsense ad in Blogger Header. Header is good position for your Ad. Its Generate good money. Most of the successful blogger and Blog You can found Ad in header position.

Demo

Login to Your Blogger Account- Take a Backup of Your Template (Learn About Backup of Your Template).

Check the expand widgets template box.
Found Using Ctrl+F <divi id='outer-wrapper'>

And Paste Given Code Below Just below.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='header1' locked='true' title='how to blog (header) 'type='header'>

Search Again maxwidgets='1' and Change 1 to 3
Save Your Template.
Your Blog is Ready For Add Header Adsense Ad. Now Your Can Add Your Ad with Header Area.
3:02 AM
Subscribe to: Posts (RSS)
 

Receive all updates via Facebook. Just Click the Like Button Below

▼

You can also receive Free Email Updates: