How to Add Borders to Sidebar Titles in Blogger

Putting border(s) around  your sidebar title is one way of catching eyes attention to your readers. It drives readers to grab attention on it  and see some links  in that area. I know this is  basic in blogging yet useful  in some other ways. Below are the simple steps on how to customize (putting borders) to  your blog sidebar  title.

Demo here

Adding Borders to Sidebar Titles in Blogger

Step 1. Go to your Blogger Dashboard
Step 2. Click Template then have a back on it by clicking the Back-up button
Step 3. Hit the Edit HTML button
Step 4.  Find the code below by clicking anywhere inside the Template code then in your mouse use the  Control F. Place the code below inside the box.

]]></b:skin>

Step 5. Just above that code in step 4, place the code below

.sidebar h2 {

border-top:1px solid #000000;
border-right :1px solid #000000;
border-bottom :1px solid #000000;
border-left :5px solid #000000;

margin- top;0
margin- right;0
margin- bottom;0
margin- left;0
padding:0 0.2em;
line-height:1.5em;
}

Customization:

• To change the border size in each corner, simply change 1px in line 2 to 4 and 5px in line 5. The greater the value the bigger its appearance.
• To change the border style which is solid, replace it with dotted, ridge, dotted, dashed, double,groove, inset or outset. Click here to see the appearrance of these diffrent border styles.
• To change the color of your border style, replace #000000 (black) with other hexadecimal colors
• The margin is set to zero but you can adjust it. You can experiment this one according to your preferences. Don't forget t o add px after the numerical value like 1px,2px etc.
• The padding is the distance of your sidebar title form your sidebar border
• And finally, the line height speaks on the position of your sidebar title inside the borders.

Step 6. Save your Template and you're done buddy!

Try to read:

How to add Background Image in every Sidebar Title
Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title
How to Animate Borders in Blogger Sidebar
How To Customize Labels In Blogger Using CSS3

How to Add a Widget Below First Post in Blogger

Another way of  making  a gadget/widget to appear  below the first snippet in your first read more post is through applying the Blogger conditional tag (<b:if cond='data:post.isFirstPost'>.....Some codes here....</b:if>). Furthermore, if you want to show or hide this widget gadget in a specific page in your blog, you can also use the other Blogger conditional tags.

See Demo Here.

Adding A Gadget or Widget Below First Post Snippet in Blogger

Step 1. Go to your  Blogger dashboard
Step 2. Click  Template and have a back-up of it for your reference.
Step 3.  Hit the Edit HTML button
Step 4. Search the line below  inside the search box and hit Enter to find it

<b:include data='post' name='post'/>

Step 5. Just below it add this code:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin:10px auto;">
Your widget that you want to show or hide
</div>
</b:if>

Note:

The code that you are going to put must be parsed properly using a parsing tool.
If you want that the widget that you have added  will appear only in home page of your blog, use the code below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin:10px auto;">
Your widget that you want to show or hide
</div>
</b:if>
</b:if>

How to Add Adsense Code Below First Post Description In Readmore

Putting Adsense Code in our blog need to be tricky  in order to gain more money from our visitors. Here, we will add adsense code right after the first snippet in your read more i.e. in your homepage. We will use the read more scripts that we use in my previous tutorial. Below is the process of making it.

Click this for the live demo

Note:

The Ads in image above is not  an ad from Adsense, it is from Bidvertiser. I used it only for clarification of  below tutorial.

How to Add Adsense Code or Any Code Below First Post Description In Readmore

Step 1. Please follow the  procedure from step 1 to the last step of that tutorial (How To Create Magazine Style With Post Summaries And Thumbnails On Blogger).
Step 2. In step 4 of that tutorial,  you have added a certain lines of scripts. Below that scripts, you add your adsense code or any widget as shown in the blockquote below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading >></a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Your Adsense Code Here/ Widget Here

Note: 

Your adsense code or any widget will not work if it is not being parsed properly. You can  use our parsing tool for free.

Step 5. Since you have added a new widget below your first post in read more, the margin will be changed accordingly. You may play the margin of your read more by using the css below

.post {
margin: 86px 0 -48px 0;

Note:

Add that above CSS code above the tag ]]></b:skin>
The first nemerical value  (86px) is responsible for the top margin.
The second  one (0) is for the right margin.
The third one (-48px) is for the bottom margin and
The last vaue (0) is the right margin.

Step 6. After you have set this in your blog  you may now click the save buttom and you're done.
If you have a little difficulty setting its margin. Don't hesitate to call me and  I'm glad to help you.
Happy Blogging Buddies!!!

How to Add Social Networking Buttons With CSS3 Style in Blogger

Sharing widgets help bloggers to expand there exposure in the web since it makes our articles viral in the internet. I would share you another example of sharing widget where it is very customizable in your part. This is from one of my circle of friends from G+ and I woul shre it to you coz I believe that you will really like it. This sharing widget uses   CSS to make it more attractive than others.This include zooming hover effects. You can check right here in my blog sidebar for the demo.

Social Network Buttons With CSS3 (Metro) Style

Step 1. Go to Blogger Dashboard >> Template >> Back-up your template  for your reference.
Step 2. Click Edit HTML
Step 3. Click anywhere in the code section and search the code below

]]></b:skin>

Step 4. Above the code in step 4, paste the css code below

/* Bloggingtipsandtrix.blogspot.com  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 48px; /* width of each image.*/
height: 38px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.1); /*scale up image 1.1x*/
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}

