ByMr. Sultan Posted on Design Blog

Top 5 Css Blockquote Design Fro website

Top 5 unique css blockquote design for website kya aap website me stylish Blockquote design bana chahta hai To is post me 5 best css blockquote design milenge website ke liye

css blockquote design ka use blog me important words, heading Or css html coding blog article me add karne ke liye css blockquote ka use karte hai.

css blockquote style examples

 

Biscally css coding ke liye website me ham code box ka use bi kar skate hai. Lekin css blockquote design se ham coding ko articles me add karne me Aasni hoti hai.

Are design ke bat ki jaye to design full responsive are beautiful hai. Me recommended karunga ki code box ka use na karte huwe css blockquote style ka use kare.

me apko Top 5 css blockquote style examples ya css blockquote design ke sath Aur kaise use kare puri jankari dunga.

How to add Custom Css Blockquote Design in blog.

Simply niche diye gaye sabhi step ko follow kariye are Assani se css blockquote ko apne blog website me add kariye.

      1. Sabse phale apne blogger account login kare.
      2. Ab dashboard theme per click kare.
      3. Ab Edit HTML Per click kare.
      4. Ab Ctrl+F dabakar search box me ]]></b:skin> type karke enter kar de.
        add css code of blockquote

         

      5. Ab ]]></b:skin> ke uper apne css blockquote style code ko paste kar de.

Finally ab templete ko save kar dijye.

 

Top 5 css blockquote style examples For blogger

Css blockquote style examples 1.

 

Blockquote Style Examples

 

blockquote{text-align:left;
border:1px solid #ededed;
padding:35px;font-size:15px;margin:10px 0;
font-family:’Cookie‘,cursive;color:#676767;}

Customization.

    • Change border colors. #ededed
    • Change font size font-size:15px
    • Change Font Family Cookie
    • Change Font color”#676767“

 

Css blockquote Design Examples 2.

 

Blockquote-Style -Examples-2

@import “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”;
blockquote{padding:15px;margin-left:0;border:1px solid #000000;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:’f10e’;display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:’f10d’;font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}

Customization.

    • change Border color #000000
    • change Font Family-font-family:Georgia
    • Change Font Color-#999985

 

Css Blockquote Style examples 3.

Css Blockquote Style Examples

blockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}

customization

    • Change Background color-#f9f9f9
    • Change Border color-#d2d2d2
    • Change Font Style-font-style: italic;

 

Css blockquote Design examples 4.

 

css blockquote style examples 4

 

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://4.bp.blogspot.com/-apuX-9ARUao/WYTQg7l4jVI/AAAAAAAAAHg/soRgkjsn0XEm_EKv3Phqepp4k-w8ppIFACLcBGAs/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}

Customization

    • change Background color- background-color:#f5f5f5
    • Change the font –font-family: Georgia,

Css Blockquote Style Examples 5.

 

Blockquote-Style -Examples-5

blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: “”;height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: “”;height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}

Customization

    • Border color-#0ABCB1
    • font size- 16px
    • font Name- Cambria,Georgia,sans-serif;font-weight: 600;}

I hope apko Top 5 css blockquote style examples ya css Blockquote design ache lage honge. Simply css blockquote design ko ham hamne blog article me bahut assani se use kar sakte hai.

Agar apko css blockquote design ko blog website me add karne me khoi bi problem ho to hame comment karke batye. Are Top 5 css blockquote style examples ko Social media per jarur share kare.

 

Popular Posts :- 

Similar Posts