webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

Hindi Tech Blog के लिए 7 Blockquote Effect

Posted :| Posted By: Piush Trivedi | Labels: 17 Comments
Posted by: Piush
Pin It


ब्लॉग पर HTML,CSS कोड आदि दिखाने के लिए कुछ blockquote effect । blockquote effect का उपयोग आम तौर पर hindi tech blog , में tech Tips हेतु html , css कोड को दिखाने के लिए किया जाता है लेकीन अपनी सुविधा अनुसार हर कोई इसे अपने blog पर लगा सकता है । नीचे कुछ blockquote डिजाईन बताये गए है साथ ही लाइव डेमो भी दिखाया गया है , आशा है आपको पसंद आयेंगे... इन्हे आसानी से blog पर लगाया जा सकता है , बस नीचे दिए गए चरणों का पालन करें :-


  • सबसे पहले ब्लॉगर खाते में प्रवेश करे , यहाँ जाये Blogger--->Design--->Edit HTML
  • अब ऊपर expand widget template cheakbox पर क्लिक करे
  • अब keyboard की ctrl+F कुंजी दबाये व यहाँ </head> कोड तलाशे
  • अब इस कोड के ठीक बाद में नीचे दिया गया पूरा कोड यथावत डाल दे

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />


STYLE 1

<div class='h4t1'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-1 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 2

<div class='h4t2'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-2 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 3

<div class='h4t3'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-3 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 4

<div class='h4t4'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-4 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 5

<div class='h4t5'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-5 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 6

<div class='h4t6'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-6 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 7

<div class='h4t7'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-7 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!



STYLE 9

<div class='h4t9'>

HTML Code Here

</div>

ध्यान दे :- पोस्ट में जहा भी Style-9 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-

Screenshot


Your HTML Css Code Here

<link rel="stylesheet" href="https://googledrive.com/host/0B9BypLLMMzvONWVBU1QwLWNGaTQ" type="text/css" />

Now you have done !!!


Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

Post A Comment Blogger Disqus


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech


Top Commen tor Ask A Question Follow

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
और दिखाए

17 comments:

  1. बहुत ही शानदार व उपयोगी जानकारी है, मैने तो प्रयोग कर भी लिया।

    blockquote effect में यदि चौडाई अधिक चाहिए तो क्या करें?
    STYLE 2 में अनावश्यक काला हिस्सा दिखता है बेक इमेज ही चौडाई में विस्तृत हो तो अच्छा लगे
    STYLE 5 की चौडाई अधिक होनी चाहिए
    सादर,

    ReplyDelete
    Replies
    1. सुज्ञ जी , नवज्योत जी अगर आप blockquote effect की चौडाई अधिक चाहते है तो नीचे बताये गए कोड का उपयोग करे , ऊपर tutorial में बताये गए कोड में चौडाई 400 px है अतः इसे संशोधित करके नीचे बताये गए कोड में चौडाई 500 px कर दी गयी है... आशा है आपकी समस्या का समाधान हो गया होगा॥ :)
      tutorial में बताये गए css कोड में लिंक url को नीचे बताई गयी लिंक से बदले

      https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style-2.css

      Delete
    2. अब बात बन गयी. अब यह और भी अच्छा लग रहा है. धन्यवाद पियूष जी.

      Delete
    3. चौडाई से ब्लॉककोट और भी मनोरम हो गया, धयान देकर सुविधायुक्त करने का आभार

      Delete
  2. आपकी इस प्रविष्टी की चर्चा आज के चर्चा मंच पर की गई है। चर्चा में शामिल होकर इसमें शामिल पोस्ट पर नजर डालें और इस मंच को समृद्ध बनाएं.... आपकी एक टिप्पणी मंच में शामिल पोस्ट्स को आकर्षण प्रदान करेगी......

    ReplyDelete
  3. बहुत ही काम की ट्रिक। धन्यवाद आपका।

    ReplyDelete
  4. पियूष जी क्या आप इस blockquote effect में width बढ़ाने की ट्रिक बता सकते है. क्योंकि सुज्ञ जी ने जैसा बताया वैसा ही हो रहा है.
    थोड़ी सी चौड़ाई बढ़ाने की जरूरत है.

    ReplyDelete
  5. Nice artical sir apne Ek Acchi Jankari Ka Sajha Karaya Hai NonuPye

    ReplyDelete
  6. thanks you for sharing this article with us it helps me a lot can anyone tell me aboutAmerican eagle credit card

    ReplyDelete