How to Auto tweet and Auto post to Facebook your Blogger blog’s post

Letting your social networking fan know about your new published post instantly ‘Auto tweet and auto post to Facebook’ your post is very effective and time saving. For Wordpress - using plugin can solve this auto tweet and auto post job but Blogger doesn’t have option like this. But there is also solution exists. Let’s see what I’m talking about Auto tweet and Auto post to Facebook your blogger blog’s post.

How to Auto tweet and Auto post to Facebook your Blogger’s post

Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.

Below walk through steps are written; just read on:-

• Open an account at Twitter Feed, confirm your email, and visit dashboard.

• Click on ‘Create new feed’, you will direct to setup page

• In setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed. Your Blogger site too, default source URL looks like-

http://www.crawlist.net/feeds/posts/default

So place at ‘add your source URL’ input area you’ll be placing your site’s default feed

http://your blogger site.blogspot.com/feeds/posts/default

Alternatively you can use Feedburner URL too

http://feeds.feedburner.com/your site feed id

• Click to toggle ‘Advanced Settings’

Set up ‘Update Frequency’ (30 minute to – 24 hours)
Set up ‘And post up to new update’ (1-5) at a time.
Set up ‘How link will be shown’, Just Title, Just description or both.
Set up ‘Shorten link through’ service

• Available Services is ‘Twitter’, ‘Facebook’, ‘LinkedIn’, ‘LinkedIn Company Page’, ‘App.Net’. Authenticate those services with your following profiles.

• Job is done, check your status at dashboard anytime.

Hope you successfully made this job done. Any question or feedback don’t forget to mention by comment. Chill....

Read More

7 best CMS/script for building Social networking website

The demands of social networking and community sites are increasing rapidly. For building a community/networking site you need to code it from scratch. But if you are not a pro coder or you don’t have a nerd team, building a social networking website is completely impossible. So as non coder to build Social networking website you can use CMS (content management system - readymade platform what helps you to build site) also known as platform software or script. With social networking CMS you will be able to-

• Build a Social networking website in a short time

• It can be use for personal or commercial purpose

• Customizable, so you can modify any part of site as you want

• Some of these CMS are open source (completely free and you can modify/upgrade the source code) and some of paid.

Let’s see what content management systems I talking about for building Social networking website.

7 best CMS/script for building Social networking website

Dolphin 

Dolphin is the world's most advanced community CMS. It is Open source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Premium upgrade available.

Jcow

Jcow is flexible Social Networking software written in PHP. It can help you to: Build a social network for your interests and passions, Build a member community for your existing website, Build a social networking site like Facebook, Twitter. Paid version got more customizable option.

Buddypress 

Buddypress is a Wordpress CMS's plugin. After installing Wordpress you will be able to install this plugin and start a minimal social networking site on your Wordpress. Build a social network for your company, school, sports team, or niche community. BuddyPress lets users sign-up and start creating profiles, posting messages, making connections, creating and interacting in groups, and much more. BuddyPress boasts an ever growing array of new features developed by an awesome plugin development community. There are more than 330 BuddyPress plugins available, and the list is growing every day, multi language supports, updates regularly.

Oxwall

Oxwall is unbelievably flexible and easy to use PHP/MySQL, Community CMS/platform. Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions.

Beatz

Beatz is an online social networking community script that allows you to start your own favorite artist band website. Beatz is an online community script for sharing, discussing and learning about new artists and your favorites.

Elgg

Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organization.

Etano

Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies and products.

CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.

Read More

6 best Captcha Plugins for Wordpress

The usefulness of using Captcha on your site is so to speak. Most important some reason stands for your website’s security. Like-

• Preventing spam bots (The bots what leaves/posts spam links as a comment or message automatically)

• It does brute force protection (Login, account hacks)

• Preventing Harmful data collector bots (Those automated programs collecting certain types of sensitive information, like-email, password)

• Cookie base bots (Bots what examine cookies for their good, like-advertise serve)

• Prevents DDOS attacks (The bots what assist with massive downloading of content from multimedia websites, and make server down)

And so on.

And if you use Wordpress you can get rid of these security problems with just installing a Captcha plugin. There are a lot’s of Captcha plugin you may find in wordpress plugin depositary. But I did some check and writing here 6 best Captcha plugin for wordpress based on there popularity, styling over all worth to have performance. So read on-

6 best Captcha Plugins for Wordpress

SI CAPTCHA Anti-Spam

