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

Hindi Tech Blog के लिए 7 Blockquote Effect

Posted :| Posted By: Piush Trivedi | Labels: 62 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

62 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. बहुत ही शानदार व उपयोगी जानकारी है, मैने तो प्रयोग कर भी लिया।

    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
  7. Spot News 18 Is An Online News Website. At Spot News 18 You Find All The Late

    ReplyDelete
  8. 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
  9. आपका ब्लॉग मुझे बहुत अच्छा लगा,आपकी रचना बहुत अच्छी हैं।

    ReplyDelete
  10. The informayion is really helpful. Visit

    ReplyDelete
  11. Best Sad Shayari in Hindi For Whatsapp and Facebook.

    ReplyDelete
  12. Ludo King is Indian Board Game That Played By Anyone Who Want, Here Some Vip features of Ludo King Mod App That User Want to Use Then Here Download Link of Ludo King Modified Application

    ReplyDelete
  13. 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
  14. Krishna Ringtone Mp3 download and Krishna Flute Ringtone Mp3 or M4r.

    ReplyDelete
  15. Download Best Collection of Rajasthani Ringtones Mp3(Android) or M4r(iPhone).

    ReplyDelete
  16. Download Trending Ringtones for Android or iPhone, Feel the World With Music, Ringtone Download That Best For You. with ringtonefly

    ReplyDelete
  17. Download Latest Collection of Gujarati Ringtones Mp3 (Android) or M4r (iPhone) 2021.

    ReplyDelete
  18. Download Best and Latest Collection of Rajasthani Ringtones Mp3 (Android) or M4r (iPhone) 2021.

    ReplyDelete
  19. Download iPhone Original Ringtone Mp3 and download iPhone 6s plus and other iPhone Ringtones version latest collection of 2021.

    ReplyDelete
  20. Krishna Ringtone Download Mp3 and Krishna Flute Ringtone Download Mp3 (Android) or M4r (iPhone) 2021.

    ReplyDelete
  21. Download Best Telugu Ringtones and Telugu Love ringtone Mp3 for Android or iPhone(M4r) latest collection 2021 for free.

    ReplyDelete
  22. 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