html/javascript gadget for blogger

হায় ব্লগার বন্ধুরা

wordpress.org এর মাধ্যমে তৈরি করা ব্লগগুলতে বিভিন্ন রকম প্লগিন ব্যবহার করা যায় । কিন্তু গুগল ব্লগারের মাধ্যমে তৈরি করা ব্লগে এরকম কোন প্লগিনই যুক্ত করা যায় না । যা গুগল ব্লগারের সবচেয়ে বড় সীমাবদ্ধতা । তবে গুগল ব্লগারের তৈরি ব্লগে কিছু HTML/JavaScript যোগ করে কিছু সুবিধা আদায় করা যায় । এরকমই কিছু গুরুত্বপূর্ণ HTML/JavaScript নিয়ে এলাম যা সকল ব্লগারের জন্য খুবই প্রয়োজনীয় । তাছাড়া কিভাবে HTML/JavaScript যোগ করতে হয় সেটিও দেখানো হলো ।

html/javascript gadget for blogger

ব্লগে নতুন গ্যাজেট/gadget add করার পদ্ধতি

১.প্রথমে ব্লগার.কম এ লগইন করে Dashboard/ড্যাশবোর্ড থেকে তোমার ব্লগের লেআউট/layout এ প্রবেশ কর ।

২.সেখানে add a gadget বা একটি গ্যাজেট যোগ করুন ট্যাবে ক্লিক করে সেখান থেকে HTML/ JavaScript নির্বাচন কর । তারপর কাঙ্খিত HTML/JavaScript কোড সামগ্রির মধ্যে কপি পেস্ট করে সেভ করে নিলেই হবে । বুঝতে অসুবিধা হলে নিচের চিত্রটি খেয়াল কর ।

ব্লগে নতুন গ্যাজেট/gadget add করার পদ্ধতি

ব্লগে সময় ও তারিখ Widget যোগ করার পদ্ধতি

ব্লগে সময় ও তারিখ Widget যোগ করার জন্য প্রথমে https://24timezones.com ওয়েব সাইটে প্রবেশ কর । সেখান থেকে তুমি তোমার পছন্দ মতো Digital/Analog/ Text Clock বাচাই করে Configuration এ প্রয়োজনীয় তথ্য দিয়ে নিচের Your widget code টেবিল হতে তোমার কোড কপি করে প্রথমে দেখানো গ্যাজেট যোগ করার পদ্ধতি অনুসরণ করে add করে নাও সময় ও তারিখ Widget ।

আরো জানতে পারো

আইফেল টাওয়ার প্রতি বছর ১৫ সে.মি বৃদ্ধি পায় কেন ?

ব্লগে চলন্ত লেখা (scrolling text) যোগ করার পদ্ধতি

ব্লগের পোস্টের ভিতরে Scrolling text যুক্ত করতে হলে, প্রথমে যেখানে Scrolling text যুক্ত করতে চান সেখানে কিছু সংখ্যা দিয়ে চিহ্নিত করে নিন । অতঃপর পোস্টটিকে HTML View তে Open করে নিন । অতঃপর সংখ্যা দিয়ে চিহ্নিত করা স্থানে কাঙ্খিত Scrolling text এর HTML কোডটি বসিয়ে দিন । আর যদি Widget ব্লগের Widget হিসেবে Scrolling text যুক্ত করতে চান তাহলে পূর্বে বর্ণিত পদ্ধতি অনুসরণ করুণ ।

১. right to left with border

HTML কোড

 <style>
.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%); 		
 }
 100% {
 transform: translateX(-100%); 
 }
}
</style>
<div class="scroll-left">
<p>অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না</p>
</div>

ফলাফল দেখুন

অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না

sorry বন্ধুরা উপর থেকে HTML কোড কপি করতে সমস্যা হলে ডাউনলোড কর এখান থেকে

২.right to left without border

HTML কোড

<div style="background-color:yellow;color:blue;"><marquee>অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না<h4></h4></marquee></div>

ফলাফল দেখুন

অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না

sorry বন্ধুরা উপর থেকে HTML কোড কপি করতে সমস্যা হলে ডাউনলোড কর এখান থেকে

৩. left to right without border

HTML কোড

 <div style="background-color:yellow;color:blue;"><marquee behavior="scroll" direction="right">অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না</marquee></div>

ফলাফল দেখুন

অন্বেষা.নেট কখনো তার পাঠককে অসম্পূর্ণ বা অসত্য তথ্য দেয় না

sorry বন্ধুরা উপর থেকে HTML কোড কপি করতে সমস্যা হলে ডাউনলোড কর এখান থেকে।

background: yellow;

color: orange

এ অংশে পরিবর্তন করার মাধ্যমে টেক্সটের কালার এবং বেকগ্রাউন্ড কালার পরিবর্তন করতে পারবে । এ ধরনে আরো অসংখ্য HTML কোড পেতে চলে যাও এখানে

আরো জানতে পারো

FAQ কি ? কেন ব্লগ পোস্টে FAQ করবেন ? কীভাবে ব্লগ পোস্টে FAQ করতে হয় ? জানুন বিস্তারিত

ব্লগের লেখা কপি/পেস্ট (copy/past )বন্ধ করার উপায়

