Blogger & Wordpress

Showing posts with label CSS Menu bars. Show all posts

Thursday, 12 September 2013

Jquery Image Slider Bar For Blogger

Unknown Blogger gedget, Blogger tricks, Blogger widgets, CSS Menu bars No comments

Images sliders are routine and lot of can be found now. But difficult to search working versions of image slider. Because several sliders missing jQuery organised files no longer works. Hope this particular tutorial work for you. However, Photo Slider always really helps to make website more attractive. However right now there have large amount of advantages of with it. We can use if with regard to introduce several offers and new services to each of our audience. We can establish awesome images as outlined by our products or services and share with slider.

Currently I'm gonna share awesome about how to add Jquery Photo Slider. Its made out of jQuery and CSS. Each code are effectively arranged. I added five photos just for this slider. You can customize as ones like. Let see, how to incorporate this image slider with regard to blogger.

How to Add jQuery Image Slider

Now Find </head> by Pressing ctrl+F and paste below code just above/before it.

Now Find ]]></b:skin> and paste below code just above/before it.

#bloggertrix_slider {margin:0 auto;}
#bloggertrix_slider .slider-contents {overflow:hidden;border:8px solid #DDDDDD;box-shadow:0 0 3px rgba(3,3,3,0.5);}
#bloggertrix_slider .slide-nav {float:left;padding: 0 8px;height: 26px;background: #3a3a3a;}
#bloggertrix_slider .slide-nav a {width: 14px;height: 14px;text-indent: -999px;float: left;list-style: none;display: block;background: #dddddd;margin: 5px 4px;cursor: pointer;}
#bloggertrix_slider .slide-nav a:hover {
background: #27BAFF !important;}
#bloggertrix_slider .progress-bar {width:0px;background-color:#AAAAAA;height:2px;top: -2px;overflow:visible !important;display:block !important;position: relative;}
#bloggertrix_slider .controls {height: 26px;margin: 4px auto 0;display: table;}
#bloggertrix_sliderr .pause-play-control {width: 46px;height: 26px;float: left;background: #3A3A3A;color: #fff;}
#bloggertrix_slider .pause-play-control a {width:9px;height: 19px;display:block;overflow:hidden;text-indent: -9999px;background:url('http://img837.imageshack.us/img837/7647/fqnu.png');cursor: pointer;margin:3px auto 0;}
#bloggertrix_slider .pause-play-control a.play-slide {background-position:-5px -3px;}
#bloggertrix_slider .pause-play-control a.pause-slide {background-position:-29px -3px;}
#bloggertrix_slider .slider-next,#bloggertrix_slider .slider-prev {
width: 46px;height: 46px;background: #3a3a3a;display: block;font-size: 41px;color: #FFF;font-weight: bold;text-align: center;position: absolute;cursor: pointer;text-indent: -999px;overflow: hidden;}
#bloggertrix_slider .slider-next:before,#bloggertrix_slider .slider-prev:before {background: #3a3a3a url('http://img837.imageshack.us/img837/7647/fqnu.png');width:32px;height:32px;position:relative;top:7px;left:7px;content:'';display:block;}
/*#bloggertrix_slider .slider-next {margin: -220px 0 0 681px;}
#bloggertrix_slider .slider-prev {margin: -220px 0 0 4px;}*/
#bloggertrix_slider .slider-next:before {background-position:-5px -31px;}
#bloggertrix_slider .slider-prev:before {background-position:-5px -70px;}
.slide1 img {position:relative;}
.img-logo {margin-left: 150px;}
.img-mobile {margin-top: 45px;}
.img-tablet {margin: -168px 0 0 139px;}
.img-laptop {margin: -186px 0 0 349px;}
.slide1 {background-color: #67b608}
.slide2 {background-color: #03bbd3}
.slide3 {background-color: #cf6b30}
.slide4 {background-color: #f2a87b}
.slide5 {background-color: #388efd}

Now click on Save template and go Layout.

Click on Add Gadget and Select HTML/JavaScript.

Paste the Following ..

Replace Red Color URL with your image URL

Now save it..

You are done..

Css3 Menu Bar With Google Custom Search Box and Social Buttons

Unknown CSS Menu bars No comments

This is a Special post. In this post i'll tell you about Css3 Menu Bar. In this menu bar specially add Social buttons like RSS, Facebook and Twitter and also added Google custom Search Box. This menu bar work good with any latest internet browser. It is easy to add in blogger just Follow Steps:

ScreenShot

Step 1: Login to Blogger>template>Edit HTML

Step 2: Find the Code ]]>

Step 3: Copy the Following Code and Paste before ]]>

#btrix1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
        width:900px;   
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both; 
 background: #696969 left bottom no-repeat; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right;  }
#updatesBox { margin-left: 100px; }

How to add Css3 Dark Blue Navigation Bar in Blogger

Unknown CSS Menu bars, Css3 Dark Blue menu bar No comments

In my previous post I told you about a beautiful Spinny Leaf Menu Bar for Blogger. Now in this post i'll tell You about CSS Menu Bar, How to add Dark Blue Menu Bar in Blogger Blog.

ScreenShot

To install this Menu Bar Just Follow the Easy Steps:

Step 1: Login to Blogger> Template> Edit HTML

Step 2: Now find this Piece of Code ]]>

