বিজয়ের মাসে ব্লগ নতুন রঙে সাজান!

আসসালামু আলাইকুম। বিজয়ের আগাম শুভেচ্ছা রইলো সকলের উদ্দেশ্যে। বিজয়ের মাসে আমরা চারিদিকে দেখি লাল-সবুজের সমাহার। লাল সবুজের রংয়ে শ্রদ্ধা জানাই সেই বীরদের যারা এই লাল সবুজের পতাকার জন্য প্রাণ দিয়েছিলো।

এই মহান দিনে আসুন আমাদের ব্লগগুলোকেও লাল আর সবুজ রংয়ে রাঙাই। লাল-সবুজের রংয়ে ব্লগস্পট দিয়ে তৈরি ব্লগ লাল-সবুজের রংয়ে রাঙানোর কিছু টিউটোরিয়াল ও গ্যাজেট।
প্রথমেই আপনি যেটা করতে পারেন সেটা হলো এই মাসের জন্য লোগোকে লাল সবুজের ইফেক্ট দেওয়া। ফটোশপে দক্ষ হলে লোগোটাকে একটু বদলে ফেলুন।
দ্বিতীয়ত, ব্লগের কালারগুলোতে পরিবর্তন আনুন। প্রথমেই ব্লগের টেমপ্লেটের ব্যাকআপ নিয়ে নিন। এরপর চলে যান লেআউট > টেমপ্লেট ডিজাইনারে। লেআউটের উপরের দিকে টেক্সটের মধ্যে এই অপশন পাবেন। সেখান থেকে Advanced এ যান। এবার পছন্দমত কালার সিলেক্ট করুন। সিএসএসে দক্ষ হলে ব্যাকগ্রাউন্ডে লাল-সবুজ গ্রাডিয়েন্ট দিতে পারেন। body{background লিখে সার্চ দিয়ে লেখার পরের "#f1f1f1" বা এই রকম অন্য কোন কোড দেখতে পাবেন। সেটা ডিলিট করে
linear-gradient(lime, #ff0000, lime);
এটা দিয়ে রিপ্লেস করে দিন। এটা অবশ্য শুধু তখনই হবে যদি টেমপ্লেট বক্সড ওয়াইড হয়। ফুল ওয়াইড টেমপ্লেটে হবে না।
এবার কয়েকটা গ্যাজেট লাগিয়ে নিন।

অ্যাডমিন কন্ট্রোল প্যানেল


এটা কেবল লগিন করলেই দেখা যাবে। বিজয়ের মাস উপলক্ষে সবুজ রংয়ে রাঙানো হয়েছে এই প্যানেল। সাইডবারে বসানোর জন্য ডিজাইন করা হয়েছে।

কোডঃ

<span class="item-control blog-admin">
<style>
/* Created and Designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#controlere ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#controlere li {
float: down;
}
#controlere a:link{
display: block;
width: 120px;
font-weight: bold;
color: red;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: siyam rupali;
}
#controlere a:visited {
display: block;
width: 120px;
font-weight: bold;
color: red;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: siyam rupali;
}
#controlere a:hover, a:active {
background-color: #7A991A;
color: black;
}
</style>
<div id='controlere'>
<center><h4>স্বাগতম!</h4></center></b>
<center><img
border="0"
height="128"
src="http://3.bp.blogspot.com/-v21ysbNLjes/VgqpZ80z_qI/AAAAAAAAAUo/WXIyNcYjciU/s1600/New%2BBitmap%2BImage%2B%25284%2529.jpeg"
width="124"
/></center>
</br>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#editor/src=header">নতুন টিউন</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#allposts">সকল টিউন</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#basicsettings">সেটিংস</a></li>
<li><a href="http://www.blogger.com/logout.g">লগ আউট</a></li>
<li><a href="#">আমাদের সম্পর্কে</a></li>
</ul>
</div>
</span>
XXXX গুলো আপনার ব্লগ আইডি দিয়ে রিপ্লেস করতে হবে।

ব্লগ আইডি জানার নিয়ম

১. লেআউটে বা ড্যাশবোর্ডের যেকোন স্থানে যান।
২. লিংকটি লক্ষ্য করুন। সেখানে দেখবেন blogID=10101010101010# এরকম একটা কোড আছে।
৩. এই সংখ্যাগুলোই আপনার ব্লগ আইডি।

নতুন স্ক্রল বার


টেমপ্লেট এডিট এইচটিএমএল এ  গিয়ে সার্চ দিন ]]></b:skin> এবং এর উপরে কোডগুলো পেস্ট করে দিন। এই স্ক্রল বার ফায়ারফক্সসহ বেশ কিছু ব্রাউজারে শো করবে না। ক্রোমে শো করে।
::-webkit-scrollbar {
width: 7px;
}
/* Created and Designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #000000;
-webkit-border-radius: 20px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background:linear-gradient(lime, #ff0000);
-webkit-box-shadow: inset 0 0 6px #000000;
}
::-webkit-scrollbar-thumb:window-inactive {
background: lime;
}

শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট