दोस्तों आज का हमारे टॉपिक हे की आप अपनी blogger की website में Text Resizer Features किस तरह से add कर सकते हैं क्योंकि आपकी साईट पर जो भी users आते हैं वो अलग अलग device से आते हैं जेसे की कोई computer या laptop से तो कोई mobile से.
तो हर visitor को अपने हिसाब का Font Size चाहिए होता हे जिस से की वो आपकी पोस्ट को आसानी से पढ़ सके लेकिन अप्जी साईट पर जो font size होता हे ज़रूरी नहीं की वह सभी को ठीक लगे हो सकता हे की काफी users को font का size कम लगे.
Code Box With Copy To Clipboard Button In Blogger In Hindi
तो आज की इस पोस्ट में मैं आपको यही बताने वाला हूँ की आप अपनी blogger की साईट में Text Resizer Features किस तरह से add कर सकते हैं जिस से की कोई भी visitor आपकी पोस्ट को उसकी पसंद के font size में पढ़ सके इस तरह से आप अपनी साईट को और भी user friendly बना सकते हैं.
आपको पता ही होगा की wordpress में काफी तरह के plugins avilable हैं जिनकी help से आप अपनी wordpress साईट में इस Text Resizer Features को आसानी से add कर सकते हैं लेकिन blogger में हमें इसे add करने केलिए कुछ scripts का use करना पड़ता हे.तो आज में आपको इसी का तरीका भी बताने वाला हु और वो script भी देने वाला हु जिसके help से आप भी अपनी blogger साईट में Text Resizer Features को add कर सकते हैं .
तो दोस्तों इसके लिए आपको नीचे दी हुई कुछ steps को follow करना होगा :-
1.सबसे पहले आपको अपने blogger के deshbord में login कर लेना हे उसके बाद theme वाले section पर जाना हे और edit html पर क्लिक करके अपनी theme की coding को ओपन कर लेना है.
2.इसके बाद आपको अपनी theme की coding में सबसे नीचे आ जाना हे यहाँ पर आपको body का close teg मिलेगा </body> इस code के ठीक ऊपर आपको नीचे दिया गया code pest कर देना है.
<script>//<![CDATA[
$('').ready(function() {
$('#incfont').click(function(){
curSize= parseInt($('.post-body, .post-info').css('font-size')) + 2;
if(curSize<=22)
$('.post-body, .post-info').css('font-size', curSize);
});
$('#decfont').click(function(){
curSize= parseInt($('.post-body, .post-info').css('font-size')) - 2;
if(curSize>=12)
$('.post-body, .post-info').css('font-size', curSize);
});
});
//]]></script>
3.इसके बाद अब आपको CTRL+ F दबाना हे तो आपके सामने एक search box ओपन हो जायेगा इसमें आपको <body लिखकर search करना हे search करने पर आपको <body teg मिल जायेगा अब आपको इसके ठीक नीचे इस code को pest करना हे जो मैंने आपको नीचे दिया है.
<b:if cond='data:view.isSingleItem'><div class='At-texresizer'><div class='text-A+' id='incfont'><b>A+</b></div><div class='text-A-' id='decfont'><b>A-</b></div></div></b:if>
4.इसके बाद आपको इसी <body teg के ऊपर </head> teg देखने को मिलेगा अब आपको इस </head> teg के थी ऊपर इस code को pest कर देना हे जो मैंने आपको नीचे दिया है.
<style>
.At-texresizer { position: fixed; color: #ffffff; right: 30px; bottom: 180px; z-index:998;background-color:black; } #incfont, #decfont{font-size:18px;padding: 8px 10px; box-shadow: 0 0 40px 40px #e74c3c inset, 0 0 0 0 #e74c3c; box-sizing: border-box; background-color: transparent; border: 1px solid #fff;cursor: pointer;-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;}#incfont:hover, #decfont:hover { box-shadow: 0 0 10px 0 #e74c3c inset, 0 0 10px 4px #e74c3c;;margin-top: -2px; }
</style>
5.अब आपको अपनी theme को save कर देना हे बस दोस्तों हमारा काम हो चूका हे अब आप अपनी साईट की किसी भी पोस्ट को ओपन करके देख लीजिये आपकी पोस्ट के साइड में आपको + और – के आइकॉन नज़र आयेंगे अब कोई भी visitor + पे क्लिक करके font size को बड़ा कर सकता हे और – पे क्लिक करके font size को छोटा कर सकते हैं.
तो दोस्तों उम्मीद हे की आपको ये How To Install Text Resizer Features On Your Website पोस्ट ज़रूर पसंद आई होगी तो इस पोस्ट को अपने दोस्तों के साथ भी शेयर कीजियेगा.
Very nice sir