आज के इस पोस्ट में हम बात करने वाले है कि आप WordPress या Blogger में पोस्ट लिखते समय किसी भी text के Quotes को कैसे डिज़ाइन कर सकते है.

How to design block Quotes in Hindi
How to design block Quotes in Hindi

How to design block Quotes in Hindi

यदि आपका कोई शायरी वेबसाइट या मोटिवेशन शायरी वेबसाइट है या फिर फिर आप किसी भी शब्द को block Quotes के अन्दर डिज़ाइन करना चाहते है. तो आप कर सकते है. लेकिन उसके लिए आपको कोडिंग का ज्ञान होना जरुरी है.

हमें पता है कि कुछ लोगों को कोडिंग का ज्ञान नहीं होता है जिसके कारण वो अपने वेबसाइट को अपने अनुसार डिज़ाइन नहीं कर पाते है. तो इस समस्या को देखते हुए मैं आज के इस पोस्ट मै Block Quotes के लिए कुछ custom css डिज़ाइन का code ले कर आया हूँ.

आपको ये code अपने WordPress या ब्लॉगर में CSS के अन्दर pest करना होगा. यदि आप नहीं जानते है कि ये सब कैसे करना है तो आप हमारी इस video को जरुर देखें. इस video में बहुत ही सरल भाषा में समझाया गया है.

 

Note – ये तीनों code को मैंने customize कर दिया है. अब आप इसे उपयोग कर सकते है.

Block Quotes Design – 1

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width:px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: “2014 2009”;
}

Block Quotes design – २

blockquote {
font: 16px italic Georgia, serif;
width:px;
padding-left: 1px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;

background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 3px solid #ccc;
margin: 5px;
background-image: url(Insert Image URL Here);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

Block Quotes Design – ३

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width:px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: “2014 2009”;
}

इस code को अपने वेबसाइट में कैसे सबमिट करना है इसका video ऊपर दिया गया है. उस video को जरुर देखें.

Also Read Web Hosting क्या है यह कितने प्रकार कि होती है ?