Tags: Blogging Tips / CSS Tricks

How to Add CSS3 Rounded Border Wrap in Blogger Templates

- 17 Comments

Adding Rounded Corners body wrapper to your blog is a great way to make your template more beautiful and attractive. By default, there is no border/rounded border wrap in blogger templates. By adding such styles you can make your blog look like professional blogs. This wrapper will make your blog to fit in every screen and it will also attract your visitors. So, today in this article we are going to share How to Add CSS3 Rounded Border Wrap in Blogger Templates.

Add CSS3 Rounded Border Wrap in Blogger Templates

Step 1. Log in to your Blogger Account
Step 2. Go to Template and click on Edit HTML Button
Step 3. Search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before it

#bgtwrap {
    background: #ffffff;
    width: 965px;
    margin: 10px auto 5px auto;
    padding: 0;
    position: relative;
    border-right: 15px solid #333;
    border-left: 15px solid #333;
    border-top: 10px solid #333;
    border-bottom: 15px solid #333;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    box-shadow: #333 0px 1px 3px;
    }

Step 5. Now search for <body> and paste the below code just below/after it

<div id='bgtwrap'>

Step 6. Finally, search for </body> and paste the below code just above it

</div>

Step 7. Click on Save Template Button
And you're done

Final Words

We hope this article helped you in learning How to Add CSS3 Rounded Border Wrap in Blogger Templates. Share this article with your friends and don't forget to subscribe us!

Tags: Blog Design / Blogging Tips / Buttons

How to Create a Button/Badge for your Blog

- 3 Comments

You might have seen that many blogs and directories are using Buttons for their promotion. Blog buttons are becoming a very popular way to promote and link back to your blog. A badge in your blog's sidebar is really a good way to provide your readers something that they can use and display on their own blog to show that which blog's they read and it'll also increase your blog's traffic. It's really easy to create a button for promoting your blog. You can choose color, border, font style, background and text for your button by using this button maker tool. Using this tool is extremely easy and in this article we'll show you How to Create a Button/Badge for your Blog using Button maker tool.

How to Create a Button/Badge for your Blog

Go to this page and Customize you badge
Customization:
1- Choose a base color or keep it transparent
2- Choose a border color or keep it transparent
2- Select your Button Size and
4- Choose a vertical bar color or keep it transparent
5- For better look, write a small abbreviation of your blog or whatever you want (Left Side Text) and select its background and text color
6- Write your main keyword in the (Right Side Text) and select it background and text color
7- Click on Update >> Looks good so right click on the image and Save it
8- Upload it to blogger to get its link

How to Add this Badge to your Blog

<a href="Your-Blog-URL" ><img border="0" src='Your-button-link' rel="Keyword"/></a>

1- Replace Your-Blog-URL with the url of your blog
2- Replace Your-button-link with the link of your button
3- Replace Keyword with your blog's keyword
Now to add this button to your blog Log in to your Blogger Account >> Layout >> Add a Gadget >> Scroll down the page and select HTML/JavaScript gadget from the list of gadgets. Paste the above code after customization in the empty HTML/JavaScript Box and click on Save Button.

From Editors Desk

I hope this article helped you in learning How to Create a Button/Badge for your Blog and How to Add it to your Blog. Share this article with your friends and don't forget to subscribe us. Take Care!

Add Rainbow Animation Effect to Links in Blogger

- 23 Comments

Got tired of Blogger's default link effect? Want to change your links hover effect? Don't worry, today we have a beautiful link effect for your blog. By using this link effect you can make the links on your blog change through different colors when the cursor is hovered over them. This effect works on JavaScript and it's really easy to implement this Rainbow Animation Link Effect to your blog. Follow the steps below to implement this Rainbow Animation Effect to your Blog.

How to Add Rainbow Animation Effect to Links in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the <head> tag
Step 3. Now Copy the below code and Paste it just below/after the <head> tag

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Step 4. Hit the Save Template button
And you're done...

From Editors Desk

I hope this articled helped you in learning How to Add Rainbow Animation Effect to Links in Blogger. Share this article with your friends.

Tags: Blogging Tips / CSS Tricks

How to Create a Tooltip For Hyperlink in Blogger

- 2 Comments

What is a tooltip? A tooltip is a text in box which is displayed over a hyperlink, when you move your mouse cursor on the link. Tooltips are used for displaying extra text over links. Tooltips can be used for all sorts of things i.e descriptions, definitions, word meanings etc. You might have seen different types of tooptips on many blogs. So, today we are going to share a simple and beautiful tooltip for your blog. In the image below "Text to Show" is your text and link and the text in the blue box just above it is your tooltip.

How to Create a Tooltip For Hyperlink in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and Click on Edit HTML button
Step 3. Now search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before the ]]></b:skin> tag

/* Tooltip Provided by blogolect.blogspot.com */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by blogolect.blogspot.com */

Step 5. Click on Save Template button

How to Use this Tooltip for Hyperlink

In the post editor click HTML and paste the following code where you want to use it

<a href="Your-Link-URL">Text to Show<span class="bgttooltip">Your Tooltip Text</span></a>

Customization:

Replace Your-Link-URL with your URL

Replace Text to Show with the text you want to show before hover

Replace Your Tooltip Text with the text you want to show in tooptip on mouse hover

Step 6. Click on Publish button
And you're done!!

Tags: Blogging Tips