Adds CAPTCHA anti-spam methods to WordPress forms for comments, registration, lost password, login, or all. In order to post comments or register, users will have to type in the code shown on the image.

• Configure from Admin panel

• Valid HTML

• Section 508 and WAI Accessibility Validation.

• Allows Trackbacks and Pingbacks.

• Setting to hide the Captcha from logged in users and or admins

• Setting to show the Captcha on the forms for comments, registration, lost password, login, or all.

• 18+ language translation

Captcha

The Captcha plugin allows you to implement a super security captcha form into web forms. It protects your website from spam by means of math logic, easily understood by human beings.

• Three basic maths actions - add, subtract and multiply.

• This captcha can be used for login, registration, password recovery, comments forms.

• There is also a premium version of the plugin, allowing compatibility with BuddyPress (Registration form, Comments form, "Create a Group" form and Contact Form 7

• 40+ language translation

WP-reCAPTCHA

reCAPTCHA is a free CAPTCHA service that protects your site against spam, malicious registrations and other forms of attacks where computers try to disguise themselves as a human.

• reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

• In addition to protecting your site, reCAPTCHA also helps us digitize old books and newspapers, transcribe street numbers and solve hard AI problems

 

PlusCaptcha

PlusCaptcha - Forget the spam, ugly and complicated captchas. The Easiest Captcha to Setup and Execute, with Auto-Setup Feature. An evolution of the protection from bots and people without good intentions. Simple to install, simple to use, security at a click distance

• Simple to setup, Automatic account generation

• Size, color, difficulty personalization.

• Popular All Browsers Support

• Integrated Form (with shortcode), Comment form, Login form, Lost password form

Solve Media CAPTCHA

Secure & Monetize your site with Solve Media's free CAPTCHA replacement. CAPTCHA is a simple and popular method of securing forms from abuse.

• Set Solve Media CAPTCHA widget on a registration form, comments form, or any Contact-Form-7 v2.0 or newer.

• Solve Media CAPTCHA widget is compatible with other anti-spam solutions like Akismet

• The Solve Media CAPTCHA widget works with nearly 100% of all browsers capabilities

• Every time a visitor to your site solves a CAPTCHA TYPE-IN™ ad, they share the revenue with you.

 

Are You a Human - The Fun Spam Blocker

Stop spam and bots with PlayThru, the fun, free CAPTCHA alternative! CAPTCHAs infuriate users, increase drop-off, and ruin your site's user experience. PlayThru is the simple game-based CAPTCHA replacement that people love. It's easy to install and completely free.

• This plugin works effortlessly on comment, registration, and lost password forms, and is compatible with BuddyPress, Gravity Forms, and Contact Form 7

• CAPTCHA-related dropoff is five times higher on mobile than on desktop,

• The PlayThru spam blocker is optimized for touch, so it works beautifully on mobile device

 

Really Simple CAPTCHA

• Really Simple CAPTCHA does not work alone and is intended to work with other plugins. 

• It is originally created for Contact Form 7, however, you can use it with your own plugin. 

• Also it is not strongly secure.

As you already knew why Captcha using so necessary. So use a Captcha plugin from above and increase your wordpress blog's security. Don't forget to mention what you use or gonna use :)

Read More

3 best Popular Post widget for Blogger

Blogger’s default Popular post widget is very simple, it just shows lines of titles. But this popular post widget can be customize by changing default CSS code of template. So I designed 3 different popular post widget with CSS and CSS3 codes. All you need to do is embed your favorite popular post widget codes in to your Blogger template. Let’s see how they look like and how to add them in your Blogger blog.

Flat popular post widget for Blogger

Very trendy designed, Flat color, CSS3 transition, Google font.

Preview-

Codes for copy-

/*crawlist.net pop post label starts*/

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
-webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }

    .popular-posts ul li:hover {
    color:#222222;
    background:#F9690E;
-webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }

.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
color:#222222;
font-family: 'Droid Serif', serif;

}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    }/*crawlist.net pop post label ends*/

Shadowed popular post widget for Blogger

Eye responsive, elegant designed with CSS3 transition, Google font.

Preview-

Codes for copy-

/*crawlist.net pop post label starts*/

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;

-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;

-webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;
     -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;
          box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;

-webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }

.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
font-family: 'Droid Serif', serif;

color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }/*crawlist.net pop post label ends*/

Colorful popular post widget for Blogger

Eye catchy colored, pop glossy designed with Gradient color, CSS3 transition, Google font.

Preview-

Codes for copy-

