BBlogger Tutorials: CSS

Showing posts with label CSS. Show all posts

How to Add a Shining CSS3 Horizontal Menu For Blogger

Horizontal menu best alternative option for labels or sections.
The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.
This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:

1. Go to Blogger Dashboard → Layout → click on "Add a gadget".

2. Select "html/java script" and add the code given below:

<li><a href="#">Features</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/blogger-tools.html">Products</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/contact-me.html">Contact</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html">Tricks</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

NOTE

3. - Replace the URL in blue with your own.

- Replace the tab name in red with your own.

4. Finally click on save.

Now you can see the result (o)

How to Center Your Post Title in Blogger

In this lesson, we will learn center your post title in blogger blog and it is a very easy way, it is code is placed in the CSS in template designer.

How to Center Your Post Title in Blogger

1. Go to "Blogger Dashboard" > "Template" > "Customize"

2. Go to "Advanced", then click on "Add CSS"
3. Copy and paste this code .post-title { text-align: center; } into the "Add CSS" window.
4. Click on "Apply to Blog" and you're done!!

I hope this is will be helpful !!!

Add CSS3 Bricks/Box Style Labels To Blogger

How To Customize Blogger Labels With CSS3?

First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.

1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find for this tag in your template ]]></b:skin>
7. add below CSS code just above it,

#textwidget {

color: #666;

font-size: 0.925em;

font-style: italic;

line-height: 1.6em

}

a.tag {

color: #777;

font: 9px verdana;

text-transform: uppercase;

transition: border-color .218s;

background: #f4f4f4;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0 #fff;

-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

border: solid 1px #ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none

}

a.tag:hover {

color: #333;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2px rgba(0,0,0,0.15)

}

a.tag:active {

color: #000;

border-color: #444

}

.slides {

font-size: 85%;

line-height: 130%;

overflow: hidden;

padding: 0;

margin: 30px 0 10px;

border-bottom: 1px solid #000

}

8. Now find below code,

<b:widget id='Label1' locked='false'

find it until

</b:widget>

9. Replace the code from <b:widget id='Label1' locked='false'.........
to </b:widget> with below code,

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2>

<data:title/>

</h2>

</b:if>

<b:if cond='data:display == "list"'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

</span>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(

<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

</span>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(

<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if>

<b:include name='quickedit' />

</div>

</b:includable>

</b:widget>

10. Now take a preview and save your template.

How to Add a Search Box With CSS Style to Your Blogger

A search box or search field is a common GUI element of computer programs, especially in file and web browsers and on web sites. It is basically a type of text box, the contents of which are to be searched for in a database. It is commonly coupled with a search button (sometimes indicated only by a magnifying glass symbol).

"Attention! before you edit your HTML code, please download your template previously"

Copy and paste the following code :

</form>

Explanation : # = Replace with your Website
Css Style : Copy and paste the following code after <head>

#searchform {

position:absolute;

right:0;

top:80px;

}

#searchform input {

border:1px solid #626262;

background:#000;

padding:5px 4px 6px;

color:#999;

width:215px;

float:left;

}

#searchform input#searchsubmit {

width:65px;

height:30px;

border:none;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTT_jgMb5xGi-y_j8qUh6H0CPwaMGkT7uB2Ul0jUwgJdk-a5hykwdOsqK6SuXuEctDQDtnIw7c3Dc_a-i130vUrgZLvG1dtO26S7F7QSwtZlQn4qadAb3AY2-njUH1xgABtvW07avoqk/s1600/bk_search_but.jpg) 0 0 no-repeat;

cursor:pointer;

}

Explanation : Red Text = Replace with your own search Background

Google Seach Box on your Site :

<input type="checkbox" name="sitesearch"

value="http://bbloggertutorials.blogspot.com/" checked />#<br />

</div>

</form>

Explanation : Red Text = Replace with your Website
# = Text of your website

Add a Blue Professional Drop-down Menu in Blogger

Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors because visitor when firstly see your menus and other widget and if he like that then she/he wish to visit again itself and content also very important fro the every blogger.

How to Add Blue Drop Down Menu to Blogger

1. Login to Blogger > Dashborad

2. Click on Drop Down Menu and select Layout

3. Add a HTML/JavaScript Gadget

4. Paste below code in it.

<style>

