Bloggerunlocker | Blogger tutorials

Installing Jelly button in blogger

2015-07-03T04:41:00.000-07:00

Installing Jelly button in blogger - On this occasion I would share the tutorial to install the jelly button in blogger.

Actually I have created it on codepen.io and my pen got so much views and hearts so I thought to create a article on my blog you can click here to see its live demo.

1. First of all go to blogger>template>edit html and paste the following code before ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700);

.jelly {
    font-size:24px;
    font-family: 'PT Sans Narrow', sans-serif;
    border: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 700;
    outline: 0;
    position: relative;
    border-radius: 3px;
    -webkit-animation:  anim 2s ease-in infinite;
    animation:  anim 2s ease-in infinite;
    transition: all .3s;
    background: #3498DB;
    color: #fff!important;
    overflow: hidden;
    text-decoration:none;
}

.jelly:hover {
    text-decoration:none !important;
}

.jelly:active  {
    background: #4786b5;
}

@-webkit-keyframes anim {
    5% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
10% {
    -webkit-transform: scale(.9, 1.1) translateY(-.5rem);
    transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
    -webkit-transform: scale(1);
    transform: scale(1);
}
}
@keyframes anim {
    5% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
10% {
    -webkit-transform: scale(.9, 1.1) translateY(-.5rem);
    transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
    -webkit-transform: scale(1);
    transform: scale(1);
}
}

@media only screen and (max-width:640px) {  
.jelly {
    padding: 25px 50px;
    font-size: 16px;
}
}

2. Save template
3. Paste the following HTML code where you want

<a href="#" class="jelly" target="_blank">Jelly</a>

That's its and follow me on codepen.io

Error 404 Page for blogger

2015-06-28T02:27:00.003-07:00

It is very bad if a new user comes to your blog and gets an error 404 or page not found. It can be happen for many number of reasons like URL typo, index problems or just bad template coding. And in this article I will be showing you how to add a custom error 404 page. Click here to see its live demo and click here to see in codepen

What is Error 404

The HTTP 404 Not Found Error means that the webpage you were trying to reach could not be found on the server. It is a Client-side Error which means that either the page has been removed or moved and the URL was not changed accordingly, or that you typed in the URL incorrectly.

How to add it in Blogger

1. Go to blogger>Click template>Edit html>Copy and paste the below code above ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Roboto:900);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

#error-404  {
    background: #333;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 400;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    , sans-serif;
    position: fixed;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
    z-index: 9999;
    left: 0px;
}
#error-text  {
    top: 30%;
    position: relative;
    font-size: 20px;
    color: #eee;
}

#error-text a {
    color: #eee;
    text-decoration:none !important;
}

#error-text a:hover {
    color:#f35d5c;
    text-decoration:none !important;
}


#error-text p  {
    color: #eee;
    margin: 50px 0 0 0;
}

#error-text i  {
    margin-left: 10px;
}

#error-text p.hmpg  {
    margin: 20px 0 0 0;
}

#error-text span  {
    position: relative;
    background: #ef4824;
    color: #fff;
    font-size: 450%;
    padding: 0 20px;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    ,  sans-serif;
    font-weight: bolder;
    transition: all .5s;
    cursor:pointer;
}
#error-text span:hover  {
    background: #d7401f;
    color: #fff;
    -webkit-animation: jelly .5s;
    -moz-animation: jelly .5s;
    -ms-animation: jelly .5s;
    -o-animation: jelly .5s;
    animation: jelly .5s;
}

#error-text span:after  {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "
     "
    ;
    height: 0;
    
width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #ef4824;
    border-width: 7px;
    margin-left: -7px;
}

@-webkit-keyframes jelly {
    
from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
25% {
    -webkit-transform: scale(.9, 1.1);
    transform: scale(.9, 1.1);
}
50% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
75% {
    -webkit-transform: scale(.95, 1.05);
    transform: scale(.95, 1.05);
}
}
@keyframes jelly {
    
from, to {
    -webkit-transform: scale(1,  1);
    transform: scale(1, 1);
}
25% {
    -webkit-transform: scale(.9, 1.1);
    transform: scale(.9, 1.1);
}
50% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
75% {
    -webkit-transform: scale(.95,  1.05);
    transform: scale(.95,  1.05);
}
}

@media only screen and (max-width:640px) {
    
#error-text span  {
    font-size: 200%;
}

#error-text a:hover  {
    color: #fff;
}
}
.back:active {
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  transform:scale(0.95);
  background:#f53b3b;
  color:#fff;
}
.back:hover {
  background:#4c4c4c;
}

.back {
  text-decoration:none;
  background:#5b5a5a;
  color:#fff;
  padding:10px 20px;
  font-size:20px;
  font-weight:700;
  line-height:normal;
  text-transform:uppercase;
  border-radius:3px;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
  transition:all 0.5s ease-out;
}

2. And paste the below code below <body> tag

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-404'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p><p class='hmpg'><a class='back' href='/'>Back To Homepage</a></p>
</div>
</div>
</b:if>

Remove Blog Title from Blog Post in blogger

2015-06-11T01:52:00.002-07:00