.(by pressing Ctrl + F)

Step 3: Copy the Following Code and Paste Before ]]>

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKm2gAtJd9g8qGKJmcuLpNVqxiAyeZ5hNhQqPEaElZ4G7l6W21uQTXaTiWPp4LkElmzFJF21JSns6FhNKhSkDMn6G_1dB7YylBjhF-DuCdCweUFu68eRxiy6iHdQ-0lbHUV8ayGdOXN5A/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaq_FbxzFx4AtqumsEO-RkN7NmW_iArd48-2-6eysdBOdr3aGDIsypkMqTP3fHrCw_eZW9nfkHOaqkhXPvwd1sxhDxT9A1AI7kIyetkf6NueShFAdfNZXDqKYtzQwetUOkkfM1S_2xKZM/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

Step 4: Click on Save template.

Step 5: Now go to Layout

Step 6: Click on Add Gadget and select Add HTML/Java Script

Step 7: Paste th Following Code in Box.

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>

Replace the # with your link and Red colored Text with your menu name as you Wish.

Now Save Gadget You are Done. If you have any problem discuss in comment below.

How To Add Spinny Leaf Menu Bar in Blogger Blog

Unknown CSS Menu bars, How To Add Spinny Leaf Menu Bar in Blogger Blog No comments

It is attractive menu bar for your blogger. This contact Spiny Leaf menus. Throughout contain with brilliant float model. And so, that menu bar helps you to make attractive your website. You are able to hyperlink major site for doing this. Like call us site regarding you site. And so, that menus bar like typical. Before my partner and i produced some sort of article Appealing CSS Decrease Straight down Menus Club Pertaining to Doodle-kit. In addition, it good menu-bar. contain the idea for your weblog with easy ways. Follow these kinds of ways to incorporate the idea your website.

Screen Shots

Step 1: Login to your Blog account go to template in right side menu.

Step 2: Click on Edit HTML.

Step 3: Find this tag ]]></b:skin> by pressing Ctrl+F.

Step 4: Copy the Following Code and Paste Before this Tag. ]]></b:skin>

nav {   width: 900px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
}
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
}
.top-menu li:hover {
        margin: 30px 20px;
}
.top-menu li:active {
        margin: 30px 33px;
}
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
}
.top-menu li:active a {
        font-size: 26px;
        top: 30px;
        text-shadow: none;
}
.top-menu li div.menu-item {
        width: 100px;
        height: 100px;
        display: block;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-border-top-left-radius: 100px;
        -webkit-border-bottom-right-radius: 100px;
        -moz-border-radius-topleft: 100px;
        -moz-border-radius-bottomright: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
        -webkit-border-top-left-radius: 80px;
        -webkit-border-bottom-right-radius: 80px;
        -moz-border-radius-topleft: 80px;
        -moz-border-radius-bottomright: 80px;
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
                -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
        -webkit-border-top-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }

Step 5: Now Find this Code <div id='content-wrapper'>

Step 6: Copy the Following Code and Paste before <div id='content-wrapper'>

<nav>

  <ul class="top-menu">

    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>

    <li><a href=#>Download</a><div class="menu-item" id="cataloge"></div></li>

    <li><a href=#>Links</a><div class="menu-item" id="price"></div></li>

    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>

    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>

  </ul>

Important: Replace # with your URL and Name With your Menu name as you like.

Now Save Your Template.

You are Done!

Blogger & Wordpress

Thursday, 12 September 2013

Jquery Image Slider Bar For Blogger

How to Add jQuery Image Slider

Friday, 16 August 2013

Css3 Menu Bar With Google Custom Search Box and Social Buttons

How to add Css3 Dark Blue Navigation Bar in Blogger

Sunday, 4 August 2013

How To Add Spinny Leaf Menu Bar in Blogger Blog

Translate

Popular Posts

Blog Archive

Labels