আসসালামু অলাইকুম বন্ধুরা সবাই কেমন আছেন আশাকরি সবাই খুব ভালো ও আল্লাহ্‌ এর রহমতে সুস্থ আছেন । বেশি কথা বলবো না আজকে আপনি আপনাদের সাথে শেয়ার করবো দারুন মজার একটি ব্লগার ওয়েডগেট । আজকের এই ব্লগার ওয়েডগেট ব্যবহার করে আপনি আপনার ব্লগ ভিজিটর দের সাহায্য করতে পারবেন । কিভাবে ? এখুন আপনার ব্লগ ভিজিটর ইছে করলে আপনি ব্লগের ফন্ট কালার , ফন্ট টেক্সট , ফন্ট সাইজ পরিবর্তন করে নিজের ইছে মতো ব্যবহার করতে পারবে । তো আপনি ভয় পাবেন না । কারন এটা শুধু তাদের নিজ নিজ ক্ষেত্রে ব্যবহার করতে পারবে আপনার থিম এর কোন কিছুই পরিবতন হবে না । তাহলে নিচে থেকে দেখে নিন কিভাবে কাজটি করবেন সঙ্গে ডেমো ।









☞ উওরের ডেমোতে ক্লিক করুন তাহলেই উপরের ফটোর মতো একটি বক্স পাবেন তাহলেউ বাকিটা বুঝতে পারবেন ।



কিভাবে আপনার ব্লগে এই ওয়েডগেট যুক্ত করবেন !


প্রথমে আপনার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template Edit HTML এ ক্লিক করুন ।

এবার আপনার কীবোর্ড থেকে CTRL+F প্রেস করে নিচের ট্যাগ খুজুন ।


</body> or <body>


উপরের দুটির মধ্যে যেকোনো একটির উপরে নিচের কোড গুলো কপি পেস্ট করুন ।



<script src='http://softglad.at.ua/widgets/theme-style-cookie.js' type='text/javascript'/>
<script type='text/javascript'>
/**
 * Theme Style Switcher by Ashiq (SOFTGLAD)
 * URL: https://www.softglad.com
 */

//<![CDATA[
var expiredStyle = 7000,
    dbs = document.body.style;

// background switcher
function bgSwitch(v) {
    dbs.background = v;
    createCookie('bgstyle', v, expiredStyle);
}

// font switcher
function fontSwitch(v) {
    dbs.fontFamily = v;
    createCookie('fontstyle', v, expiredStyle);
}

// font sizer
function changeFontSize(v) {
    dbs.fontSize = v + 'px';
    createCookie('fontsize', v, expiredStyle);
}

// color switcher
function fontColor(v) {
    dbs.color = v;
    createCookie('fontcolor', v, expiredStyle);
}

if (readCookie('bgstyle')) {
    dbs.background = readCookie('bgstyle');
}
if (readCookie('fontstyle')) {
    dbs.fontFamily = readCookie('fontstyle');
}
if (readCookie('fontsize')) {
    dbs.fontSize = readCookie('fontsize') + 'px';
    document.getElementById('fontSizer').value = readCookie('fontsize');
}
if (readCookie('fontcolor')) {
    dbs.color = readCookie('fontcolor');
    document.getElementById('fontColorer').value = readCookie('fontcolor');
}

function resetStyle() {
    eraseCookie('bgstyle');
    eraseCookie('fontstyle');
    eraseCookie('fontsize');
    eraseCookie('fontcolor');
    window.location.reload(1);
}
//]]>
</script>



এবার Save Template এ ক্লিক করে বেরিয়ে আসুন । নিচের স্টেপ দেখুন ।

উপরের কাজটি ভাবে করা হলে আবার আপনার ড্যাশবোর্ডে যান , তারপর Layout যান ।

এবার Add a Gadget HTML/Javascrip এ ক্লিক করে নিচের কোড গুলো বসিয়ে দিন ।



<style>
#stylechanger {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Arial,Sans-Serif;
  border-collapse:collapse;
}

#stylechanger th,
#stylechanger td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}

#stylechanger th.title {
  background-color:#33AFE0;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family: Arial,Sans-Serif;
  color: #FFF;
}

#stylechanger select,
#stylechanger input[type="text"] {
  width:130px;
  padding:2px;
  font:bold 11px Arial,Sans-Serif;
  display:block;
  margin:0 0 0;
  height:24px;
  outline: 0;
}

#stylechanger select option {
  padding:5px 10px;
  cursor:pointer;
}

#stylechanger button {
  font:normal 11px Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}

#stylechanger #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}

#stylechanger #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}

#stylechanger input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>

<table border="0" id="stylechanger">
    <tr><th class="title" colspan="2">Background Color Changer</th></tr>
    <tr>
        <td colspan="2">
            <div id="bgColorer">
                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Font Type</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected />--
                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman
                <option value="Georgia,Serif" />Georgia
                <option value="Arial,Sans-Serif" />Arial
                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans
            </select>
        </td>
    </tr>
    <tr><th>Text Color</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Font Size</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>Reset</th>
        <td><button onclick="resetStyle();">Reset</button></td>
    </tr>
</table>



ব্যাস Save এ ক্লিক করে আপনার ব্লগ ভিজিট করুন ।



আশাকরি কাজটি করতে আপনি সফল হয়েছেন এবং আপনার পছন্দ হয়েছে !



☞ তাহলে আজকের মতো এই পর্যন্ত এই ধরনের পোস্ট আপনার পছন্দ হলে অবশ্যই যানাবেন । আজকের পোস্টটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । ভালো থাকবেন সুস্থ থাকবেন সব সময় আমাদের সাথেই এবং প্রতিদিন আপডেট পোস্ট পেতে থাকুন । আল্লাহ্‌ হাফেজ ।

শেয়ার করুন :→

একটি মন্তব্য পোস্ট করুন Blogger

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

 
Top
Blogger Widgets