In some of the websites you may have noticed that they have divided the main area and sidebar through the borders properties. The border property is very easy and you can sketch a border around any div. Like we can do it in CSS

. Img

       {width:300px; border:1 px solid #333}

Now a days web designers use advance coding in order to make some div in a prominent way. This gives a stylish look to the box. After the release of CSS3, the friendly coding enhanced the CSS and defined the box shadow property in a unique form. An example of the box shadow is shown below

You can see the box has shadow around its four corners and gives it a good look. Likewise you can apply box shadow to the left and right side as well

Example of CSS3 Box shadow

-webkit-box-shadow: 3px 0px 30px rgba(50, 50, 50, 1);
-moz-box-shadow:    3px 0px 30px rgba(50, 50, 50, 1);
box-shadow:         3px 0px 30px rgba(50, 50, 50, 1);

        Horizontal Length
        Vertical Length
        Blur
        Opacity to RGBA

And the result will be

Shadow On the Right Side of the Box

For applying shadow on the right side of the box. We will decrease the value of Vertical Length to zero and the rest of the code will be same.

-webkit-box-shadow: 3px 0px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 3px 0px 2px 2px rgba(50, 50, 50, 1);

 You can change the value of Blur and Spread as per your requirement.

Shadow on the Left side of the Box

The code will be same but we will decrease the value of Horizontal Length to -3.

-webkit-box-shadow: -3px 0px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: -3px 0px 2px 2px rgba(50, 50, 50, 1);

Shadow on the Top and Bottom of the Box

Here in this case you will apply the Horizontal Length zero and the Vertical Length to some value.

Bottom

-webkit-box-shadow: 0px 3px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 0px 3px 2px 2px rgba(50, 50, 50, 1);

Top

-webkit-box-shadow: 0px -3px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 0px -3px 2px 2px rgba(50, 50, 50, 1);

You can apply these shadows to your blogger/ website to give a look to it. If you are facing any problem in applying these properties, let us know, we will try our best to answer your queries.

CSS3 has bring the revolution to web designing and developing. It has been decorated with variety of characters, easy to adapt and simple to use. In the recent post we have created a tutorial based on shadow effect around the main layout which is derived from the CSS. Enhanced properties which are covering CSS3 are Radius Properties, Shadow Properties, Borders and many other Transition Properties. In this article we will use transition properties to anchor text which will slowly change the color of anchored text on hover. Let's see how can we succeed by doing some very easy simple steps. 

Recommended

How to drop shadow around the main layout of website?

DEMO

Hover your mouse on it. 

Transition Property to Anchored Text

Follow the easy steps :

• Open your blogger dashboard.
• Click on Template >> Edit HTML >>Proceed.
• Now search of a:hover. In my case it looks like

a:hover { color:#2266BB; text-decoration:underline;}

• Now what we have to do is very simple. Paste the following code in between the braces. 

-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;

•  Now the code will look like this.

a:hover { color:#2266BB; text-decoration:underline;-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s; }

• Now search for other Anchored texts like li a:hover , Post-title a:hover , Sidebar li a:hover and do the same for all anchored texts. If you are facing difficulty in finding just search for a:hover and it will navigate you through all the anchored text. 
• Save your template and see the magic :)

A good blog needs to be clean and easy to follow. Applying different effects, styling the wrappers, designing a beautiful logo and indeed your unique content can boost everything. You can get subscribers, followers and social interaction through your blog, so it needs to be your identity. People related to internet often ask for online portfolio instead of Curriculum Vitae now days. So let’s see how we can help you to improve your blog layout.

For Demo Purpose you can see the shadow dropped around our main layout.

How to drop shadow around the main/central layout.

Follow the easy steps :

• Open your blogger dashboard.
• Click on TEMPLATE >> EDIT HTML.
• Press CTRL+F
• Now search for MAIN-WRAPPER.
• The CSS will look like this.

#main-wrapper
{background: #FFFFFF; overflow: hidden; padding: 0px 4px 0px 4px; width: 970px; border: 1px solid #dfdfdf; margin: 0 auto 15px auto;}

• Now add the following code in between the braces.

 -moz-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
-webkit-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);

• After adding the provided CSS the code will look like this. 

#main-wrapper {background: #FFFFFF; overflow: hidden; padding: 0px 4px 0px 4px; width: 970px; border: 1px solid #dfdfdf; margin: 0 auto 15px auto; -moz-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
-webkit-box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);
box-shadow:0px 0px 10px 7px rgba(119, 119, 119, 0.3);}

• Save template and you are done. 

What more!

Drop shadow effect has nothing to do with your page loading speed. It is based on CSS. It gives a nice look to your blog. You can further customize the shadow color. If you find any difficulty in adding the easy CSS, bug us, we are here to help you.

Social Interaction plays an important role on your blog. You can get traffic, subscribers, followers and indeed new friends from all over the world. Blogger platform is an easy interface for beginners. It provides a flexible environment for the beginners to make them move to the advance level.

Sidebar widgets provide readers a shortcut to different directions. To link your social media URL’s  in sidebars make it easy for readers to get interaction with the author. We have found a CSS based very light simple and clean social media icons to direct your readers to your social media profiles. It is not designed by OZY NETWORK and we are not taking it's ownership.

DEMO

Let’s see how it works. 

How to add CSS section

• Open to your blogger dashboard
• Click on Template >> Edit Html
• Now Press CTRL+F and find  ]]></b:skin>
• Paste the below code above/before it.

.subscribe{width:289px !important;background: #fbfbfb;height:59px; border: 1px solid #A3A3A3; font-size: 90%; margin-left:-11px !important; margin-bottom:15px !important;
margin-top:0px !important;margin-right:0px !important;padding: 7px 0px 4px 10px !important;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.sub-youtube a{background: url(http://3.bp.blogspot.com/-RSnY0aqLC9M/UXp2bGmRAoI/AAAAAAAAA2E/UCRb8Vh7iZA/s1600/icon-youtube.png) no-repeat 0 0;}
.sub-twitter a{background: url(http://1.bp.blogspot.com/-S4XgwbX9MGQ/UXp2cwpbGaI/AAAAAAAAA2M/C2l_npg4lzw/s1600/icon-twitter.png) no-repeat 0 0;}
.sub-facebook a{background: url(http://4.bp.blogspot.com/-90OYXK2FmSU/UXp2eI7Lk6I/AAAAAAAAA2Y/TCubqtQ2LlA/s1600/icon-facebook.png) no-repeat 0 0;}
.sub-rss a{background: url(http://4.bp.blogspot.com/-qwZ3rbj5uxc/UXp2eZBRKcI/AAAAAAAAA2U/8hjCEXcHvZo/s1600/icon-rss.png) no-repeat 0 0;}
.sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}

Save your template and the CSS part is done!

How to add Social Icons in Side bar-HTML 

Now follow the easy steps :

• Open your blogger dashboard. 
• Click on Layout. 
• Click on a widget section where you want to add it and choose html/javascript. 
• Paste the follow code there.

<div class='subscribe'>
<ul id='subscribe-icon'>
<li class='sub-youtube'><a href='YOUR-YOUTUBE-URL' rel='nofollow' target='_blank'>Youtube</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-email'><a href='YOUR-NEWSLETTER-URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
</div>

What More

It is clearly mentioned that where you have to put your Social Media Profile Url's. Its is a CSS based very light Social Media Icons and it will not affect your blogger speed anyway. If you are facing any problem regarding this widget, we are here to help you.