Skip to main content

How To Customize Blockquote In Blogger

Hey Guys, In my previous post I showed you How To Change Text Highlight Color In Blogger. It is always good to have a template which is special to you only. That's why I share you Blogger Tricks that is highly customizable. In this post I will show you How To Customize Blockquote In Blogger. I will share you step by step tutorial so that you can have a very special Blockquote style in your Blogspot blog. The code that I will provide you is highly customizable. So that you can have Blockquote that will be very special to you.
The default Blockquote style in Blogger is ugly and don't look well. It looks blank and don't have any fun at all. It looks rather whitish in color.

Blockquote Customization In Blogger

By customization, I mean to say changing each and every visual effects of Blockquote. In this post I will show you changing Blockquote background, Text color, Text style, Background repeat, Padding, Font style, Font-weight. Changing the look of Blockquote on mouse hover. Making fun with Blockquote style in Blogger. Let's start the tutorial.
  • Go to blogger home and sign in with your Blogger/Google Account.
  • Now go to dashboard.
  • Now you have to click on Template on the Blogger Dashboard.
  • On template page click on edit html.
  • On HTML page. Search for the code given below.
.post blockquote
After you find the code take a look around. You will see codes something like below. Your code may be different if you don't use Blogger's official Template or if you have Customized it. Don't Worry the code will look somewhat like below.
 .post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
You have to delete the above code. If your code looks different delete the code starting from .post blockquote to closing braces i.e., }. If you don't understand till now take a look at another code looking somewhat like above code. And you have to Delete the code that will look like below.
.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
Here, you will delete from .post blockquote to closing braces } . As you have learnt which item to remove, we can proceed to the cool looking Blockquote style for blogger. You can customize it according to your need.
  • Replace your older blockquote style with the code given below.
.post blockquote{
width: 65%
float: SstartSide;
padding: 0 30px;
font-family: Helvetica;,Harlow Solid Italic;,Arial;
color: #808080;
font-weight: bold;
font-style: italic;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLW0fuKnahQEaIaUJz12o7aOgV4I6NvlbiDIuJMXcHTnppjTcrYWHRvOOvQckGM0DdOQfB7QJf2VMHfJts7BRgLM-5NcYcYGBT-900DmJkinX6i8kLy1jIihak6JFT_q_HPL2nzGTy4Qs/s1600/quote.png); background-repeat: no-repeat; position: top-left;
//add any other CSS here
word-wrap:break-word; /* fix fix for long text breaking sidebar in IE */
overflow: hidden; /* fix for long non-text breaking sidebar in IE */
}
.post blockquote:hover {
color: #000000;
width: 65%;
float: SstartSide;
padding: 0 35px;
}
If you are still facing any problem in finding your default blockquote code then feel free to contact me or you can provide me your website url so that I can help you in finding your blockquote code.

Further Customization On The Blockquote Style In Blogger 

  • Change the url which is blue with your favourite blockquote image. If you like default blockquote image of my code. Feel free to keep it.
  • I have made the font family to Helvetica. You can change it with the your favourite font family. Font family name is in Green.
  • The default font color is in grey. You can change it with the color of your choice. Write the color code in hex color format. Font color that you have to change is in Grey.
  • Below the Grey color code you will see Font-weight, font style, and text decoration. Change it according to your need.
  • By default I have set the text decoration to none. You can replace "none" with Underline. If you don't find the word "none". Have a look at the yellow text in the above code.
  • Now the time for interesting part in blockquote customization in Blogger. When you hover the mouse on the Blockquote made with my/above code the font color will change. Change the mouse hover color hover with your own.
  • By default the mouse hover color is black. You can change with your own. The mouse hover color that you have to change is in purple. If you don't want to change the color on mouse hover with the default color of your choice.
  • If you don't want any padding in your Blogger blockquote than remove "padding: 0 35px;" in the above code.
Do you like the above amazing blockquote style. Then you are lucky I have tons of code that will make your Blogs' quote style to feel really awesome. Each codes is different from each other and have different customizations options. Let's see these beautiful blockquote style for Blogger.
.post blockquote { color: #292832; background-position: 2px -2px; border: 1px dashed #292832; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLW0fuKnahQEaIaUJz12o7aOgV4I6NvlbiDIuJMXcHTnppjTcrYWHRvOOvQckGM0DdOQfB7QJf2VMHfJts7BRgLM-5NcYcYGBT-900DmJkinX6i8kLy1jIihak6JFT_q_HPL2nzGTy4Qs/s1600/quote.png") 5% no-repeat #808080; align: top-left; }
You can always change the values written in Red color.
Here is another style. Paste this code as I explained above.
.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRV0gH5BXsMoO1hIJrR3sDh0TweU67jvo21IQASK8O3Wq5UK6J5Tib-pXWRux8Jzmp6iMn6uIzmSUqrBL2qiTzRr-XXiYZ5CCylQfu5F-gCTWTAoy_FISm4tu97n7NXfVyOt_1Yic2b8w/h120/purple-side-quote2.png); background-position:right; background-repeat: repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Hope you like this beautiful blockquote style for your Blogger blog and hope you you are able to customize the blockquote code.
If you are facing any problem then feel free to comment.
Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more