কয়েক দিন খেটেখুটে একটি আর্টিকেল তৈরি করে পোস্ট করলে ব্লগে কিন্তু দেখা গেল হুবহু তোমার লেখাটি অন্য কেউ নিজের নামে চালিয়ে দিল অন্য কোথাও তো বল কেমন লাগবে তখন । এ ধরেণের ডিজেটাল চুরি হতে নিজের ব্লগকে রক্ষা করতে হলে ব্লগের আর্টিকেল কপি করা বন্ধ করতে হবে তোমাকেই তার জন্য নিচের

HTML কোড

 <script src='demo-to-prevent-copy-paste-on-blogger_files/googleapis.js'></script>
<script type='text/javascript'>
if (typeof document.onselectstart!="undefined" ) {
document.onselectstart=new Function ("return false" );
} else {
document.onmousedown=new Function ("return false" ); document.onmouseup=new Function ("return true" );
}
</script>

কপি করে প্রথমে দেখানো গ্যাজেট যোগ করার পদ্ধতি অনুসরণ করে add করে নিতে হবে । ব্যস নিরাপদ হয়ে গেল তোমার পরিশ্রম ।

sorry বন্ধুরা উপর থেকে HTML কোড কপি করতে সমস্যা হলে ডাউনলোড কর এখান থেকে

আরো জানতে পারো

তৈরি করুণ ব্লগের Contact Us প্রফেশনাল ফরম । পৃথিবীর সবচেয়ে সহজ পদ্ধতিতে ।

ব্লগ URL থেকে m=1 রিমুভ করার উপায়

সাধারণত ব্লগ সাইটকে মোবাইলে ভিজিট করার সময় ওয়েব সাইটের URL এর পরে m=1 যুক্ত হয় অর্থ্যাৎ মোবাইল ডিভাইসে URL রিডাইরেক্ট হয়ে যায় । যেমন কম্পিউটারে (https://www.onnesa.net) এরকম দেখালেও মোবাইলে সেটি রিডাইরেক্ট হয়ে (https://www.onnesa.net/?m=1) হয়ে যায় ।

যা তোমার URL এর সৌন্দর্য নষ্ট করে । এছাড়া m=1 যুক্ত হওয়ার ফলে তোমার সাইটটি প্রফেশনাল দেখাবে না । এছাড়াও এটির অসংখ্য সমস্যা রয়েছে । যা সমন্ধে গুগলে সার্চ দিয়ে জেনে নিতে পার । এ সমস্যা থেকে মুক্তি পাওয়ার জন্য নিচের HTML কোডটি কপি করে নিয়ে Edit HTML এগিয়ে </head> ট্যাগের ঠিক উপরে কোডগুলো বসিয়ে দিন ।

HTML কোড

 <script type='text/javascript'>
//<![CDATA[
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
//]]>
</script>

sorry বন্ধুরা উপর থেকে HTML কোড কপি করতে সমস্যা হলে ডাউনলোড কর এখান থেকে

ব্লগে Text box যুক্ত করার পদ্ধতি ।

আমাদের অনেক সময় পোস্টের মধ্যে একটি নির্দিষ্ট লেখাকে box আকারে দেওয়া লাগে । উদাহরণ হিসেবে এই লেখার box টি দেখতে পারেন । পোস্টে এ ধরণের Text box যুক্ত করতে হলে নিচের HTML কোড কপি করে প্রথমে পোস্টের যেখানে Text box যুক্ত করতে চান সেখানে কিছু সংখ্যা দিয়ে চিহ্নিত করে নিন । অতঃপর পোস্টটিকে HTML View তে Open করে নিন । অতঃপর সংখ্যা দিয়ে চিহ্নিত করা স্থানে Text box এর HTML কোডটি বসিয়ে দিন ।

HTML কোড

 <p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">Add your text you want in the text-box here</p> </div>

Add your text you want in the text-box here এর স্থানে আপনি আপনার কাঙ্খিত লেখাটি দিয়ে দিন ।

HTML কোড দেওয়ার পদ্ধতি

আশা করি বিষয়টি বুঝিয়ে বলা লাগবেনা পোস্টটির প্রথম থেকে যদি দেখে থাকেন তাহলে দেখবেন আমি প্রতিটি HTML কোড একটি নির্দিষ্ট বক্সে দিয়েছে । HTML কোড এই ধরণের বক্সে দিলে সহজেই ভিজিটররা HTML কোডটি কপি করে নিতে পারে । তাই ব্লগ পোস্টে কোড দিতে হলে নিচের HTML কোডটুকু কপি করে নিন ।

HTML কোড

<textarea cols="70" readonly="" rows="10"> Enter your code </div>

Enter your code এর স্থানে আপনি আপনার কোডটি বসিয়ে দিন ।

আশা করি html/javascript গুলো তোমাদের কাজে আসবে । ভবিষ্যতে এ ধরনের ব্লগ সম্পর্কিত যে কোন টিপস এন্ড ট্রিকস পেতে আমাদের সাথে থাকো । gadget যোগ করতে বা html/javascrip ডাউনলোড করতে কোন রকম সমস্যা হলে কমেন্টের মাধ্যমে জানিয়ে দিলে আমার সবসময় কৃতজ্ঞ থাকবো ।

আরো জানতে পারো

ওয়েব সাইট মালিকদের জন্য সকল গুরুত্বপূর্ণ ওয়েব সাইটগুলো । Don't miss

অজানা ৭ টি বিষয় । যার ব্যাখ্যা বর্তমান বিজ্ঞান দিতে পারে না ।

পৃথিবীর বয়স কত ? কীভাবে নির্ণয় করা হলো পৃথিবীর বয়স

html/javascript gadget for blogger