Amazing Tricks For Blogger: CSS

Showing posts with label CSS. Show all posts

Labels: CSS

How to add Pure CSS3 Social Icons under Every Post

Today I'm going to teach you how you can add Social Share Icons under Every Post using pure CSS3. Social network site play an very important role in publishing your site among readers. There are many social sites but in here I used most popular networks. These socials icons have a cool effect when mouse pointer in hovered over these icons. These icons are made up of CSS without use of any JavaScript which slows down your page speed. Clicking any icon will share your post in that particular site.

To add this social icons follow below steps

Log in to your blogger dashboard first.
Lick on Template and then on "Edit HTML".
Now press Ctrl + F search for <data:post.body/> code and paste the below given code just below<data:post.body/>.

CSS Codes:

<b:if cond='data:blog.pageType == "item"'>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-social-anime.css' rel='stylesheet' type='text/css'/>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><b>Facebook</b></a>
</li>
<li class='abt-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><b>Twitter</b></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><b>Google Buzz</b></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><b>StumbleUpon</b></a>
</li>
<li class='abt-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><b>Digg</b></a>
</li>
<li class='abt-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><b>Delicious</b></a>
</li>
<li class='abt-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><b>LinkedIn</b></a>
</li>
<li class='abt-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><b>Reddit</b></a>
</li>
<li class='abt-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><b>Technorati</b></a>
</li>
</ul>
</b:if>

NOTE : There maybe more than one so make sure that you have selected the right code.

After adding the code save the template.

You are done now. Now you and your visitors can see and share your awesome posts with these cool social share icons which has great hover effect.

0 comments

Labels: CSS, Menu

Silver Salmon Button Drop down

Today I am going to teach you a another attractive menu bar. This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.

This is a live example of "Silver Salmon Button Drop down".

Home
Products
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact Us

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard.
Then click on "Layout" and then on "Add a Gadget".
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact Us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

0 comments

Labels: CSS, Menu

Ash Apple Menu With CSS3

This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.

This is a live example of "Ash Apple Menu With CSS3"

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard
Then click on "Layout" and then on "Add a Gadget".
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

0;background:#7d7d7d url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

110px;line-height:100%;border-radius:1em;font:normal

0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-

radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0

1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba

(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0

8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu

a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-

decoration:none;display:block;padding:8px 20px;margin:0;border-

radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-

shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover

{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a

{background:#979797 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

40px;background:#666 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px

1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-

shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul

li:hover a,#cssmenu li:hover li a

{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-

box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url

(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -100px !

important;color:#fff !important;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}

#cssmenu li:hover > ul{display:block}#cssmenu ul ul

{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;

left:0;background:url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0

0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba

(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px

3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}

#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-

size:12px}#cssmenu ul:after

{content:'.';display:block;clear:both;visibility:hidden;line-

height:0;height:0}* html #cssmenu ul{height:1%}</style>

<div id="cssmenu">
<ul>
<li class="active"><a

href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a>

</li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a

href="http://amazingtricksforblogger.blogspot.com/p/site-

map.html"><span>Site map</span></a></li>
</ul>
</li>
<li class="last"><a

href="http://amazingtricksforblogger.blogspot.com/p/contact-

us.html"><span>Contact us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

1 comments

Labels: CSS, Menu

Black Apple Drop Down Menu

This is a live example of "Black Apple Drop Down Menu"

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard
Then click on "Layout" and then on "Add a Gadget"
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Lables</span></a></li>
<li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Blogger"><span>Blogger</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/search/label/CSS"><span>CSS</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a>
<ul>
<li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Menu</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>map</span></a></li>
</ul>
</li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

0 comments

Labels: CSS, Menu

Animated CSS3 Drop Down

This is a very attractive menu bar which is visitors prone to click on the menu.This is created by using CSS codes so pages will load quickly and help to navigate easily.

this is a live example of navigation menu which is trying to add.

Home
Product
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact us

sdsdsd

CSS Codes:

ul{list-style:none}#cssmenu a{text-decoration:none}#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba

(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a

{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-

transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li >

a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-

align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-

transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-

shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li >

ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-

width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a

{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px

16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-

color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul

{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-

align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-

border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0

1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul

{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style>

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Product</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact us</span></a></li>
</ul>
</div>

0 comments

Labels: CSS, Menu

Light Opera Drop Down Menu

Drop down Navigation menu is an essential part of any blog or website. Alway try to use pure CSS, HTML, CSS3 and images for menus and Don’t uses JQUERY or JavaScript.

Follow below steps to insert drop down menu to your blog too.

First of all log in to your blogger dashboard
Then select Layout tab
click on "Add a Gadget" link
Select and insert "HTML/JavaScript"

This is the live appearance of menu which is going to insert.

Home
Products
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact

CSS Codes:

{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0

0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left

top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0

100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0

100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}

#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-

gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-

stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient

(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient

(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-

size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu

> ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after

{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-

right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-

radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after

{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-

right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-

shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba

(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient

(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec

0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec

0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a

{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left

top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef

100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef

100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-

shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-

sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-

sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted

#ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a

{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul

{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px

dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

Remember : Change links and menu names to your blog's links and to related menu names

Now save your script and place by dragging to suitable place.

Now you are done enjoy the menu.

0 comments

Labels: CSS

Add CSS3 Search Bar for Blogger

Today I am going to show how to add another cool CSS3 search bar in your blogger blog. This search bar is made up of Pure CSS without the use of any JavaScript or Image. The search bar looks elegant and is also attractive.

No demo is required for this widget as you can already see how it looks in the image beside. To add this widget to your Blogger blog follow manual installation steps. Many would like to modify this widget or add it manually for some other reasons so paste the below given code in the HTML/JavaScript box and save the widget.

CSS Codes:

<form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Type here" />
<input id="submit" type="submit" value="Search" />
</form>
<p style="display:none;">
Search Box by <a href="http://amazingtricksforblogger.blogspot.com">Amazing Tricks For Blogger</a></p>
<style>
#abt-css3-search{background:#eaf8fc;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px}
#search,#submit{float:left}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:#6cbb6b;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:hover{background:#95d788;background-image:0}
#submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}
</style>

0 comments

Labels: CSS

How to Add Author Avatar Beside Post Title in Blogger

Today I am going to show you how you can add author image beside the title of every post of your blogger blog. This design looks really cool when there are more than one author in a blog. It helps you to distinguish between the authors of the post. The widget is fully automated so if you change your profile pic then the changes you want will take place.

To add this plugin to your blogger blog. Follow the below steps

Step 1 : Adding CSS

First log in to your Blogger dashboard

Then → Template → Edit HTML.

Press Ctrl + F. and find

<b:skin>...</b:skin> if it is not expanded.

Type ]]></b:skin> in search box and press enter key.

Add the below given code just above ]]></b:skin>

CSS Codes:

Step 2 : Adding Script

Find </head> and add the below code just above </head>

CSS Codes:

Step 3 : Final Step

Finally search for <b:if cond='data:post.title'> and add the below code just above it.

Note : There may be more than 1 <b:if cond='data:post.title'> data card so be sure to add the below code above the correct data card.

CSS Codes:

After adding this code save the template. You are done now. Now you can see rounded author avatar beside every post title in your Blogger blog.

0 comments

Labels: CSS

Conner Ribbon for Blogger

Most of bloggers may require to add a ribbon at the corner of their blog. So this article will teach them how to add a green ribbon at the corner of their blog easily. This ribbon is made up using CSS and very less amount of coding thus it is fast loading. Unlike other ribbons no images are used as they increase the page load time. You can see the demo of this ribbon in the beside image itself.

You can edit the text shown in the ribbon as your wish.

To add this widget to your blog follow the below steps.

You may add the ribbon on the blog as a whole or on a specific element like <div id="example">.

To add this on any specific element just paste the below given code just below the elements starting.

To add the widget on the blog as a whole go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the below code in the box.

CSS Codes:

<div class="ribbon-wrapper-green">
<div class="ribbon-green">
DEMO</div>
</div>
<style>
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 99999;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900; 
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>

You can change "DEMO" with your own desired text. After editing the code save the Template/Widget.

Test by changing size of the ribbon

Now you are add a ribbon. Now you and your visitors can see this elegant CSS ribbon on the corner of your blog.

0 comments

Second Menu

How to add Pure CSS3 Social Icons under Every Post

Silver Salmon Button Drop down

Ash Apple Menu With CSS3

Black Apple Drop Down Menu

Animated CSS3 Drop Down

Light Opera Drop Down Menu

Add CSS3 Search Bar for Blogger

How to Add Author Avatar Beside Post Title in Blogger

Conner Ribbon for Blogger

Sponsors

Labels

Popular Posts

Blog Archive

Contributors

Labels

Labels

Labels