Few days ago I published a post where I paged Flat style superb navigation menu for your Blogger blog. Here in this post I am publishing another cool style CSS3 navigation menu what enhanced with more cool hover style. These adaptive designed menus are dedicated to make your blog stylish with a new level and perspective with a new trendy web designs. Let’s see how they looks like and how to add it in your Blogger blog.
Go to ‘Layout’, and select ‘add a gadget’ from the space below ‘header’
Select ‘HTML/JavaScript’ from popup menu
Copy and paste following codes of your style and configure with your label name on default label, # place your label links; additionally add more label by coping <a class="ks-link" href="#">label</a> and delete unnecessary label by deleting <a class="ks-link" href="#">label</a>line, that’s it
Save gadget, Save template and check your blog out for live preview
Blue CSS3 navigation menu
Turquoise CSS3 navigation menu
Purple CSS3 navigation menu
Orange CSS3 navigation menu
Silver CSS3 navigation menu
Compatibility
This navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.
This menu is compatible with any updated Web browser.
So what your feedback about these flat Cool CSS3 navigation menu don’t forget to drop a comment and Goodluck……
As you already know that Blogger’s default templates doesn’t comes up with navigation menu. And without navigation menu a site doesn’t look that much good and also it becomes routeless roads to your site visitors. There is a way to add a menu using list gadget, otherwise you can use custom made menu to create navigation menu to your blogsite; here a custom menu I published couple of days ago features fixed to header, dropdown menu and social icons; that menu was a multipurpose menu, so I decided to create and publish a normal looking menu without lots option and adaptive design. Neat and simple looking flat designed, cool CSS3 transition effects, modern and stylish UI that will make sure your Blogger site is running on the treading stuff and increase your reputation. Let’s see how it looks like and how to add it in your Blogger blog.
Go to ‘Layout’, and select ‘add a gadget’ from the space below ‘header’
Select ‘HTML/JavaScript’ from popup menu
Copy and paste following codes of your style and configure with your label name on default label, # place your label links; additionally add more label by coping <a class="ks-link" href="#">label</a> and delete unnecessary label by deleting <a class="ks-link" href="#">label</a>line, that’s it
Save gadget, Save template and check your blog out for live preview
Flat Blue navigation menu
Flat Turquoise navigation menu
Flat Purple navigation menu
Flat Orange navigation menu
Flat Silver navigation menu
Compatibility
This navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.
This menu is compatible with any updated Web browser.
So what your feedback about this flat CSS3 navigation menu don’t forget to mention by comment and Goodluck……
Few days ago I published a CSS3 enhanced image gallery for your Blogger blogpost, and today I am publishing another CSS3 oriented Image slider, this slider’s main feature is its lightweight, easy configurable, cool looking simple and handy. Build with HTML, CSS, CSS3, little amount of script and Google webfont. It has Next and Previous button, mouse hover image caption, unlimited image slideshows and height width changeable with little value changing. Let’s see how it looks like, how to install it on Blogger and how to configure; read on-
Cool CSS3 & jQuery Image Slider for Blogger
Live Demo:
The Island
The Green Field
The Paradise
The Rainy weather
How to install:
Optional Step: Back up your template first!
Log in to your blogger, select your blog
Select 'Template' tab option, click 'backup/restore' from upper right corner.
Download full template and save it on your pc
Mandatory Step:
From 'Template' tab, select 'Edit html'
And find (using Ctrl+F or Cmd+F) this tag </head>
Above </head> copy and paste these lines
Now again search for ]]><
Above ]]>< copy and paste these lines
Save Template
How to apply:
Go to ‘New post’ or select a post to ‘edit’
Switch ‘HTML’ mode of text editor (upper left corner of text editor this option you can find Compose or HTML)
Now copy and paste these lines in post;
and configure:
The pictures you want to display first upload them on Tinypic, and collect the raw image links, paste the links on ‘Pic Link’;
And in ‘Pic Detail’ type your one line of details;
If you don’t want all of image slot just delete full line
And if you want to put more image on slideshow just copy this line, that much time you want
After configuration, Switch back to ‘Compose’ part, Publish post, and see your slideshow in live action.
More configurations: Optional
The default image size allows Height of 135px and Width of 500px, Any resolution picture will be scaled into these default value, if you having problem with this default resolution, just change the value as your requirement, the sizes can be found in CSS part, red colored.
Compatibility:
This image slider tested on several templates, worked fine on every template, if some template doesn’t shows it right try to fix the px values.
Supported on all major web browsers
So how your images slider working on your blog and any problem facing with it don’t forget to mention by comment, Chill….
I always try to publish Cool, Stylish and Trendy widget for your Blogger blogs. To continue that job here today I am going to publish a Post sharing widget (appears below every posts of Blogger). This widget called Bottle caps social sharing and bookmarking widget. Comes up with Glossy Icons, 10 service (Facebook, Twitter, Google plus, LinkedIn, Stumble upon, Pinterest, Delicious, Reddit, Blogger, Digg), CSS3 animation. Looks great on fashionable, personal and kids blogs. Easy to add and no configuration necessary, let’s see how it looks like and how to add it in Blogger blogs; read on-
Bottle Caps style: Social sharing widget below posts in Blogger
How to add- Optional Step: Back up your template first!
Log in to your blogger, select your blog
Select 'Template' tab option, click 'backup/restore' from upper right corner.
Download full template and save it on your pc
Mandatory Step:
From 'Template' tab, select 'Edit html'
And find (using Ctrl+F or Cmd+F) this line-
You may find this code phrase twice, ignore first phrase, after second phrase paste these codes;
Hit ‘Save Template’, and preview your blog for live action.
[If your template doesn’t contains <div class='post-footer-line post-footer-line-1'> or using HTML5 template] try this way; Search for </article> into template and above </article> paste given codes.
P.S: This widget requires at least 600px width of your Post Footer Area, So you need to increase the width of Post Footer Area, otherwise icons will not appear in one row;
From ‘Template’ tab, select ‘Edit HTML’
Search for .post-footer, and within .post-footer’s bracket add width:600px;
like this;
Save Template
Template Compatibility
This Bottle Caps style social sharing and bookmarking button widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this. Will not appear on homepage.
Last words, How it looking in your Blogger blogsite and if you having any trouble with this widget don't forget to mention. And don’t forget to check out previously published sharing widget you gonna love them too Truck Style, Silver button, Coldblooded etc. Happy sharing :) and stay connected…
You maybe already familiar with Blockquotes, in post we often use this option for highlighting text, quote, poem, codes (syntax highlighting) etc. If you are using Blogger’s default themes than you already knew how ridicules default Blockquote looks like. So removing this boringness of this simple quoting option I developed and published a cool CSS3 blockquote few days ago. And here I developed more two, their design inspiration comes from very popular blogsites around web, and these two designs are very fashionable and trendy for any Blogger blogs. Created with CSS, HTML and CSS3, no JavaScript and image used that’s why they are fast loading and do not create any extra request on HTTP requests. They have adaptive design, retina ready and responsive. Let’s see how they look like, how to install ‘em in your Blogger blogs.
2 Popular Blockquote/Syntax Highlighter for Blogger blog
Number 1:Cool minimalistic design, On mouse hover left side of quote change color (Green to Red) Preview:
How to install in Blogger-
All you need to do is embedding these given code into your template, Read on-
First log into your Blogger, Select your Blog,
Go to ‘Template’ tab, Select ‘Edit HTML’
Find (Using Ctrl+F or Cmd+F) in to code snippet
If you found .post-body blockquote delete .post-body blockquote’s all default CSS code (within {bracket to bracket all code}) and replace your desired code into .post-body blockquote’s bracket
Unfortunately, if your template doesn’t already have .post-body blockquote than search for ]]><
Above ]]>< copy paste this line with desired codes;
Than 'Save Template'. And write a post using Blockquote, and check out blockquote in live action.
Compatibility
These custom CSS3 Blockquotes is compatible with all web browsers latest version (except-IE)
So what you think about these blockquote design, how it working on your blog don’t forget to mention. New tricks and widgets will be release soon stay tuned. Goodluck.....