Try Advanced Blogger Templates Search >> 
Blogger Tricks / Other
Some Other Blogger tricks that don’t belong to any specific section on our blogger tutorials sections.
-
18The Art Of Writing Best Content
Blogging, with no doubt, has revolutionized our lifestyle today and the possibilities and effects of blogs seems endless. Blogs have become our medium of expression and it looks as there is nothing we can’t do without blog. Blog have not left even minor aspects of our life to be changed and it’s effects are seen to be limitless. Most interesting, you do not even require any technical knowledge for getting and running up a blog in no no time and the best part of it, vitally anyone can do it at ease. With some basic blogging framework sketched on your mind and with original qualitative and unique information published in your blogs, you can even make some extra cash out of it with very less effort. But to make most out of it, it requires your true enthusiasm to blog and your ability to carve some engaging content out there. If it is a problem for you, that’s where I’m going to make a breakthrough today and teach you how to enhance your art of writing best content ever!
If you are already running a blog by now, you must have known that your content is the best traffic generator for your blog and traffic is the blood of your blog. It is the information people are looking for in your blog, and if you are able to provide them with it, you can have a successful blog running up out there. But writing a better content is not an easy job every time and you have to keep several things in mind while writing the article for your blog. I’m sure the following tips or hints will be a great help for you to increase your blogging quality. Make sure to check them out:
1.Research, Research and researchIf you are not well known or not confident enough to carve your posts smartly, research a lot. In such cases, what I usually do is I find out several articles about my topic in internet and download and print them. I then sped my time reading all of them carefully and highlighting the important part of them. I sketch a rough article or draft. Then when I start my actual writing, I keep all those articles spread around me and I try to include the highlighted points. Try this trick. It is very easy, effective and not much time consuming. This is the best trick I use myself to write down the posts.
2. Personal, engaging and straightWhile writing posts, consider making them more personal engaging and straight. While you write your posts, add your personal touch and tone. This encourages the reader to continue reading and it makes them feel that somebody personally is teaching themselves. Make your post engaging, by trying to involve interesting facts, examples and blueprints. But always remember to put your thoughts in a straight manner so the readers aren’t distracted. Writing in points and help you doing this. Try your best to make your posts reader friendly too!
3.The KISS techniqueI did not invent this term but at least, this is my one of the favorite abbreviation in blogging. It is the short form of KEEP IT SHORT AND SIMPLE. Yes, always keep your post simple and short and meaningful. Long posts may get your readers bored so make your post compact while also interesting because people nowadays want a lot of things very fast. You blog will be appreciated if you keep your blog post short and simple.
4. The title of your postAs Daniel Socosso said, Until you carve out your title smartly it will be the first and last thing that your reader will read on your blog. Title summaries your post and encourages to read the rest of the article. A catchy and unique post title makes your half business done and it is equally important as your post’s body. No matter how nicely you write your post body, if your title is bulky and boring, nobody would want to read your post. So don’t ever hesitate to spend as much time you can with your headline and come up with the best matching title for your post. Take suggestion from family and friends, do some research and use suspicious and staggering words that can easily drive the attention of the reader of your blog and have the best title you can ever think of.
5.The more you edit the better the content gets.If you try this one, I’m sure you’ll really have a nice article with you. What I do to all of my posts is when I prepare a finished copy of my post, I do not publish it straight away. I keep it for a while (about 2-3 days) and work on other posts. Meanwhile I often have look on that post, read it and edit my the post. I do it many times and more I edit my article, consequently the better it gets. It helps you to have better content than the time you wrote it.
6.Final Proofreading.Grammatical, informational, spelling and other types of blunders in your post can hamper it’s quality a lot. It can also decrease the reputation of the blog and blogger himself. So don”t rush to hit that Publish button just yet. Try to check for every kinds of errors and if there are any, correct them immediately.
Remember that the popularity, reputation, traffic’s volume and your success as a blogger depends upon how you write and carve your content.These steps are really very very effective and they help you to come up always with better content. So be consistent towards your content of your blog and watch the success coming your way.
-
Add Stylish Menu To Your Sidebar And A Very Easy Way To Use And Customize It.
Some people contacted me asking about how to add a beautiful menu to a blogger blog sidebar, Today i’ll learn you in a very easy way how to add a menu to your sidebar and how to customize it’s colors to blend with your blogger template colors.
Adding the horizontal menu to your blogger blog.Go to your blogger account, and go to Dashboard >> Layout >> and on your Page Elements page, click Add A Gadget and choose HTML/JavaScript Add then copy the next code and paste it in the HTML/JavaScript Content area.
<style type="text/css"> /* Made By AllBlogTools.com */ #ddblueblockmenu{ border: 1px solid #000000; /*Main Border Color */ border-bottom-width: 0; width: 100%; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu a{ display: block; padding: 3px 0; padding-left: 9px; width: 94%; /*94% minus all left/right paddings and margins*/ text-decoration: none; color: #ffffff; /* Menu Font Color */ background-color: #2175bc; /*Menu background Color */ border-bottom: 1px solid #90bade; /*Bottom border color */ border-left: 7px solid #1958b7; /*Left border color */ list-style-type:none; } * html #ddblueblockmenu a{ /*IE only */ width: 94%; /*IE 5*/ width: 94%; /*94% minus all left/right paddings and margins*/ } #ddblueblockmenu a:hover { background-color: #2586d7; /*Menu background Color On Hover*/ border-left-color: #1c64d1; /*Left border color On Hover*/ } #ddblueblockmenu div.menutitle{ color: #ffffff; /* Title Font Color */ border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: #000000; /*Menu Tite Background Color*/ font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } /* Made By AllBlogTools.com */ </style> <div id="ddblueblockmenu"> <div class="menutitle">Browse</div> <ul> <a href="http://www.allblogtools.com/">Home</a> <a href="http://www.allblogtools.com/about/">About us</a> <a href="http://www.allblogtools.com/category/blogger-templates/">Blogger templates</a> <a href="http://www.allblogtools.com/category/tricks-and-hacks/">Blogger Tricks</a> <a href="http://www.allblogtools.com/blogger-tools/">Blogger Tools</a> <a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/> </ul></div><font size="1">Menu By <a href="http://www.allblogtools.com/">AllBlogTools.com</a></font>
Now click Save And you are done, please check your blog.
Now we’ll learn how to customize the menu colors to me it looks perfectly with your blogger template Or you can just leave it as you see it.Customize the menu colors.Now please look at the code above, you’ll see some codes are written in colors. in the above code i described what each part responsible for. All what you have to do is to go to our Html hex colors generator And get your favorite color code then paste it instead of the color code in the above code.
For example if you want to change the background color for the menu.
you’ll find a line that saysbackground-color: #2175bc; /*Menu background Color */
Just change 2175bc to your favorite color code that you got it from our Html hex colors generator
If you find the above code confusing or can’t understand what in the elements names in the menu, please check out the next image.
Demo.To see demo for this menu please click here, And please don’t hesitate to leave you comment if you need any support.
-
Create a Customized Text Area In Blogger Using Simple CSS
Summarized and precise posts are always appreciated by both visitors and search engines. Text Area or Text Boxes are indeed an easy way to share large bulk of codes with your readers. Bloggers who write tutorials in designing or development field, often share CSS, HTML, XML and JavaScript codes inside a BlockQuote. This method can surely be adopted but only for showing short codes or written text but if you want to share really long and bulky codes then the only way to keep your page load-time low and yet share such long codes is to use Text Areas.
How is a default text area looks like?
See an example of a text area below to get an idea of what it actually is.
What’s New Here?I am sure you didn’t like the grayish look of the box above and wish to add some colors and effects to it. Now see this demo –> Customized Text Area
Lets now learn how to add this cool effect to our text areas. Follow the steps below to add a highly stylized and customized text area in your blogs,
Step 1.Paste the code below just above
- Go To Blogger > Layout > Edit HTML
- Search for
</b:skin>
- Paste the next code above it.
.mbt-textarea { padding:0; margin:0; width:400px; height:40px; color:#0080ff; font:12px arial; background:#fff; border:1px dotted #289728; } .mbt-textarea:hover { color:#289728; border:2px solid #666; } .mbt { padding-top:3px; margin:0; color:#289728; font-size: 9px; font-family: sans-serif, verdana; }Now click Save Template and you are done!
How to use it in your postsNow when ever you write a post use the HTML code below to display a text area,
<textarea class="mbt-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea> <p class="mbt" ><u>Press "Ctrl + A" to Select and "Ctrl + C" to Copy </u></p>
You just need to replace WRITE-TEXT-HERE with your bulky code or text. The bolded black text appears below your text area and it instructs your readers how to easily select and copy your codes. If you don’t want this text to appear below the text box then simply delete the code in blue and black
How To Customize The Text AreaI am rewriting the CSS code above with explanation of each part,
.mbt-textarea { padding:0; margin:0; width:400px; height:40px; color:#0080ff; font:12px arial; background:#fff; border:1px dotted #289728; } .mbt-textarea:hover { color:#289728; border:2px solid #666; } .mbt { padding-top:3px; margin:0; color:#289728; font-size: 9px; font-family: sans-serif, verdana; }1) If you want to decrease or increase the height or width of the text area, simply edit
width:400px;
height:40px;2) To change the color of the text in active mode change the six digit code in this code,
color:#0080ff; (Use our Color Chart to use a color of your choice)
3) To change the color of the text in Mouse hover mode, edit this,
color:#289728;
4) To change the border width, style and color in active mode edit this code,
border:1px dotted #289728;
where, width is 1px, style is dotted and colour is #2897285) To change the border look in mouse hover mode edit this,
border:2px solid #666;
6) To change font size and family, edit this,
font:12px arial;
where 12px is the size and arial is the default family that I have used.7) To change the color and font size and family of the text “Press "Ctrl + A" to Select and "Ctrl + C" to Copy “ edit this code,
.mbt {
padding-top:3px;margin:0;
color:#289728;
font-size: 9px;
font-family: sans-serif, verdana;
}
That’s All! I hope this tutorial will help you greatly in controlling and styling your text areas in a far better way. Kindly do not hesitate to ask any question. Your question is more than an honor for us. Take care! :>
-
How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.
Hi all, few days ago i made and added here a new tool called Html Character EnCoder., For more info about this tool and to know more about how to use it please Check out this tutorial.
The previous tutorial let you know in general way how to add a code, for example HTML code. to blogger posts.
But today we’ll discuss and learn how to make you code box looks better and how you can make it looks very professional.So, what’s now in this tutorialIn the previous tutorial i told you how to add code to your blogger post but in this tutorial i’ll teach you how to style your code box and how to post the code in a professional way.
If you still don’t understand please click here to see a demo for the final result.so please concentrate with me and lets do it.
Step 1. Adding the box style code for your template.In this step the first thing to do is to choose on of the following four styles for your code box.
Once you see your suitable one, please copy it’s code and continue reading.Box Style 1
The box style 1 code
.code { margin : 15px 35px 15px 15px; padding : 10px; clear : both; list-style-type : none; background : #f9f9f9 url(http://3.bp.blogspot.com/_JwD5r652h00/Sz4Esk9Y2RI/AAAAAAAAATw/xFgoODUfT-o/s1600/codeview1.gif) no-repeat right bottom; border : 2px solid #eeeeee; color : #7D7D7D; }Box Style 2
The box style 2 code
.code{ margin : 15px 15px 15px 15px; padding : 40px 10px 10px 10px; clear : both; list-style-type : none; background : #f9f9f9 url(http://4.bp.blogspot.com/_JwD5r652h00/Sz4NtBq_x2I/AAAAAAAAAUQ/Yhuy_jUjoGg/s1600/codeview2.gif) no-repeat left top; border : 3px solid #eeeeee; color : #7D7D7D; }Box Style 3
The box style 3 code
.code { margin : 0 20px; padding: 70px 20px 20px 40px; background : #F9F9F9 url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4PoFSlT4I/AAAAAAAAAUg/OxL6lQ-En1I/s1600/codeview3.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #BFBFBF; }Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af
Box Style 4
The box style 4 code
.code { margin : 10px; padding: 0px 25px 5px 20px; background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left; font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #767675; border: 1px solid #767675; }After you find your favorite codebox please copy it’s code and go to your blogger account. navigate to Dashboard >> layout >> edit html, and find the following code then paste your codebox code before it.
]]></b:skin>
Note that, you have to copy and paste your code box code before the above code.
Step 2. Customizing your code box style.In this step you can customize your code box style to give it your unique colors, And you can pass this step, it’s not a must to do step.
If you’ll pass this step please click Save Template
Now and move to step 3, Or just keep reading.To customize your box first you have to open our html hex color codes generators.
Then if you have noticed that the box code have three values in red, green and blue color, you can change this values to your favorite by generating your color code using our color codes generator.
and here is what each value responsible forRed : Box Main Background. Green : Text Color. Blue : Border Color.
After making you modifications Please click Save Template
Step 3. How To Add Any Code For Your Blog Posts.This step explained in my previous Click here to see it, .
But the difference here is that you wont paste the generated code directly in your post, you have to put it between the following tags,<div class="code"> Your generated code should added here </div>
I hope you all got it and understood how is it work,
and Again here is the a demoblog to see it in action, and please don’t hesitate to leave your comments for any questions.
-
Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.
hi all, few days ago, one of my visitors asked my about how to hide the blogger navbar and make it appear when hovering it.
actually i liked the idea and i thought it would be great to make it. so i’m here today to tell you how, it’s very easy and it’s one step process and it’s all done by tweaking blogger navbar code.Please read before adding it to your blog.- If you already applied the hack ( How To remove or hide Blogger Navbar ) to your blog, please undo it before you start.
- This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.
And I added a hack for the code to make the navbar work normally in case of finding any IE bugs.
Adding the code to your blog.Please log into your blogger account.
Now navigate to Layout >> Edit html >>
and find the following code :]]></b:skin>
And Before it, add the next one :
#navbar-iframe { height:5px; } /* IE7, IE8, IE6 */ #navbar-iframe { height/*\**/: 30px\9; } #navbar-iframe:hover { height:40px; !important; }Now click Save Template
And You Are done,Demo.please click here to see demo, If this hack is not supported with your browser try to see it in another browsers ( Firefox, Chrome, or opera) .
If you like this tutorial, please share and follow me.
-
Add Mp3 player ( Music BackGround ) for blogger, + 20 Different Styles.
Aloha all, Lets see how to add cool and simple mp3 music player to blogger ( blogspot blogs ). it’s presented by mixpod
It’s the best one yet because you can choose you style from more than +20 styles, and you can also customize it, you can manage your play list and add any file you want from url or from the site database. it’s awesome choice so lets see how to do it.First Of AllYou need to register a free account at mixpod it won”t take you 2 minutes, then log in to your account and lets go.
Step 1. Choosing your mp3 styleGo to mixpod by clicking here
And choose your favorite style from over 20 different styles. then click on Create A Playlist
Once you find your favorite style click Create A Play listStep 2. Creating your play listThere are two ways to add you favorite music and songs
- Search the site database, it’s easy and I think you’ll find what you are looking for.
- Add new music file by adding it’s URL.
First Type a keyword to search the database, and once you find your song just click on add ( + ) icon next to it, Or just add your file if you have got it’s url.Step 3. Saving your playlist and Getting the codeJust give your Playlist a name and hit the button “ Save ( Get Code ) ”
Step 4. Adding it to your blog.Now you’ve got the code, go to your blogger account dashboard, and navigate to Layout, and on your sidebar click add a gadget. and choose HTML/JavaScript Add
then paste your player code and click SaveDemoClick here for demo
And now you are done, i wish you liked it, please comment and follow me.
-
Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.
Today we’ll learn a very easy and important trick, Specially if you have got a lot of content on you blog pages, And if you want your blog to be easy to use for your visitors, A back to top link or button on your blogspot blog will make it easier and faster to your visitors when it comes to fast exploring and browsing.
Ad
Now we’ll see how to add- 1. Image Back To Top Buttons With 19 Different Styles
- 2. Text Back To Top Link with different styles And Colors
1. Image Back To Top Buttons With 19 Different StylesStep 1Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.
]]></b:skin>
And before it add this code
#backtotop { padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; }Step 2Now find the following code.
</body>
and before it add the next code.
<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>
But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.
http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
After Replacing the Image-Url with your favorite button url, it should looks like this
<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a>
paste it into your template code,
Step 3Find the following code
<head>
And paste this code after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>
and then click Save Template
And you are done.2. Text Back To Top Link with different styles And ColorsStep 1Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.
]]></b:skin>
And before it add this code
#backtotop { width:100px; /* Change Box Width*/ background:#F4FFBF; /* Change background color*/ border:1px solid #ccc; /* Change Border Style*/ text-align:center; padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; color:#666; /* Change text color*/ text-decoration:none; }And please change it’s properties to fit and blend with your blog template,
Change 100 to lower or higher number to increase or decrease the size of the box.
Change 1px To change the border width.
Change #ccc to your favorite color code change the border color.
Change F4FFBF to your favorite background color code.
Change 666; to your favorite Text color code.
Note : You can get your favorite color codes via our new hex color codes generator here
Step 2Find the following Code :
</body>
And before it, Paste the following code.
<a href="#" id="backtotop">Back to top</a>
To change the text on the button, just change Back to top to what ever you want,
Step 3Find the following code
<head>
And paste this code after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>
and then click Save Template
And you are done.Want To See Demoto see it live please click here
-
11 Sites to find +1000 free twitter Buttons and badges
Now a days twitter getting more users and ranking in amazing rates, I think 100% of my friends , allblogtools.com visitors and blogger users are using it in regular basis, twitter have been a basic site that we all use it every day, and i can say every few minutes.
so we released a new tool few day ago. Twitter Static Badge Generator For Blogger., this is the first tool that enables you to put a twitter badge on your blogger blog in very easy steps. you can choose your own badge, and it’s position on your blog. left or right, top or bottom.
after releasing it. some of our regular visitors contacted me and asked about where to find free twitter badges to use it on their blogs.
And here is list of awesome 11 sites you can find more than 1000 twitter badges on it.
badges are usually in gif Or png formats.
to use a badge on your blog using our tool, you have to get the badge url, and it’s easy, just browse the 11 sites below. once you find your favorite badge, right click it. and in Firefox, select Copy Image Location, in Internet Explorer select Properties and copy the image URL then you can use this url in our twitter tool.here is the 11 sources.
1 . LimesHotFollow Me On Twitter Badges / Logos / Buttons
2 . randaclay
3 . Twitter Logos
4 . Siah DesignFREE TWITTER BUTTONS (Includes Animated GIFs)
5 . Vincent Abry31 Logos et boutons pour Twitter
6 . Twitter Buttons
7 . We Function
8 . U Stand OutFree Twitter Badges For Your Website or Blog
9 . WebDesign-In
10 . Juliusx @ deviantArt
11 . Twitter My Site
Please share and follow us if you found this was useful for you.
-
New Tool !! Twitter Static Badge Generator For Blogger
After reading a lot of your comments and mail messages about hot to add static twitter badge for your blogspot blogs.
I decided to start coding a script that generate you a code to add in your blog that display static badge for your twitter account, and i
Paid attention for four of your main needs in this new tool.
so what can you do with this Twitter Static Badge Generator For Blogger :- Choose The badge your self, which mean you can bring any image from the internet to be your own twitter badge
- You can control the badge position , you can make it, top left, top right, bottom left or bottom right.
- Easy to install and uninstall.
- Can ve added to your blog in less than 1 minute without messing with your template codes.
Note : you can search google for images to use as badges using this keywords , twitter badges , twitter buttons, follow me on twitter, or any similar words, If you are too busy or even lazy
to do it your self, then wait our upcoming collections of buttons and badges for blogger users. I Wish you all love this new tool Twitter Static Badge Generator For Blogger. and here is a demo for this tool, please notice that we added two badges for the demo blog just for show. ( you are not forced to add two for your blog too )
If you loved this tool please share it and subscript to our feeds and twitter for more updates and tools.
-
Adding Numbered Page Navigation Bar For Blogger
hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,
i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.so lets see how to do it.
Caution : Please backup your template (Download Full Template) Before making any changes.
Step 1: Adding The CSS Code.Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.]]></b:skin>
And just before it Add the next code
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px; } .showpageArea a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageArea a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpagePoint {font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #333; color: #fff; background-color: #000000; } .showpage a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a:link,.showpage a:link { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF;} .showpageNum a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }Step 2: Adding The Java Code.Find the next code Or some similar code
<b:section class=’main’ id=’main’ showaddelement=’yes’> <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/> </b:section>
And After the </b:section> Tag add the next code.
<script type='text/javascript'> var home_page_url = location.href; var pageCount=10; var displayPageNum=6; var upPageWord ='Previous'; var downPageWord ='Next'; function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount; } } itemCount++; } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ html += '<span class="showpageNum"><a href="/">1</a></span>'; }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } } } if(thisNum>1){ html = ''+upPageHtml+' '+html +' '; } html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount; } } itemCount++; } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } } } if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } </script> <script type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf("/search/label/")!=-1){ if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max")); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max")); } } var home_page = "/"; if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){ if (thisUrl.indexOf("/search/label/")==-1){ document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>') }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>') } } </script>And Click “save template”
In the above code you may only edit four lines to customize your navigation bar.var pageCount=10;
In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.
Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts
var displayPageNum=6;
Number 6 here control the number of pages that will be shown in the navigation bar.
var upPageWord ='Previous'; var downPageWord ='Next';
if you want to change the language or just change it to any thing, please change Previous for example to Older
Final StepThis blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.
1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.
2. go to, Dashboard >> Layout >> Edit html.
And find the following code.<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
And replace it with the following code.
<script type='text/javascript'> var lblname = "<data:label.name/>"; lblname2 = encodeURIComponent(lblname); var feedlink = '/search/label/' + lblname2+'?&max-results=10'; document.write('<a href="' + feedlink + '">'+lblname+'</a>'); </script>
And Click “save template”
We are done.Demo.To see how it looks see this demo blog
Big thanks for Abu Farhan & Mohamed Rias
-
How To Add Top Navigation menu (Bar) To Blogger (blogspot)
A lot of bloggers asked me about how to add top navigation bar for a blogger template,
And through this tutorial you’ll know how to add a top navigation menu for your blogger templates.
it’s very easy task, so let’s do it.1. Add Css To Your TemplateGo To your Blogger Dashboard, Layout >> Edit HTML >>
And find This code</b:skin>
And before it add next code.
/*URL: http://www.AllBlogTools.com/ */ .basictab{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .basictab li{ display: inline; margin: 0; } .basictab li a{ text-decoration: none; padding: 3px 7px; margin-right: 3px; border: 1px solid gray; border-bottom: none; background-color: #f6ffd5; color: #2d2b2b; } .basictab li a:visited{ color: #2d2b2b; } .basictab li a:hover{ background-color: #DBFF6C; color: black; } .basictab li a:active{ color: black; } .basictab li.selected a{ /*selected tab effect*/ position: relative; top: 1px; padding-top: 4px; background-color: #DBFF6C; color: black; }that’s it, and now let’s add the menu it self to our template.
2. Add The Menu To Our TemplateGo To your Blogger Dashboard, Layout >> Page Elements >>
and now above blog posts area, click add gadget,
And choose Add HTML/JavaScript
Leave the title empty and at the content area add this code
<ul class="basictab"> <li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li> <li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li> <li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> </ul>
Now Click Save and check your blog,
3. Customize Your MenuNow you have to change the menu links for your own links and titles, and you may want to change the menu colors as well.
3.1 Change The Menu LinksIn step 2 you’ll find this words in the code
<li><a href="#">Edit</a></li>
change The symbol # to your link, and change the word Edit to your title.
you can repeat this part of code as you like,
every time you add this part of code again to your menu code, a new link will be added to your menu.
3.2 Change The Menu ColorsTo change your menu colors you have to edit the css code in step 1 before you add it to your template. So Copy and past it in new text -notepad- file to edit it there.
We’ll use AllBlogTools.com html Colors Code Generator to edit this menu colors.
in step one code find this codes and change it’s color codes to your favorite, you can grab your favorite color code here.
AllBlogTools.com html Colors Code Generator
To change the main background color.
Find
background-color: #f6ffd5;
and change f6ffd5 to your favorite color.
To change the selected and hover background color.
Find
background-color: #DBFF6C;
and change DBFF6C to your favorite color.
To change the text color
Find
color: black;
and change black to #xxxxxx and xxxxxx should be your new color code
you are done, and you have got your own customized code, now use it as we used the code in step 1.
Live DemoClick here to see demo menu added to blogger template.
Enjoy.
-
Disable right click on blogger blogspot
You’ll learn in new blogger trick to disable
right click in your blog pages.
Blogger tricks and hacksRight click on any internet browser is very important element.
and we must use it when it comes to copy or editing texts and etc..
and it’s very important when it comes to webmasters too.but some people may use it in a bad way, and you may want to make click right disabled on your blog.
to protect you text, images links and etc….so all what you have to do is only simple step.
you’ll need to add new html/javascript element to your layout.
now go to your blogger account.
navigate to Layout >> Add a GadGet >> and select html/javascriptthen copy the next code and past in in html/javascript text box area
<script language="JavaScript"> <!-- //Disable right mouse click Script //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive //For full source code, visit http://www.dynamicdrive.com var message="Function Disabled!"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script>then save the html/javascript. and view you blog.
when you try to do right click. a message will tell you that “Function disabled”
and if you want to change this words” Function Disabled”
find the next line in the code
var message="Function Disabled!";
and change Function Disabled! to what ever you want.
i hope it helps.
-
Adding Scrolling Or marquee text box for blogger “blogspot” blogs.
Scrolling or marquee text is very attractive way
to tell and write your blog news. and adding it to your blog makes it more attractive because it’s amazing way to tell your blog visitors your blog latest news.
the nice thing here is that “Scrolling Or marquee text for blogger” can be re edited by you to suitable your blog needs and your needs,
and we’ll show you a lot of “Scrolling Or marquee text for blogger” kinds and after this, we’ll explain to you how to use it and how to add it to your blog in the way you like,Looks great, right? so lets learn step by step how to do it in the easiest way
The Scrolling Or marquee text code contain 2 tags, opening tag, and closing tag,
and between the 2 tags , the is text goes there. and it looks like that:
<opening tag> Your Scrolling text </closing tag>
and this is the most simple sample to learn you how does it work,
and the real code for Scrolling Or marquee text looks like the next.<marquee>Scrolling Or marquee text for blogger Demo</marquee>
and if you added this for your blog,it’ll generate you a normal Scrolling Or marquee text box
with default text font and size and with White back ground,
But what we do if we need to change the direction, adding background color, change the text speed ( scrollamount ) or change it’s height and width.Oh, that is very easy but it need your complete attention.
we can control direction, background color, scrollamount Or any thing by adding values to the opening codes,
The we add the values like the next example.
the value to make the direction : Righ is
direction="right"
so if we want our Scrolling Or marquee text moves to right, we’ll add the right moving value to the opening tag.
and here is how it going to be.
Before:
<marquee>Scrolling Or marquee text for blogger Demo</marquee>
After:
<marquee direction="right">Scrolling Or marquee text for blogger Demo</marquee>
As you see we add the value to the marquee text code Opening tag after the word
-
Editing blogger top menu Links
how to edit the top blooger horizontal menu, menu bar
or top navigation menu,Blogger Tricks
- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe
place.alot of people download new and beautiful blogger templates with top menu added
bet they can't edit, modfy, or even remove it, and today we'll learn how to edit
any blogger template top horizontal menu, what ever the template, we'll seE how
to defined the top menu codes and edit it. editing the top menu links dependes on
finding the menu codes in our template so the first step is to find the menu codes,
actually finding the menu code is the hardest part. so log in to your blogger account,
then click LAYOUT > EDIT HTML . now you are at EDIT HTML page, and here you can
see all you template code. open your blog in a new window and read your top menu
links titles, and see the next picture, i'll use here nice template called : integral
made by blogandweb.com and you can seeit's demo here.
YOU MUST READ THE INSTRUCTIONS ON THE LAST IMAGE. at our tutorial we'll copy the link title "contact us" and now go yo your blogger account page " Edit html" then
if you use FireFox or Internet Explorer or any another Browser click "CTRL + F"
and past the link title that you copied it, and here it our example we'll past the
title " contact us " and click Enter or Clikc Find. the browser must find text match
the title in your template code. please Zoom the next image and read the instructions,
if you selected word like " home " to defined your menu code place in your template
code, let us tell you that it's bad choice because it's too popular word and you'll
find it more than 3 or 4 times in your code, and here we aim to find the menu titles
just to defined the menu code location in our template code, and here is some menu
codes will help you to know the menu code once you see it,<ul id='menu'>
<li><a accesskey='1' href='#' title=''>Home</a></li>
<li><a accesskey='2' href='#' title=''>Contact
us</a></li>
<li><a accesskey='3' href='#' title=''>About Us</a></li>
<li><a accesskey='5' href='#' title=''>Edit</a></li>
<li><a accesskey='5' href='#' title=''>Edit</a></li>
</ul>OR
<div id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact
Us</a></li>
</ul>
</div>you must find the link title in a form like the last 2 tables, if you find it like
this, then you found your menu code and this is was the hardest part, now lets talk
about how to edit your top navigation menu, so please see the next tables to see
how to edit your top menu and follow the instructions,<ul id='menu'>
<li><a accesskey='1' href='Title 1 link URL'
title=''>Tittle 1</a></li>
<li><a accesskey='2' href='Title 2 link URL'
title=''>Tittle 2</a></li>
<li><a accesskey='3' href='Title 3 link URL'
title=''>Tittle 3</a></li>
<li><a accesskey='5' href='Title 4 link URL'
title=''>Tittle 4</a></li>
<li><a accesskey='5' href='Title 5 link URL'
title=''>Tittle 5</a></li>
</ul>OR
<div id='menu'>
<ul>
<li><a href='Home page link URL'>Home</a></li>
<li><a href='Blog page link URL'>Blog</a></li>
<li><a href='Photos page link URL'>Photos</a></li>
<li><a href='About page link URL'>About</a></li>
<li><a href='Contact us page link URL'>Contact Us</a></li>
</ul>
</div>and now i think every thing is clear for you to start editing your blogger top
horizontal navigation menu, and here is a trick you may need to make your contact
us page
Add contact us form to blogger witch going to help you creat contact us page
to your blogger blogspot blogs.
-
Add contact us form to blogger
how to add contact us form or mailing page for blogger
blogspot blogs step by step Blogger tricks
you must add a contact us form on your blog, to let people connecting you, and to build nice and fine relationship between you and your bloggerblog visitors,
and you don’t want to right the next line in to your contact us page.
to contact us please send us a message on: mymail (at) gmail.com
you want to add a nice and professional form, witch looks like the next image.
and here is demo live form on one of our blogs.
this service is fully free and provided by www.emailmeform.com
this site allow you to have a form for every blog, or several forms for each blog.
i cant wait to tell you how to do it. so let’s do it,
go to www.emailmeform.com or click here (new window)
it’ll take you to the next page.
at this page you’ll find a small form, fill it all and click “sign up” button.
after clicking sign up button you’ll see the next message.
Thank you for signing up!
To prevent automated registrations, we sent a message to the email address you provided. Please check your email and click on the VerificationLink inside, to activate your account.
so please go to your email account that you typed it while you was filling the form. and find message with the next details.
title : EmailMeForm
subject : Your new account informationat this message you’ll find a confirmation link. click it.
it’ll take you to the next page,
click the link titled “here” or look at the image up.
when you click the link titled “here” it’ll take you to your account control panel.at your control panel, click “Create new form” you can find it on your account sidebar.
you’ll go to :Web Form Creation Wizard – Step 1
fil the form on step one. and click ” NEXT ”
At the next step :Web Form Creation Wizard – Step 2
you’ll enter the names of the fields.
Optionally you can select text effects, or if the field is mandatory to be filled by your users.for each filed the is 4 options
Field Name ,Text Effects ,Field Type and Required option?and you don’t want me to tell you what these options do.
after filling this step form, click next, to go to
Web Form Creation Wizard – Step 3
at this step you’ll enter the size of the fields, and options if you have Dropdown Menus, Radio Buttons or Check boxes.
Fill this form then click “NEXT”
you’ll be at :Web Form Creation Wizard – Step 4
and here optionaly you can customize the look and feel of your form, by selecting the Text color, Font and Size, the background color, etc. You
can leave all these options unchanged and click Next.
or if you have some experience with css or html you can customize your form.And you can customize Font, Color, Form Description, Header, ,footer, Style CSS, Send Button Name, Send Button alignment, Include a Clear button, Anti Spam, Image Verification And finally Display Mode
than click next to go to :Web Form Creation Wizard – Step 5
and here there are more optional advanced settings. You can leave them unchanged and click Next.
Later you can easily reedit your form and change them if you need.Finally press next to go to Web Form Creation Wizard – Step 6
and at this page you’ll preview the form and if satisfied press Finish or if you would like to change anything press Back.
click finish and the site will tell you that Your form has been saved!
The web form is active, and ready for use by your visitors. Every submission will result in an email delivered to your email address with the content of submission!now you have 2 options to use the form.
1 : you may take a code that put a link at your blog and your visitors click it to go to your form page at www.emailmeform.com
and the link gonna be some thing like that : http://www.emailmeform.com/fid.php?formid=xxxxxxxx2 : Or you may take a code to past it on your blog pages to put the form directly on your blogspot pages.
and we prefere option 2 so please click “Get the HTML Code” link
at the next page you’ll find a code to get your form inside your blog. Getting your form inside your wesite is easy and simple. Please select a form
from the Drop Down menu below,< IF you have created more that one form > and then copy and paste the Code inside your favorite blog
pages. Each time one of your visitors will submit it, our server will automatically process it and send you an email message.
select all and copy the code.
then go to your blogger account, click edit posts posts, creat now post,
and choose “Edit Html”
Title: Contact us, or what ever you want.
and past the code at the post area.Important before publish your form
and at you form code please find the next code
<table and just before it past the next code.
And at the bottom of your form code find the next code
there is nore than one code called
</table> find the lastest one at the buttom of your code,
and after it past the next code</div> Find the next code and delete it
<div
style="position: absolute; left: 1800px; top: 20px;"><a
href="http://www.emailmeform.com">web forms software</a></div>Attention. blow the post area click “Post Options”
and find Post date and time. and change the date to older date. you may make it 2007 or 2006 or older
the day and month doesn’t matter.
we change the date because we don’t wanna make the form appear at our normal blog pages and archives.And hit Publish post.
go to DASHBOARD –> POSTING –> EDIT POSTS (find the form post, and click on “View”)
From the browser’s address bar, copy the URL address of this Post –> we will use this address as a Link to Contact Form in our Blog
You can place this Link wherever you want (in your sidebar, header….).Enjoy
here is demo blog that you can test the mailing form.
Click here to see demo blog and the contact us link on the top menu
thanks for
pocket-templates.blogspot.com
for providing us a code that solved alot of problems here
and
www.emailmeform.com
-
Adding free stat counter for blogger
knowing your blog visitor stats is very important, today we’ll see how to add free visitor counter step by step.
- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe place.we’ll use a stat counter that provided by statcounter.com that works perfectly with blogger blogspot blogs.
you will need to join a free acount from here
(it’ll open in a new window)
it won’t take more than 2 minutes,
after registering, and activating your account through your email. please login to your account.after logging in, click new project.
see image below:
then you’ll be taken to another page,
fill the form as the next.
website title :type here you blog title.
website URL :type here your blog url, it must be like ——.blogspot.com if you using blogger.and press NEXT.
see image below:then click : Configure and install code >>
see image below:
after clicking Configure and install code >> you will go to page ask you to choose the kind of stat counter,
there is more 1 kind,
1: visible counter.
2: invisible counter.
3: visible counter on home page only.
4: button only.
choose your favorite one and hit NEXT.
see image below:
at the next page you’ll be at stat counter code setup wizard.
find : do you use a web page editor?
and choose yes, i use.
and then choose blogger.
see image below:
then click NEXT and you will generate your counter code.
Now go to blogger.com
log in to your blogger blogspot account, go to layout section.and click add new element at your template sidebar where you want to add the Stat counter. choose html / jave.
past the statcounter code. and click save.
and now you are done.this stat counter contain alot of great free features,
and here is some of them. you can find this features when you log in to your account at statcounter.com
1. summary
2. popular pages
3. entry pages
4. exit pages
5. came from
6. keyword analysis
7. recent keyword activities
8. recent came from
9. search engine wars
10. visitor paths
11. visitor length
12. returning visits
13. recent pageload activities
14. recent visitor activity
15. recent visitor map
16. country/state/city/ISP
17. browser
18. system statistics
19. lookup IP address
20. download logsEnjoy.
and don’t forget that i’m here to help.
if you need any help please leave comment here,max
-
How To remove or hide Blogger Navbar
all of blogger blogs have a horizontal navigation bar on the top part
in all blog pages.a lot of people
wanna know how to remove it.we’ll tell you the best way to remove or hide the navbar from your blog
there is more than one way to remove it.
- The best solution
Copy the next code
- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe place.#navbar-iframe { height:0px; visibility:hidden; display:none }then log into your blogger account.
you are now at Dashboard page. click on Layout link. and select Edit HTML .search for
<b:skin><![CDATA in internet explorer of fire fox press [ Ctrl+F ] . copy and past the next code in the searching form :
<b:skin><![CDATAand hit enter or [ search ] when you fine it Past the above code just after it.
for more explanation See The Image Blew.
If you facing any problems please leave a comment and we'll solve it for you.
