Don't forget to subscribe for Latest Updates!
Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.
<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>
To the CSS-part of your template, add coding for the menubar-id:
#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.
Don't forget to subscribe for Latest Updates!
Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.
<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>
To the CSS-part of your template, add coding for the menubar-id:
#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.
Don't forget to subscribe for Latest Updates!
Sorry for Not Updating my Blog Yesterday.I have Some Problems While Posting in Blogger and There Was Problem in Our House Electricity.So, Today I Find a Very Simple and Very Easy Way To have A comment Form Below Every Post!I Dont Think That it is a Widget or Trick..You Suggest!
Now you Blogger / blogspot users can have a comment form under your post. this mean your readers can leave and write a comment exactly under your post. without clicking and open a new page / window.
How to Do That?Sooo Easy:-
1. This is a free service from haloscan.com, so what you need to do is just register for a new account on haloscan.com, and about seconds, you’re registered.
2. Login to haloscan
3. Click the SubMenu “Install”
4. Choose your blog type, and because we’re talking about blogger, so blogger it is.
5. Click Next and follow the instructions.
6. Done, and congratulation
With this haloscan free services, we can have a better great comment system on our blogger / blogspot blog.
there are many great points about this services.
1. We can easily integrate it with cocoment.com service, so you can track your comments
2. You can customize the header of your comment from
3. it’s free. that’s the most important
so what are you waiting for?
I think You Have Noticed This Comment Form in My Blog!
Have an easy way to leave a comment Quickly!
Don't forget to subscribe for Latest Updates!
Sorry for Not Updating my Blog Yesterday.I have Some Problems While Posting in Blogger and There Was Problem in Our House Electricity.So, Today I Find a Very Simple and Very Easy Way To have A comment Form Below Every Post!I Dont Think That it is a Widget or Trick..You Suggest!
Now you Blogger / blogspot users can have a comment form under your post. this mean your readers can leave and write a comment exactly under your post. without clicking and open a new page / window.
How to Do That?Sooo Easy:-
1. This is a free service from haloscan.com, so what you need to do is just register for a new account on haloscan.com, and about seconds, you’re registered.
2. Login to haloscan
3. Click the SubMenu “Install”
4. Choose your blog type, and because we’re talking about blogger, so blogger it is.
5. Click Next and follow the instructions.
6. Done, and congratulation
With this haloscan free services, we can have a better great comment system on our blogger / blogspot blog.
there are many great points about this services.
1. We can easily integrate it with cocoment.com service, so you can track your comments
2. You can customize the header of your comment from
3. it’s free. that’s the most important
so what are you waiting for?
I think You Have Noticed This Comment Form in My Blog!
Have an easy way to leave a comment Quickly!
Don't forget to subscribe for Latest Updates!
One of my visitor Hitesh Kulkarni sent a letter to me.
Here is the letter
Hi
I always wanted a list in my blog of the titles of all my post. Recently, I saw one in your blog. Can you please reveal, how do you do that? Is it that you just type in the links or you have done some of the coding work .Also I wanted to know that you are using old or the new blogger? Will the list function work in all blogging platforms?
Sincerely
Hitesh
Hello Hitesh, you forgot to mention your blog’s URL. This blog is using the new blogger XML template. To type in the links for blog posts was a very lengthy process, also it needed to be updated every time you post.But the method I use is very simple and works within seconds.Which ever blogging platform you are using, this method should work. All you require is a feed of your blog. Blogger has an inbuilt feed option for you. Your RSS feed URL should be http://www.yourblog.blogspot.com/rss.xml .Now you need to convert this into a simple javascript coding. You can get one converted here. Fill in all the details you want.
After you had that converted, Go to Dashboard > Layout > Page Elements > Add a Page Element > HTML / Javascript. Paste the javascript code you obtained in it. Click on save . Now give your blog a look . It worked !
This method can also be used for displaying recent posts list after posts or in the sidebar.
For this, you have to change the number of post titles to be displayed.
To add a recent posts list after each post , you need to parse the Javascript code. It can be done here. Then paste the parsed javascript in your XML template in this line “post footer line 2” paste it there and see the results.
Note:: This will only give recent posts and not the previous posts.
Don't forget to subscribe for Latest Updates!
One of my visitor Hitesh Kulkarni sent a letter to me.
Here is the letter
Hi
I always wanted a list in my blog of the titles of all my post. Recently, I saw one in your blog. Can you please reveal, how do you do that? Is it that you just type in the links or you have done some of the coding work .Also I wanted to know that you are using old or the new blogger? Will the list function work in all blogging platforms?
Sincerely
Hitesh
Hello Hitesh, you forgot to mention your blog’s URL. This blog is using the new blogger XML template. To type in the links for blog posts was a very lengthy process, also it needed to be updated every time you post.But the method I use is very simple and works within seconds.Which ever blogging platform you are using, this method should work. All you require is a feed of your blog. Blogger has an inbuilt feed option for you. Your RSS feed URL should be http://www.yourblog.blogspot.com/rss.xml .Now you need to convert this into a simple javascript coding. You can get one converted here. Fill in all the details you want.
After you had that converted, Go to Dashboard > Layout > Page Elements > Add a Page Element > HTML / Javascript. Paste the javascript code you obtained in it. Click on save . Now give your blog a look . It worked !
This method can also be used for displaying recent posts list after posts or in the sidebar.
For this, you have to change the number of post titles to be displayed.
To add a recent posts list after each post , you need to parse the Javascript code. It can be done here. Then paste the parsed javascript in your XML template in this line “post footer line 2” paste it there and see the results.
Note:: This will only give recent posts and not the previous posts.
Don't forget to subscribe for Latest Updates!
A little while ago I thought it would be nice to have a Table of Contents on my Blog. So I experimented a bit on how this could be done without a lot of hacking, and also without outside help such as del.icio.us.
Ramani has some interesting hacks, and 2 of them I combined into a new one.
If you want to list all your posts in one page, you can use the following url:
http://yourblog/search/label/?max-results=100
Is it as simple as that?
Yes it is!
The max-results is limited to 100 results. This is a Blogger server-side restriction. So it will give a TOC for only the 100 latest posts.
If we want to display only post titles we have to do a little more hacking, but Ramani has explained how to do this on archive pages. I just applied this to label pages.
Edit your template, find the Blog widget, and replace the entire main-includable with this txt-file. Save your template.
Add the url to a convenient place in your menubar or sidebar, and ready you are.
Don't forget to subscribe for Latest Updates!
A little while ago I thought it would be nice to have a Table of Contents on my Blog. So I experimented a bit on how this could be done without a lot of hacking, and also without outside help such as del.icio.us.
Ramani has some interesting hacks, and 2 of them I combined into a new one.
If you want to list all your posts in one page, you can use the following url:
http://yourblog/search/label/?max-results=100
Is it as simple as that?
Yes it is!
The max-results is limited to 100 results. This is a Blogger server-side restriction. So it will give a TOC for only the 100 latest posts.
If we want to display only post titles we have to do a little more hacking, but Ramani has explained how to do this on archive pages. I just applied this to label pages.
Edit your template, find the Blog widget, and replace the entire main-includable with this txt-file. Save your template.
Add the url to a convenient place in your menubar or sidebar, and ready you are.
Don't forget to subscribe for Latest Updates!
Blogger Beta provides an easy way to create link lists even for those who don't know HTML. But, there is no such functionality for drop-down menus. I had a few people ask me how to create drop-down menus and where to add them in the template. I thought this is something which can be simplified using a third-party widget. I have created an interface, similar to that of Beta, with which you can easily create drop-down menus and add them to your blog with one-click!
Just goto my Drop-down menu creator page and add your menu items one by one by providing a name and URL for each item. The updated menu will be shown to you. Once you are happy with the menu that you created, click the button to add it to your blog. You will see a page (like the one shown below) where you can select the blog (if you have more than one), provide a title for your menu and then click "Add Widget". You will see the widget getting added to your sidebar which you can move around to wherever you want. All this can be done without touching the template code!
Don't forget to subscribe for Latest Updates!
Blogger Beta provides an easy way to create link lists even for those who don't know HTML. But, there is no such functionality for drop-down menus. I had a few people ask me how to create drop-down menus and where to add them in the template. I thought this is something which can be simplified using a third-party widget. I have created an interface, similar to that of Beta, with which you can easily create drop-down menus and add them to your blog with one-click!
Just goto my Drop-down menu creator page and add your menu items one by one by providing a name and URL for each item. The updated menu will be shown to you. Once you are happy with the menu that you created, click the button to add it to your blog. You will see a page (like the one shown below) where you can select the blog (if you have more than one), provide a title for your menu and then click "Add Widget". You will see the widget getting added to your sidebar which you can move around to wherever you want. All this can be done without touching the template code!
Don't forget to subscribe for Latest Updates!
My Recent Posts Widget now and then leads to discussions with other Bloggers about the order in which recent posts appear. Updated posts appear at the top of the recent posts list, even if their publishdate is somewhere far in the past. From a technical point of view, this is quite logic: people subscribe to a feed to be informed about changes in the blog, so if an old post is updated, it should appear in the feed immediately. But many times changes are just cosmetic: correcting a typo, repairing a dead link, or assigning a new label. In that case, appearance of the post in the feed is a little bit annoying or confusing.
Some readers suggested that I should change the coding of the widget, and leave out updated posts. I think that is not a very good idea, because an updated post could contain relevant new information. So I came up with an interesting trick.
Add the following styling definition to your blog's template:
.updateinfo { display:none; }
Now, whenever you update a post, at the beginning of the post insert update-information, using the following html:
<span class="updateinfo">UPDATE:
Repaired some dead links. Content has not be changed.</span>
If you publish your post, the update info will not be displayed on your blogpage, but the feed, and therefor also the Recent Posts Widget, will show the update-text.
Don't forget to subscribe for Latest Updates!
Another polish-and-shine hack: add a tooltip to the labels-links. Hovering your mousepointer over the link in your posts footer will show a tooltip saying "More posts on this topic".
Insert the red code into your template.
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' title='More posts on this topic' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Easy!!
Don't forget to subscribe for Latest Updates!
Another polish-and-shine hack: add a tooltip to the labels-links. Hovering your mousepointer over the link in your posts footer will show a tooltip saying "More posts on this topic".
Insert the red code into your template.
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' title='More posts on this topic' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Easy!!
Don't forget to subscribe for Latest Updates!
You want to know how to display html code / source code in your blog posts for the latest stuff you have created or want to show.
Here is an easy solution -
Go to the Encode/Decode HTML entries converter at Centricle
Just copy your entire html code / source code in the box at the above website and press encode/decode.
Now copy it back to your blog post (edit html / compose mode) and get your code displayed as you want people to see.
It is Sooo Easy!Try it!
Enjoy!
Don't forget to subscribe for Latest Updates!
You want to know how to display html code / source code in your blog posts for the latest stuff you have created or want to show.
Here is an easy solution -
Go to the Encode/Decode HTML entries converter at Centricle
Just copy your entire html code / source code in the box at the above website and press encode/decode.
Now copy it back to your blog post (edit html / compose mode) and get your code displayed as you want people to see.
It is Sooo Easy!Try it!
Enjoy!
Don't forget to subscribe for Latest Updates!
In This Hack you can expand Posts from summary to full post, collapse them, and if you don't have a post summary in a particular post, the "Read More..." and "Collapse" links will not show up in your post.
This is how to implement it.
Step 0:
Back-up your template before modifying it.
Step 1:
Add the following javascript code to the head of your template. You can place it just above the </head>-tag.
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step 2:
Find the includable named 'post' in your template, and change it so that it is exactly as shown below (the code in red has to be added):
<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....
Save your template.
Step 3:
In the Settings - Formatting tab go to the bottom and enter the following post-template:
Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>
Now every new post you start will have a fullpost-span by default. If your post is short, you can delete the <span>-tags from the post. The post will be displayed in full, and no links with "Read more..." or "Summary only" will be displayed for that post.
How it works (skip this if you don't like tech stuff).
The changes you made to the code make that every post-body consists of at least 3 span's: the fullpost-span that you entered in the post-template, a span for the 'Read more'-link, and a span for the 'Summary only'-link. Because there might be other spans in your post, each of these 3 spans have a unique id ('fullpost', 'showlink' and 'hidelink' respectively).
When you open your blog on the main page, the post is displayed as follows:
* Summary is displayed (always)
* Full text is hidden (first div, set to display:none)
* Read more is shown (second div)
* Summary only is hidden (third div, set to display:none)
The post is given a unique id, and this id is passed to the javascript-functions showFull and hideFull respectively. These functions use the getElementsByTagName-methods to obtain handles to the spans, and then toggle the way they are displayed.
A third function, checkFull, checks if the Fullpost-span exists. If not, both links are hidden.
Don't forget to subscribe for Latest Updates!
In This Hack you can expand Posts from summary to full post, collapse them, and if you don't have a post summary in a particular post, the "Read More..." and "Collapse" links will not show up in your post.
This is how to implement it.
Step 0:
Back-up your template before modifying it.
Step 1:
Add the following javascript code to the head of your template. You can place it just above the </head>-tag.
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step 2:
Find the includable named 'post' in your template, and change it so that it is exactly as shown below (the code in red has to be added):
<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....
Save your template.
Step 3:
In the Settings - Formatting tab go to the bottom and enter the following post-template:
Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>
Now every new post you start will have a fullpost-span by default. If your post is short, you can delete the <span>-tags from the post. The post will be displayed in full, and no links with "Read more..." or "Summary only" will be displayed for that post.
How it works (skip this if you don't like tech stuff).
The changes you made to the code make that every post-body consists of at least 3 span's: the fullpost-span that you entered in the post-template, a span for the 'Read more'-link, and a span for the 'Summary only'-link. Because there might be other spans in your post, each of these 3 spans have a unique id ('fullpost', 'showlink' and 'hidelink' respectively).
When you open your blog on the main page, the post is displayed as follows:
* Summary is displayed (always)
* Full text is hidden (first div, set to display:none)
* Read more is shown (second div)
* Summary only is hidden (third div, set to display:none)
The post is given a unique id, and this id is passed to the javascript-functions showFull and hideFull respectively. These functions use the getElementsByTagName-methods to obtain handles to the spans, and then toggle the way they are displayed.
A third function, checkFull, checks if the Fullpost-span exists. If not, both links are hidden.
Don't forget to subscribe for Latest Updates!
If u Want to Pretty Up Your Post,There Are many Things,But to Add Signiture to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!
You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host...I use Ripway.
Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:
<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>
Replace SIGNATURE URL With The Image URL!
Enjoy!!
Don't forget to subscribe for Latest Updates!
If u Want to Pretty Up Your Post,There Are many Things,But to Add Signiture to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!
You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host...I use Ripway.
Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:
<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>
Replace SIGNATURE URL With The Image URL!
Enjoy!!
Don't forget to subscribe for Latest Updates!
Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.
There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.
Creating the new columns
Here are the four steps needed to transform the footer section of your blog template:
1. Back up your existing blog template!
Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.
To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
2. Move all existing widgets from the existing footer section
In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
3. Add extra code to your footer section.
Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).
Now you need to find this section in your template:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in GREEN.
Replace the entire line highlighted in GREEN with the code below:
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
1. is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
2. Adding style for the new footer section
Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.
Immediately before this line, add the following lines of code:
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.
Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!
I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:
<hr align='center' color='#5d5d54' width='90%'/>
If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.
If you would prefer to remove the line altogether, simply delete the whole line.
I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.
For Future Updates,Please Subscribe!