Step 5.  Save your Template and you're halfway done!
Step 6. Go back to Blogger Dashboard >> Click Lay-out (or anywhere in blog pages).
Step 7. Scroll down and select HTML/Javascript.
Step 8. Inside the empty box, place the HTML code below

<ul class="bubblewrap">
<li><a href="googleplus URL here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqDR42YyGwhNxCFmVgMCnBVfau4l6cAwB7yB93x_VedRlN5t8f_APeQZlIs6YQLadvU_VFdnuDIaFSz12r4XnTt5TBbubLErwjjiZDBxKnYHVavga28gpSF6Hq_84q2EmUaspHbafDX4/s1600/bloggingtipsandtrix.blogspot.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="facebook fun page URL or Username here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qXsdO-SCYSJMOo-NfyQzKutyVJnsLNzW3zm9onl8sN7BZtmYu2qC5tmlAv4VpewsAP1lWFxztfpMZoqM4DdKu2Lu6_mT_KWfPe8xUZ9QfyhCcHVKgrLvUl4zK0j1GyQu3PCScTrJ4O4/s1600/bloggingtipsandtrix.blogspot.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="Digg Username URL Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTyOKTgY1gMx08-uic_JfEq6NCIykL8tEFtta6sSBM4UlGB29LMwJ7KqYMcP_dLLScfV-LXbIuB3GxcgaEccVP0V_I3LQ9U9_J8Qe79Ca2WOSHMDEPE9QVQBSpgdpetqgDb8YaWDdz9o/s1600/bloggingtipsandtrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="Your Twitter URL Here"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PNMh26AMeM9yhwDCo9UglFhdRzwyNEmi0h3-2YIGaS6XMJGvaxN4HGM5vnx_LQhtYSjIRWY7gSJN1B61KefwBZwdoFmeTsIVvRJ0C6RFSDf7GD1XJGW9fTDw7J_iQB72G7tJHK5j0QA/s1600/bloggingtipsandtrix.blogspot.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="Your Feedburner URL Here"><img src="   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6bSr0o29q3_FpErhN4yQ4JFjFH7aiy7y9vAerX8QzERlf8XjiDtNHpqV2bBpSjUvI4do7QlzPkhiCsrwCdcwDGB0m6iYFxUtSba0HjygUXHiHnAWCecN1sVe1arYVkZRXKKUWuEps0A/s1600/bloggingtipsandtrix.blogspot.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Note: Simply replace the corresponding four URLs with yours.
Also Read:

How To Get Your Feedburner Email Feedlink Adding Email Subscription Widget To Blogger/Blogspot                                      Adding Twitter Follow Buttons In Blogger Sidebar

 Step 9. Save your template and Bravo!
Peace on EARTH Bro!

How to change password in your Blogger Account

Changing a blogger account password every now and then is important especially if you are doing your work  publicly i.e. outside your home especially at the computer cafe. You don't know if somebody might interist your blog and hack it from you. That is disgusting in your part who sacrificed many sleepless night just to earn dollars and all of a sudden it disappear. However, changing it  won’t affect any other Google product you have. This change change only affects  your blogger account.

Also Read: How To Get Free Do Follow Backlinks For My Site

In this post  I will share to you   how to change a blogger account password and I believed this is compulsory to all bloggers. I for one have changed my Blogger password for security and i love  my new password.  With much adieu, let’s now proceed to the process.

How To Change a Blogger Account

Step 1. Log-in  to your Blogger account
Step 2. Go to  this  site .
Step 3. Now  in the first box, please enter your current password.
Step 4. In the second box, enter your new password ( much better if you your copy with your new password in a notebook and keep it in a safe place)
Step 5.  An finally, please confirm your new password by entering it in a last box .

Hope you  enjoy reading  this post?
Treasure  your  families and Happy Blogging!!!

How to Get Free Do Follow Backlinks For My Site

Bloggers always dreamed to be successful in their works in the web that is why they keep on practicing (basic) SEO tips in order to receive huge amount of traffic.  One of the most effective among those  SEO tips is having quality backlinks on your site but how can we obtain that. In this article, I will  discuss its basic on how to get quality backlinks.

What are Backlinks? 

According to Wikipedia, "backlinks are  also known as incoming links, inbound links, inlinks, and inward links, are incoming links to a website or web page. In basic link terminology, a backlink is any link received by a web node (web page, directory, website, or top level domain) from another web node". This  allows you  to keep track of other pages on the web that link to your posts. But in the other hand you can't just recieve quality backlinks in just a few days or months. It will take  years in order to let other site owners to link on your posts.  Therefore in order to gain reputation online and let others to let eastablish links on sites is to follow  some simple  but useful tips below, which I have also made for the last few months.

How to  Generate Quality Backlinks on Your Site(s)?

• Write Comprehensive and Quality Articles

Writing comprehensive and quality  content/articles enjoy people while reading then they will definitely share it, like it and tweet it. You will get ranked for lot of keywords. Concentrate on this process first and do it  regularly.

• Write Guest Posts on Other Blogs.

Try to be a guest poster in other high page ranking blogs in order to gain popularity since people always rush in to read articles on those type of blogs.

• Blog Commenting.

Commenting may be crucial especially if you do it improperly. It means giving comments by just reading only the title of the post. Be patient and respective with other blog owners.Comment only after reading the entire article and do this on high page ranking blog related to your blog niche.

• Submit Directories.

Submit your article regularly, it means that you should follow a certain pattern.

• Share On Social Media.

Promote your article in social media outlet like facebook, twitter etc. You can't believe how this technique helps you spread your article in the web.
Also read: Bad Seo Tips A Blogger Must Not To Follow 

Happy blogging to everyone and GOD BLESS :-)