How to Add Adsense Code Below Every Post Titles

Placing Adsense ads in once blog/site is a vital part  to maximize your ad performance with adsense. One of the best places to put your  adsense code  without annoying your readers is below your post titles.Why below post titles? Because it is the position with the highest click-through rate (CTR). Please see the Google Adsense Heat Map below for more informations.

 Step 1.  Preparing for Adsense ad Code

1.1 Go to Blogger Dashboard >>  Earnings >> View Dashboard
1.2 Create new  ad unit. Use the best performing ad units (300 x 250 medium rectangle or  336 x 280 large rectangle) to have a better results. Don't forget to put it with another name for monitoring purposes.
1.3 Get the code.
1.4 Now parse the adsense code using this parser tool because it will not work if it is unparsed.

Step 2.  Adding the Parsed Adsense Code to the Template

2.1 Go to Blogger Dashboard >> Template (Back - up your template for reference)
2.2 Click Edit HTML button
2.3 Find or Control F the code below (select the third occurrence of the code)

<data:post.body/>

2.4 Place the parsed code just above that code "<data:post.body/>". Choose the third occurrence of the code.
2.5 Save your Template and you are done!

Check also:

• How to hide or show widget in Blogger
• How to use the new Blogger Template HTML Editor

If you have some questions, suggestions or additional informations feel free to leave it at the comment box below. I will try my best to answer it as time allows.
Peace out my friend and Enjoy!

How to Add 123 Contact Form for FREE in Blogger

Having  a contact form is a vital part of every blog/website. It  enables your readers to have an indirect link with you regarding your  products or services. In such manner this gives all visitors a path in which to open a good communication with you and to your clients. There are many types of  contact forms that can  be used  in variuos  occasions like survey questions, polling visitors on various topics, or allowing visitors to join your newsletter. In this tutorial, I will show you on how to add contact form via 123contact form since I used this also in my contact page.

How to Add 123 Contact Form in Blogger

Step 1. Go to 123 contact form.
Step 2. Create an account there for free.
Step 3. Then follow  all the steps that the  requested from you.
Step 4. Get or copy the codes for your contact form. The codes may look like this:

<!-- 123ContactForm.com script begins here -->
<script type="text/javascript">var servicedomain="www.123contactform.com"; var frmRef=window.top.location.href; var cfJsHost = (("https:" == document.location.protocol)  Some Codes Here.................................................; </script>
Report it!">Report abuse
<!--123ContactForm.com script ends here-->

Step 5. Go to your Blogger Dashboard >> Click New Post or you may use New Page (static page).
Step 6. In your Blogger Post Editor's Page, paste the code that you have got from 123contact form (in step 5). You may put a title (Contact Us or Contact).

Note: In putting the contact form codes, your Blogger Post Editor's Page must be in HTML mode.

Step 7. Publish it in an earlier period of time so that it will not appear at your home page but if you're using a new page, just simply hide it.

Bonus Tip

If you want to appear your contact page like mine in a manner that it occupies the whole page of your blog. Please follow the steps below:
1. Go to Blogger Dashboard >> Click Template (have a backup of  it as  your reference)
2. Hit the Edit HTML buttom
3. Locate or Control F the tag below

]]></b:skin>

4. Just below the code  "]]></b:skin>", you paste the code below

<b:if cond='data:blog.url == "
http://bloggingtipsandtrix.blogspot.com/2012/12/about-me.html"'><style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Customization:

• Replace the URL (red bold text) with the URL of your Contact page.

5. Since we make your post (contact page) occupies the entire portion of your page, there is already a little problem on its margin, that is your contact form lies at the left side of your page and in order to solve this one, please paste the code below and paste it just above the codes that you have got from 123contact form as shown in the screen shot below:

<center><style>#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:900px!important;} .post { width:900px!important; }
</style></center>

6. Save your template and you are done!

If you some questions regarding this post,feel free to leave it at the comment box below or please contact me. I will try to answer it as time allows.
Thank you and have peace in your heart and mind!  Enjoy!!!

How to Add Author's Profile Picture in Google Search Results Page

I know  that every blogger dreams to increase their page rank dramatically in a duration of time. So I was researching on those SEO tips that might help this goal and I found that one of those ways is having an author's profile picture  that shows in the Search Engine Result Page. According to research that most people will click those related searches in the SERP having this kind of technique. And for this reason, I'm gonna show you on how to make this one in the most easy way.

---

How to Add Author Profile Picture in Google Search Results Page

---

Step 1. Comply the pre-requisite requirements below:
1. Of course, you must own a certain website.
2.  A Goggle Plus account.
3. Create an About Me or About Us page much better if it contains your profile picture, a 128px by 128px size JPEG format will do.
 If you meet all those pre-requisite requirements above, you may now proceed to the next steps.
Step 2.  Add the link below  anywhere in your site (either in header, footer or sidebar).

<a href="https://plus.google.com/GOOGLE+ ID"
  rel="author" target="_blank"> Join me on Google+</a>

Customization:

• Replace the GOOGLE+ID with your own G+ ID.  You can get this one at the browser address bar of your G+ account. Please take a look at the screenshot below.

• You can replace the texts in green Join me on Google+ (optional).

Step 3. In your About me page add the link below at the  beginning of your About me page (see my About me as an example).

<a href="https://plus.google.com/110772451841046895789" rel="me" title="Cerwenlloyd gefjun">Cerwenlloyd Gefjun</a>

• The series of 21 numbers in orange bold is my Google + ID, replace it with your own.
• The name in blue color is my G+ Profile name, replace it also with your own G + profile name.
• Replace Cerwenlloyd Gefjun with your name ( much better if it is the same with your G + profile name).

 Step 4. Next is you are going to add your About me page anywhere in your blog using the link below. In my case, I add it at the footer  my blog.

<a rel="author" href="http://bloggingtipsandtrix.blogspot.com/2012/12/about-me.html">About</a>

Customization:

•  Change the URL (http://bloggingtipsandtrix.blogspot.com/2012/12/about-me.html) with the URL of your About page.
• Replace the text About with your own word ( like About me or About us)

Step 5. Go to your G+  Profile account  scroll down and click the link button. See the screenshot below.

Step 6.  Add the URL of your Home page, Contact, and About. You may also put the URL of your Facebook fan page  and Twitter link.

Step 7. Upload your profile picture  on Google+ (this photo is the same with what you had uploaded in your About page). Your photo must  be a  128 px by 128px or 150px by 150px in size. (See the screenshot below for help).

Note: Don't upload a rectangular image.
Step 8. Save your uploaded profile picture  and you're done!

---

Test Now How Your Uploaded Picture Appear On Google Search Results Page

---

1. Go to Rich Snippets Tool
2. Submit your homepage URL at the search box and then hit the Preview button.

Note: If you followed the above tutorial correctly a note will appear like in the screenshot below.

 After few days or weeks, test if your profile picture is appearing in the Search Engine Results Page. But if you miss one of the steps above, an error will occur. You may review or repeat it once!
God Bless Everybody!!!

How to Add Different Hover Effects to Images in Blogger Post

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:

• How To Add A Vintage Style To Images In Blogger Using CSS
• Adding A Nudging Effect To Links And Images In Blogger
• How To Upload Images In Blogger And Get The Image Link

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!

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.
The explanation with regards to its border, background,  etc. is almost the same.

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

Also check these post:

• How To Make Sitemap Page In Blogger
• Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title
• HTML Encoder Widget Generator For Blogger

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

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:

• How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect
• Putting A Show - Hide Effect Or Content Spoiler In Blogger

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