ब्लॉग पर 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://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
STYLE 1
<div class='h4t1'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-1 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 2
<div class='h4t2'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-2 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 3
<div class='h4t3'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-3 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 4
<div class='h4t4'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-4 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 5
<div class='h4t5'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-5 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 6
<div class='h4t6'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-6 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 7
<div class='h4t7'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-7 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
STYLE 9
<div class='h4t9'>
HTML Code Here
</div>
HTML Code Here
</div>
ध्यान दे :- पोस्ट में जहा भी Style-9 का उपयोग करना चाहते है वहा ऊपर बताया कोड डाले:-
Screenshot
Your HTML Css Code Here
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
<link rel="stylesheet" href="https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style.css" type="text/css" />
Now you have done !!!
:)
:(
;)
:D
;;-)
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
:-S
#:-S
7:)
:((
:))
:|
/:)
=))
O:-)
:-B
=;
:-c
:)]
~X(
:-h
:-t
8-7
I-)
8-|
:-a
:-$
[-(
:O)
8-
2:-P
(:|
=P~
#-o
=D7
:-SS
@-)
:^o
:-w
7:P
2):)
X_X
:!!
\m/
:-q
:-bd
^#(^
:ar!
Post A Comment
| 
| 
बहुत ही शानदार व उपयोगी जानकारी है, मैने तो प्रयोग कर भी लिया।
ReplyDeleteblockquote effect में यदि चौडाई अधिक चाहिए तो क्या करें?
STYLE 2 में अनावश्यक काला हिस्सा दिखता है बेक इमेज ही चौडाई में विस्तृत हो तो अच्छा लगे
STYLE 5 की चौडाई अधिक होनी चाहिए
सादर,
सुज्ञ जी , नवज्योत जी अगर आप blockquote effect की चौडाई अधिक चाहते है तो नीचे बताये गए कोड का उपयोग करे , ऊपर tutorial में बताये गए कोड में चौडाई 400 px है अतः इसे संशोधित करके नीचे बताये गए कोड में चौडाई 500 px कर दी गयी है... आशा है आपकी समस्या का समाधान हो गया होगा॥ :)
Deletetutorial में बताये गए css कोड में लिंक url को नीचे बताई गयी लिंक से बदले
https://piushtrivedi.googlecode.com/svn/trunk/css/blockquote-style-2.css
अब बात बन गयी. अब यह और भी अच्छा लग रहा है. धन्यवाद पियूष जी.
Deleteचौडाई से ब्लॉककोट और भी मनोरम हो गया, धयान देकर सुविधायुक्त करने का आभार
Deleteआपकी इस प्रविष्टी की चर्चा आज के चर्चा मंच पर की गई है। चर्चा में शामिल होकर इसमें शामिल पोस्ट पर नजर डालें और इस मंच को समृद्ध बनाएं.... आपकी एक टिप्पणी मंच में शामिल पोस्ट्स को आकर्षण प्रदान करेगी......
ReplyDeleteबहुत ही काम की ट्रिक। धन्यवाद आपका।
ReplyDelete