GBloghelper: tutorials

Showing posts with label tutorials. Show all posts

Add animated underline links of your Blogger blog

I published couple of cool tutorial and tricks for customizing your blogs post area elements before; here to mention some notable using Google font in post, customized blockquote, syntax highlighter, setting up 404 error page, Flickr images gallery, Remove default border and shadow from images, embedding vimeo videos etc. Here to the next stage of Blogger post customization I presenting to you here animated underline links. By applying this tutorial in post all links will show different way; animated underline will appear on mouse hover on links. This trick made with CSS3 animation and it’s easy to set up. Let’s see how it works and how to add it on your Blogger blog.

Add animated underline links of your Blogger blog

Live Demo: (click here)

Codes for Copy:

<style>/*crawlist.net CSS starts*/
.post-body a, a:visited {
text-decoration: none;
position: relative;
color: #3498DB;
}
.post-body a:after, a:visited:after {
content: '';
height: 2px;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
background: #19B5FE;
transition: 0.2s;
margin-top:2px
}
.post-body a:hover:after, a:visited:hover:after {
width: 100%;
}
.post-body a.block, a:visited.block {
display: block;
padding: 0.5em;
}
.post-body a.block:hover, a:visited.block:hover {
background: #fff;
}/*crawlist.net CSS ends*/
</style>

How to add:

Go to ‘Layout’ tab, select ‘add a gadget’

Select ‘HTML/JavaScript’ from pop up page

Copy and paste all given codes in there,

And save the gadget, later template

Now check your blog out for new link outlook.

FAQ and Caution:

This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.

You can change the links and underlines color, together or separately; just find and replace the color code with your demand.

This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.

So what your opinion about this tutorial don’t forget to mention :) Goodluck,,,

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....

Add 6 stylish list/bullet to Blogger posts

Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

Arrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Minus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Check style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Plus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Carrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Star style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

How to add:

Go to ‘Template’ tab, select ‘Edit HTML’

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

Before ]]>< copy paste any of style you want to use

Save template, and see the changes by visiting blog or new post editing

Caution and FAQ:

Most of Template have default list/bullet style designed into template codes; and those code stays in

.post-body ul {} and .post-body ul li {}

So you your template already have these lines; mark them and delete them. And set my given codes.

You can’t use two or more style. But if you know little bit of coding then change the CSS class,

.post-body ul {} and .post-body ul li {}
to
.1 ul {} and .1 ul li {}

And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)

So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....

Add Shareaholic Share button & bar to Blogger/below posts

Shareaholic is one of the most used all in one content sharing platform (like Addthis, Sharethis). The difference with other sharing platform of Shareaholic is;

Shareaholic has much cooler icons (Eye catchy, trendy and stylish)

Got all the basic sharing services

4 different style of icon appearance (Normal, Flat, Circle and Pop out)

Shows share counts

Very customizable (Position, Icon size, Layout, Align, Headline)

Analytic, Fast loading, Responsive, and optional monetization option

Adding Shareaholic Sharing widgets in Blogger blog is easy, for your consideration setup process of adding
Shareaholic widgets into Blogger blogs written below, read on-

Add Shareaholic Share button & bar to Blogger blog/below posts

Go to Shareaholic, open an account

Verify and login to your account

Hit (Add Website) from Website Tools Dashboard page

Insert your BlogSpot Domain name and site name

Select platform ‘Blogger’, Content category, site Language, Hit continue

Next page you’ll see ‘Apps’ option, Turn on ‘Floating Share Buttons’, Click on ‘Setting’ icon

Now in ‘Layout’ fix Size, Counter, Align, Vertical offset, and services,

Additionally click on ‘Display rules’, Hit Save Settings

Now you’ll return to the Dashboard page, Get your mouse over ‘Location’ option

Select ‘Share Buttons’, In share button page, in Location input type ‘Below post’

Select your Theme, Headline, Position, Layout, Counter, Align and services

After all configurations complete, select ‘Save settings’,

You’ll redirect to Dashboard page, now click on ‘Get setup code’ and

Log into your Blogger blog on the other tab, select your blog

