Skip to content
99techspot logo
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
99techspot logo

Top 5 Css Blockquote Design Fro website

Posted onJune 18, 2022July 8, 2022 Updated July 8, 2022

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.

  • The 5 Best Blogger Plugins For Blogspot Blogger

विषय-सूची

  • 1 How to add Custom Css Blockquote Design in blog.
  • 2 Top 5 css blockquote style examples For blogger
  • 3 Css blockquote style examples 1.
  • 4 Css blockquote Design Examples 2.
  • 5 Css Blockquote Style examples 3.
  • 6 Css blockquote Design examples 4.
  • 7 Css Blockquote Style Examples 5.

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

  • TOP 5 Best Blogger Seo Tools 2019
  • Top 5 Best Selfie Camera Apps Android Ke Liye
  • Top 5 Best Lock Screen Apps For Android Mobile

Post navigation

Previous Previous
How to Add Google View Image feature & Why Remove And
NextContinue
500+ Picsart Png Whatsapp Group Link
Download Best UPI Apps :-

Download Google Pay Get 150 Rs For Free Vaild 2 Day
Downlaod Phone PeGet 100 Rs For Free Vaild 2 Day
Download Paytm Get 150 Rs For Free Vaild 2 Day
Open Your Demet Account on : -

Download Upstox Free Demat Account
Download Upstox ProOpen Free Demat Account
Download GrowOpen Free Account

Latest Tech update :-


  • Contact us
  • About us
  • Advertisement
  • Guest Post
  • Privacy Policy
  • About Author
Scroll to top
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
Search