Hindi Tech Blog के लिए 7 Blockquote Effect

Posted :| Posted By: Piush Trivedi | Labels: 36 Comments
Posted by: Piush

ब्लॉग पर 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

36 टिप्‍पणियां:


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech
:) :-) :)) =)) :( :-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

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

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

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

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

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

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

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

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

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

    जवाब देंहटाएं
  5. Is blog par mera pahla comment hai bahut badhiya post likhi hai aapne
    Maine aapke readers ke liye adsense apply karne ka sahi waqt kaun hota hai bahut hi achche se define kiya hai i hope ki aapko bhi pasand aayega.

    जवाब देंहटाएं
  6. Nice Article. Really good work. Writing skills also very nice. Amazing website.
    Thanks for provide such amazing content. Also checkout - call by value and call by reference in c

    जवाब देंहटाएं
  7. This is how drug metabolites end up in the hair strands and get embedded in the roots and shafts. So even the tips of your hair — unless it’s very long — may test positive for drugs that you consumed just a couple of days before the test. Hair testing can detect numerous drugs — both prescribed and illicit. It’s also very convenient, since most urine belts aren’t disposable, which means you can use them numerous times. This urine belt from Monkey Whizz comes with complete instructions on how to use it, and every other tool you’ll need including heating pads and applicators. This simple, handy device also comes with an elastic band that you wrap around your waist where you put your bag and tube to dispense that valuable synthetic liquid come your drug test.

    जवाब देंहटाएं
  8. Download # 1 Trending Mp3 Ringtones or M4r for Android & iPhone Devices, Make Your Personalization Easier with us, If You are Facing Below Issue Then RingtoneYoog is Only Made for Your Satisfaction.

    जवाब देंहटाएं