How to Make a Gadget visible only to blog Administrator

- 1 Comment

Sometimes we want to make some gadgets visible only to us in blogger. A traffic counter, or any gadget while we are customizing it, we want to hide all these types of widgets from our visitors, until they are fully customized. So, if you don't know that how to hide a gadget from your visitors, then don't worry, today in this tutorial we'll show you How to Make a Gadget visible only to blog Administrator. The procedure is simple and you just have to add two lines to hide a specific widget from your visitors.

How to Make a Gadget visible only to blog Administrator

Step 1. Log in to your Blogger Account
Step 2. Go to Template and click on Edit HTML
Step 3. Now search (Ctrl + F) for the widget code that you want to hide
For Example, my widget code is

<b:widget id='HTML8' locked='false' title='' type='HTML'>
            <b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
          </b:widget>

To hide this widget from your users add <span class='item-control blog-admin'> after/below <b:includable id='main'> and </span> before/above </b:includable> tag. Check the example below:

<b:widget id='HTML8' locked='false' title='' type='HTML'>
            <b:includable id='main'>
<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
          </b:widget>

Step 4. Now click on Save template button
Congratulations: Now this widget is hidden from your visitors.
Note: Sometimes the widget codes are not expanded and are in the form of folds. So to expand the widget code click on the sideway arrow next to the widget's id.
And you're done!

Tags: Blogging Tips

How to Create a Full Widget Page and Remove Sidebar in Blogger

- 2 Comments

Have you ever thought about removing the sidebar and creating a full width page in blogger? If you have visited our About Us and Contact page then you may have observed the difference between normal pages and these pages. The difference is that these pages are of full width and with no sidebar, which gives them an eye catching look. So if you are thinking to create a full width page without sidebar, then you're at the right place, today in this article we'll show you How to Create a Full Widget Page and Remove Sidebar in Blogger.

How to Create a Full Widget Page and Remove Sidebar in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Pages and Create a New Page
Step 3. Now switch the page editor to HTML by Clicking on HTML tab
Step 4. Copy the below code and paste it in the HTML tab

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>

Change the width 99% according to your needs or you can also use pixels (960) instead of it.

Step 5. Click on Publish button and check your page of full width and without sidebar.

Final Words

We hope this article helped you in learning How to Create a Full Widget Page and Remove Sidebar in Blogger. Share it with your friends and don't forget to subscribe us!

Tags: Beginner's Guide / Blogging Tips

How to Submit your Sitemap to Google Webmaster Tools

- 4 Comments

Started a New Blogger Blog? Want to rank it better in search results? Without optimization it is not possible? There are hundreds of free SEO tools to optimize your blog. But the best free tool that i prefer is Google Webmaster tools. Google Webmaster tool gives all the information about your appearance in search results. In order to make your blog appear in Google search results it is important to submit your blog's sitemap to Google webmaster tools. What happens on submitting your sitemap to Google? In simple words, submitting your sitemap to Google means to notify Google about your blog posts. On submitting your sitemap to Google, it start sending bots to your blog, and crawling your blog pages thus your blog starts appearing in Google search results. So today we are going to learn that How to Submit your Sitemap to Google Webmaster Tools. Also Read How to Submit your Blog to Google Webmaster Tools

How to Submit your Sitemap to Google Webmaster Tools

Step 1. First of all, you've to Submit your site to Google webmaster tools
Step 2. After step 1 go to Webmaster tools homepage and select your site

Step 3. In the left sidebar click on Crawl and then select Sitemaps

Step 4. Now click on Add/Test Sitemap button and type sitemap.xml in the empty field

Step 5. Click on submit sitemap and refresh the page

From Editors Desk

We hope this article helped you in learning How to Submit your Sitemap to Google Webmaster Tools. Share it with your friends and don't forget to subscribe us!

Tags: Blogging Tips

How to Add Keyboard Keys Effect to your Text in Blogger

- 2 Comments

Unique design is necessary for a blog. To get organic traffic and user attention you need to develop the blog user friendly and search engine friendly as well. It is possible only if your blog's design is simple, attractive and easy to navigate. Sometimes we need to mention keyboard shortcuts in our blog posts. So, if you add keyboard keys effect instead of simple text, it will impress your visitors and they'll get more interested in your blog. Oh sorry, let me tell you that what is Keyboard Keys Effect? In simple words, keyboard keys effect is just normal text, styled using CSS. In this tutorial, we are going to show you How to Add Keyboard Keys Effect to your Text in Blogger.

How to Add Keyboard Keys Effect to your Text in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Template and Click on Edit HTML Button
Step 3. Now search Ctrl + F for the ]]></b:skin> tag and paste Ctrl + V the below code just above/before it

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Step 4. Click on Save Template Button

How to Use Keyboard Keys Effect

To use this Keyboard Keys Effect to your text, you need to add <kbd> and </kbd> tags to your text. See the below example to see how it works:

<kbd> This is my Text </kbd>

Create a New Post and switch it to HTML by clicking on HTML tab in the Post Editor
Example 1.
For Ctrl + C

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Result:

Ctrl + C

Example 2.
For Ctrl + F

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Result:

Ctrl + F

From Editors Desk

We hope that this article helped you in learning How to Add Keyboard Keys Effect to your Text in Blogger and How to use this effect in blogger. Share this article with your friends and don't forget to subscribe us!