In post we use Blockquote for highlighting some important text, quote, poem, codes etc. Blogger’s default Blockquote is just a quote sign, it’s so simple. Again if you use custom blockquote what developed by other Blogger developers those Blockquotes basically designed with image, those looks cool but it increase Http request, page size and loading speed. So here I presenting a simple CSS3 blockquote design for you, what doesn’t make extra pressure on Http request, responsive, flat designed. It made with solid CSS3 and Google font. Let’s see how it looks like and how to add it to your blogger blog.
All you need to do is embedding these given code into your template, Let’s start-
Step 1: Backup your template (Optional step)
Login to your blogger, select your blog,
Select 'Template' option, click 'backup/restore' from upper right corner.
Download full template and save it on your pc's Harddrive
Step 2: Installing blockquote (Mandatory step)
First log into your Blogger, Select your Blog,
Go to ‘Template’ tab, Select ‘Edit HTML’
Search for .post-body blockquote using (Ctrl+F or Cmd+F) into code snippet
If you found .post-body blockquote delete .post-body blockquote’s all default CSS code and replace with these codes in to.post-body blockquote {between brackets here}
Then 'Save Template'. And see your Blockquote in live action.
Compatibility This custom CSS3 Blockquote is compatible with all web browsers latest version (except-IE)
So what you think about this blockquote design, how it working on your blog don’t forget to mention. New blockquote‘s will be release soon stay tuned. Goodluck
After publishing couple of normal looking Author information box/biography box widget here today I am publishing A High end design base Author bio box build with CSS3, CSS and HTML. This widget offers:
This widget is easy to install and configure. Looks elegant with any types of blogs and highlight easily Author’s Bio and social profiles. Let’s see how it looks like, how to install in Blogger blogs and How to configure. Read on-
Before <div class='post-footer-line post-footer-line-1'> copy and paste below codes, {You may find this code phrase twice, ignore first phrase, after second phrase paste codes}
[For HTML5 template users] If your Template doesn’t contains <div class='post-footer-line post-footer-line-1'>, then search for
</article>
And below </article> paste all codes.
How to configure:
To configure: Author image; Upload your image (200x200 png/jpg) to Tiny Pic and get the raw image link, paste it on ‘Your Image Link’
To configure: Social icons; Collect your following profiles direct address link and paste on defaults
To configure: Bio texts; Write/paste your bio within <p> to </p> tag. Should be 30-40 words
And finally ‘Save Template’, and check your bio in live action Template Compatibility This Author box is compatible with almost all stranded templates but unique designed templates, highly modified templates will not accept this. It also will not work on Blogger's default Dynamic view templates. and Will not appears on homepage.
The necessity of Author box widget is so to speak. So add this Author box widget on your Blogger blog and make your blog more detailed, personality full and stylish. Any feedback, problem you facing with this widget don’t forget to mention, Goodluck.....
Having Contact form in blogsite and website is very important. You can here about what is site users feedback, recommendation, request even orders. There is a lot of way you can find to add contact form in your Blogger blog or websites. Using 'mailto:your email' tag to contact directly by email is pretty popular and this process use by various popular site all around the web. This 'mailto:your email' can be turned into a custom input field base contact form using HTML and CSS. And here I developed two colored contact form made up with HTML, CSS, CSS3, script and HTML5 markup, these contact forms looks neat, compilable with all web browsers, and got input fields of Name, Email, Subject and text area with warning! Below two styled contact form's code and configuration info given. Let's see how these looks, how to add in Blogger blogs or websites and configure.
First log into your Blogger account, select your blog,
Go to 'Pages' tab and create a page name 'Contact us'
Select 'edit page' top left of page editing (Compose/HTML) switch to (HTML) mode
And paste codes in text area, and configure
How to add in websites-
Go to your contact page's Stylesheet and paste following code and configure.
How to configure-
"you@email.com" replace with your email what you intent to use as contact with you.
So having trouble, any recommendation or anything about these contact form don't forget to mention. New and more advanced contact form will be release soon, stay subscribed.
Recently I published high-end CSS3 made 2 different hover styled navigation menu also I published a cool multipurpose dropdown menu too. But none one of them are responsive. Those menu works fine on non-responsive template but if you using responsive template (adapts any screen size, tabs and mobile phone) also you turned off default mobile view on mobile devices then those menu using is worthless. That case we use responsive navigation bars. For your consideration here I am publishing 3 of coolest responsive navigation bars for your responsive templates. They doesn’t come up with dropdown menu but coming soon (working on that), made with CSS, HTML, CSS3 and jQuery. Let’s see how they look like and how to add them on your Blogger blog.
Black responsive navigation menu
Black oriented gradient colored; equipped with cool CSS3 transition effect, Google font.
#ks-menu ul { list-style: none; margin: 0; padding: 0; line-height: 1.4; display: block; zoom: 1; } #ks-menu ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #ks-menu ul li { display: inline-block; padding: 0; margin: 0; } #ks-menu.align-right ul li { float: right; } #ks-menu.align-center ul { text-align: center; } #ks-menu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: capitalize; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #ks-menu ul li a:hover { color: #fff; } #ks-menu ul li a:hover:before { width: 100%; } #ks-menu ul li a:after { content: ""; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #ks-menu ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background:#3CF; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #ks-menu ul li.last > a:after, #ks-menu ul li:last-child > a:after { display: none; } #ks-menu ul li.active a { color: #f5f5f5; } #ks-menu ul li.active a:before { width: 100%; } #ks-menu.align-right li.last > a:after, #ks-menu.align-right li:last-child > a:after { display: block; } #ks-menu.align-right li:first-child a:after { display: none; } /*crawlist.net CSS ends*/ @media screen and (max-width: 768px) { #ks-menu { -moz-box-shadow: 2px 2px 5px #d5d5d5; -webkit-box-shadow: 2px 2px 5px #d5d5d5; box-shadow: 2px 2px 5px #d5d5d5;
}
#ks-menu ul li { float: none; display: block;
} #ks-menu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } #ks-menu ul li a:hover { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fff; background:#4c4c4c; } #ks-menu ul li.last > a, #ks-menu ul li:last-child > a { border: 0; } #ks-menu ul li a:after { display: none; } #ks-menu ul li a:before { display: none; } } </style>
Ocean blue responsive navigation menu
Blue oriented gradient colored; equipped with foldable jQuery featured touch menu on mobile, Google font.
Forum or bulletin board is the best way to start discussion with your website or product's user, clients or Just chilling out with a phenomenon, problem or solutions. To create a forum website you need to make a platform by coding, Or you can just use ready-made forum CMS (content management system). Here I've made a list for best forum CMS (platform) or bulletin board script/software. All forum cms gathered here are easy to use and management plus high end performance and satisfaction. Just read on the list, click on the names to get more information, download and use.
13 Best Forum CMS/Script to use
V Bulletin (Paid) The best professional and business forum cms/software. You can find it anywhere all over the internet. They got customer like Nasa, Sony, Stream
Satisfaction:
Real-time integration
Extensive personalization (lot of third party themes)
Content generation
Mobile optimize
Easy management ability to launch site under 15 minutes
Mybb (Free) Mybb has super easy to use interface. Standard discussion board structure what made with a motto ‘both for you and your visitor's' very popular and so on!
Features
Have an unlimited number of members, forums, posts, threads - and anything else!
Mysql Full text search capabilities
As many copies as you like, one database.
Completely customizable with our intuitive templates and theme system
Install or create as many different languages on your forum as you please
Developed in PHP, compatible with MySQL, PgSQL, and SQLite v2 and v3 database servers
Powerful user control panel
Custom profiles and settings per user
Custom profile fields
Advanced private messaging system with tracking and multiple folders
Reputation system allowing members to rate each other
Signatures, avatars, buddy and ignore lists and forum subscriptions
Attach multiple files to a single post
Automatic thumbnail generation for attached images
Click-able smiles and BB Code
Quick moderation options for moderators
Email notification of new posts
Create polls with multiple options and attach them to threads
Multi-quote - quote multiple posts easily in one reply
Phpbb (Free) The most widely used open source forum cms or bulletin board in the world. Millions of people use it to build small or huge corporate forum.
Features
Modular design for the Admin Control Panel, Moderator Control Panel, and User Control Panel
Bbpress (Free) Runs on Wordpress, Honestly wordpress is the only platform that can be shape in any cms. It’s easy to use, easy to administrate, fast and clean. But don’t let its simplicity deceive you; underneath the gleam, it’s got some powerful features and is highly customizable
Features
Open Source, always and forever
Simplicity is a feature
Speed and security are the foundation of any good user experience
AEF (Free) Aef stands for Advance electron forum A Bulletin board or forum software what is more than meets the eye. More features, more customization and so on.
Features
UTF-8 Supported
Seo Tools
IP Ban
W3C Validated
News System with articles
Shout Box!
Threaded Mode for topics JS DOCK (for easy navigation)
WYSIWYG Editors
Customizable Themes
Multiple Languages supported
Time Zone Adjustment
Automatic Updates
Export Files and Database
Suggest Framework for usernames while writing Private massages
Domdrag (for reordering Categories, Forums, emoticons A new feature included for the first time ever in a forum software)
Punbb (Free) PunBB is a fast and lightweight PHP powered discussion board. It is released under the GNU (General Public License). Its primary goals are to be faster, smaller and less graphically intensive as compared to other discussion boards
Features
Extension system based on hooking technique. One click extension installation,
No need to modify forum's code anymore.
Full UTF-8 support.
More customizable styles, template system.
New layout: markup, Css, language files updated, markup helper functions added.
URL rewriting schemes, nice URLs built-in.
Split/merge topics functionality.
Multiple groups for moderators allowed.
Searches are now case-insensitive, extern.php improved, more global,
Per-group and per-user options added.
Certain "bad" characters are silently stripped out from the text input.
Got rid of extras folder
Hot fix system based on extension system for quick bug fixes.
Xmb (Free) XMB stands for eXtmeme massage board. It’s lightweight PHP forum software with all the features you need to support a growing community. With outstanding community support and contribution, you will find XMB to be easy to setup, customize, and enhance.
Features
Forum Organization with Categories, Forums & Sub-Forums
Easy to use Member Management
Anti-spam image verification for registration and anonymous posting
Fluxbb (Free) FluxBB is a free open source forum software what designed to be fast, light and user friendly. BB's code, written in PHP, has a proven track record of stability and security.
Fud forum (Free) Full meaning of fud is fast uncompromising discussion forum. It’s a open source and extraordinary forum software. Super fast template supported, Usenet newsletter xml feed aggregator.
Phorum (Free) Phorum designed to be designed to meet different needs of different web sites while not sacrificing performance or features. A Php and mysql powered free open source forum cms.
Features
Performance a versatile product that can serve anyone's needs.
Forum Customization flexible hook & module system.
Forum Design able to rearrange the data in any shape, form or fashion user or developer's want
Last words, forums are extremely useful get to know what people talks and discuss about your site and product also a discussion group of any thing can bring out and solve problems and build networks community too. So decide what cms you will use for your forum website. Phpbb and Mybb are recommended but for business paid is always best and secure too. What you gonna use don't forget to mention.