Go to ‘Template’ tab, and select ‘Edit HTML’

Search for </head> (using CTRL+F or CMD+F) into code snippet

Before </head> tag, paste ‘Get setup code’s codes

Again, Get back to Shareaholic tab, from location configuration, click on ‘</> icon’

And copy all codes from pop-up page

And from Blogger’s tab (into code snippet) search for,

<div class='post-footer-line post-footer-line-1'>

You may find this code phrase twice, ignore first phrase, after second phrase paste those codes,

You may add these codes too, with default codes cause default codes widget will appear on homepage too, re-edit the default code with this codes, like this-

<b:if cond='data:blog.pageType == "item"'>
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='your id'></div>
</b:if>

If you can’t find <div class='post-footer-line post-footer-line-1'> than search for </article>, and paste codes below </article>

Save Template finally, And check your blog out for live preview

Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..

Add Swing effect on Images of Blogger blog

CSS3 took web design to its most wanted attractive step. Using CSS3 effects on websites elements (text, images) makes our site look gorgeous and trendy. With this site I try to publish various CSS3 effects (base Button, Image effect) what you can use on your web project and Blogger blogs easily. To continue that here another super cool effect I presenting. It will give your image Swing effect on mouse hover. Made with CSS3 transform animation and keyframes to design the swinging pattern, it also cross browser supports. Let’s see how it looks like and how to enable it on your image of Blogger.

Add CSS3 Swing effect on Images of Blogger blog

Live demo-

Codes for copy-

Part 1: CSS

/*crawlist.net css starts*/
.ks-swing:hover{
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
}

@-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0); }
    5% { -webkit-transform: rotate(10deg); }
    10% { -webkit-transform: rotate(-9deg); }
    15% { -webkit-transform: rotate(8deg); }
    20% { -webkit-transform: rotate(-7deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(-5deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(-3deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
    0% { -moz-transform: rotate(0); }
    5% { -moz-transform: rotate(10deg); }
    10% { -moz-transform: rotate(-9deg); }
    15% { -moz-transform: rotate(8deg); }
    20% { -moz-transform: rotate(-7deg); }
    25% { -moz-transform: rotate(6deg); }
    30% { -moz-transform: rotate(-5deg); }
    35% { -moz-transform: rotate(4deg); }
    40% { -moz-transform: rotate(-3deg); }
    45% { -moz-transform: rotate(2deg); }
    50% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
    0% { transform: rotate(0); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(-9deg); }
    15% { transform: rotate(8deg); }
    20% { transform: rotate(-7deg); }
    25% { transform: rotate(6deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    45% { transform: rotate(2deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}
/*crawlist.net css ends*/

Part 2: HTML

<img class="ks-swing" src="Image Link"/>

How to add this effect on Blogger

Step 1:

Go to ‘template’ tab

Select ‘Edit HTML’

Find into codes snippet (Using Ctrl+f or Cmd+f) ]]><

Above ]]>< copy and paste Part 1’s codes

Save template

Step 2:

While you writing a post, After upload and insert complete for a image, Select ‘HTML’ view from (compost/html) upper side of post editor.

You will see your uploaded images source code, Place

class="ks-swing"

in the <img tag. See the picture for more info about how to do it.

After placing the Class, back to ‘compose’ view

Your image swinging is done,

How to use this effect on web project

Copy and paste the CSS part into your web project’s stylesheet.css

And call your image with part 2’s HTML part where you want to show this effect

So what you think about this CSS3 tutorial for Blogger, don’t forget to mention. New tutorial will be release soon, stay connected. Chill…

Add Featured Post slider in Blogger (homepage/below post) Carousel style

Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:

Simple: Easy to configure and customize

Small: Don’t take much space wherever you set it

Light weighted: Some jQuery, CSS and HTML made

High-end: Responsive

Awesome: Smart and neat looking carousel style

Let’s see how it looks like and how to add it in Blogger blogs.

Add featured post slider in Blogger (homepage/below post)

Preview:

Live Demo: (click here)

Codes for copy:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
             $('#slider').bxSlider({
            ticker: true,
            tickerSpeed: 5000,
            tickerHover: true
        });
        });
</script>
<style>
/*crawlist.net slider CSS*/
#slider {
    list-style:none;
    padding:0px;
}

