Blogging tips and tricks

How to Add Different Hover Effects to Images in Blogger Post

By goldenworks on 8/05/2013

I have already seen and read many tutorials regarding on how to add hover effects on images uploaded in our post editor pages and all of them have put CSS code in the template editor's page which has a the same effect to all of our images. But there are some instances that the hover effect that we want to appear will be different in some of our posts. Have a your mouse hover at the image below as an example.

Hover Effects Demo

Steps in Applying this tweak in your Blog
Step 1. Copy and paste the code below in your Blogger Post Editor page

<img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8D9VhBg5c0-bDaXNL1lpb4t-NXzwJ3sJmAh3boEjSqjTmdxSOksMLCXSXkYBfYdsHYUt2BrQOWklcaUTl9myePpqSmz0LPT6RHnzMjBD8iz_re1RiD-njzzPiP024Stjc8M6xvt9jJMJi/s1600/hover+effect+on+images+from+blockquote+2.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcVJZpBit-C5a5AJ8OuOdqn8CPYWdkkyqDVQ44sCVQOKaAZHMYrIFyZG9QkF_Xijhbl80oDRc2jUMN0gKUU56PH1Ro2qnaX1rB942TajgN_Q3ctzGKgxcSjG46Cx-9ZxqE6Qz34snzoE9/s1600/hover+effect+on+images+from+blockquote.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8D9VhBg5c0-bDaXNL1lpb4t-NXzwJ3sJmAh3boEjSqjTmdxSOksMLCXSXkYBfYdsHYUt2BrQOWklcaUTl9myePpqSmz0LPT6RHnzMjBD8iz_re1RiD-njzzPiP024Stjc8M6xvt9jJMJi/s1600/hover+effect+on+images+from+blockquote+2.png" />

Customization

The red bolded texts is default image (the image when no mouse hover). Replace it with your own.
The orange bold and none bold texts (in italic) is the URL image when mouse hover on it. Replace it with your own also.

The following next tutorial will be different since we will add HTML and CSS to your template.

Zoom In and Out effect

HTML code:

<div class="grow pic">
<img alt="hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSbDuwz0yDmgskdfMm2D0Cx_sfyfnFCtAoSZ19dz90DGnhFEqsnAX0SKk2-C34fyVrKHYuMbpOlYza2bgkXqXy_iYZdsAlIBgTB1CETdlbhbVlVR97nnJHJ5g3NJwwfPnpiK3qpujLVaS/s1600/hover+effect+slide+left.png" />
</div>

CSS code for out effect:

/*ZOOM*/
.grow img {
height: 300px;
width: 300px;

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

.grow img:hover {
width: 400px;
height: 400px;
}

CSS code for zoom in effect:

/*ZOOM*/
.grow img {
  height: 300px;
  width: 300px;

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

.grow img:hover {
  width: 150px;
  height: 150px;
}

Going to Leftside Effect

HTML Code:

<div class="leftside pic">
<img alt="hover left side effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSbDuwz0yDmgskdfMm2D0Cx_sfyfnFCtAoSZ19dz90DGnhFEqsnAX0SKk2-C34fyVrKHYuMbpOlYza2bgkXqXy_iYZdsAlIBgTB1CETdlbhbVlVR97nnJHJ5g3NJwwfPnpiK3qpujLVaS/s1600/hover+effect+slide+left.png" />
</div>

CSS Code:

/*leftside movement*/
.leftside img {
border:20px solid #158aee;
height: 200px;
width: 200px;
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

.leftside img:hover {
border:20px solid #158aee;
margin-left: -20px;
}

Going to UP Effect

HTML Code:

<div class="vertpan pic">
<img alt="vertical hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code:

/*VERTPAN*/
.vertpan img {
border:20px solid #158aee;
height: 200px;
width: 200px;
margin-top: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

.vertpan img:hover {
border:20px solid #158aee;
margin-top: -20px;
}

Tilt Effect

HTML Code:

<div class="tilt pic">
<img alt="tilt hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code:

/*TILT*/
.tilt {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.tilt img{
border:20px solid #158aee;
}
.tilt :hover {
border:20px solid #158aee;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

Morph Effect

HTML code:

<div class="morph pic">
<img alt="morph hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*MORPH*/
.morph img {
border:25px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.morph img:hover {
border:25px solid #158aee;
border-radius: 250px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
margin: 0;
padding: 0;
margin-bottom:0px;
overflow:hidden;
}

Focus Effect

HTML code:

<div class="focus pic ">
<img alt="focus hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*FOCUS*/
.focus img {
border:25px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.focus img:hover {
border:70px solid #158aee;
border-radius: 250px;
margin: 0;
padding: 0;
margin-bottom:0px;
overflow:hidden;
}

Blur Effect

HTML code:

<div class="blur pic">
<img alt="blur hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*BLUR*/
.blur img {
border:20px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
border:20px solid #158aee;
-webkit-filter: blur(1px);
}

Brightness Effect

HTML code:

<div class="brightness pic">
<img alt="brightness hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*BRIGHTNESS*/
.brightness img{
border:20px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.brightness img:hover {
border:20px solid #158aee;
-webkit-filter: brightness(130%);
}

Opacity Effect

HTML code:

<div class="opacity pic">
<img alt="opacity hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*OPACITY*/
.opacity {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.opacity img {
border:20px solid #158aee;
}
.opacity:hover {
-webkit-filter: opacity(50%);
}

Invert Effect

HTML code:

<div class="invert pic">
<img alt="invert hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*INVERT*/
.invert img{
border:20px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.invert img:hover {
border:20px solid #158aee;
-webkit-filter: invert(100%);
}

Sepia Effect

HTML code:

<div class="sepia pic">
<img alt="sepia hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code:

/*SEPIA*/
.sepia img{
border:20px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.sepia img:hover {
border:20px solid #158aee;
-webkit-filter: sepia(60%);
}

Contrast Effect

HTML code:

<div class="contrast pic">
<img alt="contrast hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*CONTRAST*/
.contrast img{
border:20px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.contrast img:hover {
border:20px solid #158aee;
-webkit-filter: contrast(50%);
}

Customiztion with the above codes:

For the HTML code, change the red bold texts with your own URL image.
For the CSS code, change the border styles and size in default (bold black). You can click this link for various border styles.
The orange bold texts are responsible for hover effect of your border (size, styles and color), change it also according to your preferences.

Implementation:
This is for the putting of the CSS code
Step 1. Go to Blogger Dashboard >> Template (back your template for your reference).
Step 2. Click the Edit HTML button
Step 3. In the HTML editor's page, control F or find the the code ]]></b:skin>
Step 4. And just above ]]></b:skin> , paste the CSS code of your choosen hover effect styles.
Step 5. Save your Template (you are now halfway done).

This is for the adding of the HTML code

Step 6. In your Blogger post editor's page, paste the HTML code above (must match with your chosen CSS code also).
Step 7. Save or update your post and you're done.

Also Check These Posts:

IF you have some question regarding this post, feel free to leave it at our comment box below..I will do my best to answer it for you pal.
God Bless and Happy Blogging to all Us!

How to Add Hover Effect in Your Blockquote- The Heart Shape!

By goldenworks on 8/03/2013

This post is the answer of my promised when I make an article on "How to Make Blockquotes Styles". If you found it interisting. This time, I will tell you that it will be more than interisting since a hover effect is added to the CSS codes. Have an overview by clicking the live demo below.

Live Demo

How to Add Hover Effect in Your Blockquote- The Heart Shape!

Step 1. Go to your Blogger Dashboard
Step 2. Hit the Template button (have a back-up of your template)
Step 3. Click the Edit HTML button
Step 4. Find or Control the code below

]]></b:skin>

Step 5. Just above it paste the code below

blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42V0GrVD0JOa3qi7pgZpblbTMKCetysSSaqHxN832BzEab1gS6BQL6WIdogXNkJrzXOsv49LPqXLIOQkmetl4Hf2EbTqvjRsidYbC8cOYL-HdDr8yFhnD9K-pistUZNpnlzPYcel_geI/s1600/love+fireworks.jpg2.png) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#ff00ff;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
border:1px ridge #ff0000;
}
blockquote:hover {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOQcI2sjHlNeevM5tRIkbmHSTDy7ER5MbS8gIgdLHjCY6QvrhZUbvTEXJlRtBv8ZBg_5ouLDktjq4xikn3PUEr8tzNdSCvYRkiO4FluiHLqWbVPtamQMxxmTZfCYK__seYvYNumFNooY/s1600/love+fireworks.png) no-repeat right bottom ;
color:#01DFD7;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
-webkit-box-shadow: 0px -2px 35px #0101DF;
box-shadow: 0px -2px 35px #0101DF;
border: 1px ridge #0000ff;
}

blockquote p {
margin: 0;
padding-top:10px;

There are two set of CSS codes responsible for this tutorial:

Blockquote - This is default setting of your blockquote. Click here for its customization.
Blockquote:hover - This is the result of your blockquote when a you hover the mouse over it.

Step 6. After customizing the above codes you may now save your template and you're done!

Also check these post:

Hope you like this tutorial buddies. If you have some questions, feel free to leave at the comment section below...
Peace and More Blessings to Your Family!!!

Putting Links Within a Specific Page

By goldenworks on 8/02/2013

I was wondering how other professional bloggers made a post and within that certain post they add link and when I clicked the link, it doesn't go to the other post or page but just go to a certain specific height within that post. Sounds weird! buddies, but that's really true. I called this personally as "self link anchoring". We will not add javascript on your template but just a simple HTML code to your Blogger Post editor where you want to apply this effect.

The principle behind this tutorial:

Create a link pointing to the anchor. This is the word where you add the link wherein if you click this link you will be directed to a certain height (target) within your page.
Create the anchor itself.This is the target height of your page.

Live Demo
Note: Upon clicking the live demo, you are directed to a specific height of that page that is the "Copyrighted Blockquote with Gradient Yellow Image at the Left Side and Small Solid Borders."

Putting Links (Self-Anchoring) Within a Specific Page

Step 1. Open a post (much better if it is lenghty) and get the post link or you can create new post, publish it and of course, get the link.
Step 2. From your post, select a word where you put the link ( in step 1). Do this as you normally put link(s) in your posts.
The normal link would look like the one below,

http://bloggingtipsandtrix.blogspot.com/2013/07/how-to-make-blockquote-styles-in-blogger.html

But in order to put link to your anchor you need to add some word on it at the last portion. See example below,

http://bloggingtipsandtrix.blogspot.com/2013/07/how-to-make-blockquote-styles-in-blogger.html#gradient

The link above is now your link pointing to your anchor.

After creating the link pointing to your anchor, it is now time to create the anchor itself or the target height within your page.
Step 3. Copy the code below as your guide,

<a href="http://bloggingtipsandtrix.blogspot.com/2013/07/how-to-make-blockquote-styles-in-blogger.html" name="gradient"></a>

Replace the orange bolded texts with your own link.

Replace also the red bolded text with tag that is found in your link pointing to your anchor ( in step 2). These tags must match with each other.

After customizing the above codes, select a certain specific height location of your post and paste it (it must be in HTML mode).
Step 4. Update your post and you're done.

Also Check These Posts:

Hope this will help you buddy in some other way. If you have some questions, feel free to leave a comment below or contact me. I will do my best to elaborate it further.

Thanks for reading this post and may God guides your blogging career always!!!

How to Make Blockquote Styles In Blogger

By goldenworks on 7/31/2013

Upon my first experienced in this world of blogging tutorials, I was wondering on how to display my blockquote codes in a manner that my readers can distinguish them from my ordinary texts. So I was keep on researching on the web, experimenting the effects of CSS until I came - up with a beautiful one. Since I do't want to monopolize this gift from God, I am dare to share it with you on how to make it. I would humbly say that because of Muhammad Mustafa I was able to learn this tweak but of course with additional spices to make it more fitted to your blog. I would present this one a quite different to be learnt easily by the newbie bloggers. So, let us now go with the tutorial!

How to Make Blockquote Styles In Blogger

Step 1. Log - in to your Blogger Dashboard
Step 2. Hit the Template button (have a back-up of your template as your reference)
Step 3. Click The Edit HTML button
Step 4. Find or search the code/tag below

.post blockquote

In most cases the code will look like this:

.post-body blockquote {some codes here}
OR
.post blockquote{ some codes here}

But if you did't find the above code or tag above, It is fine.
Step 5. Now search for code below

]]></b:skin>

And just above ]]></b:skin> , you choose among the blockquote styles codes below that would most fit to your blog.

Copyrighted Blockquote with Gradient Yellow Image at the Left Side and Small Solid Borders

Live Demo

.post blockquote {
font: 14px normal verdana, sans-serif;
padding-left: 38px ;
margin:0 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWXh0DBFJKOsBPJp9QJ8q6i3QYKkwA4G28yqQAA0IniFZ3M_T4R0hgpz_cuR984oI_z4jDSk_NasSldnN4VDnsnsxmMk6Hrk2G_R36us0o_2W1xOFVXkRKE12-6DkCbCUJR5jlc5zvpID/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
border-top: 3px solid #61380B;
border-right: 3px solid #f4fa58;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXRzbi9gKGkGMUD41EIKyIjR6wtYqqIf-EBUDdyfQyedSiEo-71KYZ0Hhr9dZa9Qr16-6cUym9XFCBejxIjHg3jrMaDDEjY5H7eKTkCUazaTf6NPLqqbeCvSQqeo8hfAzDHGb1wAf3HsU/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:20px;
border-bottom: 10px solid #F4FA58;
margin-left: -20px
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Live Demo

Blockquote Codes:

.post blockquote {

margin : 0 20px;

padding: 20px 20px 50px 20px;

background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNGo5El7GW7hyphenhyphenOqIh9ofD58ibhezJGmSpGrNqeUYXEJmRFtf9pBJxiS8M5Yak0igylWrmwKL1m5-llSuu38a23PljvrMMZi9wvdLGlBaE7w0zpnD_yVMfLB_S0SofhPPZXS7nMiut2HWS/s1600/Scanned+black+blockquote.png) no-repeat center bottom;

font: bold .9em "verdana", Georgia;

color : #000;

border-top: 2px solid #000;

border-right: 2px solid #000;

border-bottom: 2px solid #000;

border-left: 2px solid #000;

}

.post blockquote p {

margin: 0;

padding-top:10px;

}

Live Demo

Blockquote Codes:

blockquote {
margin : 0 20px;
padding: 20px 20px 20px 20px;
background : #fff url( ) no-repeat top;
font: normal 1em "Times New Roman", Times, serif;
color : #000000;
border-top : 7px solid #FF0000;
border-right : 7px solid #FF0000;
border-bottom : 7px solid #FF0000;
border-left : 7px solid #FF0000;
}
}
blockquote p {
margin: 0;
padding-top:5px;
}

Live Demo

Blockquote Codes:

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQJkwF8ggmSWL1UeX2tTP76MrAPeyxVP32JLdYf0byybNY6GvBaoWxZoY7Ek8hl4BY2vfduvlVtFqYHFmGbjabv-5pmrrp1-fwp3B8IQO-gAoJNndKKYPQiATw4aNr9Z65BkOwUy5TU1w/s1600/Copyrighted+blue+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #158aee;
border-left: 2px solid #158aee;
border-right: 2px solid #158aee;
border-bottom: 2px solid #158aee;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Live Demo

Blockquote Codes:

blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVQuGH7nd1nqV2YsI1cyzYnC3ZlWFHWsPS4K_UQyFxR5d_alhi-NFeEA4G0zuGdd7AdcJh1Sgk8RGGpw0p-tmBDzgx4n8cejH7lvelPXFXN11ntOgYHNi6oVO2xPYc-QW4h41O_ob1M25/s120/blockqute+3.png) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000;
border-top: 3px ridge #000;
border-left: 3px ridge #000;
}
blockquote p {
margin: 0;
padding-top:1px;
}

