5 amazing Blockquote Design blockquote Ko Stylish kaise banaye

नमस्कार दोस्तों ,आज के इस पोस्ट मे बता रहे है Blockquote को डिज़ाइन कैसे करें,इसका उपयोग कहाँ किया जाता है क्यों किया जाता है आदि.. यदि आप ये सभी जानना चाहते है तो इस पोस्ट को पूरा पढ़े

Blockquote kaha Use kiya jata hai ?

आप Blogger ,Wordpress पोस्ट के अंदर इसका इस्तेमाल किया जाता है आपने कई सारे प्रोफेशनल ब्लॉगर के ब्लॉग मे ये देखा भी होगा blockquotes का ज्यादा इस्तेमाल शायरी ,जोक्स ,सुविचार ,जैसे वेबसाइट पर किया जाता है जिससे वेबसाइट अट्रैक्टिव दिखे साथ ही पोस्ट भी जिसमे शायरी लिखें होते है

Blockquote use kyo kiya jata hai

ब्लॉकquote का use पोस्ट के कुछ लाइन को बॉक्स मे जोड़ने के लिए किया जाता है इसके अलावा यदि कोई शायरी ,सुविचार जैसे वेबसाइट चलाते है तो वे शायरी बॉक्स को डिज़ाइन करने के लिए ब्लॉकक्यूट इस्तेमाल करते है

यदि आप भी शायरी ,जोक्स ,सुविचार जैसे ब्लॉग चला रहे है और ब्लॉग को अट्रैक्टिव ना बना सके है और ब्लॉग पोस्ट यानि की शायरी को सिम्पल पोस्ट की तरह ही यूज़ करते है तो आपको आज ही यहाँ बताए गए डिज़ाइन मे से किसी एक को सलेक्ट करके उसे अपने ब्लॉग मे इस्तेमाल करना चाहिए ताकी आपका कंटेंट डिज़ाइन अट्रैक्टिव दिखे जिससे विजिटर आपके साइट को बुकमार्क करने पर मज़बूर हो जाएं

मैंने यहाँ कई डिज़ाइन बताए है इनमे से आप सभी डिज़ाइन ब्लॉगर और wordpress दोनों पर यूज़ कर सकते है क्योंकि यहाँ पर Css Code दिया गया है जिसे आप Direct Copy भी कर सकते है और डाउनलोड भी लेकिन उससे पहले ये जान लेते है की इस कोड को कहाँ ऐड करना है ताकी कोई भी एक डिज़ाइन सलेक्ट करके उसका कोड कॉपी करके अपने ब्लॉग मे आप यूज़ कर सके

WordPress me Css kaise add kare

1. WordPress मे लॉगिन करे
2. appearance >> Customise पर क्लिक करें
3. यहाँ आपको सबसे लास्ट मे Add Css पर क्लिक करना है और बॉक्स मे कोड पेस्ट करके पब्लिश कर देना है

code. 1 download

blockquote {
font: 16px italic Georgia, serif;
width:450px;
padding-left: 70px;
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;
}

code.2 Download

blockquote {
max-width: 600px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}

Code. 3 Download

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7d7e7d’, endColorstr=’#0e0e0e’,GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}

Code. 4 Download

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 450px;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    background:#ececec;
}
 
blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -10px;
    top: -10px;
    color: #7a7a7a;
}
 
blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
  
blockquote cite:before {
    content: "\2014 \2009";
}

Code. 5 Download

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
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";
}

Code. 6 Download

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
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";
}

आपने कोड successfully ऐड कर लिया है यदि आप उस डिज़ाइन को पोस्ट मे ऐड करना चाहते है तो जिस टेक्स्ट मे यूज़ करना है उसके पास ( “ blockquote ” ) use करे

आपका टेक्स्ट डिज़ाइन वाले बॉक्स मे show होगा इसके लिए आप पोस्ट को preview करके देख सकते है यदि आपको कोई परेशानी हो तो आप हमें कमेंट मे बता सकते है

Same process blogger मे भी है बस आपको Css कोड ऐड करना है उसके लिए आप ये पोस्ट पढ़े css code blogger me kaise add kare 

इस तरह से आप ब्लॉगर और wordpress दोनों मे ब्लॉकquote का amazing designed बॉक्स को अपने ब्लॉग वेबसाइट मे ऐड कर सकते है और अपने साइट को अट्रैक्टिव और अमेजिंग डिज़ाइन बना सकते है

उम्मीद है आपको हमारा ये पोस्ट ब्लॉकquote Design kaise kare पसंद आया पोस्ट पसंद आए तो अपना कीमती फीडबैक देना ना भूले आपको लगे की ये पोस्ट वास्तव मे हेल्पफुल है तो इसे सोशल साइट्स पर जरूर शेयर करें