रविवार, 26 फ़रवरी 2012

Newer Post, Older Post लिंक को Post Title से बदले

blogger-blogspot-older-posts-newer-post-link-with-titlenewer post , older post लिंक ब्लॉग पर पाठको को बिना पोस्ट प्रष्ट को छोड़े अगले प्रष्ट पर जाने हेतु आवश्यक है। इसी कड़ी में आज hindi4tech के इस लेख में बताया गया है के कैसे newer post, older post लिंक को post title से बदला जाये .. नीचे बताई गयी स्क्रिप्ट को ब्लॉग के sidebar विजेट में कही भी डाल कर परिवर्तन सेव करे ... विडजेट की खासियत यह की ब्लॉग पर पोस्ट पृष्ट पर दिखने वाली newer post , older post लिंक को post title से बदला जा सकता है ॥ विजेट को ब्लॉग पर ले जाने से पहले screenshot देखे की यह आपके ब्लॉग पर किस तरह दिखाई देगा।

Live Demo





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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

ध्यान दे :-अगर आपकी ब्लॉग template में Ajax 1.4.4 jQuery script पहले से ही उपलब्ध है तो दर्शाए गए script कोड को अपनी ब्लॉग template में डाले

विजेट को ब्लॉग पर कैसे ले जाए
  • यहाँ जाये Blogger--->Design--->Page Element
  • यहाँ Add a Gadget पर क्लिक करे
  • यहाँ html/javascript आप्शन चुने
  • नीचे बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

<!-- Add Newer, Older and Home Links With Post Titles by hindi4tech.blogspot.com -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">

$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>
<!-- Add Newer, Older and Home Links With Post Titles by hindi4tech.blogspot.com -->

All In One Share Box Widget for Blogger/blog

ब्लॉग पर share box widget लगाये । hindi4tech के do you like box, social bookmarking widget की तरह ही इस विजेट में भी facebook, twitter, googleplus link के साथ ही email subscribtion box भी उपलब्ध है । विजेट को आसानी से ब्लॉग पर ले जाया जा सकता है , नीचे बताई गयी प्रक्रिया अपनाये ।

Screen Shot




विजेट ब्लॉग पर ले जाये

  • यहाँ जाये Blogger--->Design--->Page Element
  • यहाँ Add a Gadget पर क्लिक करे
  • यहाँ html/javascript आप्शन चुने
  • नीचे बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

<style type="text/css">.h4tbar{width:300px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lZEarA0LWfcrUM4NKzR63MxSt8nkRagXhJ7nrG9Qst0er9yn3Woxy6E76fdg3a-sS5_eFcMvKaqXQxTyjs28oD_ufg3Qjd7-p3sfzgaXBm5ZpOPTWchNA9vBz9g5fT6OeXzqL23DykMX/s400/%255Bwww.hindi4tech.blogspot.com%255Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}.h4tbar .h4t-credit{}.h4tbar .h4t-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.h4tbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif08R2wb6hstv2QHkP2z982V48zKElzau6rb2sQB1TEOcefcMsO-k6Hj8_0c97IzTiCOccPSFcaLi2GK3zROZ95JsQexdeH5awAp1zkbbe7DzNQiR-d-Dp9sQrGPMhx19htwfHoUKYwo3H/s400/%255Bwww.hindi4tech.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.h4tbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.h4tbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.h4tbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.h4tbar .subicons a{text-decoration:none;color:#333333;}.h4tbar .subicons a:hover{text-decoration:underline;color:#333333;}.h4tbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-y1LtF383ygrA3aUJkvKnczcm8BZzQahCsQmEJk0eKBMt-oZzAH0C-Yd1F2a8wvDNH1GKfSUg4grhJA1h8qWTmwcIVe7Pv0zXBa8aql1zYPZDJxbIRBBsCDFNunXIzmEtKW3KvlR_xaA/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-y1LtF383ygrA3aUJkvKnczcm8BZzQahCsQmEJk0eKBMt-oZzAH0C-Yd1F2a8wvDNH1GKfSUg4grhJA1h8qWTmwcIVe7Pv0zXBa8aql1zYPZDJxbIRBBsCDFNunXIzmEtKW3KvlR_xaA/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-y1LtF383ygrA3aUJkvKnczcm8BZzQahCsQmEJk0eKBMt-oZzAH0C-Yd1F2a8wvDNH1GKfSUg4grhJA1h8qWTmwcIVe7Pv0zXBa8aql1zYPZDJxbIRBBsCDFNunXIzmEtKW3KvlR_xaA/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-y1LtF383ygrA3aUJkvKnczcm8BZzQahCsQmEJk0eKBMt-oZzAH0C-Yd1F2a8wvDNH1GKfSUg4grhJA1h8qWTmwcIVe7Pv0zXBa8aql1zYPZDJxbIRBBsCDFNunXIzmEtKW3KvlR_xaA/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.h4tbar .emailsub .emailicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vdX-7rfiNQU7nBSrgI5tOPVYJkFA17jMhDDLaFwx8xDZRZoZixkLYrlIzDt-lGzzLTKkPquTgXqUMI9TReBlkN_FdyLoZM-HOF2Bv_0VtLrTWnHMogvABZ5g9ExnQAVj06EPzlqw8igp/s400/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.h4tbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.h4tbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.h4tbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div class="h4tbar"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/hindi4tech"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/hindi4tech?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a> </span>Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/hindi4tech" target="_blank"> RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/hindi4tech" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/hindi4tech" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Our All Updates In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</p></div><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hindi4tech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="hindi4tech" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><span class="h4t-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://hindi4tech.blogspot.com/" target="_blank" >Blogger Widgets &#62;&#62;</a></span></div></div> </div>

ध्यान दे :- हरे रंग में बताये गए कोड को बदलना ना भूले

शनिवार, 25 फ़रवरी 2012

Recent Comment Widget For Blogger Blog

recent-comments-with-avatarब्लॉग पर recent comment विजेट लगाये । ब्लॉग पर हाल ही की टिपनियो को दिखाने के साथ ही विजेट में अपनी सुविधा अनुसार फेर बदल कर ब्लॉग पर आसानी से रखा जा सकता है। विडजेट को अपने ब्लॉग पर ले जाने के लिए नीचे पक्रिया देखे । विजेट का लाइव डेमो यहाँ देखे




Live Demo





विजेट को ब्लॉग पर कैसे ले जाए

नीचे पूछी गयी सभी जानकारी को भरकर genrate बटन पर क्लिक करे फिर Add To Blogger बटन पर क्लिक करे फिर यहाँ जाए
  • Blogger--->Design--->Page Element
  • यहाँ Add a Gadget पर क्लिक करे
  • यहाँ html/javascript आप्शन चुने
  • पूरा कोड यहाँ डाल दे व विजेट सेव करे :))