Live Demo Blockquote Codes:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EHz6_N1_124-4gkF1lzR49ApmM8c5JP4pdrkfVRflX_rDBpKXhmYYZdmTFOMs4_tfFge1OAUQa-71kAw3zi7lOnjmr6-7msZbfsCvaDM1ySb-vPlD90qgLw0m-I08qws270_dP1BwdSa/s1600/blockquote.png) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-top : 3px ridge #FF8000;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Customization (Optional):
The above blockquote codes were bolded in the manner to make you easily customize according to your preferences.

Margin :- ) This refers to the position of your whole blockquote.
Padding :- It changes the distance of your texts from the borders of your blockquote.
Background >> This includes blockquote background color in six digit value and the image URL that is being used . You can replace the hexadecimal color and the image URl respectively.
Font >: This includes the font style, size, and type respectively.
Color >> This is the color of your texts of your blockquote, you can use our free color code generator to choose a wide variety of colors.
Border >.. In the above codes, I arranged the border styles from top, right, bottom, and left. Along with each are the border size, style and color. You can also use this link to choose different border styles.

Step 6. After you made some customization of you blockquote codes, you may now save your template.

Whenever you have some quotes or codes to share with your readers just follow the steps below:
1. Go to post or create new post
2. Switch it in the compose mode and type your quotes.
3. After typing your quote in the compose mode, switch it to HTML mode.
4. Then add these tags "<blockquote>.......</blockquote>" . It may look like this:

