All About Blogging: July 2015

Archive for July 2015

How to Keep Back up and Restore Blogger template

Admin July 30, 2015

Bloggers are for information and entertainment. Bloggers gives new information and tries to entertain the users also. By the way here I am not going to saying you about roles of blogger and etc etc. But I am just trying to telling you that Blogger blogs is one of the most using blogger platform nowadays and it also supports template made by user which suits its criteria. Actually, here I am just going to tell you that if you conduct a blog in blog then you should also know the security of that blog. If sometime crashed the blog template, you should have their back up and restore them easily. SO you should keep back up of your blogger template. Indeed this is complete post or article for beginners but this is very essential for the blogger bloggers. This becomes very important when you are going to add some extra features in your blogger manually by editing html page. In this time you should keep the back up of your blogger template for the security of your blogger. Blogger back up of restore feature is one of the most important feature provided by blogger. This is the simplest process of keeping back up of your blogger template. Lets follow the step by step process to keep back up of blogger blog.

Method 1:

Back up of blogger template

Step 1: First of all, lets sign in into the blogger dashboard.
Step 2: Then just go to Template.
Step 3: Now at the top right of the page, you will see the back up/restore button. Click it.

Step 4: Then their appears a pop up and their you see Download full template button, click it.
Step 5: Now your template will be downloaded.

Restore blogger template

As it is, login and go to the template. Then click on back/restore button. Then their you will see two download full template and choose file. Click on choose file and select your template file which you already have kept back up. Now click on upload.

button

You did it.

Method 2:

Back up of blogger template

Step 1: Just Login blogger account.
Step 2: Click template>>edit html.
Step 3: Click anywhere in that page.
Step 4: Now select all by pressing CTRL + A. Then press CTRL + C to copy them. And just paste them into notepad and save it in anywhere of your computer.

Restore blogger template

To restore them. As it is, just login and go to template>>edit html. Select all the code and delete them first. Now copy the code you keep back up in your notepad and then paste them here. Now click on save template. You completely did it.

Thank you friend. I am sure, this article will help you. Keep on blogging.

How to Add HTML Parser to Your Page

Admin July 24, 2015

ClaimedCol

HTML Parser is a tool that parse any html and javascript code into XML code. Sometimes it becomes urgent to add some html/javascript code into blogger template, so that, in that situation you should place your html code after parsing it into xml code. In this tutorial I am not only going to ask you to parse your code here but I am also going to tell you how to add parser tool into your blog's static page. If you add this parser in your own blog or site page, then you will not visit other site to parse your codes. HTML Parser is also known as HTML Encoder. From this tutorial, you will definitely know how to add this tool in your blog page without any error. Visit this Demo.

This tool is very usable to change html code into xml code which seems like simple text. And this code could be easily put into your blogger template area and also in comment form. Moreover that it is mostly used to parse the adsense code.

Actually this only converts these following codes to encode into xml code:-

