How To Add Blockquote For Blogger

mixanikos365
Author - mixanikos365
8:12 م


Find code .Posts blockquote or blockquote, or the like in your template. Press F3 or ctrl + F to facilitate the search and enter that code in the search. Replace the code with the code below. Please choose which you like. Do not Forget to Save Template

This is what you do:

1. Log in to Blogger account.
2. Click on "Theme".
3. Next click on the "Customize" button.
4. Click on "Advanced".
5. Pull the slider down, until you see "Add CSS".
6. Click on "Add CSS".
7. Now paste this set of CSS code in the box provided.
8. Now click on "Apply to Blog" button at the top right hand corner of the page.


This is an example blockquote

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 5px;
font-family: 'Oswald';
font-size: 20px;
color: #f69378
}


Simple Blogger Blockquote with green dashed border
<style>
.post blockquote {
    border: 2px dashed #03ba93;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    font-style: italic;
    font-family: Arial;
}
</style>



Simple Blogger blockquote with green left border
<style>
 .post blockquote {
    background-color: lightgrey;
    border-left: 4px solid #03ba93;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    font-style: italic;
    font-family: Arial;
}
</style>


Blogger blockquote with big quotation marks
<style>
.post blockquote {
padding: 10px 15px;
margin: 5px 40px;
/* border: 1px solid #E1E1E1; */
/* background-color: #F6F6F6; */
border-left: 4px solid #18B888;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #353535;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #353535;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}</style>





<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>




<style>
.post blockquote {
text-align:left;
font: 16px/24px Arial, sans-serif;
color: #555;
padding: 0.5em 10px;
margin: 1.5em 10px;
}
.post blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
border-radius: 25px;
margin-right: 0.5em;
vertical-align: -0.4em;

display: block;
height: 25px;
width: 25px;
}
.post blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
border-radius: 25px;
margin-right: 1em;
vertical-align: -0.5em;
display: block;
height: 25px;
width: 25px;
}
.post blockquote:hover:after, blockquote:hover:before {
background-color: #555;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
}
</style>





BlockQuote Style 3 CSS
<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4kL_RkCGdg19iK1rm4Awohdgv9Cu-3nIVFi6omC8PQ32Jg85ZZIKgPkdGilv4T2U6eQR-WLFaQDYw6wICWRJdGMg10xyKsN8Je4QtYG5GoR55jxm_v2_NdzWiAtlgpwQfIuddXmhzs0m/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;
}
</style>





<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>




<style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}
</style>

------------ Blockquote live examples ----------------

Example Display blockquote
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7J8j4pvYEKJRVntWOduzA7zZ1r17hyphenhyphenl1io9OZa97KUTlnAlJl-jlQ2MSvP4EiqoGGjJHhgrRNXfXjhnhVyWUOcfVPeU4DOaHzu3gXp1AvNCkzoZfrfqTdR1g-AOpMb4ZBrVmNQVFEpI/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.


Display blockquote
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltz2mNZClgTFOA9w_bHHrRKcXz6amWCFfsnxMAjT_fW33LM1cjj-m-CKQcFwv90RUq2TMQz3lkjmwzbfbxZpE2lVbUbP7soRWlkDtL03TQTsXPhu2xyhN7NNcUyT2qOGtYmuRBwqvRRU/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cuadXSpjIFaYQrnt6xfzibeKt2OYOZXxyVe44DkP13HdKVpGsru-pqmzi6FhCGiF6OcFm2L3DiKjkZjhqadBuLchc4RKLzYQvbRUFgxjIx0C-21Ry9nptIk5mPQeP2wMSp8Ja0xDWro/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.
Display blockquote
blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read
Display blockquote

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU30QwirpfPc4MhfGrc4B_EIhNo3I8_Sy08oUB0-tR_2_iLEKnyha272jmLM36mwC0WqYbnR942n7Q0zI1vXsAHzzmZ9hajE0Sq5XDToaNszVP2An22YHjrysFgKF5PKQfmH-EdDDkFwA/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TfVDCZnuvVSCAKXxaVgd19UCzH8dfxcqKlpCjAo-H8kOlesHifyJ0nUtq2IVTGUvB4TujcdP4XEhua9VlOkHeswbH6inX3sg2a4Alde6xt0rRRQj7P3plMV3iuN5f4UNfBk5Yh61Exg/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdf_vQdO5VzfsU6Vh67ZO812FWoIIOlKDlTHrCKYhOdf4l_uNX3fdIiDVLpSvniKxbwebv940rwV5wwj7DYGQIe_hCLD_t48GNuPji2eOBaOwYLEa886cf0tnmNfflQURbA-6t405ttow/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hO-Rlv8n5-rpp6k4Z76K9gB-0_ffs8XzauuWHRP9sf-Wx8qSWYlIZfZ4Hp4R72ZiaM28ohQoYlk3rZFWJCgDOsMd11zKyfjjITALqScgXsREUMt6ZUdNTMmJRfp6ak3cvMwwQY6zOjM/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyme24TcEQTwOieTWIemcCKFF0sNMVdSh5GT99KjSJdTUMwObpxSNH1r67cxTAbWrxHTt1sozOnYLudVDqHiUxWpAvaEK8z1wtpgafzLt2xD4MpXTTByBmb0BecI68TD4ew4g96R44yeI/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2MVrC3rpaCH-6HWHFgZaPILqlp9v671MLm9AbVVJvE_laHpsozRywLck6kIOQ7Gjru2nLZS6nHqpRxZT28c6PyGYjMCjV_03KJ3P2hvSy99AEEOn27_lcfpzztXTk5rpRabXwr5X-FU/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio99pyaObLZELoEM6vnxNA9MPBjmNGzXZtHg0-L-qzJzicedvLvxUlBPJycCU4fXl4-p6ps871rtBAzLVexJPogZEUXSCqEIXulscImk4A5RK3Sk89LwRB8eIc4NwRF1EkS51h_-M5SDE/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhP9OTRZQP1Pie-k2NEV5zQGllEO1D1eQDMqVJkjXwnKewAkTVADFFVeJQjTx5tFREhwGDvnTglT99DZi1WUj_C6qKO6-VEJf92nPj03uH-laplbp8skM-NytO7r2uXl9r-yZaNHklts/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgut7vXZPNMLLSOnAd5R71-XBGcFihVD0XIFuzfEqIcgUVd2-y90qUE_l3h5utUFpkZeW_rZEpgVJ7Nawbb8i80l6k4_eGOoRKDE9GsjqVNRyl1IdvMb2AZ99BKhMAQJCwZVJDfazTfr48/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4gtiYn6fVhI8ZmiobpaCzPyVBitebT_RNJhU4S3_jQeO2U0xDqs7SQROUWMxTV_AgPTWsZIxd71MA6Te-ps-rpoj7nmmMNRyJtXGhioE31VpkjqMjSdvLObHU-GEhvinqmw7AzhMrkU/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.


Display blockquote 

<blockquote style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote
<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.
 

Reblog/Linls

https://techubber.blogspot.com/
https://taunieverett.com/
https://digiztal.blogspot.com/
https://mautechface.blogspot.com/
https://techubber.blogspot.com/
http://topbestbloggertemplates.blogspot.com/
https://taunieverett.com/customize-block-quotes-blogger/
Tags

عرض المزيد

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
مشاركة في التطبيقات الأخرى
Copy Post Link