<blockquote>
Your quotes here
</blockquote>

Now if you want to apply different blockquote styles in your blog, simply copy the blockquote codes above and paste it to you Blogger Post Editor page (it should be in the HTML Mode). For example you want to apply the Blockquote With Ridge Border Style. The setting will be this one:

<style>
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EHz6_N1_124-4gkF1lzR49ApmM8c5JP4pdrkfVRflX_rDBpKXhmYYZdmTFOMs4_tfFge1OAUQa-71kAw3zi7lOnjmr6-7msZbfsCvaDM1ySb-vPlD90qgLw0m-I08qws270_dP1BwdSa/s1600/blockquote.png) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-top : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
</style>

<blockquote>

Your quote or codes here........

</blockquote>

Note:- For Blockquotes with yellow gradient, there is a little more coding required. Read below

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,
Now, whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below.

<style>
.post blockquote {
font: 14px normal verdana, sans-serif;
padding-left: 38px ;
margin:0 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWXh0DBFJKOsBPJp9QJ8q6i3QYKkwA4G28yqQAA0IniFZ3M_T4R0hgpz_cuR984oI_z4jDSk_NasSldnN4VDnsnsxmMk6Hrk2G_R36us0o_2W1xOFVXkRKE12-6DkCbCUJR5jlc5zvpID/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
border-top: 3px solid #61380B;
border-right: 3px solid #f4fa58;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXRzbi9gKGkGMUD41EIKyIjR6wtYqqIf-EBUDdyfQyedSiEo-71KYZ0Hhr9dZa9Qr16-6cUym9XFCBejxIjHg3jrMaDDEjY5H7eKTkCUazaTf6NPLqqbeCvSQqeo8hfAzDHGb1wAf3HsU/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:20px;
border-bottom: 10px solid #F4FA58;
margin-left: -20px
}
</style>
<blockquote><div>
Your Codes/Quote Here
</div>
</blockquoe>