.slider-container {
    background:#fff;
    width:80%;
    height:150px;
    padding:17px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow:hidden;
margin:auto;
}

.newcon { width:80%; margin:auto; overflow:hidden}

#slider img {
    width:200px;
    height:125px;
    margin:0px;
    display:inline-block;
    border: 1px solid #f5f5f5;
}

#slider li {
    width:210px
}
/*crawlist.net slider CSS*/
</style>


<div class="newcon">

<div class="slider-container">
<ul id="slider">
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>
</div></div>

Adding this widget on Homepage

First log into Blogger, select your blog,

Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header

Select ‘HTML/JavaScript’ from pop up page;

Copy and paste given codes in content box, configure and Save

Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;

And look bottom of web browser and you will see a line, that contains Widget ID;

Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;

Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;

You will see chunks of codes starts with <b:section and ends with </b:section>

Like this

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
        <b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
          <b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
        </b:widget>
      </b:section>

Identify them and place this line (see image) Before the codes chunk

<b:if cond='data:blog.url == data:blog.homepageUrl'>

and at the end of code this line

</b:if>

And Save template.

Adding this widget below posts

Go to ‘Template’ tab, select ‘Edit HTML’

Search for (using Ctrl+F or Cmd+F) into code snippet

<div class='post-footer-line post-footer-line-1'>

You may find this line twice so ignore the first time, second time copy paste codes and before all codes add this line

<b:if cond='data:blog.pageType == "item"'>

And after all code paste this line,

</b:if>

Configure and Save template

How to configure:

In 'place link' place your links and add your post title in ‘place hover text’

In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwist use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 200px width and 125px height

You can delete a slide content by deleting <li> to </li>

You can add more slide by coping <li> to </li>

You can also change the default image size by changing value of height and width (red marked)

How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...

Simple CSS3 Images Gallery for Blogger

Sometime into Blogger posts, we require to show some images in row. After a mass Image upload, all images shows together without any order and visual effects. That’s why an image gallery widget we should use in those posts. These widgets present images cleanly alongside with effects and increase beauty of posts too. Here such kind of image gallery I presenting to you created with HTML and CSS enhanced with CSS3 animation "transform" property (adds a smooth hover effect to images whereby the image enlarges) and shadow appears. Light weighted, high-end designed and presents images in a stylish way. Let’s see how it looks like, how to add and configure on your Blogger blog.

CSS3 Images Gallery for Blogger

Preview-

How to install & apply:
This gallery set up has few steps, read on-

Step 1: CSS Embedding

Log into your Blogger, select your blog

Go to ‘Template’ tab and select’ Edit HTML’

Search for ]]>< into code snippet (using CTRL+F or CMD+F)

Before ]]>< paste below codes

/*crawlist.net gallery CSS starts*/
.ks-galleri {height:auto; width:100%; margin:auto; padding:20px 20px;}
.ks-galleri img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
height:150px; width:200px;
}
.ks-galleri img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
/*crawlist.net gallery CSS ends*/

Configuration:
In .ks-galleri img CSS class you will find default gallery images Height and Width, Change the value with your suitable Height and Width, Small resolution will be better; And ‘Save template’

Step 2: Gallery set up

Go open a “New post” or an existing post,

Upload some images what you intend to put into gallery

After upload is done, Switch ‘HTML’ view from post editor (Compose/HTML)

You will see all uploaded images source codes,

Locate the very first uploaded image’s code and paste this line,

<div class="ks-galleri">

And locate the very last uploaded image’s code and paste this word,

</div>

Configuration:
You may delete Blogger system’s default image HTML rules, Shown in image below, if you don’t remove these code, default configuration of gallery won’t work nicely.

Get back to ‘Compose’ part, and publish the post

So how your images gallery working on your blog and any problem facing with gallery don’t forget to mention, new tutorials and widget will be release soon stay subscribed, Goodluck

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.