/*crawlist.net pop post label starts*/

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:3px;
background:-webkit-gradient(
    linear,
    right bottom,
    right bottom,
    color-stop(0, #51CDD1),
    color-stop(1, #FA73C8)
);
background-image: -o-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -moz-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -webkit-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -ms-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: linear-gradient(to right bottom, #51CDD1 0%, #FA73C8 100%);

-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #ccc;
color:#fff;

-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    }

.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
color:#ffffff;
font-family: 'Droid Serif', serif;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    }/*crawlist.net pop post label ends*/

How to add in Blogger

This popular post widget set up have 3 steps. Read on-

Step 1: Setting up Popular post widget

• First log into your Blogger account, Select your Blog, 

• Go to ‘Layout’ tab. From sidebar select ‘Add a gadget’, 

• From pop up window select ‘Popular post’. 

• From ‘Popular post’ menu select how may title will be shown (out of 10) 

• And uncheck ‘Image thumbnail’ and ‘Text Snippet’.

• Save ‘Popular post’ widget and ‘Save template’

Step 2: Installing styling

• Go to ‘Template’ tab, Select ‘Edit HTML’, 

• Now search (Using Ctrl+F or Cmd+F) for ]]></b:skin>

• Above ]]></b:skin> copy and paste any style of popular post widget’s code.

• Finally ‘Save Template’, And check out your custom popular post widget.

Compatibility

• All effect’s (Shadow, Color, Transition) are optimized for maximum support for all web browsers.

Any question, recommendation or feedback please let me know via comment. New custom popular post widget will be release soon stay touch. Chill…

Read More

How to use Google Font in Blogger post

Your Blogger template’s default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font provider offers web fonts what can be easily integrate to your site. Google web font is one of best web font provider. In Google font’s collection more than 650+ font with various styles you can find. Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let’s add Google font in your Blogger, this process is easy and difficulty is beginner. Read on-

How to use/install Google Font in Blogger post

Step 1: Choosing Fonts

• Go to Google web font (Here), 

• See demo of font family by Word, Sentence, Paragraph. 

• Use Filter (Left side) for find more specific font style. 

• After choosing a font style click on ‘Quick use’. 

• Then you will direct to another page where you can find that font’s set up codes. 

Step 2: Installing Fonts
You can install a Font family in two way:

• Embedding CSS Import (Easier)

OR

• Embedding Link Stranded (Easy)

1. Embedding CSS Import

• On your chosen Font's page you will see a option named 'Add this code to your website', 

• Select '@import' tab, and copy the given line.

• Now; Login to your Blogger, select your blog

• Go to 'Template' tab, then select 'Edit HTML'

• Search for ]]>< into code snippet (Using Ctrl+F or Cmd+F)

• And before ]]>< paste that copied line;

• Then, go back to Google font's page and copy the line (font-family:) of 'Integrate the fonts into your CSS' option

• Come back to Blogger's Template>Edit HTML page; Again search for .post-body into code snippet

• Into post body's bracket paste that (font-family:) line

• Save Template; And check out your blog for live action.

2. Embedding Link Stranded (OR)

• On your chosen Font's page you will see a option named 'Add this code to your website'

• Below a <link> code you will see; copy it

• Now log in to your Blogger account, select your blog,

• Go to ‘Template’ tab. Select ‘Edit HTML’

• And Search for </head> into code snippet (Using Ctrl+F or Cmd+F)

• Above </head> paste that link code.

• And modify the <link> code; Just add a slash (/) in the very last side of the <link> tag

• The modified version looks like this <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>

• Then, go back to Google font's page and copy the line (font-family:) of 'Integrate the fonts into your CSS' option

• Come back to Blogger's Template>Edit HTML page; Again search for .post-body into code snippet

• Into post body's bracket paste that (font-family:) line (See upper image to understand)

• Save Template; And check out your blog for live action.

Additionally:

• If you think font line height is not quite right than you expected. In that case add this code in to .post-body bracket

line-height:1.5;

• And if you feel the font size is not suiting your site. So change font size with adding this code in to .post-body bracket. change 16px to any px you want.

font-size:16px;

Then 'Save template', you are done, Check out your Blogger Blog to see the changes.

Faq-

• Mind the page loading speed before you set up a font in your blog.

• If your template does not contain .post-body search for .post

Using Google Font in blogsites enriches your site design and represent your style of blogging. So install fonts into your Blogger blog today and make your blog trendy and beautiful.

Read More

Add Blockquote/Syntax highlighter in Blogger

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.