'&' characters change into '&amp'.
'>' characters change into '&gt'.
'''' (single quote) characters change into '&#039'.
'""' (Double Quote) characters change into '&quot'.

Follow the following step by step solution to add HTML Parser Tool in your blog or site page

First of all Create a Static Page.
Then just put the given code into your static page. (To add this code go to New Page>>HTML).

<form><textarea style=" height: 320px; width: 600px;" name="data1" ></textarea><input type="button" class="myclass" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"><input type="reset" class="myclass" value="Clear" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"></form>

You can change width and height of the form.
Now go to blogger dashboard and then press on Template.
Click on Edit HTML, then add the following code just above the </head> code.

<script type='text/javascript'>//<![CDATA[function html2entities(){vara=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"<";if(">"==a)return">";if('"'==a)return""";if("'"==a)return"'";if("&"==a)return"&"};//]]></script>

Now find this code ]]></b:skin> and put some given CSS to make your parser form more effective.

input.myclass{background:none repeat scroll 0 0 #888;border:2px dotted #777;color:#eef;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif}input.myclasshov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif}textarea{width:100%;color:#261fc0;font:14px verdana;background:#fffdf7;border:2px dotted #ff180d}textarea:hover{border:1px dotted #444}

Publish your page.
Now you have inserted html parser or encoder in your own blog. Enjoy blogging.

Thank you

Customizing Blog Post in Home Page - Read More Link Including Thumbnail

Admin July 08, 2015

ClaimedCol

If full content of the blog post is shown in home page, it looks little clumsy site because it looks in little bad format. So that making every post in the blog home page to be displayed with “read more” is more useful to avoid this kind of imperfectness.

To be a lot of specific, this may show the title of the post, then a brief outline with variety of characters and a fingernail, which will be the fingernail of the primary image uploaded within the post. Once the fingernail and therefore the post outline, there'll be a "Read More" link, that after you click on that, can take you to the particular post.

Creating Posts Within The Blog Homepage to be Displayed With Associate "read more" Button & a Fingernail.

This Automatic browse a lot of script can summarize content and the posts outline are going to be shown solely on the most blog page, class pages, and archive pages.

Log in to your blogger dashboard
Go to Template then click on EDIT HTML
Then press CTRL+F keys and search the following code

<data:post.body/>

You can find this code 3 times
Replace the above code by using the given codes

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Now search the </head> tag
And then paste the given code above the </head> tag

<script type='text/javascript'>posts_no_thumb_sum = 490;posts_thumb_sum = 400;img_thumb_height = 120;img_thumb_width = 120;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = posts_thumb_sum;}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>

How to Add Static Pages Easily in Blogger

Admin July 02, 2015

ClaimedCol

If you want to make your post static or static, you can add page to manage. This is the good way to manage your blog.

Pages

You can add this just like "About Me". Finding the details of your pages, managing multiple page and easily seeing how pages are organized is easy if you add the page gadget.

You can add your page gadget horizantally and vertically.

Arrange horizontally or verically

Steps to add page gadget in blogger.
step 1: Go to Blogger dashboard, then click on layout and search the page gadget.

Blogger Gadget

Step 2: After finding that gadget, click it and then click on save button

Blogger Layout

There you can see 28 primary gadget in blogger but you can find many gadget of third party in more link.

Make your blogging time happy. Thank you.

How to Add Gadget Section in Every Blogger's Blog header

Admin July 02, 2015

ClaimedCol

You should have noticed that we always cannot add widget in header section because often the header section of blog is locked and there is not provide any widget section. This can be an another tips, impression or whatever you say, to increase your adsense money or any other monotization.

All bloggers want to increase their money through blogging, so putting ads on recommended place, this can be better money making technique. Here we are going to learn how to add widget or gadget in the right side of the blogger head section where you can put adsense ads or leave for people’s ads place. When you going to put this gadget on any section, first of all you should know how many space the widget going to reserve.

We always recommend you to keep back up your blog’s template before any changes are going to take in your templates.

OK let’s start the lesson step by step:-

1. As usual, login into you blogger dashboard

2. Go to Template>>Edit HTML

3. Click any place inside the template and click CTRL+F to find the code <b:section class='header' id='header'

4. And then replace only the class=’header’ with class=’header left-header’.

5. After that again find the code <div class='header-cap-bottom cap-bottom'>. Above this you can see two ending div.

</div></div>

<div class='header-cap-bottom cap-bottom'>

6. Paste the given code above them.

<div style='clear:both;'/>

7. And then it’s time to make new gadget area. Let’s add new gadget elements

8. Then paste the given code before the code <div style='clear:both;'/>

<b:section class='right-header crosscol' id='right-header' maxwidgets='1' showaddelement='yes'/>

Now it is the time to add the CSS codes

Find the <head> tag and the add the given css below this tag

<style>.left-header{display: inline-block;float: left;}#right-header {display:inline-block;float:right;}</style>

At last Click on Save Template button to save the template and go to the layout button to see the widget area.

Add Widget in header right

Thank you for visiting us.