Also check the related posts below:

Hope you like this tutorial and if you have some clarifications, questions or additional informations regarding this post, I will be happy to hear your side. Please leave it at the comment box below or you can contact me.
Within this week, I will try to make a blockquote codes with a stylistic hover effect on it.

God Bless Everybody and Take Care of your Love Ones!!!!!

Customize Bullet List Style With Image Hover Effect

By goldenworks on 7/27/2013

Most of the times when website owners or web developers would like to make a posts, they tend to elaborate things through explaining some features on the topic that they are discussing to their readers. To make it more professional in looks, it is recommended to write using a bullet list style. In this tutorial, we will discuss on how to customize bullet list style with image hover effect on it. The code that I'am going to share with you are highly customizable and easy to implement. So, let's now jump to the tutorial!

Try to look below at my customization area just after step 6 in this tutorial or to my sitemap page for the live demo.

Customize Bullet List Style With Image Hover Effect

Step 1. Log-in to Blogger Dashboard
Step 2. Hit the Template Button ( have a back-up of your template for your reference)
Step 3. Click the Edit HTML button
Step 4. Point the mouse cursor inside the new Blogger Template HTML Editor page
Step 5. Control F or find the code below

]]></b:skin>

Step 5. Above the code in step 5., paste the css code below

.post ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJGx_BZZ89cNfygLXfmiX6sB-GdwG9M2VxHI_ML6qj0ASFYDyIiwHN2YAHEoMsI1J0G3x4rdNtli2w0rNHKLIar7Ct8sUrRI_mRDtGr59VjW-Qf84HZTvgilTSe7nu8YJyyBWZv9-YWk/s1600/bullett+1.png) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
border: 1px solid #DDC;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix14qeYyQ9CphEkyw2HA_UvFTgi5v1ltym5ua7bSAjrV5iN1CT9zUF_KhNkHKrZP9-Iw3mah5Qyx8S48G-SJz09I0cId72rA1IECLNFaCFFSYXz6DIjKfxYSn6ESYF9rIKtod0qQPwT0M/s1600/bullet+2.png) no-repeat scroll 0px 3px;
}