In order to maintain good performance in search engine you must have good keywords in your post and some other things but your post title is more important because google prefers a title or post title with less than 60 characters and by default blogger also shows the blog title in post title. This really affect your performance in search engine.

And In this tutorial I will be showing you how to remove blog title from blog post in blogger, Just follow the steps given below.

Go to template>Edit HTML
And look for <title><data:blog.pageTitle/></title>
Replace it with the code given below

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/><title><data:blog.pageName/></title></b:if>

After replacing the code, save the template.

Change post background hover color in flipcard blogger template

2015-06-10T02:06:00.001-07:00

After a long time I am back with a new blogger tutorial and in this blogger tutorial I will be teaching you how to Change post background hover color in flipcard blogger template. Follow the steps given below to change the hover color

1. First of all you will need to login to your blogger
2. And then go to Template > Advanced > Add CSS
1. And paste the following code

.items .item .card .back { background:#fff !important;}
.overlay .title {color:#000;}

3. Press enter after the last character of the last line
4. Click Apply to blog

Please share, comment and keep visiting

Gomato 3

2015-06-09T01:42:00.002-07:00

Gomato 3 - This is my first blogger template that I am sharing on my blog. I had only created the Premium version of this template. You can see the Features of this template below.

Features	Availability
Responsive	True
SEO	True
Auto Read more with thumbnail	True
Smooth Back to top	True
Custom Follow by Email	True
Social share button	True
Search box	True
Breadcumbs	True
Ad slots	True
Documentation	False

Page speed score according to GTMetrix

DEMO DOWNLOAD

Note - To download this template you will have to complete two surveys.

Add recent post widget in New Minima Colored blogger template

2015-05-17T23:28:00.001-07:00

I had made this post because some one had asked me how to add recent post widget in New Minima Colored template.

How to add It to New Minima Colored

First of all go to layout and add a new gadget (if you are having a html/javascript widget named recent then do not add a new gadget)
Choose HTML/javascript
Paste the following code in it

<div class='widget-content'>recentposts</div>

NOTE - It only works in minima template

Smooth scrolling back to top button for blogger

2015-05-15T01:55:00.003-07:00

Click here to see Live DEMO

How to add it to Blogger

Go to layout>add a gadget>HTML/Javascript
Paste the following code in it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script><script>jQuery(document).ready(function() {var offset = 220;var duration = 500;jQuery(window).scroll(function() {if (jQuery(this).scrollTop() > offset) {jQuery('.back-to-top').fadeIn(duration);} else {jQuery('.back-to-top').fadeOut(duration);}});jQuery('.back-to-top').click(function(event) {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script><style>.back-to-top {position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;background-color: rgba(235, 235, 235, 0.80);font-size: 12px;padding: 1em;display: none;}
.back-to-top:hover {opacity:0.96;text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="http://s7.postimg.org/h9c01v1wr/back_to_top.png" width="50" height="50" style="border-radius:5px;"/></a>

Customization

To change the Back to top button image replace the GREEN LINK with your image link.

That's it, I Hope you liked it :)

Prevent Blogger from Redirecting your Blogspot Blog to Country Specific URLs

2015-05-09T03:50:00.000-07:00

Google outomaticly redirects Blogger blogs to country-specific domains. For instance, if you open bloggerunlocker.blogspot.com in your browser, you might be redirected to bloggerunlocker.blogspot.in if you are located in India or to bloggerunlocker.blogspot.co.uk if you access the same blog from UK. This also affect Alexa ranking.

How to Prevent Blogger from Redirecting to Country-Specific Domains

Go to Template>Edit HTML
Find <head>
Paste the following code below it

<script type="text/javascript"> var blog = document.location.href.toLowerCase(); if (!blog.match(/\.blogspot\.com/)) { blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/"); windows.location.replace(blog); }</script>

That's Its :)

New Download Button for blogger

2015-04-23T04:28:00.000-07:00

Hey guys, Today I have a neat and clean button for blogger It is very light weight no javascript and it looks great. Just the steps given below to add it

LIVE DEMO

sky_2.png

How to add it to Blogger

-Go to template>Edit HTML
-Click anywhere and press CTRL+P
-Search for ]]></b:skin>
-Paste the following code above it

.download-button {
display: inline-block; /* 1 */
margin-right: 10px; /* 2 */
margin-top: 30px; /* 3 */
padding: 30px 30px 30px 80px; /* 4 */
color: #686868; /* 5 */
text-decoration: none; /* 6 */
border: 1px solid #E3E3E3; /* 7 */
position: relative; /* 8 */
transition: 0.15s; /* 9 */
}
.download-button:focus,
.download-button:hover {
border-color: #E31A4C; /* 1 */
outline: none; /* 2 */
}
.download-button:active {
animation: enlight 0.5s;
}
.download-button::before {
content: ''; /* 1 */
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2037/download.svg') no-repeat center; /* 2 */
position: absolute; /* 3 */
top: 0; /* 4 */
bottom: 0; /* 4 */
left: 0; /* 5 */
width: 80px; /* 6 */
}
.download-button[data-filesize]::after {
content: '(' attr(data-filesize) ' MB)'; /* 1 */
font-size: 0.8em; /* 2 */
color: #969696; /* 3 */
margin-left: 10px; /* 4 */
}
@keyframes enlight {
to { box-shadow: 0 0 0 8px #fce8ed; }
}

-Create new post
-Go to HTML tab and paste the following code

<a download href="DOWNLOAD LINK HERE" data-filesize="FILE SIZE HERE" class="download-button">FILE NAME HERE</a>

NOTE - DO NOT WRITE MB AFTER FILESIZE

WANT COMPLETE PDF TUTORIAL THEN CLICK HERE

Create 125X125 advertise here banners in Blogger

2015-04-22T04:36:00.000-07:00

How to add it to Blogger

Go to layout>add a gadget>HTML/javascript
Paste the following piece of code

<center>
<table border="0" cellspacing="0" cellpadding="1" width="254"><tbody><tr><td valign="top" width="127"><a href="http://bloggerunlocker.tk/" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwEFXb0WUhNmdteEYgQ53QSYUCRPReQ9HjC1MriLZoCOH3MOH5shVoIyjsNbF9TPlr05jlwttXtj_cLtd19OlDMnlhyMvqoo77elxxtkYpslBCoUkBkgB07e4IKiG9uvdPrjqjwunTtTB/s1600/ad-here.png"/></a></td>
<td valign="top" width="127"><a href="http://bloggerunlocker.tk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwEFXb0WUhNmdteEYgQ53QSYUCRPReQ9HjC1MriLZoCOH3MOH5shVoIyjsNbF9TPlr05jlwttXtj_cLtd19OlDMnlhyMvqoo77elxxtkYpslBCoUkBkgB07e4IKiG9uvdPrjqjwunTtTB/s1600/ad-here.png"/></a></td></tr>
<tr><td valign="top" width="127"><a href="http://bloggerunlocker.tk/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwEFXb0WUhNmdteEYgQ53QSYUCRPReQ9HjC1MriLZoCOH3MOH5shVoIyjsNbF9TPlr05jlwttXtj_cLtd19OlDMnlhyMvqoo77elxxtkYpslBCoUkBkgB07e4IKiG9uvdPrjqjwunTtTB/s1600/ad-here.png"/></a></td><td valign="top" width="127"><a href="http://bloggerunlocker.tk/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwEFXb0WUhNmdteEYgQ53QSYUCRPReQ9HjC1MriLZoCOH3MOH5shVoIyjsNbF9TPlr05jlwttXtj_cLtd19OlDMnlhyMvqoo77elxxtkYpslBCoUkBkgB07e4IKiG9uvdPrjqjwunTtTB/s1600/ad-here.png"/> </a></td></tr></tbody></table></div></center>

Replace Green links with the Advertiser URL
Replace the Yellow Link with your ads image link.

Sliding Button for blogger

2015-04-21T05:35:00.002-07:00

Styling buttons is something that designers do every day. Box shadows and gradients have been used over and over again when styling buttons. So Today I am going to make a sliding button for Blogger. Let's Begin

LIVE DEMO

Hello, World

How to ADD it

Go to template>Edit HTML
Click anywhere and press CTRL+P
Search for ]]></b:skin>
Paste the following code above it

.button_sliding_bg { color: #FFF; background: #EF672F; padding: 15px 20px; margin: 25px; font-family: 'OpenSansBold', sans-serif; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; display: inline-block; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 0 #C14800; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s;}.button_sliding_bg:hover { box-shadow: inset 0 100px 0 0 #C14800;}

Create a new post and go to HTML tab
Paste the following code

<div class="button_sliding_bg">YOUR TEXT HERE</div>

THAT'S ALL :)

How to Keep background image fixed during scroll in Blogger

2015-04-19T06:19:00.001-07:00

Keeping your background fixed during scroll is very very easy in blogger because you don not need to type or paste any piece of code in your blog template HTML . It can be done by just enabling on option. So let get started

How to enable it in Blogger

Go to Template>Customize
Then from the right side menu choose Background

Background menu

-Click on the small arrow which is left to your bg images and choose upload image
-After uploading your bg image you will see a check box left to your bg image

uncheck it

-Uncheck if it is checked that check box and its done

Still some problem watch the video tutorial

IMPORTANT NOTE - This will not work in some template like blogger custom template

Top 10 blogger sites

2015-04-16T07:23:00.002-07:00

Website	Alexa rank	Rank in country
1.Bankers Adda	7,893	IN - 666
2.My Blogger tricks	10,335	IN - 1,180
3.Gr8ambitionz	17,157	IN - 1,725
4.Helplogger	19,822	IN - 1,951
5.My Blogger Lab	25,710	IN - 6,200
6.Arlina Design	39,016	ID - 916
7.urlopener.blogspot.com	46,501	IN - 5,250
8.Blogger Yard	50,865	PK - 4,208
9.24works	82,508	IN - 18,404
10.All Blogger Tricks	94,250	IN - 14,943

Top 6 SEO tips for Blogger

2015-04-15T03:26:00.002-07:00

Hey guys, Today I am gonna tell you some effective SEO tips for your blogger. Just read the article I had posted. These are very very simple.

What is SEO

Search engine optimization (SEO) is a valuable part associated with a online marketing strategic business plan. Good SEO will help you to bring good traffic on your blog.

Some SEO Tips

Your website should be posted towards the search engines like Google, Bing, etc
Add ALT Tag to your images - How to use alt tag on images in blogger
Get a custom domain for your blog
Increase your page speed - To test page speed Click here
Connect with Social network like Facebook, Google+, Pinterest, Stumbleupon ,etc
Use Custom robot.txt - How to add robot.txt in blogger

I Hope you find it useful. If yes then please comment below

How to add custom robot.txt in blogger

2015-04-15T03:24:00.002-07:00

Today I am going to to tell you how to add custom robots.txt in Blogger. It is very important for SEO. So let's begin

Go to your blogger blog.
Go to Settings>Search Preferences>Crawlers and indexing>Custom robots.txt> Edit>Yes
Now paste the following in the box

User-agent: Mediapartners-GoogleDisallow:User-agent: *Disallow: /searchAllow: /Sitemap: http://YOURSITE URL/feeds/posts/default?orderby=UPDATED

Hit Save Button

How to use alt tag on images in blogger

2015-04-15T03:05:00.001-07:00

Alt tag is very important for image SEO because you can add your own description on images. For this I had posted this Post. To add description on images follow the steps given below

How to Use ALT tag on images

First of all create a new post
Go to HTML tab
paste the following code in it

<img src="YOUR IMG URL HERE" alt="YOUR IMAGE DESCRIPTION HERE">

That's its :)

Note - My website page views has gone down please visit again and increase it

Boost your Alexa rank in a week

2015-04-13T03:04:00.001-07:00

Hey there this is Goat007. Every website owner wants its website alexa rank at a good place like below 1,00,000. So for this today I am going to teach you how to boost your alexa rank within a week with alexaboostup.com. And it works perfectly. To increase your alexa traffic rank Just you need to follow the steps given below

Features of Alexaboostup

-MULTIPLE WEBSITES

Add as many websites as you want, Set amount of points used per day.

-EARN POINTS

Surf other members websites and earn points, 1 point = 1 hit to your website

-PURCHASE POINTS

Have no time to earn and surf websites? Simply purchase points and watch your Alexa rank shrink (lower numerical Alexa rank is better

-SUPPORT SYSTEM

Get the help you need with our support system.

-REFERRALS

Know anyone who might be interested in using Alexa Boostup? Referr a friend and earn 1,000 points

How to Increase Alexa Rank using AlexaBoostup

To use alexaboostup.com is very easy

-Just go to alexaboostup .com and create an account

-Go to >> Manage website >> Add New Website

-After adding your site details hit Save changes

-That's its

Note - I Do no use these type of things for getting traffic on my blog because they are not real traffic.

Play Flappy bird on your blogger blog

2015-04-11T03:24:00.003-07:00

From few days Iwas going on playing Flappy bird on My Android device. Then I thought to make a Game of Flappy bird which can be played on your blog/Website. To add this Game follow the steps given below.

Live demo

How to add this to Blogger

Go to layout>Add a gadget>HTML/javascript
Paste the following Code

<div dir="ltr" style="text-align: left;" trbidi="on"><embed height="480" pluginspage=" http://www.macromedia.com/go/getflashplayer" src="https://196f4eaa-a-62cb3a1a-s-sites.googlegroups.com/site/filesswfaa/flappy-bird-flash.swf?attachauth=ANoY7cpHQWFrRl2JADkkvTm5QtAxQXwDJ3xdZXEnsOewiuh8n-N620uDDdfdOChq7-ynQE8FKi3MId8R0wQ9BhHMWFujdcGL3rLegKtlWz5c36PKvo-yrHig-iVxswih8curXRklSwqgcamWHyAJzmGx-FlmGYPiHEKoYgKrICR2X11zzYgXAFU2vZmUrfjFu5yeuEo4bkvRZ-dBLQJjlcNVpq3rd_RAPg%3D%3D&attredirects=0" type="application/x-shockwave-flash" width="345"></embed></div>

You Are all done to play flappy bird on your blog.

Play Flappy bird on your blogger blog

Play Flappy bird on your blogger blog

Play Flappy bird on your blogger blog

How to add a simple image hover in Blogger

2015-04-01T04:41:00.000-07:00

In CSS, For me one thing is awesome Yes, it is Image or text Hover. So today I thought to create an article on Image hover So let's began.

STYLE #1

My first image hover is a very simple hover. So for you guys it would be easy to install it on your blogger. But It contain some errors. You can see live demo below

-Go to layout>add a gadget>HTML/Javascript
-Paste the following code

<style type="text/css"> #box { width:600px; height:400px; box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45); border-bottom:2px solid #fff; border-right:2px solid #fff; margin:5% auto 0 auto; background:url(http://d1v2fthkvl8xh8.cloudfront.net/wp-content/uploads/2012/11/BloggingAudience.jpg); background-size:cover;border-radius:5px;overflow:hidden;}
#overlay { background:rgba(0,0,0,.75); text-align:center; padding:45px 0 66px 0; opacity:0; -webkit-transition: opacity .25s ease;-moz-transition: opacity .25s ease;}
#box:hover #overlay { opacity:1;}
#plus { font-family:Helvetica; font-weight:900; color:rgba(255,255,255,.85); font-size:96px;} </style><div id="box"> <div id="overlay"> <span id="plus">+</span> </div></div>

-Save it

-Replace the WIDTH AND HEIGHT with your Image width and height
-Replace the YELLOW LINK with your colour full Image
-Replace the GREEN TEXT with your text

STYLE #2

Click here to see the live demo

-Go to layout>add a gadget>HTML/javascript or create new post>HTML tab
-Paste the following code

<style type="text/css">
.nav{ width: 980px; margin: 100px auto; list-style: none; position: relative;}.nav li{ height: 200px; width: 200px; margin: 25px; float: left; overflow: hidden; border-radius: 50%; border:6px solid #fff; box-shadow: 2px 2px 0 0 rgba(0,0,0,.5); margin: 12px; transition:all 1s ease;}.nav li img{ margin: -70px 0px 0px 0px; transition:all 1s ease;}.nav li a{ text-decoration: none; font-size: 18px; font-weight: bold; color: #fff;}.nav li a:before{ content: attr(title); position: relative; left: 80px; top: 200px; transition:all 1s ease;}.nav li:hover{ border:6px solid #333; box-shadow: 0px 0px 20px 0 rgba(255,255,255,.5);}.nav li:hover img{ margin-left: -150px; margin-top: -150px; cursor: pointer;}.nav li:hover a:before{ top: 160px;}</style>
<ul class="nav"> <li><a href="#" title="Blog"><img src="http://images.cupidspeaks.com/2012/03/6a00d83452d45869e2015438246251970c-800wi.jpg" alt="How to add image hover in blogger" /></a></li></ul>

-Replace the YELLOW LINK with your Image link
-Replace the GREEN TEXT with your text
-Replace the RED text with your Image description

That's it :)

image hover in blogger

How to add a simple image hover in Blogger

How to add image hover in Blogger

add image hover in Blogger

image hover in Blogger

best image hover for blogger

How to add CSS hover effect to images in blogger

add CSS hover effect to images in blogger

how to create image hover in blogger

How to create keyboard button effect on text in Blogger

2015-03-31T00:28:00.001-07:00

I have seen many website that where having keyboard button effect on some text example they where showing CTRL+F to CTRL+F I was wondering how it is made. In the first thought it is an image but it was not an image and After some days I made it and also its tutorial. So let's began

How to add it to blogger

-Go to Template>Edit HTML
-Press CTRL+F and search ]]></b:skin>
-Paste the following code above it

kbd {display:inline-block;border:1px solid #ccc;border-radius:4px;padding:0.1em 0.5em;margin:0 0.2em;box-shadow:0 1px 0px rgba(0,0,0,0.2), 0 0 0 2px #fff inset;background-color:#f7f7f7;}

-After this go ahead and create a new post
-Go to HTML tab and Paste the Following code in it

<kbd>Your Text here</kdb>

-Replace Your Text Here with your text

That's its :)

How to create keyboard button effect on text in Blogger
Add Keyboard Keys Effect To Your Text in Blogger
Add Keyboard Keys Effect To Your Text in Blogger with CSS
keyboard button effect on text in Blogger
keyboard button effect on text
key effect on text in blogger
key effect on text

How to get embed code of any URL from embed.ly

2015-03-30T23:59:00.004-07:00

What is Embed.ly

Embedly is a set of front-end tools that help web and app developers create better user experiences. We believe the best tools are simple, easy to use, and perfectly suited to their task. You’ll find that embodied in Embed, Extract, and Display tools that provide ultra-fast ways to present richer content more effectively. Original sources

Why Embedly

Because it’s the easiest way to present rich content and create user experiences. In less then 10 minutes, you can embed content from hundreds of providers and generate rich previews for any URL on the web. Original sources

How to use Embed.ly in Blogger

-First of all go to http://www.embed.ly/code

-Paste or write the URL in the text field

-Hit Embed button

-After that you can customize it and after customizing you can copy the code given below

Adding Embed code In Blogger

-Go to Posts>Create new post

-Go to HTML tab and paste the code the you have copied from Embed.ly

That's its :)

How to add a custom 404 error page

2015-03-30T08:25:00.001-07:00

As we're discussing on Blogger's search preferences setting today here I'm back with another amazing tutorial and a 404 error page. To add it to blogger follow the steps given below.

How to add it to Blogger

-Go To Blogger >> Settings >> Search Preferences

-In the Crawlers and Errors Section, Look For Custom 404 Page and Click on "Edit".
-Now a box will appear where you have to paste the following code.

<p style='line-height: 30px'><strong><font color='#ff0000' size='5'>Oops!</font> <font color='#666666'>Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do one of the followings:</font></strong></p> <ol style='line-height: 25px'> <li><a href='javascript:history.go(-1)'>« Go Back</a> </li> <li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li> <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a> <br/></li><li>Search Anything Using Below Search Box</li> </ol><br /> <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'><input id='searchinput' name='q' onblur='if (this.value == '') {this.value = 'Type Here & Hit Enter';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Type Here & Hit Enter'/><input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/></form></center> <p> <br/> <br/> <br/></p><p align='center'><font size='5'>Page Not Found!</font></p><br /> <br /> <br /><p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p><style>.status-msg-wrap { font-size: 100%; margin: none; position: static; width: 100%;}.status-msg-border { display:none}.status-msg-body { padding: none; position: static; text-align: inherit; width: 100%; z-index: auto;}.status-msg-wrap a { padding: none; text-decoration: inherit;}#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }#searchinput {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcb1Kw4y7s5MflBCIEc38x_pHsGcqhWujYIoyZHHcwGMayxTtWWPEb_6rBHKgkkdp-BfWmi9f1muY3NAZ9X9UOFFAeQwCZJFFMA8cJheQekIzaxrZoTUPUauB1S8-xwQm4igxv-XgQc3m/s0/search.png) no-repeat 7px 8px;background-color: #FFF;border: 1px solid #ddd;color: #A0A0A0;display: inline-block;font-family:arial;font-size: 12px;font-weight:bold;height: 24px;width:300px;margin: 0;margin-top: 5px;padding: 5px 15px 5px 28px;vertical-align: top;}#searchinput:hover{border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 5px 15px 5px 28px;}#searchbutton {background:#444;color:#fff;height:35px;border-radius:5px 5px 5px 5px;box-shadow:1px 2px 1px 1px #ABABAB;border:1px solid #fff;margin-top:3px;padding:8px;}#searchbutton:hover{background:#555;}</style>

Save it

that's its :)

How to add a clean author like and share box in Blogger

2015-03-30T00:21:00.001-07:00

When I was surfing arlinadesign.blogspot.com Then I found this widget from one of arlinadesign template. I was wondering how it is made after some days I made it. To add it to Blogger Follow the steps given below.

How to add it to Blogger

-Go to template>Edit HTML
-Press CTRL+F and search ]]></b:skin>
-Paste the following code above it

/* CSS Author Widget */.iuauthor-item {padding:15px 10px;text-align:center;}.iuauthor-item .image-wrap {position:relative;overflow:hidden;border-radius:50%;-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;height:auto;margin:0 auto;margin-bottom:15px;}.iuauthor-item .image-wrap:before {content: '';display:block;position:absolute;border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}.iuauthor-item .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;background-color:#f9f9f9;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;border-radius:50%;}.image-wrap:hover .social.linear-3s {opacity:0.95;-webkit-transform: scale(1);transform: scale(1);}.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}.iuauthor-item h4.iuauthor-name a {font-size:18px;margin-bottom:10px;display:block;color:#333;}.social-inner .fa-google-plus {background:#d64431!important;}.social-inner .fa-twitter {background:#00aced!important;}.social-inner .fa-facebook {background:#3b5998!important;}.social-inner .fa-pinterest {background:#cb2027!important;}

-Hit Save template Button
-Go to layout>add a gadget>HTML/Javascript
-Paste the following code

<div class='iuauthor-item'><div class='image-wrap'><img alt='Revoltify' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNu7Du-Kk5E8ZY50KTKVWi9FwvU-18ISOn68s6XT3tzUk2ypIvNdr3PdDMGs2ubbye2oOprtYF-mO_YwGZ2zBA1HI3VJiqLnOKHnzErdOudPUuVqFJ2Ivf5LoVbFPsjtIe95cKutdfb8j/s1600/Arlina+Logo.png' title='Revoltify'/><div class='social linear-3s'><div class='social-inner'><a href='#' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'></i></a><a href='#' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'></i></a><a href='#' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'></i></a><a href='#' target='_blank' title='Follow Us On Pinterest'><i class='fa fa-pinterest'></i></a></div></div></div></div>

-Save it

Your are all done :)

Google translate widget for blogger

2015-03-29T23:53:00.000-07:00

Hey guys, If you making your website in every language, Then use google translator widget in blogger for free . You can add it your blogger and any user can translate your website in any language. So lets get started

How to add it to Blogger

-Go to layout>add a widget>HTML/JAVASCRIPT
-Paste the following code

<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrGMWPJbJ3dO31vAIBwR1XILT1jxXmcKo065Z9wcaA7c-yUtIwYthM7t2Cl3pxrqaD5Zj1gGantmg0GWros5yvqtuCVtOpR8KiZksZlCMPmJEkwBdoLg5ncrSTa8n3WMdGWNGzjI8kzo/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wGtkjdi_4x1B-fsCl6AF8ycuaAnKi0UQhLBHdnugyuvKGbYn9nK5AbHG2BfPsQwIOlN_oFYzYw11mnDHfLXNd8oe60EZy_dI-Yhsv7_l3paXzlDW3vquX1kxHcfJwIAgDwz7dX9guFw/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gsHLWhxQs3ENv-t2SVnyAilmAtQpVk_kriwTLuJk6dzrpWrQA8x_To69rcrHGJlZMzy4pGhg6gDxbpePSQsiMHc6t-CR2W4H30Pl0hSj-Y0BhmuH-roG6_Jp7o6wTiScBj89yhKkg58/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8IlMYCwadK_qC-r2lC9_RSG-QmAJMRef1OvTLqe6PwuH9hVRP5pT_k3xZJy__MisWq97_yqoP93n1VpK6nbU7uyI_FbUc6-7wjKyMu17pAiReKNgi4lBVeoHlCaT7Nef0jf8zl296ljY/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZGRGHBLPD1DOy2f9kTK40gbQil5418UOtPIBnBImH0Q9kwyZbW2RjAw_fKLvhd_TMRh2V2Xdj9m878iE4sXSSRM7J9yBGNQdeuTrjf6lmCYHZilJ98Lu8GxvN6z4JFy-AZAzilCUjwrc/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3IfHyNvk0McFrQc7wBIfV3vf3_9QZSm6AlfJ4ba95Aohc_SXmueQtHQdiWOG2dA9GHh6yUdSafYl3an-Zl3Q04DRGIsW5LZcKMYGVYcVeGwQ-0FhFSudyYgMzivdla8FMnZqcxdNPcw/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4h68XEACkoVthKw5OrP5XrB9QiL-TF-5uxoH7-Gs9UhEzjWihB5nI4s3ZnN8PkJBJVQegPQvHe4bEfaveseUT1biKbiIMpad-l0Yse6rjByYcBnjgB255gV28ryedxXnzQfcq5Y3aCQ/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0S47HjMbICIS4Bf3uiOAyk24mhEaPmNyLhK7JQMzoUMjC752l8A7DLucYbJcz5lyeZsV7zX7h-B-5gl5qHmw8vef6g48-8zdFieTCh39uarhfJcuz142Poib9kqvbPpykEiZnJo_bk8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV41TCuhkL8MG5qnSRMPi-IceDQHfXTiTkNhmFdkoFRCT98al8Gw5eRc1Gan_V6uCsfcS2gMPQ7LzbAVnMIimPYGEcUqSKWhBc-pA2DonAlDMspvnrsEC6Vb8JaKbXInT-Yj4z25CgPmM/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinOUjWIMY0Dj7gjFf5OrXyS3sC17-8SDq9c1zErHThdvKQmZiWevHoWEqrFlW3kznZIywKAbGKucZVi88BRo7FNSbu_bta89vqr1g-aFA3n7SmnXcHR6XYIS9h1mPRcA7bs-VU_lOv5o/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuXVzk5_Oliy70RnfzEZzEzMkOcJn2hng4Wou7a2na0cEDAE52oJVb40HFRAxamVe6Qh61n6Y77IecTpfciGpOHYYLTczxDw6IGBWGI_fIgsrEy6N9j-65XlEElUWmkoSamLx8HD_zr4/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YyKP4mqAd68OghLWcbFIZWfGo_oAjXM8cFWNopz5lziI0yqWwJtcMErR4AtjoV7c7Laf-WR-2iiZ9Xx2ZFf9XTADROIYP21V48E2OeIX_BZSX482ybhPA9ViC0KVQ-kBXx2h1UPU3q0/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div> <br/>

-Save it and you are all done

How to add syntax highlighter for Blogger

2015-03-28T23:51:00.000-07:00

Using Syntax Highlighter is the best way for presenting HTML, CSS, jQuery etc codes on your blog Because syntax Highlighter present the code in an easier form so anybody can understand it easily.

What is Syntax Highlighter?

Syntax Highlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what Syntax Highlighter is capable of, have a look at the demo page. Know more about it on http://alexgorbatchev.com/SyntaxHighlighter/

How to add it to Blogger?

-Go to Template>Edit HTML
-Press CTRL+F and search ]]></b:skin>
-Paste the following code above it

/ * CSS Prism Syntax Highlighter * / pre {   padding : 50px 10px 10px 10px ;   margin : .5em 0 ;   white-space : pre ;   word-wrap : break-word ;   overflow : auto ;   background-color : #2c323c ;   position : relative ;   border-radius : 4px ;   max-height : 500px ; }
pre::before {   font-size : 16px ;   content : attr(title) ;   position : absolute ;   top : 0 ;   background-color : #eee ;   padding : 10px ;   left : 0 ;   right : 0 ;   color : #fff ;   text-transform : uppercase ;   display : block ;   margin : 0 0 15px 0 ;   font-weight : bold ; }
pre :: after {   content : 'Double-click to selection' ;   padding : 2px 0.3s ease-in-out ; }

pre: hover :: after {   opacity : 0 ;   top : -8px ;   visibility : visible ; }
code {   font-family : Consolas, Monaco, ' Andale Mono ',' Courier New ', Courier, Monospace ;   line-height : 16px ;   color : # 88a9ad ;   background-color : transparent ;   padding : 1px 2px ;   font-size : 12px ; }
pre   0 ; font-weight : bold ; }

.token.punctuation code {   color : #ccc ; }
pre code .token.punctuation {   color : #fafafa ; }
.token.comment code, code .token.prolog, .token.doctype code, code .token.cdata {   color : # 777 ; }
code .namespace {   opacity : .8 ; }
.token.property code, code .token.tag, .token.boolean code, code .token.number {   color : # e5dc56 ; }
.token.selector code, code-name .token.attr, code .token.string {   color : # 88a9ad ; }
.token.selector pre code, pre code .token.attr-name {   color : #fafafa ; }
pre code .token.string {   color : # 40ee46 ; }
.token.entity code, code .token.url, pre-css .language .token.string, pre .style .token.string {   color : #ccc ; }
.token.operator code {   color : # 1887dd ; }
.token.atrule code, code .token.attr-value {   color : # 009 999 ; }
.token.atrule pre code, pre code .token.attr-value {   color : # 1baeb0 ; }
.token.keyword code {   color : # e13200 ;   font-style : italic ; }
.token.comment code {   font-style : italic ; }
.token.regex code {   color : #ccc ; }
.token.important code {   font-weight : bold ; }
code .token.entity {   cursor : help ; }
Pre mark {   background-color : # ea4f4e! important ;   color : # fff! important ;   padding : 2px ;   border-radius : 2px ; }
code mark {   background-color : # ea4f4e! important ;   color : # fff! important ;   padding : 2px ;   border-radius : 2px ; }
pre code mark {   background-color : # ea4f4e! important ;   color : # fff! important ;   padding : 2px ;   border-radius : 2px ; }
.comments pre {   padding : 10px 10px 15px 10px ;   background : # 2c323c ; }
.comments      10px ; left : 0 ; right : 0 ; color : # fff ; text-transform : uppercase ; display : inline-block ; margin : 0 0 10px 0 ; font-weight : bold ; border-radius : 4px ; border : none ; }

.comments pre :: after {   font-size : 11px ; }
.comments pre code {   color : # eee ; }
.comments pre.line-numbers {   padding-left : 10px ; }
pre.line-numbers {   position : relative ;   padding-left : 3.0em ;   counter-reset : linenumber ; }
pre.line-numbers> code {   position : relative ; }
.line-numbers .line-numbers-rows {   height : 100% ;   position : absolute ;   pointer-events : none ;   top : 0 ;   font-size : 100% ;   left : -3.5em ;   width : 3em ;   -webkit-user-select : none ;   -moz-user-select : none ;   -ms-user-select : none ;   padding : 0 ; }
.line-numbers-rows> span {   pointer-events : none ;   display : block ;   counter-increment : linenumber ; }
.line-numbers-rows> span:before {   content : counter(linenumber) ;   color : #999 ;   display : block ;   padding-right : 0.8em ;   text-align : right ;   transition : 350ms ; }
pre [Data-codetype = 'CSSku']: before {   background-color : # 00a1d6 ; }
pre [Data-codetype = 'HTMLku']: before {   background-color : # 3cc888 ; }
pre [Data-codetype = 'JavaScriptku']: before {   background-color : # 75d6d0 ; }
pre [Data-codetype = 'JQueryku']: before {   background-color : # e5b460 ; }

-And again Paste the 3 jQuery before </body> or </head> (any one)

1

<script> $ ('pre') . attr ('class', 'line-numbers') ; Prism.hooks.add ("after-highlight",function(e) {vart=e.element.parentNode;if( ! t || ! /pre/i . test ( t . nodeName ) || t . className . indexOf ( "line-numbers" ) == = - 1 ) { return } var n = 1 + e . code . split ( "\n" ) . length ; var r ; lines = new Array ( n ) ; lines = lines . join ( "<span></span>" ) ; r = document . createElement ( "span" ) ; r . className = "line-numbers-rows" ; r . innerHTML = lines ; if ( t . hasAttribute ( "data-start" ) ) { t . style . counterReset = "linenumber " + ( parseInt ( t . getAttribute ( "Data-start" ) , 10 ) - 1 ) } e . element . appendChild ( r ) } ) </script>

<script type = 'text/javascript'> var pres = document . getElementsByTagName ( & quot ; pre & quot ; ) ; for ( var i = 0 ; i & lt ; pres . length ; i ++ ) { pres [ i ] . addEventListener ( & quot ; dblclick & quot ; , function ( ) { var selection = getSelection ( ) ; var range = document . createRange ( ) ; range . selectNodeContents ( this ) ; selection . removeAllRanges ( ) ; selection . addRange ( range ) ; } , false ) ; } </script>

<script src = 'https : //arlina-design.googlecode.com/svn/prism.js' type = 'text / javascript'/>

-Hit the Save template button
-And now create a new post
-Go to HTML tab and paste the following Code

<pre title="HTML" Data-codetype="HTMLku"> <code class="markup language"> ... HTML code (which already di`escape`) here ... </ code > </ pre >
< pre title = "CSS" Data-codetype = "CSSku" > < code class = "language-css" > ... CSS code here JavaScript code here ... </ code > </ pre > < pre title = "jQuery" Data-codetype = "JQueryku" > < code class = "language-javascript" > ... jQuery code here ... </ code > </pre>

You are all done :)

Original post - http://arlinadesign.blogspot.in/2014/11/memasang-prism-syntax-highlighter-di-blogger.html