Add Blockquote/Syntax highlighter in Blogger

Preview-

Live Demo- (Click Here)

How to add it in your Blogger-

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}

 @import url(http://fonts.googleapis.com/css?family=Lora);

position: relative; width: 80%;

  padding:30px 30px;
    margin:auto;
    line-height:30px;
    color: #6a5f49;
    border:#ccc 1px solid;
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          text-align:left;
font-family: 'Lora', serif;
font-size:100%;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);

• Unfortunately, If your template doesn’t already have .post-body blockquote then search for ]]></b:skin>

• Above ]]></b:skin> paste these codes.

.post-body blockquote {@import url(http://fonts.googleapis.com/css?family=Lora); position: relative;
    width: 80%;
    padding:30px 30px;
    margin:auto;
    line-height:30px;
    color: #6a5f49;
    border:#ccc 1px solid;
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          text-align:left;
font-family: 'Lora', serif;
font-size:100%;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);}

• 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

Read More

Testimonial Widget for Blogger/Wordpress

No matter your Blogger or Wordpress site is for Blogging, selling product, download stuffs using Testimonial widget is necessary. Testimonial widget represents your sites and product’s quality and it increase your visitors trust on your content directly. Here I developed a simple minimalistic Testimonial widget for you, it made with little amount of HTML, CSS, CSS3, Google font. It’s easy to add, configure, lightweight, fast loading. Let’s see how it looks like and how to configure it. Read on-

Testimonial widget for Blogger/Wordpress

Preview-

Live Demo- (Click here)

Codes for copy-

<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>
<style>/*crawlist.net CSS starts*/
.ks-tasti {height:293px; width:280px; padding:5px 8px;    -webkit-border-radius: 3px;
     -moz-border-radius: 3px; border-radius:5px; border:#ccc 1px solid; background:#f8f8f8;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
          box-shadow: 0px 1px 5px rgba(0,0,0,.25);}

.ks-tasti p {font-family: 'Lora', serif; font-size:15px; border:#ccc 1px solid;     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;border-radius:3px; background:#fff;text-align:left; padding:4px 4px; line-height:1.4;}
.ks-tasti h5:hover {background:#f5f5f5;}

.ks-tasti h4 {border:#ccc 1px solid;    -webkit-border-radius: 3px;
     -moz-border-radius: 3px; border-radius:3px;font-family: 'Raleway', sans-serif; padding:5px 5px; font-weight:bold; font-size:20px; background:#fff;text-align:center; margin-top:4px; margin-bottom:3px; color:#0CC;}

.ks-tasti h5 { border:1px #ccc solid;     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;border-radius:3px; font-family:'Raleway', sans-serif; background:#fff; text-align:right; color:#333; padding:3px 3px;margin-top:-3px;font-style:italic;}
.ks-tasti a {color:#999;}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net testimonial starts-->
<div class="ks-tasti">
<h4>-- Testimonial --</h4>
<p> Place your content </p>
<h5>By, Name, Company/site</h5>
</div><!--crawlist.net testimonial ends-->

How to add this widget in Blogger

• First Log in to your blogger account, select your blog, 

• Go to ‘Layout’ Tab, from sidebar select ‘Add a gadget’, 

• From pop up menu select ‘Html/JavaScript’. 

• In Html/JavaScript’s content box copy and paste following code and configure

How to add this widget in Wordpress

• From dashboard hover mouse on 'Appearance' tab, 

• From 'Appearance' menu select 'widgets', 

• Then drag and drop 'Text' content box in widget area, 

• Copy following codes and paste into 'text' box

• For new dashboard click on 'Text' add it to sidebar and paste following codes, configure and hit save

How to configure

• To configure the testimonial sentences, Add your testimonial sentences into <p> and </p> tag. Example in <p>Place your content</p> replace ‘Place your content’ with your testimonial.

• To configure By, replace By Name, Company/site into <h5> and </h5> tag

• Then save Template.

So, what your feedback and problem. About this widget don’t forget to mention. Advance Testimonial widget will be release soon. Stay subscribed. Chill…

Read More

Add 5 Superb CSS3 effect on Images of Blogger blog

In our Blogger post we use various images as hint, example, for showcase an object or just as a part of post. Highlighting those images, effect’s on images necessary too. In Blogger’s default template your images automatically gets border and shadow effect, again if you are using custom template your may be not having any effect on your images.
But if you want more specific effect on your images or you want to use custom effect on your Blogger blog you can use CSS3 effects for images. Here 5 superb, most popular CSS3 effect code  I gathered (Shadow, Opacity, Tilt, Jump, Morph effects). See what image effect suits your images, and add them on your blogger images.

CSS3 Shadow effect on Images

Just Shadow effect

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado {-moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0,.75);}

Shadow effect on mouse hover

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado:hover { -moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0,.75);}

Shadow effect on mouse hover with CSS3 animation

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado:hover {-moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0,.75);
  -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;}

More customization : This shadow effect generate upon RGBA color code. If you want other color shadow on images Go to any color picker (Color Hexa) and place your color code's Hex digit on rgba(0, 0, 0,.75)'s first 3 '0', and Last 0 for Opacity.

CSS3 Opacity blur effect on Images

 

Just Opacity effect

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci { opacity:.7;}

Opacity effect on mouse hover

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci:hover { opacity:.7;  }

Opacity effect on mouse hover with animation

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci:hover { opacity:.7;
   -webkit-transition: all .5s ease;  
 -moz-transition: all .5s ease;   
-o-transition: all .5s ease;   
-ms-transition: all .5s ease;   
transition: all .5s ease; }

 

CSS3 Tilt effect on Images

 

Just tilt effect on image

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);}

