Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

How to Add Social Networking Buttons With CSS3 Style in Blogger

By on
Sharing widgets help bloggers to expand there exposure in the web since it makes our articles viral in the internet. I would share you another example of sharing widget where it is very customizable in your part. This is from one of my circle of friends from G+ and I woul shre it to you coz I believe that you will really like it. This sharing widget uses   CSS to make it more attractive than others.This include zooming hover effects. You can check right here in my blog sidebar for the demo.
add sharing widget

Social Network Buttons With CSS3 (Metro) Style


Step 1. Go to Blogger Dashboard >> Template >> Back-up your template  for your reference.
Step 2. Click Edit HTML
Step 3. Click anywhere in the code section and search the code below
]]></b:skin>
Step 4. Above the code in step 4, paste the css code below
/* Bloggingtipsandtrix.blogspot.com  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 48px; /* width of each image.*/
height: 38px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.1); /*scale up image 1.1x*/
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
Step 5.  Save your Template and you're halfway done!
Step 6. Go back to Blogger Dashboard >> Click Lay-out (or anywhere in blog pages).
Step 7. Scroll down and select HTML/Javascript.
Step 8. Inside the empty box, place the HTML code below
<ul class="bubblewrap">
<li><a href="googleplus URL here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqDR42YyGwhNxCFmVgMCnBVfau4l6cAwB7yB93x_VedRlN5t8f_APeQZlIs6YQLadvU_VFdnuDIaFSz12r4XnTt5TBbubLErwjjiZDBxKnYHVavga28gpSF6Hq_84q2EmUaspHbafDX4/s1600/bloggingtipsandtrix.blogspot.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="facebook fun page URL or Username here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qXsdO-SCYSJMOo-NfyQzKutyVJnsLNzW3zm9onl8sN7BZtmYu2qC5tmlAv4VpewsAP1lWFxztfpMZoqM4DdKu2Lu6_mT_KWfPe8xUZ9QfyhCcHVKgrLvUl4zK0j1GyQu3PCScTrJ4O4/s1600/bloggingtipsandtrix.blogspot.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="Digg Username URL Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTyOKTgY1gMx08-uic_JfEq6NCIykL8tEFtta6sSBM4UlGB29LMwJ7KqYMcP_dLLScfV-LXbIuB3GxcgaEccVP0V_I3LQ9U9_J8Qe79Ca2WOSHMDEPE9QVQBSpgdpetqgDb8YaWDdz9o/s1600/bloggingtipsandtrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="Your Twitter URL Here"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PNMh26AMeM9yhwDCo9UglFhdRzwyNEmi0h3-2YIGaS6XMJGvaxN4HGM5vnx_LQhtYSjIRWY7gSJN1B61KefwBZwdoFmeTsIVvRJ0C6RFSDf7GD1XJGW9fTDw7J_iQB72G7tJHK5j0QA/s1600/bloggingtipsandtrix.blogspot.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="Your Feedburner URL Here"><img src="   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6bSr0o29q3_FpErhN4yQ4JFjFH7aiy7y9vAerX8QzERlf8XjiDtNHpqV2bBpSjUvI4do7QlzPkhiCsrwCdcwDGB0m6iYFxUtSba0HjygUXHiHnAWCecN1sVe1arYVkZRXKKUWuEps0A/s1600/bloggingtipsandtrix.blogspot.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Note: Simply replace the corresponding four URLs with yours.
Also Read:

 Step 9. Save your template and Bravo!
Peace on EARTH Bro!

No comments :
Labels: , ,

Create Multi Level Drop Down Menu In Blogger

By on
 A good day to all of us brothers in this field of work.This is our 2nd drop down menu so far, here we will be  sharing another cool drop down menu designed by dynamicdrive and bloggerized by mybloggertricks.This is a multi level drop down menu  wherein it will help you more in  organizing your blog important links, and also it will help your readers to easily navigate through your blog since it is our dream to let our users impress our blog as they land on it.The HTML structure of this menu is so easy as you have to use tags, but you have to add a different ul id for a new drop down, that's the little negative side of this  drop down menu. But don't worry pal, just follow below steps carefully and you will successfully integrate  this menu to your blog.
add multi drop down menu


Create Multi Level Drop Down Menu In Blogger


Step 1. Go to Blogger Dashboard
Step 2. Click Lay- out
Step 3. Hit the Add a Gadget button >> Select the HTML/Javascript
Step 4. In the empty/blank space provided, place the CSS/scriptscript below
<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.Bloggingtipsandtrix.blogspot.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li{
display: inline;
margin: 0;
}
.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited{
color: white;
}
.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}
.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}
</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>
</li>

<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

Simple Customizations:


  • Replace the # symbols with your page link/URL
  • Replace the bolded black texts with Page Titles
  • To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1. Change the drop down number accordingly.
  • Normal li and ul rules apply here to create sub menu and sub sub menu links.
  • Main links are mentioned first and drop down menu links are mentioned separately after the JavaScript call function.
  • To change the background color of the menu simply edit background:
    • #414141

Step 5. Save your widget and you are all done!

Visit your blogs to see the menu working just perfectly. Good Day Pal and Happy Blogging!!!
1 comment :
Labels: ,

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

By on
In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a  menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses  an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized  to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.
jquery lavalamp menubar


How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger


Step 1.  Adding the Script

 A. Go to your Blogger Dashboard >> Template Click
B. Hit the  Edit HTML button
C. Find or Control F the code below in your template
</head>
D. After finding the above code, place the code below code just above the code in Step 1 C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

 A. Look for the code below
]]></b:skin>
B. Add the following code below just above the code in Step 2 A.
/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ STARTS here*/ 

.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; 
}
.magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; 
}
 .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893;
 }
 .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f;
 } 
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; 
}
 .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727;
 }
 .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); 
} 
.lavalamp a { text-decoration: none; color: #262626; line-height: 20px; 
}
 .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; 
}
 .lavalamp ul li { list-style: none; float:left; text-align: center; 
} .lavalamp ul li a { padding: 0 20px; text-align: center;
 } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; 
} 
/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ ENDS here*/ 
C. You may now save your template

Step 3. Adding this widget on your blog

 A. Now go back to your Blogger Dashboard
B. Click Lay-out  button >> Add a Gadget. Choose HTML/JavaScript
C. Copy the code below and paste it inside the empty space and drag it below Header section.


<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Customizations:


  • Replace # with your (URL) link
  • Replace Home, About, Contact. etc. with your link text which you want to appear on the menu.
  • If you want to change background color of the menu then replace <div class="lavalamp dark">  with one of the code below.
<div class="lavalamp dark">
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
D. Click Save Arrangement
5 comments :
Labels: , ,
Subscribe to: Posts ( Atom )