रविवार, 19 फ़रवरी 2012

Hindi Tech Blog के लिए 7 Blockquote Effect

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

गुरुवार, 16 फ़रवरी 2012

Twitter Flying Bird Widget For Blogger

flying twitter bird for bloggerब्लॉग पर twitter flying bird लगाये । hindi4tech के अन्य विजेट की तरह ही इस विजेट की खासियत यह की इसमें twitter bird को कुछ awatar image के साथ रखा गया है। जिसमे आप अपनी सुविधा अनुसार awatar का उपयोग कर विजेट को अपने ब्लॉग पर रख सकते है। इस विजेट को अपने ब्लॉग पर ले जाने से पहले इसका लाइव डेमो देखे :-
Live Demo





विजेट को ब्लॉग पर कैसे ले जाए

  • कोड में twitter username की जगह अपने twitter user name डाले
  • Tweet this Text को बदले
  • अपने ब्लॉग हेतु एक twitter bird awatar चुने
  • अब "Generate"बटन पर क्लिक करे
  • अंत में Add to Blogger बटन पर क्लिक करे



Random Flying Bird Widget


ये तो हुई twitter bird की बात । नीचे एक और tutorial दिया गया है । इस tutorial में बताये गए flying विजेट की खासियत यह की यह विजेट flying bird में twitter और facebook दोनों ही bird दिखाता है । इसका लाइव डेमो नीचे देखे ।

ध्यान दे :- डेमो में twitter bird पहले दिखाई देगा जब पेज को रिफ्रेश किया जायेगा तो facebook bird दिखाई देगा।


Live Demo


विजेट को ब्लॉग पर कैसे ले जाए

  • कोड में twitter , Facebook Link की जगह अपने twitter, Facebook Url डाले
  • यहाँ जाये Blogger--->Design--->Page Element
  • यहाँ Add a Gadget पर क्लिक करे
  • यहाँ html/javascript आप्शन चुने
  • नीचे बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

<!-- START Twitter's birds & Facebook's birds -->

<script type="text/javascript">
bird_version=3;
your_facebook="http://www.facebook.com/USERNAME";
facebook_color=0; //default color 0-6;
your_twitter="http://twitter.com/USERNAME";
twitter_color=5; //default color 0-6;
view_bird='999999999'; //input 'no'>>not active & Restart View ; 'yes'>>always active ; number ('1')('2')...('99999') >> number display
bird_speed=17;
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B9BypLLMMzvOUVI0Vk5oWFRmUDA"></script>
<!-- END Twitter's birds & Facebook's birds -->


ध्यान दे :- ऊपर बताई गयी स्क्रिप्ट में twitter_color=5;  facebook_color=0; कोड में "5" , "0" की जगह आप अपने अनुसार twitter  bird  का कोड रख  सकते है नीचे image  में Twitter , Facebook bird  colour  हेतु कोड बताये गए है