How to use/install Google Font in Blogger post

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

Embedding CSS Import (Easier)

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.

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

add opacity blur effect on images in blogger

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.

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

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..

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…

How to disable Text selection in Blogger for preventing copy paste

Sometime we need to copy text content from blogsites for personal use. But not all of blogsite user copy text for personal use - a lot of content thief, content scraper copy our websites/blogsites content for use them on their commercial project or use somebody's text content directly on their website.
To copy text content from a website firstly we have to select text! This text selection can be turn off. As major Blogging platform known as Wordpress and Blogger, Wordpress has far advance satisfaction by using variety of plugins. Such as Wp content protect plugin disable text selection from wordpress blogs and in Blogger there is also a solution available to disable Text selection. Let's see how to set it up and how it works. Read on-

How to disable Text selection in Blogger for preventing copy paste

First Log in to your Blogger, select your Blog,

Go to 'Layout' tab, Click 'add a gadget'

From pop up menu select 'Html/javascript'

And in content box paste following script code-

<!—start of prevent copy paste by crawlist.net-->
<script
src="demo-to-prevent-copy-paste-on-blogger_files/googleapis.js">
</script><br /><script type="text/javascript">
if (typeof document.onselectstart!="undefined" ) {
document.onselectstart=new Function ("return false" ); } else{
document.onmousedown=new Function ("return false" );
document.onmouseup=new Function ("return true" ); }
</script>
<!—end of prevent copy paste by crawlist.net-->

After pasting the code save it.

And view your Blogger blog the test selection with mouse option is gone. This method all text element will be blocked but if you need some advance system where some part of your blogs will be enabled for coping texts then follow this tutorial. How this tutorial working on your Blogger don't forget to mention.....

4 Popular CSS3 Image captioning method

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

<div class="ks-curtain">
<img src="Image link">
<span class="ks-caption the-caption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-curtain {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-curtain img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-curtain .ks-caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-curtain .the-caption
{
width: 170px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-curtain:hover .the-caption
{
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
/*crawlist.net css ends*/

Fade in out style CSS3 image caption

HTML

<div class="ks-fade">
<img src="Image Link">
<span class="captiono ocaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-fade {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-fade img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-fade .captiono {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-fade .ocaption
{
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-fade:hover .ocaption
{
opacity: 1;
}
/*crawlist.net css ends*/

Pop under style CSS3 image caption

HTML

<div class="ks-under">
<img src="Image link">
<span class="captio kscaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-under {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-under img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-under .captio {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-under .kscaption
{
height:53px;
width: 200px;
display: block;
bottom: -56px;
text-align: center;
font:Arial;
font-size:15px;
}
.ks-under:hover .kscaption
{
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/*crawlist.net css ends*/

Slide from left style CSS3 image caption

HTML

<div class="ks-lefty">
<img src="Image Link">
<span class="capion aption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-lefty {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-lefty img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-lefty .capion {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-lefty .aption
{
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
left: 200px;
font:Arial;
font-size:15px;
}
.ks-lefty:hover .aption
{
background-color: rgba(0,0,0,1)!important;
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
/*crawlist.net css ends*/

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.

About Me

Add animated underline links of your Blogger blog

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

Arrow style

Minus style

Check style

Plus style

Carrow style

Star style

Add Shareaholic Share button & bar to Blogger blog/below posts

Add CSS3 Swing effect on Images of Blogger blog

Add featured post slider in Blogger (homepage/below post)

Adding this widget on Homepage

Adding this widget below posts

CSS3 Images Gallery for Blogger

How to use/install Google Font in Blogger post

CSS3 Shadow effect on Images

CSS3 Opacity blur effect on Images

CSS3 Tilt effect on Images

CSS3 Jump effect on Images

CSS3 Morph effect on Images

How to remove Border and Shadow from images of Blogger

How to disable Text selection in Blogger for preventing copy paste

Curtain style CSS3 image caption

Fade in out style CSS3 image caption

Pop under style CSS3 image caption

Slide from left style CSS3 image caption

Categories

Archives