ब्लॉगच्या लेखातील अक्षरांचा साईज व रंग कसा बदलावा? | आगळं! वेगळं !!!

ब्लॉगच्या लेखातील अक्षरांचा साईज व रंग कसा बदलावा?

तुमच्या ब्लॉगवरील लेखासाठी वापरलेला फॉन्टचा साईज जर लहान असेल किंवा मोठा असेल तर ब्लॉगच्या वाचकांना ते गैरसोयीचे ठरू शकते. अशावेळी जर तुम्ही तुमच्या ब्लॉगवर फॉन्टचा साईज लहान अथवा मोठा करण्याची सुविधा उपलब्ध करून दिली तर वाचकांना ते सोईचे तर ठरेलच पण वाचक समाधानी झालेले पाहून तुम्हालाही आनंद होईल. आणि या सुविधेसोबत फॉन्टचा रंग बदलण्याचीही सोय असेल तर ते अधिकच रंगतदार होईल.

अशी सोय उपलब्ध करून देणारे एक विजेट तुमच्या ब्लॉगमध्ये जोडून तुम्ही ही सुविधा वाचकांसाठी उपलब्ध करून देऊ शकता.

हे विजेट लेखामधील मजकुराचा रंग काळा, पांढरा, निळा व राखाडी (ग्रे) रंगात बदलण्याची सोय उपलब्ध करून देते.

हे विजेट लेखामधील मजकुराचा साईज १०, १२, १४ व १६ याप्रमाणे लहान मोठा करण्याची सुविधा उपलब्ध करून देते.

अगदी सोप्या पद्धतीने तुम्ही हे विजेट तुमच्या ब्लॉगमध्ये जोडू शकता.

१. तुमच्या ब्लॉगच्या अकाऊंटमध्ये लॉगइन व्हा.
२. डॅशबोर्ड--> डिझाईन-->एडीट एचटीएमएल हा पर्याय निवडा.
३. स्क्रोलडाऊन करून ब्लॉगच्या टेम्प्लेटमधील </head> हा टॅग शोधा.
४. खालील कोड कॉपी करून </head> या टॅगच्या "आधी" पेस्ट करा.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

५. टेम्प्लेट सेव्ह करा.
६. आता Page Elements मध्ये जाऊन तुम्हाला जेथे हा विजेट लावयचा आहे तेथील 'Add a Gadget' हा पर्याय निवडा.
७. त्यातून 'HTML/Javascript' हा पर्याय निवडून खालील कोड कॉपी करून पेस्ट करा.

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #FFFFFF !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Change Font Color </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Change Font Size </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

८. सेव्ह करा.

आणि आता फॉन्टचा साईज लहान/मोठा करण्याची तसेच रंग बदलण्याची सुविधा उपलब्ध करणारे विजेट तुमच्या ब्लोगवर दिसू लागेल.

4 Comments: