Customization
Showing posts with label Customization. Show all posts
Showing posts with label Customization. Show all posts

Tuesday, 24 July 2018

Remove footer credit link from any template without redirecting

5 Comments

Many websites are available on the internet which provides very stylish blogger template at very low cost. If you purchase their template than that template will not contain any credit link. These websites also provide most of the free blogger template with Non-removable credit link. Means, what? If you’ll try to remove credit link from their template, then your blog will automatically redirect to their website (Homepage or a particular site). This is because they added some JavaScript into their free templates. In another hand, if you undo the changes and keep their original credit of template then it works perfectly.

Actually, these links are attached with some JavaScript or CSS. Finding JavaScript from the template and then removing is too boring and time-consuming also it requires lots of effort to do this. But in other hand, you can easily hide the credit/footer link via CSS. This method is very simple and takes only 2 minutes.

Steps to Remove Credit/Footer Link:
  • First of all, go to Blogger.com 
  • Just Login to Blogger and select your blog. 
  • Now go to Theme>HTML.


  • Go to the footer and find the credit/footer link which needs to remove/hide. You’ll find something like Copyright, credit or designed etc.
Add the following line with your original copyright ID. (As shown in picture below).
style=”visibility: hidden”

  • Now, you need to Save your Template.
  • Enjoy:)
Need Help?

If you you need any help in removing your template's footer credit link then feel free to ask me in the comments section below. 

KEEP READING

How To Create Simple Drop Down Menu In Blogger

comments


A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

How To Add Drop Down Menu ?


1. Go to blogger Dashboard and click on Layout.

2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/JavascriptWidget.

3. Now Paste below code into it.
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Category #1</a></li>
<li><a href='#'>Sub Category#2</a></li>
</ul>
</li>
</ul>
</div>
4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).

5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.
<li>
<a href='#'>Contact</a>
</li>
6. Now we will add CSS, Go to Blogger Dashboard and click on theme and click on Edit Html. Backup your template before doing this.

Also Check: Backup Your Template In 3 Simple Steps

7. Then Search for below code.
]]></b:skin>
8. Paste the below code above the code you searched in Step 7.
/**MBT Navgation bar**/
#mbtnavbar {
background: #464849;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #028490;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #028490;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.

Change #464849 to change background color of navigation bar which is currently dark grey.
Change #028490 to change the color of tab on mouse hover.
Change #028490 to change the color of Drop down menu
Change #70b6bd to change the color of Drop down on mouse hover.

Any Question ?

If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog RSS Feed, Like us on Twitter, Facebook, +1 on Google+. Keep Blogging

KEEP READING

Saturday, 9 September 2017

How To Customize Blogger Template In Simple Steps

comments

Hello readers!! This article is all about “How to Customize a Blogger template”. A well customized template can increase your blog’s reputation a lot among your blog readers. Everybody wants to use a unique and stylish template, So that it can catch an eye of the visitor and to convert the visitor into a regular reader. A template is the most important thing for a blog, it express your blog is capable to attract visitors or not. Your template must look enough attractive and easy to navigate so that it can connect with your blogs reader.

Don't Miss: How To Add Go To Up And Down Buttons In Blogger

Customizing the template:-

There are lots of templates available into the internet and most of the bloggers apply those templates into their blogs. But as in our sense those template doesn't have that unique tag in their style or in customization because the templates were publicly released. As a template developer its not a big deal to customize or to make a new theme or template from scratch but what about the new and beginner blogger’s? Is that a easy job for them? Can they customize their own template? Yes they can but not so properly. Cause template Customization is hard job and it needs lot of patients, but you can customize some basic things in your template and this article is all about it.

Below we have mentioned some Important terms and tags, after customizing them you can make your template unique and stylish. So here we go.

Body:-

Body is the main part of your blog’s template. It holds the whole structure of your blog’s template. It starts With and ends with in between it there are various types coding of different widgets. You can customize the body by adding some cool and stylish backgrounds in it also you can add some default font style and font color.Below we have given an example of CSS which is responsible for your blogs body style.
body {
color: #464646;
font-family: 'Lora', serif;
font-size: 14px;
background: #ffffff;
}
Now in the above css you can see there is background,color,Font-family and font-size now #ffffff this is responsible for the background color you can put any background color by changing this value, you can try color code generator for more color codes. Font-family, color and Font-size is responsible for the the default font customization.

Note: You can add image instead of color in your body background, to add an image just add this in the background value.
url(Your-Image-Link);

Header:-

Header is one of the most important part of any blog or blogger template. Normally Header is used to place blog’s logo or title but you can also add some extra widgets like navigation, ad spot, Social Subscription widgets, search widget and many more. But if you have only one space to add widget into header than you have to customize your header, so that it can be divided into two parts. You need to add some css and HTML in your template.

Go to Blogger > Design > Edit HTML
Search for ]]>
and just above it paste the following CSS code
/*------Header-----*/
#header-wrapper{
width: 960px;
color: #000;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
color: #BF0100;
font-size: 36px;
font-family: 'Ultra', serif, Arial;
font-weight: bold;
margin: 0;
padding: 0px 0 5px 0;
text-decoration: none;
text-shadow: 6px 6px 4px #ccc;
line-height:1.2em;
}
.headerleft h3 {
font-family: arial, tahoma, Sans-Serif;
font-weight: normal;
margin: 0;
padding: 0;
}
.headerleft .description {
color: #3B3B3B;
font:bold 12px Helvetica, arial, sans-serif;
margin: 0px;
padding: 0 0 20px 0;
text-shadow: 4px 4px 6px #ccc;
}
.headerleft {
width: 450px;
float: left;
margin: 0;
padding: 0;
height:80px;
}
.headerright {
width: 468px;
height:80px;
float: right;
margin: 0px;
padding:1px 0 0 0;
}
Now search for <body> and just below it paste this following coding:
<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The SB Lab (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div></div>
Now you have successfully divided your blogs header into two parts, so now let’s customize it. At first we will take a look on its background. Just change the color code into that css or you can also add any image as a background.. You can change the default Font style of your header title by changing its Font-family value into the header css. You can also change its color size, you can add shadow effect into the texts.
Post area:-

Now this is something very important for your blog or blog’s template because it carries your content section of your blog. So in simple words you can customize your post are in following ways.

Customizing the heading and sub-heading tags.

Basically these tags are signified by h2 and h3 attributes. You can change their style by simply customizing the cs/div>
.post h2 {
font:bold 210% Arial, sans-serif;
line-height:1.2em;
margin: 0 0 7px;
padding: 3px 0px;
}
.post h3 {
color: #4E555A;
border-top: 1px dotted #4E555A;
border-bottom: 1px dotted #4E555A;
}
After finding the proper css you can change its background, font-style etc. You can also add various types of border in it

Recommended For Your : How To Add Social Floating Bar in Blogger

Adding useful widgets:-

Adding widgets in post area are always very helpful and important for your blog. You can add social sharing widget below post, post author box and related post widget to make your blog beautiful and also these widgets will help your readers
Sidebar:-

There is nothing much to customize in the side bar you can customize the sidebar widget title by editing its sidebar h2 value in its css. You can add border, background, font-style etc.
Need Help?

We hope that you have enjoyed the above session of discussion about "Customizing your blog" and "Making Blogger Template Unique and Beautiful". In our Next article we will share some more cool customization of sidebar,so stay in touch. If you are confused about Customize your Blogger Template then kindly drop a comment below. We will reply you as soon as possible. Peace and Happy Blogging.
KEEP READING

Sunday, 18 December 2016

How To Add Back To Top Button In Blogger

comments

In this post i will teach you to add simple Button or Icon to your blog to make your readers easily go back to top of the page. If your readers are browsing through dozens of posts on your blog, this simple plugin will let them to jump directly to top of the page. This plugin is very simple to install on your blog and it will be placed on bottom right corner of your blog so readers can make use of this useful customizarion.

Adding Back To Top Button To Bloggers Blog

1. Go to Blogger>Dashboard>Layout.
2. Then Click on Add Gadget and choose Html/JavaScript from pop up window.
3. Now paste below code into it.
<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="URL OF BACK TO TOP"/></a>
<!--BACK TO ENDS-->

4. Now replace the Text in Green with URL of your image. I have provided some image at the bottom of this post which you can use on your blog.

5. Save the widget and you will have Back to top button on your blog.
Images For Back To Top Buttons

Right click on any of the below image and select Copy Image URL and paste in the provided code above or check Step 4 for more information.





Share Your Thoughts!

If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog RSS Feed, Like us on Facebook, . Keep Blogging!

KEEP READING
Subscribe to: Posts (Atom)