Step 6. Save your template! and you're done.

Customization (optional):

You may change the text in red (url of image if no mouse hover effect) with your own image and the text in blue ( url of the image with hover effect)
The image size should range from 10px by 10px to 13px by 11px
You may or may not delete the border (1px solid #DDC).
You can select the different border styles here and variuos hexadecimal colors through this link

Please copy the code below in your Blogger editor page (it must be in HTML mode) everytime you want to apply this trick in your post.

<ul>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
</ul>

Just add another "<li>Your Texts/Message Here</li>" above"</ul>" tag if you want to add another texts with bullet list styles.

Or you can copy and paste the code below direct to your Blogger editor's page (in HTML mode).

<style>
.post ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikASvVO0kw4EiUvP1EoQBWsYs9hIIGKbH5lHjbWdAxKuxG8ppLvIv56CFv41GSekkWTto95lIJ2gecAxp7neVbYCF2ROEnM7PmYUmALz90ILCbp1dn8ClAvNk21yhlK99Sn9j84rbRdOc/s1600/blogger+logo14.png) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
border: 1px solid #DDC;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyC5Dm28vcnLS6LV1C6qqinZHVccs-HlqOtoKcjWe0-9sObrzpcVfHpNdRzclDpIC39ol7xUByozin48ALlhBrNmtdRFh3EtAMUqkMgenjqvIy0hZcKz1HYbFtOTvYJnfztlUoyGads38/s1600/blogger+logo+15.png) no-repeat scroll 0px 3px;
}
</style>
<ul>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
</ul>

Hope this post is helpful to you buddy. Always Give thanks to the Lord!
Enjoy!

Add Facebook Pop Like Box With Timer In Blogger

By goldenworks on 7/21/2013

Having a problem on how to advertise your online business. Facebook is the answer as it is the largest social networking site. And as blogger you want also to spread your content because no matter how quality is your content is but it is not being talked by people around the globe, you are just like wearing new and beautiful dress but just sleep in your bed.

As of the moment (when I wrote this article) it is the no. 1 in Alexa Rank having a 963,574,340 (data taken from web-site.org) . In connnection with this, FACEBOOK has provided the facility in shape of many widgets and boxes through which the webmasters and bloggers can easily advertise their blog or website and circulate it on the FACEBOOK. And now, in this tutorial I am going to share with you the “FACEBOOK POPUP LIKE BOX WITH TIMER”, which you can easily install in your Blogger Blog and attract more visitors and build a better fan following on the Facebook. The codes that I'm going to share with you are highly customizable.

Live Demo

Add Facebook Pop Like Box With Timer In Blogger

Step 1. Log in to your Blogger Dashboard.

Step 2. Go to Template (have a back-up of your template for your reference).

Step 3. Click “EDIT HTML”.

Step 4. Inside “HTML EDITOR”, press “CTRL+F” and find tag </body>.

Step 5. Copy &paste the following code below just above/before tag </body>.

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='pages/Bloggingtipsandtrix/533310753378603?ref=hl'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size: 13px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVUFBGNGVKRkdHV3M' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVM3ppcFdvWkZPUEE' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

Customization:

Change the red highlighted texts with your facebook username or facebook fan page.
If you want to hide your facebook fan page name because it is odd to look especially if it contains many numbers, simply delete the 13px in font size in the above code and change it to zero (0).
Set the time-out (in seconds) by replacing 30 with your own.
This widget will reappear after few minutes. Simply change the (0) with 1, 2, or any time you want.

In my case my complete facebook fan page is https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl

Step 6. Click Preview to see the initial effect then hit the Save button.
As a token of this article please like my facebook fan page. Thank You!
Peace and more blessings to your family.
Enjoy!

Subscribe to: Posts ( Atom )