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

Hindi Tech Blog के लिए 7 Blockquote Effect

Posted : at | 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 !!!


More From Web

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


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में 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. सुज्ञFebruary 20, 2012 at 3:38 PM

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

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

    ReplyDelete
    Replies
    1. पीयूष त्रिवेदी February 27, 2012 at 1:10 PM

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

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

      Delete
    2. AnonymousMarch 1, 2012 at 5:28 PM

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

      Delete
    3. सुज्ञMarch 27, 2012 at 3:38 PM

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

      Delete
  2. Atul ShrivastavaFebruary 21, 2012 at 12:33 AM

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

    ReplyDelete
  3. AnonymousFebruary 22, 2012 at 1:15 PM

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

    ReplyDelete
  4. AnonymousFebruary 27, 2012 at 10:52 AM

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

    ReplyDelete
  5. अभिमन्‍यु भारद्वाज April 15, 2013 at 4:57 PM

    बढिया जानकारी है हिन्दी तकनीकी ब्लाग के क्षेत्र में तेजी प्रगति करता एक ब्लाग
    एक बार अवश्य देखें
    मेरी नई पोस्ट हैं
    Free Webcam Motion PC Games like xbox ( मोशन तकनीक की सहायता से कम्यूटर पर बिना कीबोर्ड और माउस के गेम खेलें)
    अब आपकी ऑखों के इशारे पर चलेगा आपका कम्यूटर
    हार्डडिस्क में स्टोर होगा 1 अरब जी0बी0 डाटा
    इसी प्रकार के कुछ अन्य रोचक लेखों को पढने तथा कुछ नया जानने के लिये अभी क्लिक कीजिये

    ReplyDelete
  6. Webcollection.co.inFebruary 3, 2019 at 7:29 AM

    Very nice sir thanku....
    Visit Science Notes

    ReplyDelete
  7. Aman ShrivastavFebruary 25, 2019 at 12:30 PM

    bahut badhiya hai post nice blog

    ReplyDelete
  8. AnonymousJuly 5, 2019 at 10:07 PM

    bahut hi acha blog h yeh.
    Ontechpro

    ReplyDelete
  9. AnonymousJuly 5, 2019 at 10:08 PM

    Youtube se paisa kaise kamaye

    ReplyDelete
  10. UnknownJuly 6, 2019 at 1:00 PM

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

    ReplyDelete
  11. EtsyOnlineShopApril 30, 2020 at 4:04 PM

    Very informative you can also read it also here

    Click Here




    Very informative you can also read it also here


    Click HERE

    ReplyDelete
  12. Ashok KumarMay 31, 2020 at 12:34 PM

    very useful content thanks ||

    ReplyDelete
  13. Ashish MishraMay 31, 2020 at 3:01 PM

    Spot News 18 Is An Online News Website. At Spot News 18 You Find All The Late

    ReplyDelete
  14. डॉ. रूपचन्द्र शास्त्री 'मयंक'June 17, 2020 at 4:20 PM

    उपयोगी जानकारी।

    ReplyDelete
  15. Subham SahuJuly 9, 2020 at 3:48 PM

    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.

    ReplyDelete
  16. Career of AssamAugust 4, 2020 at 7:29 PM

    Really good post I hope everyone will benefit for this information Thankyou for Sharing.

    ReplyDelete
  17. Career of AssamAugust 4, 2020 at 7:29 PM

    Really good post I hope everyone will benefit for this information Thankyou for Sharing.

    ReplyDelete
  18. UnknownJanuary 8, 2021 at 3:54 PM

    Awesome
    skandsolution

    ReplyDelete
  19. KhemuFebruary 22, 2021 at 9:22 PM

    बहुत अच्छा समझाया है आपने

    ReplyDelete
  20. ROHITMarch 2, 2021 at 8:57 PM


    I like this article its really helpful

    Song Download

    Song Mp3 Download

    MSG SONGS

    ReplyDelete
  21. NairaMay 2, 2021 at 9:59 PM

    The informayion is really helpful. Visit

    ReplyDelete
  22. NairaMay 19, 2021 at 11:26 PM

    Nice post you should add more blockquotes.
    click here
    Online hindi typing

    ReplyDelete
  23. Choi Dal-PoJune 2, 2021 at 6:28 PM

    Mod Apk of Ludo King Mod Apk of Ludo King Mod Apk of Ludo King Mod Apk of Ludo King

    ReplyDelete
  24. Choi Dal-PoJune 2, 2021 at 6:30 PM

    Ludo King Mod Application
    Ludo King Mod Application
    Ludo King Mod Application

    ReplyDelete
  25. Digital BloggerJune 29, 2021 at 6:36 PM

    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

    ReplyDelete
  26. $$$$July 8, 2021 at 6:09 PM

    New Gujarati ringtone

    ReplyDelete
  27. Game PowerJuly 18, 2021 at 3:00 PM

    nice minecraft apk indir free download

    ReplyDelete
  28. Unow22October 13, 2021 at 12:53 AM

    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.

    ReplyDelete
  29. Ringtone DownloadNovember 4, 2021 at 1:15 PM

    Krishna flute Ringtone Download

    ReplyDelete
  30. X-MENJune 2, 2022 at 9:50 AM

    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.

    ReplyDelete
  31. FuhrerscheinSeptember 10, 2022 at 1:38 AM

    Very intersting. thank you!
    teacup puppies for sale
    beagle puppies for sale
    chihuahua puppies for sale
    english bulldogs for sale
    pomeranian puppies for sale
    toy poodle for sale
    yorkie puppies for sale

    https://smallpawfurbabies.com/

    ReplyDelete
Subscribe to: Post Comments (Atom)