/* Blue Dropdown Menu by www.widgetgenerators.blogspot.com */

#nav {

display:inline-block;

width:100%;

margin:0px auto;

padding:0;

background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhheaT1WvO_WO8KIYK2YrXXJpctA3EfMew0XX0j13P0i05nNZ-bm9Xl3Zs4wBxnQU_ggbW15F3dr9OPvyZY1aIwWJHZCgdrUqKBFqgpNFZ5QQvwAOWwAA07y-TSaqpP7sBTc7IDlWRT5vXR/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

box-shadow:0 2px 2px rgba(0,0,0, .5);

-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);

-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

}

#nav li {

margin:10px;

float:left;

position:relative;

list-style:none;

}

#nav a {

font-family:verdana;

font-weight:bold;

color:#e7e5e5;

text-decoration:none;

display:block;

padding:8px 20px;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

text-shadow:0 2px 2px rgba(0,0,0, .7);

}/* selected menu element */

#nav .current a, #nav li:hover > a {

background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhheaT1WvO_WO8KIYK2YrXXJpctA3EfMew0XX0j13P0i05nNZ-bm9Xl3Zs4wBxnQU_ggbW15F3dr9OPvyZY1aIwWJHZCgdrUqKBFqgpNFZ5QQvwAOWwAA07y-TSaqpP7sBTc7IDlWRT5vXR/s320/bg-ABT.png) repeat-x 0 -20px;

color:#000;

border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/

-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);

-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);

text-shadow:0 2px 2px rgba(255,255,255, 0.7);

}/* sublevels */

#nav ul li:hover a, #nav li:hover li a {

background:none;

border:none;

color:#000;

}

#nav ul li a:hover {

color:#fff;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

text-shadow:0 2px 2px rgba(0,0,0, 0.7);

}#nav ul li:first-child > a {

-moz-border-radius-topleft:10px; /*some css3*/

-moz-border-radius-topright:10px;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

}

#nav ul li:last-child > a {

-moz-border-radius-bottomleft:10px; /*some css3*/

-moz-border-radius-bottomright:10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

}/* drop down */

#nav li:hover > ul {

opacity:1;

visibility:visible;

}

#nav ul {

opacity:0;

visibility:hidden;

padding:0;

width:175px;

position:absolute;

background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhheaT1WvO_WO8KIYK2YrXXJpctA3EfMew0XX0j13P0i05nNZ-bm9Xl3Zs4wBxnQU_ggbW15F3dr9OPvyZY1aIwWJHZCgdrUqKBFqgpNFZ5QQvwAOWwAA07y-TSaqpP7sBTc7IDlWRT5vXR/s320/bg-ABT.png) repeat-x 0 0;

border:1px solid #7788aa;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

box-shadow:0 2px 2px rgba(0,0,0, .5);

-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);

-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;

-webkit-transition:opacity .25s linear, visibility .1s linear .1s;

-o-transition:opacity .25s linear, visibility .1s linear .1s;

transition:opacity .25s linear, visibility .1s linear .1s;

}

#nav ul li {

float:none;

margin:0;

}

#nav ul a {

font-weight:normal;

text-shadow:0 2px 2px rgba(255,255,255, 0.7);

}

#nav ul ul {

left:160px;

top:0px;

}

</style>

<li><a href="#">Tutorials</a>

<ul>

<li><a href="#">JS / jQuery</a>

<ul>

<li><a href="#">jQuery</a></li>

</ul>

</li>

<li><a href="#">MySQL</a></li>

</ul>

</li>

<li><a href="#">Resources</a>

<ul>

<li><a href="#">By category</a>

<ul>

<li><a href="#">MySQL</a></li>

</ul>

</li>

<ul>

<li><a href="#">captcha</a></li>

<li><a href="#">gallery</a></li>

<li><a href="#">animation</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">About</a></li>

</ul>

Note:

Replace it # with your link.

Replace all Green Area with your showing menu name.

BBlogger Tutorials

Iklan

How to Add a Shining CSS3 Horizontal Menu For Blogger

How to Center Your Post Title in Blogger

Add CSS3 Bricks/Box Style Labels To Blogger

How to Add a Search Box With CSS Style to Your Blogger

Add a Blue Professional Drop-down Menu in Blogger

Label

Entri Populer