Try Advanced Blogger Templates Search >> 
Blogger Posts / Archive Tricks
Tutorials, tweaks, tricks and hacks for your blogger archive pages, or your posts pages, Here you’ll find how to change every thing about it.
-
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.
-
Page Views / Post Views Counter Widget For Blogger.
As a blogger for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
So today i’ll show you how to do it in blogger,
It’s very easy to do and there are 2 styles for this widget.
How To Add this widget For blogger.This is very easy to do it two steps, step 1, choose your widget style,
and step 2, pate it’s code in your blogger template code.Step 1. Choose the style And get your code.- Style 1. ( With Icon ) code,
<b:if cond='data:blog.pageType == "item"'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/> <a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>
- Style 2. ( No Icon ) code,
<b:if cond='data:blog.pageType == "item"'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>
Please copy your widget code and follow instructions in step 2.
Step 2. Add the widget for your blogger blog.Now go to your blogger account then navigate to, Layout >> Edit html, And before doing any thing you must check Expand Widget Templates box.
And find the next Code<div class='post-header-line-1'/>
And after it, paste your widget code You can get the widget code from previous step
What, If you didn’t find the code above in your template, The try to find the following,
<data:post.body/>
And paste the widget code Before it.
, after doing this, please click Save Template and you are done.
See A Demo.you can see a demo for this widget( click here ) , in this demo we use style 1 with the icon,
thanks very much for best blogger widgets
-
Solving / Fixing The Undefined Date For blogger Time Stamp.
Undefined Date, This is one of the most popular problems in all new blogger templates. I noticed that a lot of visitors commenting and asking about how to get ride of this problem, and today we’ll learn how to fix this problem in very easy way.To see how is this problem looks like see the following image.
How To Fix This ErrorTo fix the time stamp error in blogger post you’ll need to do the following steps.
Go to your blogger account. And navigate to Settings >> Formating >> and Change the values to the following values.
Then click Save Template And you are ready to go. To see a demo for fixed date, please click here.
-
Google Translate Flags Widget For Blogger
I’m sure that we are all not from the same country, and we all can’t read and understand all languages in the world, and as a blogger my self, sometimes i want to translate some blogs from various languages to English. The usual way is to copy the page url and then i go to google translate service and paste the url there then hit enter.
We can all short cut all this steps for our visitors by adding a great widget to our blog. it’s easy and one step trick.Widget FeaturesThis widget is a great one and the best translate widget ever and here are the features.
- This Widget Auto detect your blog language and translate it to the readers chosen language.
- Support 12 different languages, English, French, Germany, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.
- Auto Adjustment, No matter where do you add this widget, it’ll be auto adjusted with your blog template.
widget to our blog. it’s easy and one step trick.
How To Add It To Blogger.It’s very easy to add this widget to your blog, just go to your blogger dashboard >> Layout >> and on page elements page, Click Add A Gadget and choose HTML/JavaScript
Leave the title empty or type any title for your widget, and in the content area paste the following code.<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div> <br/> <a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>And click Save
The check your blog.DemoTo see a demo for this widget please click here.
Cisco 642-845 exam is for those professionals who are interested in the optimization of converged Cisco networks while for the designing Cisco network service architectures, exam 642-873 is mndatory along with 642-892 exam for Cisco composite.
-
How To Add Recent Posts Widget And Recent Comments Widget For Blogger.
I always mention that very large number of our readers leave their comments under some blogger templates asking about How To Add Recent Posts Widget And Recent Comments Widget For Blogger. And some of them wondering about how to add this widget that they see in the demo blog.
The good news is that it’s too easy to add it and it takes less than 1 minute, so lets do it.Add Recent Posts Widget For Blogger.Go to your dashboard >> layout, On your page elements page where ever you want to add the widget click add gadget and choose Feed. then enter : http://YOURBLOGNAME.blogspot.com/feeds/posts/default
and click Continue then save.Add Recent Comments Widget For Blogger.Go to your dashboard >> layout, On your page elements page where ever you want to add the widget click add gadget and choose Feed. then enter : http://YOURBLOGNAME.blogspot.com/feeds/comments/default
and click Continue then save.
-
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.
-
New Tool Added, Html Character EnCoder.
Have you ever tried to add html code to your blogger posts, and wanted it to be displayed as you posted it so that the blog readers can use it , copy paste,
Here is an example, if you typed the following code into your post,<p><strong>AllBlogTools.com</strong></p>
the browser will automatically interpret it to the following
AllBlogTools.com
, And you wondering what to do to make the code still as the first box above in your post,
that’s why we added this new tool for our blogger tools collection.
This tool help you with only one click to encode the html symbols so when you paste the converted code to your post, the browser wont interpret it and it’ll be displayed to your readers exactly as you typed it.
To See demo, please click here.
How To Use ItJust go to our new tool, Html Character En Coder / Generator. You find a text box, Paste your html code there, and then click convert.
After you click convert, the text you entered will be converted to another symbols, you can copy it and then paste it into your blogger post, then click publish. and check out your post with your code.
If you like this tool and find it useful please share and bookmark it.
-
Blogger Recent Posts Widget With Thumbnail
If your blog have long posts and you want to help your visitors to find your recent posts quickly, with out spending time browsing you blog searching for your older posts.
you’ll definitely like this widget and you’ll add it to your blog sidebar.Widget FeaturesThis widget have a lot of customizations and you can:
- Change Widget Title
- Control Widget Height
- Change the feed Blog Url, you can grab the posts from another blog
- Display post thumbnails
- Display post summaries
- Adjust post Summary length
- Display post date
- Display the number of comments
- Display the Read more link
- Display a Separator b/w the posts
How To set up this widgetIt’s very easy to setup this widget,
Please go to your blogger account, And click layout, on the Page Elements page, please click Add A Gadget on your sidebar,In the new opened window you’ll find a search bar, please insert the following keyword and hit enter “recent posts with thumbnails”,
then in the results you’ll find a widget called : recent posts advanced
then click on ( add ) icon
and make sure to click the add icon that next to recent posts advanced widget.
And on the next page, please customize you widget, and once you finish please click Save
Want to see a demoplease click here to see a demo for this widget, and if you like this tutorial please follow me and subscribe to allblogtools.com , don’t hesitate to leave comments if you have any questions.
Accounts managers can enhance their expertise by appearing in the exam 646-671 for advanced wireless LAN while 646-985 exam helps them for data center networking solution sales along with ccda certification to become cisco certified design associate.
-
Add a Post Divider (Separator) Between Blogger (Blogspot) Posts
One of the most important factors to give your visitors a good impression about your blog, is to make it easy to read,
And since i see many blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts, so today we’ll lean how to add a Separator between blogspot posts easily. And here is a demo.Step 1Log into your blogger account, navigate to , Dashboard >> Layout >> Edit html, and find the following code
.post
this is the cs part that controls your post layout and style, it must contains few css properties like the following.
.post { margin: 0 0 40px 0; width: 90% }Now we want to add the separator css properties between the opening and closing tags, { and }
Here is the separator css properties :
background: url(Separator-Image-Url); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:2.5em;
And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.Now your final code should looks Like The following one.
.post{ margin: 0 0 40px 0; width: 90%; background: url(http://www.imagehost.com/separator.jpg); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:2.5em; }Free Separator ImagesNow Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.
http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif
http://3.bp.blogspot.com/_JwD5r652h00/SuttjcXA_4I/AAAAAAAAANo/w2BZApq6Jn4/s1600/bar54.gif
http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif
http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif
http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif
http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif
http://2.bp.blogspot.com/_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif
http://3.bp.blogspot.com/_JwD5r652h00/Sutu7DaxOSI/AAAAAAAAAOI/Q3okL8VTVQ4/s1600/clipart-heart-border.jpg
http://3.bp.blogspot.com/_JwD5r652h00/Sutu65IKnaI/AAAAAAAAAOA/UJuKQP29vtg/s1600/chain.gif
http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif
http://2.bp.blogspot.com/_JwD5r652h00/Sutwt4UlPXI/AAAAAAAAAPw/tZ9RY7m1tKA/s1600/stonebar.gif
http://1.bp.blogspot.com/_JwD5r652h00/SutwFSJ2_LI/AAAAAAAAAPo/WMkQ9bAcVn0/s1600/resfiles_sdfp.gif
http://1.bp.blogspot.com/_JwD5r652h00/SutwFArTx_I/AAAAAAAAAPg/RlKs6tTx_Mw/s1600/resfileszcp.gif
http://2.bp.blogspot.com/_JwD5r652h00/SutwEnMKk3I/AAAAAAAAAPY/pz3dI5GhTGY/s1600/resfiles_output.php.gif
http://2.bp.blogspot.com/_JwD5r652h00/SutwEayD8dI/AAAAAAAAAPQ/9k10wIhaHjU/s1600/pumpkin-border-hth.gif
http://3.bp.blogspot.com/_JwD5r652h00/SutwEO1pNLI/AAAAAAAAAPI/FAmwFnDEASw/s1600/irish-border4.gif
http://2.bp.blogspot.com/_JwD5r652h00/Sutv3RFLl9I/AAAAAAAAAPA/e7VXY-5er8A/s1600/ivy.gif
http://1.bp.blogspot.com/_JwD5r652h00/Sutv3EVHqdI/AAAAAAAAAO4/jKfcf3u4IJ4/s1600/irish-border1.gif
http://3.bp.blogspot.com/_JwD5r652h00/Sutv3MzdTQI/AAAAAAAAAOw/LRKkTCzKkGA/s1600/frog54.gif
http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif
http://3.bp.blogspot.com/_JwD5r652h00/Sutv2gVPVII/AAAAAAAAAOg/w1Wh7KancXM/s1600/drawing-separator.gif
Need More Separator ImagesOk, here are 3 links to great sites contains hundreds of free separators and page dividers.
Need Even More And More Separator ImagesSearch google for the following keywords
- Page dividers
- Page dividers clip art
- page dividers graphics
- page dividers animated
If you liked this post please share and follow us.
-
Collection Of 46 Read More Buttons Free Download
After publishing one of my latest blogger tricks : Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment. A lot of people asked me about where to get “read more” buttons to use it with this trick, and today i’ll give you a collection of 46 buttons to download for free, This buttons are categorized in 2 sizes, Small buttons And Large Buttons.
Here is The Details And Download Links,Caution : Don't Link To The Download Links Directly, And Please Link To This Page It Self..
Small Read More Buttons.
Download Here : Note: There is a file embedded within this post, please visit this post to download the file.
Large Read More Buttons.
Download Here : Note: There is a file embedded within this post, please visit this post to download the file.
I wish you all like it’ and please share it.
-
Add Styles And Effects To Your Images In Blogger
many bloggers contacted me asking about an easy way to style blogger images, all posts images with out editing every single post.
so today I’ll teach you a very easy way to style and add nice effects to your all your blog images at once and no need to edit every single image at your blog.we will learn today how to :
- Add borders to our images.
- Change borders style and color.
- Increase and decrease the space between the image and the border.
- Add any background to our images as a border.
and you can see the final result for this tutorial at this demo heresee the image in the post
Or see this image
So lets start
Intro And Explanationwe will style the blogspot images depending on the following css tage
don’t worry, it’s very very easy and every body can do it- Border
- Padding
- Background
there are a lot of border styles and we can change its color.
the space between the border and the image.
the background between the image and the border and we can make it a picture like the demo or just a plain color.
You can understand what this tags mean by checking the next image.
and here is the tags explained for the demo blog in the following image.
And Now, Lets do it.
Step 1Now go to Blogger and log in, then navigate to : Layout >> Edit html >> and find the following code you can click ctrl+f to find it via your browser finder
.post img {Now this is the opening tag for your images style and the symbol{ mean that this is the start of styles, you’ll need to find the style end symbol witch looks like this }
And please delete all lines between the two symbols.
so here is an example for the codes before and after deleting the style codes.
note : the style lines are not the same for all templates, you may have more or less lines in your template.
here is the example
BEFORE.post img { border: 5px solid #F08C00; padding: 10px; }AFTER deleting the style lines
.post img { }Now you images have no any styles and if you clicked Save Template
now , your images will be displayed with out any borders or styles. if you like to keep it like that ,ok just click Save Template .
Or leave and go to step 2 if you want to add styles to your images.Step 2now you have your images style code like the following
.post img { }now we have to start add style lines, and as we said before you can add all the following lines or only one or two, we have 3 lines to add.
border line, padding line, and background line,
so lets start.Adding Borders To Your Images.Add the next line between opening and closing symbols
border: 5px solid #F08C00;
so your code should looks like this
.post img { border: 5px solid #F08C00; }if you saved your template now you’ll have the following style for your images
This is image with 5px width orange border
and you can change the following parts in the previous line to give it your favorite style.5px
You can change number 5 to increase or decrease the width of the border
solid
This word control the type of your border
And you can change this to any one of the following valuessolid
double
groove
dotted
dashed
inset
outset
ridge
F08C00
this is will change your border color, and you can get your favorite color code from our hex / Html color code generator here.
now we added a border for your images style, you can click Save Template
Or continue to the next stepAdding Padding To Your Images.padding will add a space between your border and your image.
Add the following line to your codepadding: 10px;
You can change this number 10 for example to 7 or 15 to decrease or increase the space between your image and border.
now your code should looks like this.post img { border: 5px solid #F08C00; padding: 10px; }and your images will look like this:
This is image with 5px width orange border and 10px padding
now we added a border and padding for your images style, you can click Save Template
Or continue to the next stepAdding Back Ground To Your Images As Border.To make this effect active you must apply the previous step : add padding.
Now add the following line to your code
background: url(Image Location);
and please change Image Locationto your favorite image url,
Recommended : search Google for pattern.Now you should have your code like this.
.post img {
border: 5px solid #F08C00;
padding: 10px;
background: url(Http://www.host.com/image.gif);
}
And your image should look like this
This is image with 5px width orange border , 10px padding and with this image as back ground
Now Click Save Template And go check your Blog,I wish you understand and love this tutorial and please don’t hesitate to leave your comment for support and feedback. to get more tricks and latest updates please subscript to our feeds or follow us on twitter
-
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 Avatars To Custom Blogger Templates
hi all, in my previous post :
Show Your Face, Display your Avatar / photo On Blogger Comments
I said that i’ll add a tutorial soon about adding avatar to your blogspot template if it’s not support or display it.your template is acting like that because it’s a customized template, and to add the avatar to your comments you have to follow the steps in this tutorial, don’t worry it’s too easy.
Only two stepsStep 1Log in to your blogger account and go to,
dashboard >> Layout >> Edit html
then make sure to check “Expand widget templates” box
And find the following code,<dl id='comments-block'>
Now instead of this code past the next code.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Note : depending on your template you may find the above code with div Instead of dl
if you found it in your template with div
then you should replace it with a div too. so you’ll add the next code.
<div expr:class='data:post.avatarIndentClass' id='comments-block'>
Step 2Now find this code.
<a expr:name='data:comment.anchorName'/>
and exactly before it add the next code.
<a expr:name='data:comment.anchorName'/>
and exactly before it add the next code.
<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' /> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if>
now you are done.
Finally click Save Template
And now you are done, soon we’ll add some tutorials about customizing your avatar,
all comments are welcomed.
-
Show Your Face, Display your Avatar / photo On Blogger Comments
hi all, this must by a happy day for all blogspot users, today blogger announced new feature as part of the Blogger Birthday feature series.
And blogger called it, Show Your Face.
This feature allow you to show your profile photo next to your comment on any blogger blog post,
And you have the full control to enable or disable it.
Check out the Next image to see how it looks like.
So, How It WorksThis feature imports the photo from your profile, so if you already uploaded an image to your profile, it’ll be displayed automatically when you post a comment on a blogger blog,
But if you don’t have a profile photo, you may do it in two ways,
1. Go to blogger dashboard >> and on the left sidebar you’ll see Edit Profile link, click it, and then scroll down till you see Photograph, and throw this form you can add your photo for your profile, after uploading your photo, scroll to the bottom and click Save Porfile.
2. The second way to do it is to go to comment on any blogspot post, and type your comment, then don’t press Post Comment, Press Preview.
and click click Add Profile Picture. and upload your picture,
See the next Image.
and you are done.
Some Bad News
Sorry for this but i have to mention that this feature won’t work with many Customized blogger templates, it works perfectly with all default templates, but it’s wont work with many custom templates, so i’ll work hard to get a code that you can add it to your custom template, and fix the problem, If you subscribed for our twitter or mailing updates list, you’ll receive the latest news about the solution for this error.
-
Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.
Hi dear friend,I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.
So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.
Now is the time for this tutorial,
after reading this tutorial you’ll be able to Customize you read more links in those ways:
- Change the text ” read more ” to another words.
- Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
- choose your read more link / button to be displayed on left side, right side or center it.
so lets start,
Please download a copy of your template before applying any changes.
First Step, You Must Do This Stepthis code should be included in your blogger template,
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'>Read More </a> </div> </b:if >
i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,if you found the code in your template, ok you have to skip this step
but before you skip it,
make sure that the third line in the code looks like this<a expr:href='data:post.url + "#more"'>Read More </a>
And not
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
if you found it like the second one, please replace it with the first one
if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,
<data:post.body/>
and just after it, add the next code,
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'>Read More </a> </div> </b:if >
Now we finished adding the require code for customizing this trick.
Lets start customizing1.Change the text ” read more ” to another words.this is the easiest on ever,
after applying the first step to your template, you should have this code added to your template :<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'>Read More</a> </div> </b:if >
This code will display your read more link in this format : Read More
and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.
After changing it, click Save template and check out your blog.
2.Add An Image / Button Instead Of Plain TextOk, now again, after applying the first step to your template,
you must have this code added to your template<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'>Read More</a> </div> </b:if >
This code will display your read more link in this format : Read More
and to change the text to image / button , we should replace the word Read More in the code with the following
<img border="0" src="Paste here the button Image URL"/>
so you should have some thing like this
<img border="0" src="http://www.allblogtools.com/image-url.jpg"/>
After changing it, click Save template and check out your blog.
And here is some good samples for read more buttons :
And you can find more buttons by searching in google for “read more button”.
3. Control the read more link or button alignment, left, right Or center.lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'>Read More</a> </div> </b:if >
this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.
<b:if cond='data:post.hasJumpLink'><div class='jump-link'> <a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >
and you can replace the xxxx with Left, right, or center.
any in this way you can control the position for your link or button.
and here is some examples to help you
Example 1<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a> </div> </b:if >
This will display read more in pain text aligned to left
Example 2<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a> </div> </b:if >
This will display read more in image button aligned to right
i wish this can help you, you comments are welcome, and please share it if you found it useful
-
3 Issues / Problems With new Blogger Read Me / Jump Breaks And How To Fix It
I was so happy with blogger’s new addition “Read more”.
Or as blogger calls it Jump Breaks.
but after using it,
we mentioned some errors with it, and the reason for this problems is not about blogger.
It’s all about you, me, and blogger templates coders.And the three problems are :
- It’s Not Working At All.
- Read More Link Is Not Visible On Your Blog
- LayOut And Side Bar Errors After Using it
so lets see the 3 problems and learn how to fix it.
1 .It’s Not Working At All. Why And How To FixWhy ?
If you still using the old blogger Post editor, After adding this code<!-- more -->
You go to your blogspot blog to see how is the new addition works, and you see nothing, there is no read more link and my blog still show the full post.
How To Fix It ?
in this case you should make sure that you inserted this<!-- more -->
And notice that there is spaces before the word More and after it, its not
<!--more--> This is wrong code
2. Read More Link Is Not Visible On Your BlogThe read more / Jump Breaks works and your blog displays posts summaries only, but you can’t see the read more link so your readers won’t be able to read the full posts
Why ?
This is because you use custom template and the template coder haven’t added blogger Jump Breaks codes and properties to the template code,How To Fix It ?
Go to Dashboard >> Layout >> Edit HTML and select “Expand Widget Templates”then find the next code
<data:post.body/>
And After it add this code
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if >
3. LayOut And Side Bar Errors After Using itAfter inserting the read more code in your post, it works perfectly, but the sidebar shifts to the blog bottom.
Why ?
the code <!– more –> is inserted between two div tags.<div>.. .. ... <!-- more -->. . . .. </div>
How To Fix It ?
Change your post inputting type to Edit html instead of Compose.
and find the <!– more –>, If it inserted between two div tags. just change the div to spanHere is an example :
<div align="center" > The post summary <!-- more --> The rest of the post </div>
After Fixing it.
<span align="center" > The post summary <!-- more --> The rest of the post </span>
This is it, if you found this tutorial useful, please follow us on twitter, and bookmark it.
-
Surprise, Blogger Now officially Supports “Read more” links.
we’re all waiting for this, Official “read more” links in blogger posts, Easy, guaranteed, and officially supported by Blogger.
For years and years all blogger users tried to place the read more links in blogspot blogs.
we published a tutorial here on allblogtools.com about this hack and how to do it by manually editing template HTML.but it wasn’t working probably with all bloggers.
few days ago, blogger announced their latest birthday present:Blogger Jump Breaks.
By using Jump breaks you can show only a snippet of your post on your blog index page and archives.
Blogger will insert a read more link after each post so your readers can keep reading by clicking on this link.How To Use Blogger Jump Breaks.Actually there is two ways to use Jump Breaks.
1. If you use bloggers new post editorIf you use bloggers new post editor, ( you can use it by enabling it via the Settings tab at your blogger dashboard )
You’ll find that there is new icon on the tab called “Insert jump break”So while writing your post just click with your cursor where you want to add the Read More Link, And then, click on “Insert jump break” icon.
2. If you don’t use the new blogger post editorYou can insert the read more link buy clicking on Edit Html tab while writing your new post,
And insert
<!-- more -->
where you want the read more link to appear.
do it’ll look like the next image.
How To Customize Blogger Jump Breaks.You can change the text “ Read More > ” by going to Dashboard >> Layout >> then Edit the Blog Posts widget.
And change it to what ever you want.
So What’s Next.I’ll add very soon a tutorial about customizing blogger Jump Breaks to insert an image instead of Read More Text. Like AllBlogTools.com home page.
If you are interested, please follow us on twitter or facebook.
All comments are welcomed.
-
Display Related Posts with Thumbnails In Blogger
The most important thing for blogger is the traffic, the visitors, and he works very hard to get a lot of visitors every day,
but what to do after getting good number of visitors.
You have to make your visitors keep return to your site and spend more and ore time on your site.
and one of the most effective way to do this is to convince your visitors that you still have more high quality content.
after a visitor finish reading one of your blog posts, he should find some thing related to his interests.
so you may want to make it easy for him to find another related content on your blog,
and the best way to do it, is to use a related posts script, to display list of related posts, not only the posts titles, but thumbnails too.And we’ll use one of the best widgets for this process, it’s linkwithin.
What Is linkwithinlinkwithin is a free widget enable us to display list of related posts with thumbnails at the posts footer.
at the moment you can choose one of three factors that determine the posts that appear in list. the 3 factors are
- Relevance
- Popularity
- Recency
How To Add Related Posts With Thumbnails linkwithin linkwithin WidgetTo Your blooger BlogIt’s easy to add this widget to blogspot, there is two ways to add it, and every one have to choose the Proper way.
If You Use One Of Blogger Standard ( Default ) Templates.if you use the standerd templates just go to LinkWithIn.com
you’ll find a small form on right, fill it, and choose blogger as your platform. and and follow the instructions.
after installing the widget in this way you’ll see You may like these related stories at your posts page after each post, at your main page, and at your search results page.If You Use A Customized Templates.This way is used to add the widget to your blog if you:
- Use customized blogger template
- Want to customize the widget for your blog
Step 1Go to LinkWithIn.org,
Fill the form on the right-hand side, but for Platform choose Other
then click Get Widget you’ll be in a page called Install Widget on Other Platforms
and you’ll see a code there. don’t copy the code but find linkwithin_site_id as you see in the image. find it and copy it, it should be someting like this
48394 then save it in a notepad file or save it any where.
Step 2Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box.
and use your browsers finder and find this tag<div class='post-footer'>
or similar tag, you must find post-footer tag.
Step 3once you find it, just before it past the following code.
<b:if cond='data:blog.pageType == "item"'> <script> var linkwithin_site_id = YOUR_SITE_ID; (function () { var elem = document.createElement('script'); elem.type = 'text/javascript'; elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random(); document.getElementsByTagName('head')[0].appendChild(elem); })(); </script> <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a> </b:if>Step 4Change YOUR_SITE_ID To your own saved ID > in step 1.
Step 5Review your template and see if it works or not.
and that’s it.Frequently Asked QuestionsIf you have a problem with this widget, please visit this page.
linkwithin.com Frequently Asked Questions
I wish you all the best, and please don’t hesitateto leave a comment and share.
-
adding Signature to blogger Posts.
today we are going to talk about new blogger trick.
adding Signature blogspot Posts. so lets go and be careful.
you’ll do it step by step, 2 steps only, the first step: is making your sign image
and the second step, is adding this sing image to your blogger posts
and the final result will look like this
Step 1we’ll use a free service provided by: AllBlogTools.com
Click here Signature Generator .
Follow the steps there and get you code
Step 2 go to your blogger account, go to settings. Select Formatting. at
the bottom of the formatting page you’ll find Post Template form. just copy and
past your Signature Code. and every time you going to write new post, write it before the sign code. but don’t delete it.
thanks for reading and here is demo sign