Improve Blog Appearance With CSS Triangle

CSS( Cascading Style Sheet ) can be used in number of ways with blog. You can easily improve the appearance of blog using CSS. Here we will discuss to create small triangle using CSS and apply it further to the blog template. We will add this triangle below the title of sidebar widget which looks so cool.

How To Create Triangle Using CSS:-

The idea is all about a box which have zero width and height. So take a look to CSS code.

.arrow-up     /* It Creates upward Triangle */ 
        {  
        width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
   border-bottom: 5px solid black;
        } 
 .arrow-down   /* It Creates downward Triangle */ 
    {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
   border-top: 20px solid #f00; 
} 
 .arrow-right   /* It Creates right pointed Triangle */
{
  width: 0;
  height: 0; 
 border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
   border-left: 60px solid green;
 } 
 .arrow-left   /* It Creates left pointed Triangle */
 {  width: 0;
  height: 0; 
 border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
    border-right:10px solid blue; 
}

How To Use CSS Triangle In Blogger Template

Wow! have you seen the result ? You can add this small triangle below the background of sidebar's title as we does in above figure.
Note: You may find difficulty in adding triangle below the title of widget because it requires to find the appropriate code of widget below which the corresponding CSS code is to be added.

Add CSS Triangle Below The Subscribe Widget

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand Widget Templates".
4. Download the Full template before making any changes in it
5. Copy the title of subscribe widget from the blog homepage. As in my case the title of subscribe widget is Subscribe via email.

6. Find that word in blogger template.

 

<b:widget id='HTML2' locked='false' title='Subscribe via email' type='HTML'>
<b:includable id='main'>

 <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>
        .
        .
        .

Paste the following code just below the <h2 class='title'><data:title/></h2>.

<div style='   width: 0;   height: 0;   border-left: 10px solid transparent;   border-right: 10px solid transparent;    border-top: 10px solid #0084CE;    position:relative;margin-left:auto;margin-right:auto;    bottom:10px;    '/> 

Note:How To Modify The Code

• margin-left:auto or margin-left:auto specifies the middle alignment of the triangle.To move the position replace auto values with pixel values. margin-left:60px  margin-right:auto it will take 60px from the left side.
• border-top: 10px solid #0084CE it will change the color of triangle.

In Similar way you can add triangle to Facebook Fan Page , Labels and Popular Post. The main thing is to remember that you have to find the Title of widget in template, which you will get from homepage of the Blog.