Flying CSS3 Navigation Menu

Today, I would like to show you another pure css3 navigation menu where I implemented several nice animate effects. I have just taught our sub menus to fly from nothing, and beat as the heart when you hover your mouse over elements. If you are ready, lets start.1. Log in to blogger account and Click drop down. 2. Now select "Template" Like Below.3. Now you can see Live on blog, Click EDIT HTML Button"4. Now click Proceed button.    5. Find this tag by using Ctrl+F    ]]></b:skin>6. Paste below code Before ]]></b:skin> tag#nav,#nav ul {    list-style: none outside none;    margin: 0;   ...

Black and Blue simple Menu Bar

Menu bar is very important in blogger.Because it helps to navigate your blog or website easily.It mean they can find easily  what  they  looking  for.  In  this  tutorial im gonna explain  how  to  add    Css3    menu  bar  for  blogger. Its  include nice  hover  style.Im  using Css3 and HTML, Just check out demo1. Log in to blogger account and Click drop down. 2. Now select "Template" Like Below.3. Now you can see Live on blog, Click EDIT HTML Button"4. Now click Proceed button.    5. Find this tag by using Ctrl+F    ]]></b:skin>6....

Ribbon Hover Effect Menu Bar

Today im   gonna explain how to  add modern ribbon menu  bar  for blogger.  Few  weeks  ago i  published another Ribbon  menu  style. but this is different with hover  style. Hope you  will like it.Im using Css3 and HTML, Just check out demo.1. Log in to blogger account and Click drop down. 2. Now select "Template" Like Below.3. Now you can see Live on blog, Click EDIT HTML Button"4. Now click Proceed button.    5. Find this tag by using Ctrl+F    ]]></b:skin>6. Paste below code Before ]]></b:skin> tag.ribbon span {    background:#A81B6A;   ...

Add Animated Fancy Navigation Menu with Jquery to Blogger / Blogspot

Animated Fancy Navigation Menu with Jquery for Blogger. Every One has trying to add a beautiful menu with animation effect by jquery to their Blogger Blogs. But it has very difficult to add a menu to blogger blogsHow to Install?Go to Blogger Dashboard > Design tab. Click on Add a Gadget any where in your Layout. Choose LinkList Gadget and Leave Title Field as Blank Try to Add Some Links and Save Gadget  Edit LinkList Widget Once again, And Copy Widget ID From URL like in Image   Make Sure the ID may Exact to match in the URL even a Block Letters(Capital Letters) Also for Perfect Working of This Widget!  Here is LinkList1 is the widget...

Twitter Style Hover Button Recreated in Pure CSS

 How to add this button to your blog post At first we have to add the skin of these both buttons. that's adding CSS part into your blogger template. Lets see how to do it.Go to Blogger Dashboard > TemplateBackup your Template before making any changes to your blogClick on Edit HTMLTick Expand Widget TemplatesPress Ctrl + F and search the code shown below ▼]]></b:skin>Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code).btn {position: relative;display: inline-block;overflow: visible;padding: 5px 10px;font-size: 18px;font-weight: bold;line-height: 18px;color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, .5);background-color:...

CSS3 Hover Animation Effect for Your Blog Post Title

How to add this animation to blog post titleAs I mentioned above you can easily add this trick into your blogger blog by applaying simple CSS3 code into your template and you don't wanna add separate html code for this animation effect. Please follow the below steps. Go to Blogger Dashboard > TemplateBackup your Template before making any changes to your blogClick on Edit HTMLTick Expand Widget TemplatesPress Ctrl + F and search the code shown below   ]]></b:skin>Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code).post h2 {margin:.1em 0 0;padding:0 0...

Text customization - Magazine Style Text

Here's another way you can customize your Blog. In this case, your Post. This tutorial will be about Magazine text style in Blogger Posts. You often see this style in newspapers, literature, magazines....It looks all right.And here are two different Magazine styles:Drop CAPSBig size of the First letter in the PostTo achieve this effect, you have to place some code in your EDIT HTML section of Post Editor.Code for DROP CAPS:<span style="float:left;color:#000000;font-size:100px;line-height:70px;padding-top:2px;font-family: Times, serif, Georgia;">L</span>Ok. You have to "surround" your letter with this code. For example, I've surrounded letterL (in orange), which...

More Pictures in one row or side by side view

By default, when you upload pictures (images, or videos)) into your Blogger Posts, they are placed one after another. In one column.The only thing we can choose, is to align them (left-center-right). There's no option to organize them so they can be next to each other, in one row (horizontal).The best way to do this, is using the TABLES (if you want to know more about HTML Tables, visit www.w3schools.com).1. You have to find out what is the WIDTH of your post area. To calculate how many pics can fit there. In Blogger, go to LAYOUT --> EDIT HTML, and in code section, find the following:#main-wrapper {width: 410px;...so, in my case, it's 410 px. But you can't use all of...

Widget customization - how to style each widget differently

Well, this is interesting. We've already learned  to tweak and stylize our Blogger widgets (gadgets), in general. For example adding icon beside sidebar title heading and placing icon or image beside Labels and Links. That's cool. But now, we'll learn how to tweak and style each widget (gadget) differently! Meaning: each of your widgets (Labels, Archive, Links, custom widget) can have it's own looks (color, font, borders, images....anything!)remember that WIDGET is the same thing as GADGET Ok, here's the simple example: I've chosen to differ my widgets a bit, so I changed a the style of Labels, Links, Archive and Picture widget. I choose these widgets just for this...

Post Title customization for blogger

How to customize your blogger Post Title...we can add some background picture behind the post title, or borders, change font......................well, a lot.Before doing any customization, back up your template. Just in case....Let's start with the beginning. Heh.For customization, we will use the CSS style in the code section that corresponds to ourPost Title:.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:140%;font-weight:normal;line-height:1.4em;color:$titlecolor;}.....Attention:this example is made in Minima Blogger default template, so your actual code may differ a bitit's important to find the part ".post h3", or if you have custom template, the find the part...

Hex Color Code Generator Tool

How To Use it?First drag the bar on the "Hue" selector to the area of your desired colour palate. Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #741010------------------------------------------------------------------------------------------------------------How To Use it?Select any color in rotating wheel then the color and matching color code will start appearing in Boxes.If you want to match color with your hex code then paste six digit colour code in the form below without the hash (#) sign and then hit Update.You can then copy the hex values...

How To Split Blogger Header Into 2 Section

Blogger is having very simple layout which you can customize through template designer.You can add two sidebar or 3 column footer to your blog but there is no way by which you can split your blog header in two parts. Splitting your blog header and adding Adsense ads can help to boost your CPC And Clicks, you can also add any widget in your blog header like search box of social sharing button.Just follow below steps to divide your blog header in two parts.Step 1Go to Blogger DashboardClick On Template >> Edit HTML >> ProceedMake Sure That Expand Widget Template checkbox is UNCHECKEDNow find below...

HOW TO ADD COLOURFULL SOCIAL BUTTONS TO BLOGGER

Something is fishy happening in google headquarters every day they  started the morning with a new penalty for bloggers and webmasters by releasing algorithm updates,changing there polices and doing something strange to keep SERP clean. They have released latest algo updates two times a month in the history of algorithms. So bloggers and webmasters keeping google aside are taking shadows of social media quality Dofollow backlinks to genrate there traffic and revenue.So here we are today we have relased the widget to solve all these problems with the simplicity and with the great ease colourfull social buttons with hover effect which will enhance your blog...