Tilt effect on mouse hover

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);}

Tilt effect on mouse hover with animation

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi {webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease;
    }

.ks-stumbi:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);

webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; }

CSS3 Jump effect on Images

Just jump on hover

HTML

<img class="ks-jumpi" src="image link" />

CSS

.ks-jumpi { margin:15px;}
.ks-jumpi:hover { margin-top:10px;}

CSS3 Jump effect on Images with animation

HTML

<img class="ks-jumpi" src="image link" />

CSS

.ks-jumpi { margin:15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;}
.ks-jumpi:hover { margin-top:10px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;}

CSS3 Morph effect on Images

Image will spin 360 degrees on mouse hover. As it’s spinning, 'border-radius' will cropped to 50%. From Design Shack.

HTML

<img class="ks-circl" src="image link" />

CSS

.ks-circl  {
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;}

.ks-circl:hover  {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);}

How to add any effect in Blogger

Step 1: You need to embed the CSS code into your template. The effect you want to use in your post, First that effect's CSS code embed into your template.

• Log in to your Blogger account, select your blog, 

• Select 'Template' tab, then 'Edit HTML', 

• Find (Using Ctrl+F or Cmd+F) ]]></b:skin>

• Above ]]></b:skin> paste your following CSS (Under pink color title) code, 

• 'Save template'.

Step 2: After your image uploading done,

• From post editor's top (Compose/HTML) Switch to 'HTML', 

• After clicking 'HTML' you will see your uploaded image's source tag code 

<img border="0" src="image link" /> 

• In this Image tag code add your following (what effect's CSS code you embedded into your template) effect's HTML class code. Example:-

If you embedded shadow effect's CSS in your template add class="ks-sado" into your image's Img tag

(example  <img border="0" src="image link" class="ks-sado"/>)

For Opacity effect class="ks-opaci"
For Tilt effect class="ks-stumbi"
For Jump effect class="ks-jumpi"
For Morph effect class="ks-circl"

That's it.

All codes are universal, will be support on any browser (except IE), Any question, feedback leave with comment. New effects, shadow for images will be release soon, So stay subscribed. Goodluck..

Read More

How to remove Border & Shadow from images of Blogger

If you are using Blogger's default template or other templates, there is a default function of those template you may be don't like is Border and shadow around images. This function doesn’t make all images important or all images look awful!
So if you want to get rid of these automatic imposed borders and shadow effect on your images of your blogger blog, read on- To make this tutorial done will not take more than 2 minutes and difficulty is beginner.

How to remove Border and Shadow from images of Blogger

• First log into your Blogger account, select your blog,

• Go to ‘Template’ tab, than select ‘Edit HTML’.

• Search (Using Ctrl+F or Cmd+F) for post-body img 

• Under ‘post-body img’ you will find these codes-

border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

• Identify and Select all these codes and DELETE ‘em. Hit ‘Save Template’

Now go check out your Blog, the Border and Shadow around image gone!

Faq
This tutorial performed on Blogger’s Simple template, other template may be will have different codes for image border and shadow, Don’t worry all image related codes you always will find in ‘post-body img’ section, identify them and delete ‘em, it’s easy.

Last words, If you have any question or feedback don’t forget to mention, Chill…

Read More