Stylish CSS3 Ad Widget For Blogger Like SpiceUpyourBlog

This article deals with Stylish AD Widget with CSS3 effect. Who don't want make money with blogging but the sad fact that the chance of earning opportunity is getting harder gradually for huge quality blogs coming day by day. BuySellAds is dream of bloggers. Also difficult to get Ads from them after being approved. We are going to discuss to stylify BuySellAds Ad widget with cool CSS effect so that it makes all the advertisers think that this blog is well designed and enhanced and get cool advertisers.

Add CSS

Log in Blogger → Design Tab → Edit HTML

Now search for the following code using F3

]]></b:skin>

Now paste the following CSS code above the code just mentioned above

Click Here For The Code

Now save the template

HTML Codes Of Ad Widget

After implementing CSS code you need to place Ad widget on your blog. You can place 125x125, 468x60, 728x90, 336x280,

Go Page Element → Add A Widget

125x125 Ad Widget

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt =" CODE "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="Ad URL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a>
</ Div>
</ Center>

468x60 Ad Widget

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>

728x90 Ad Widget

<div id="bsap_728" class="bsap_728 bsap">
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

336x280 Ad Widget

<div id="bsap_336" class="bsap_336 bsap">
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

Effect On Images

< img src="ImageURL" alt="AD Name" <img height="125" width="125" />

Now replace with your Advertiser URL and Advertiser Image URL You may customize CSS and HTML codes if you want to stylify Ad widget.

Please comment here if any ask. Please take 5 seconds to share the writing with your friends if you like

Read MoreAdd Your Opinion 2 Opinions

Add Stylish Social Subscription Widget With Search Box In Blogger

Social connection helps your blog to grow a bunch of regular and and new visitors. So you need to place your,Facebook, Twitter, Google Plus and other social network so that your readers join you easily. Today my tutorial is about placing stylish social subscription widget with search box. This search box is truly so cool

Go To Blogger Dashboard

Click on Layout Tab

Now Add Gadget>>Html/Javascript

Paste the following code in the HTML/javascript widget

Click Here For The Code

Now save the widget

Now change the red colored text

Please comment here if any problem and thank you

Read MoreAdd Your Opinion 1 Opinion

Custom CSS Heading Style For Blogger

Heading tag especially <h2> is used for better search engine optimization tricks. Here is some CSS code which makes your heading awesome and nice looking. As example you can see i am using custom CSS heading tag

Go To Blogger Dashboard

Click on Design Tab

Now click on Edit HTML

Find the following code

]]></b:skin>

Now place the CSS code above the ]]></b:skin> as your choice

Style 1

.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height: 1;
}

Style 2

.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
} 

Style 3

.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0c12iHEHHB2j79BSGQYIpf64IJoVOgzEMtCgYm4NIEjj5DgQEiW4psJanczqDl7nvE01-v1Vu4_ESBGot9zzKz3oaiskWwEjoWkqhS0_6Tuk9KRknRwYe3cCSSsc4Ht4ao-gFlPyJLug/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

Style 4

.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Style 5

.post h2
{
margin-top:10px;
    max-width:840px;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'georgia';
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #3873CC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h2:hover {
  border-left:10px solid#FF0000;
}

Different CSS code has different style. Choose any of them as your choice

Please like our Facebook Page or Follow us on Twitter or Subscribe

Read MoreAdd Your Opinion 0 Opinions

Image Hover Effect With Sliding Panel In Blogger

Image effect make your article more awesome. In the past i posted about Image zoom hover effect. This time we will use CSS so that they comes with the sliding panel on mouse hover with image description. This is hover effect with sliding panel. For your convenience i provided demo

This is just a simple example of image hover effect with sliding panel in blogger

Step 1 (Add CSS)

Blogger Dashboard → Design → Edit HTML

Find the following code using F3

<head>

Now paste the following code just after <head>

<link type="text/css" href="https://rafiblog.googlecode.com/svn/newjava/SidingPanel.css" rel="stylesheet" />

And save the template

step 2 (Implement Effect in Images)

Now write a post in HTML mode. Now post below image code

<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
    <img src="http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png">
    <div class="desc">
    This is just a simple example of image hover effect with sliding panel in blogger
    </div>
    </div>  

Changes

Change with your image link replacing http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png

Change the width and height as your choice from here width: 263px; height: 199px

Replace the description about image from here This is just a simple example of image hover effect with sliding panel in blogger

Change here <div class="desc"> if you want to change description sliding direction

If you want that sliding panel comes from right side then add desc rightslide in place of desc

If you want that sliding panel comes from left side then add desc leftslide in place of desc

If you want that sliding panel comes from upper side then add desc upslide in place ofdesc

For example view the demo

View Demo

Please share the article with your friends if you like

Read MoreAdd Your Opinion 0 Opinions

Animated CSS3 Buttons For Blogger

Animated professional CSS3 buttons make your blogger article awesome. This article helps you to put CSS3 animated buttons in your blog post as i am using as you can see. these buttons have black, pink, green, magenta, red, orange and yellow. There are also big, medium and small buttons too. I have complete guideline on how to use this colorful buttons

VIEW DEMO

CSS3 Buttons In Blogger

Log in Blogger → Dashboard

Design Tab → Edit HTML

Now find the following code

<head>

And paste the below CSS code just after <head>

<link type="text/css" href="https://rafiblog.googlecode.com/svn/branches/colorcssdemo.css" rel="stylesheet" />

Now save the template

How To Use Buttons In Post

Paste the following HTML codes in your Blogger

For Large Buttons

<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>

For Medium Buttons

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

For Small Buttons

<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>

Change LINK and LINK NAMEwith your desire link and link text respectively

Ask any question in comment and Thank you. If you feel the article is great you can share

Read MoreAdd Your Opinion 0 Opinions

Add Stylish Mouse Pointer Effect To Blogger

While surfing my blog you have noticed that i have mouse pointer effect on my blog. Actually this stylish mouse cursor effect makes blog beautiful. There is an apple sign on mouse pointer. This effect has been created with CSS code. No JavaScript code this time.

Mouse Cursor effect

Go To Blogger Dashboard → Design → Edit HTML

Now find the following code

]]></b:skin>

And Paste the following code just above ]]></b:skin>

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

Now save and reload your blog

If you liked the article dont forget to share it

Read MoreAdd Your Opinion 1 Opinion

Spinning 3D Social Media Icons

In order to become a professional and successful blogger there is no alternative to increase your social network. Today's post is about spinning 3D social subscription icons to increase your followers. I have never seen such awesome vertical 3D social share widget. When you will place your mouse on this 3D icon, it will rotate 360 degree which will give awesome spinning effect.

Spinning 3D social Icon

Go to Blogger

Go to page element

Now click on "Add A Widget"

Now paste the following code in HTMl/Javascript widget and save

Click Here For The Code

You have to change the red colored text

The widget suits only at sidebar

Please take 5 seconds to share the article if you like

Read MoreAdd Your Opinion 0 Opinions