Fellow visitors! In New Year add a super cool compact social subscription box widget below post’s of your Blogger blog. This widget is very trendy designed and will make sure to get maximum social fan and email subscriber with style. This widget got three social follow buttons (they change look with mouse hover with sliding effect) Facebook, Twitter and Google plus. Made with CSS, HTML, CSS3, Script, Google font, Font awesome, keyframes and hard work. Easy to configure and add to your site. Let’s see how it looks, how to add and configure:-
Superb Feedburner subscription+Social Follow widget below posts of Blogger
How to add
This widget set up has two part, read on-
First, Log into your Blogger, select your blog,
Select 'Template', select 'Edit HTML'
Now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet </head>
Above </head> copy and paste part 1's codes
Second, Again search for
You may find this line twice, select sound line, and copy and paste part 2's codes below that line
If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
And below </article> copy and paste Part 2's codes. and configure
How to configure
To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
After configure hit 'Save template' and check out your blogger blog.
Compatibility
This widget is compatible with all browser's latest version (old version's are supports too except IE),
All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
So any feedback don’t forget to mention. Goodluck and Happy new year…
The default image captioning method we usually use is just more like showing the name of images. That captioning method is bit simple and awkward ways of representing caption. So here I am presenting 4 trendy image caption method using CSS3 effects, (not jQuery - JavaScript). These image caption methods will show your image caption on mouse hover with
Curtain, Fade in out, Pop under, Slide from left effect.
All effect got maximum support with any web browser,
Easily customizable via CSS editing
Let’s see how these effects look like and how to use ‘em on your website project.
Curtain style CSS3 image caption
HTML
CSS
Fade in out style CSS3 image caption
HTML
CSS
Pop under style CSS3 image caption
HTML
CSS
Slide from left style CSS3 image caption
HTML
CSS
How to add on your website project
First copy and paste the CSS part on your site’s Stylesheet.css
Whether on your website you want to show this image caption’s there copy and paste the HTML part.
How to configure
At HTML part’s ‘Image link’ paste your image link, on which image you want to show caption Into <p> and </p> tag write your caption
As your image’s height and width delete default code and place your image height and width. And also fix the caption’s height width too if effect does not showing right.
Compatibility
These effects are optimized for maximum fallback support with major web browser. Any browser with CSS3 Compatibility will show these effect easily.
Any feedback leave with comment, soon I’ll publish more image caption method so stay subscribed.
After publishing 5 superb CSS3 effect for images, I thought about to publish something like text box/content box or just empty div container what you can easily use on your web project. CSS3 made web designing very easy, and styling something with CSS3 is very flexible. So here 4 CSS3 empty container I publishing what you can use on your web designing very easily. And even you don’t have any project indented you can just use these boxes for highlighting text, phrase, codes (like-Blockquote). Let’s see how they look like and how to use
Curled border CSS3 shadow box
CSS
HTML
Lifted border CSS3 shadow box
CSS
HTML
Raised border CSS3 shadow box
CSS
HTML
Vertical curve border CSS3 shadow box
CSS
HTML
How to use
Copy and paste the CSS part into your stylesheet.css and copy and paste HTML part where you want to show these container boxes on your webpage
How to configure
Add text to a box, at HTML part’s <p> and </p> tag, inside of <p> and </p> tag paste/type your texts
To change the height and width of the box at HTML part’s change the value of width:70%;height:200px;
Change the font family, remove @import…..; line from CSS part, and paste your own font-family,
Change the line-height (space between two line) as you want default is 1.4, Change font size 16px to any px you want.
Compatibility
These codes are optimize for providing maximum support on every web browser, old browser and IE may not support these effects.
Last words, don’t forget to mention your feedback, stay touch more CSS3 border I’ll publish soon, until than chill…
For mentioning an article’s some important phrase, author credit or just highlight some special text in post we often use Toggle text box widget (Click on a line or button, expands and expose to lot’s of embedded text). Toggle text box widget usually comes up with Wordpress theme package (like Thesis theme, Elegant Themes) what can be activate through ‘text editor’. But for ‘Blogger’ there is no such function like Toggle box. So I wanted to make one for Blogger. This Toggle box widget basically work like Accordion and they powered by jquery for creating smooth effect. This one I developed it do not use jquery felt not necessary and slow down site, made with just CSS, HTML5 and CSS3, cool designed, light weighted and responsive. Let’s see how it looks like and how to add it in Blogger.
Select 'Template' tab option, click 'backup/restore' from upper right corner.
Download full template and save it on your pc's Hard drive
2. Goodies installing
Go to ‘Template’ tab, select ‘Edit HTML’,
Search (Using CTRL+F or CMD+F) into code snippet </head>
Above </head> copy and paste this line of code
3. Installing CSS
Go to ‘Template’ tab, select ‘Edit HTML’,
Search (Using CTRL+F or CMD+F) into code snippet ]]><
Above ]]>< copy and paste CSS part
4. Setting up HTML
During editing post ‘post editor’s upper side (compose/HTML)
Select HTML/switch to HTML, and copy paste HTML part, and configure,
Red text replace with your Heading, Pink text replace with your hidden paragraph.
After configuring switch to ‘compose’ part.
Done, check out your post now ;)
Compatibility
This toggle text box widget is compatible with all major web browser and compatible with all standard designed Templates.
So add this Toggle text box widget to your Blogger blog easily, make your blog post trendier and style-full, any problem or feedback please leave with comment. New unique widget will be release soon stay subscribed. Chill….
HTML5 have lots of features and function. Audio and Video playback is one of the notable feature of HTML5. Before HTML5, there was no standard for showing videos on website. Video playback basically done by Adobe flash, alternatively you can use HTML5 Video player to your site, it offers
Modernized light weighted codes
No exceptional script necessary
More customizable parameters (play/pause button, volume, height/width etc)
Easy to use for everyone
Supports MP4, WebM, Ogg formats
Supports all web browser’s latest version (except- IE, Safari what does not supports WebM, Ogg formats)
So let’s see how to play video with HTML5 player on your Blogger and Wordpress blog.
How to Add HTML5 video player to Blogger, Wordpress
Preview- (Frame Differs on browser)
Codes for copy-
How to add in Blogger
During writing post from text editor’s upper side from (Compose/HTML),
Select ‘HTML’ and paste the following code and configure,
After configure get back to ‘Compose’
How to add in Wordpress
During writing post from text editor’s upper side from (Post/HTML),
Select ‘HTML’ and paste the following code and configure,
After configure get back to ‘Post’
How to configure
First upload you video on any host site, copy your link, link extension should be
sample-clip.mp4
sample-clip.webm
sample-clip.ogg
Not will be like :-
sample-clip.html
sample-clip.php
/embed/FG0fTKAqZ5g
Paste on ‘Video Url here’
Add a still image in poster tag, upload poster image on ‘Tiny Pic’ and get the link, paste on ‘Image link here’
Add your Video height (default is 300), and width (default is 600)
Fix preload (auto or metadata or none)
Specify video prefix based on your video format,
If MP4 video/mp4
If WebM video/webm
If Ogg video/ogg
Specify in to controls =" ", (play or pause)
If you know how CSS works you also may add with style =" "
So, add HTML5 video player easily to your Blogger and Wordpress blogs. And don’t forget to mention your feedback on tutorial. Chill....
Someday ago I was checking a Wordpress plugin call ‘All in one CSS3 button’, in that plugin I saw a stunning CSS3 effect base button, when you hover that button it shakes! It seem pretty amazing to me and I want to make a version for Blogger blog users. It took a while to understand that code pattern but finally I did figured out how to do that and here I publishing CSS3 Shake effect on hover Button for Blogger, what you can use in your blog, for reference, linking etc. And based on that code 5 modern looking button I present to you, let’s see how they looks like and how to add ‘em in your Blogger blogs.