Mostrando postagens com marcador Css. Mostrar todas as postagens
Mostrando postagens com marcador Css. Mostrar todas as postagens

sábado, 14 de julho de 2012

Add A Fixed Jump To Comments Button In Blogger

Colorful Comments ImageGuest Post - Our host is Deepak Kamat, In this post he walks you through how to add a fixed jump to comments button on Blogger blogs.See How To Become a guest author on Spice Up Your Blog.

Comments are the major way of getting feedback about our blog posts from readers, therefore comments are really an essential part of any Blog. If you are a blogger too then your always delighted to see new comments on your posts.But there are times when you don't get any comments at all, often in long posts. The problem is that readers don't scroll through the whole page thus they miss the comment area.Even though people are reading your posts you are not getting any comments at all and it's frustrating.

So, how can you improve your site in a way that your blog post gets more comments and the comment form is easily accessible to readers?

This post covers this topic and tells you an easy and effective way of encouraging your readers to comment.The button will be fixed in the bottom right of the page, check out the demo.
Click Here To View Full Post >>

terça-feira, 7 de fevereiro de 2012

How To Add Colorful Css Animations To BuySellAds Banners

I'm sure you will all have noticed the effect i have added to the BuySellAds.Com ad banners on this blog.I think the effect is awesome and brings more attention to the ads which keep our advertisers happy.The first time i seen this type of effect was on the awesome Css Tricks by Chris Coyier.With the help Of Harish from Custom Blogger Templates and Way2Blogging i managed to get a version for this blog.I have had many requests for the code in the past but as the idea was originally from Chris i was slow to share it.However as Css Tricks no longer use the effect and i have seen it used on lots of other blogs which i presumed viewed the source of this blog to copy the code I think it's the right time to do a tutorial.The effect is created using only Css.

Remember this is set up to work only with ads and Advertise Here banners from BuySellAds.Com.For the 125x125 banners your sidebar will need to be at least 300px wide.Wordpress and other users can add the Css from the scroll box below to their style sheet , below i have a Blogger tutorial.
Click Here To View Full Post >>

segunda-feira, 7 de novembro de 2011

A Stylish Css3 Fixed Position Vertical Side Menu For Blogger

Fixed menu for BloggerSo many sites we visit now have a navigation menu fixed to the side of the page for easy access to important pages.In this post i have a very stylish and colorful menu you can fix to the side of the page on your Blogger blog.The menu will stay in place even when the reader scrolls down yet doesn't interfere with the content.The menu has 5 icons that on hover scroll out to reveal their purpose, so for example the home icon on hover scrolls out the word 'Home'.The 5 icons are for Home, About, Services, Portfolio and Contact Us.While you cant change the icons, you can change the text for each icon for example the portfolio icon could be changed to archive.

The menu is made up almost completely of Css3 with just one image and is quick and easy to install.All the credit for the menu goes to the awesome Tutorialzine, we have covered many of their tutorials previously.Below you can see a live demo, hover over the icons to see the scroll out effect.

View Demo Button
Click Here To View Full Post >>

quarta-feira, 3 de agosto de 2011

A Neat Bold Red Drop Down Menu For Blogger Using Just Css

In the last post we had a tutorial for a very unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.

drop down menu blogger

View Demo Button

This menu is also courtesy of the awesome Free Css Menu, let's add it to your blog.

Add The Bold Red Drop Down Menu To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-U2FsQE7q0jNY17yrgcMVThfnVn5xBelXUpYTfMRB10tbda8Z16_3jFYMmOHV9QRl__RW6kKR8z78rvYOWRRhaxWkhD6kMO99LS_FcbZaOfn0M00IxSAVjGYQ_jx7Xi1pHTzMBN4jYc4/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0iYSaskXL0_umdaC91nEe9kRqXAsyWq9CHG1b8bjBhix04F3fF82vOGfquPaL18DFl79O1ihWu0EfI46HwJh6yKL7NrCdqWOa5Z5PRqT3eNzlSfRW0pILKZIQKsv_ti6aMhRpPdRge5q6/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/

Step 4. Save your template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Add The Menu Html


In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix


If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

That's it simple ! Make sure to check out more of our Css tutorials and Blogger gadgets.

Drop Your Comments And Questions Below.

terça-feira, 26 de julho de 2011

A Unique Style Drop Down Bar Navigation Menu For Blogger

In this post i have a very cool and in many ways unique type of Css drop down menu for Blogger.The regular drop down menu we are used to seeing will when a link is hovered over display more links vertically below.This menu however is known as a 'Drop Bar' as on hover it displays links horizontally in a bar below the menu.I had been looking for something like this and while i found some jQuery powered versions but i loved this as it only uses Css, so no scripts or added load time to your blog and easier to implement.Also the menu has a great fix for our old friend Internet Explorer which usually plays up when Css is used.I have tested it back to IE6 and it looks fine.Your probably still wondering how it displays the links horizontally instead of vertically so i have a screenshot and live demo you can check out below.


View Demo Button
Click Here To View Full Post >>

domingo, 26 de junho de 2011

How To Use Images For List Bullet Points On Your Blog

Images As Bullet Points In ListsIn this post i have a really cool Blog Design Tip to spice up the lists on your blog.When you create an ordered list, items in the list are numbered, and in an unordered list items have what is called a bullet point.What we will do in this post is replace the default bullet point with an image.We do this with just a small snippet of Css including the image URL.To make it as easy as possible i have 10 ready to use images for your bullet points but you can of course use your own image.I also have this set so you can just use the image bullet point on selected lists.If we set it to work on all lists on your blog it could mess up your sidebar and other sections.
Click Here To View Full Post >>

domingo, 12 de junho de 2011

Adding Simple Stylish Css Captions To Images On Blogger

In this blog tip we will look at a quiet simple way to add captions or descriptions to the images used on your blog.On Blogger there is an option when you click on an image uploaded to the post editor to add a caption.This adds the caption below the picture using a table.However with just a few lines of Css we can have the caption across the bottom on top of the image with an neat opacity background.You can also change the colors of the caption to suit your blogs design, You can see some examples in the demo below.
Click Here To View Full Post >>

segunda-feira, 6 de junho de 2011

Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles

Blogger jquery menuI recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !
Click Here To View Full Post >>

Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles

Blogger jquery menuI recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !
Click Here To View Full Post >>

terça-feira, 10 de maio de 2011

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.


View Demo Button

Click Here To View Full Post >>

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.


View Demo Button

Click Here To View Full Post >>

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.


View Demo Button

Click Here To View Full Post >>

segunda-feira, 9 de maio de 2011

Add A Simple Css Bump Effect To Your Blogs Images

css3 logoWe all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

Add A Simple Css Bump Effect To Your Blogs Images

css3 logoWe all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

quinta-feira, 5 de maio de 2011

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>