CSS বাটন আপনার ব্লগার ব্লগের জন্য । সত্যি অসাধারন একটি স্টাইল দেখুন ভালো লাগবে ।

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই ভালো ও সুস্থ আছেন । যাই হোক আজকে আমি আপনাদের জন্য দারুন একটি টিপস নিয়ে এলাম আশাকরি অনেকের এই পোস্ট থেকে উপকার হবে । আজকে আমি আপনাদের জন্য সুন্দর একটি CSS বাটন নিয়ে এলাম এটাকে আবার অনেকে Download বা Live Demo বাটনও বলে থাকে । যাই হোক আপনার দেখে থাকবেন আমি যখুন কোন কিছুর ডেমো দেখাই একটি বাটন এ দিই তাতে লিখা থাকে Live Demo ঠিক একি অতে স্টাইল আলাদা আমি যেটা ব্যবহার করি সেটা আমি অনেক আগেই শেয়ার করেছি । যাই হোক যারা এখুনও বুজতে পারেনি তারা নিচে থেকে ডেমো দেখে নিন আশাকরি বুজতে পারবেন ।










► আশাকরি এবার বিষয়টি বিস্তারিত বুজতে পারলেন । যাই হোক এবার দেখে নিন কিভাবে এটাকে আপনার ব্লগে ব্যবহার করবেন । তাহলে আর কথা না বাড়িয়ে চলুন শুরু করে দিই ।

১// আপনার ব্লগার ব্লগ লগ ইন করুন ।

২// এবার ড্যাশবোর্ড থেকে Edit HTML এ ক্লিক করুন ।

৩// তার আগে আপনি আপনি আপনার ব্লগ টেম্পলেট ডাউনলোড করে নিতে পারেন কারন কোন ফুল হলে যাতে আপনি পুনরাই আগের অবসথাই যেতে পারেন ।

৪// এবার আপনার কিবোর্ড এর Ctrl+F প্রেস করুন তারপর এই কোড খুজে বের করুন </head> এই কোড খুজে পেলে তার ঠিক নীচের কোড কপি করে পেস্ট করুন ।


<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>


নোটঃ অনেকে অনেক কাজে আগে থেকেই এই কোড ব্যবহার করে থেকে তাই যদি আপনিও আগে এই কোড ব্যবহার করে থেকেন তাহলে এটা ব্যবহার করার দরকার নাই । নীচের টিপস দেখুন ।

৫// এবার একি ভাবে আপনার কিবোর্ড এর Ctrl+F প্রেস করুন তারপর এই কোড খুজে বের করুন ]]></b:skin> এই কোড খুজে পেলে তার ঠিক আগে নীচের কোড কপি করে পেস্ট করুন ।



#wg-pushbutn a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#wg-pushbutn a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}



৬// এবার Save Template এ ক্লিক করে বেরিয়ে আসুন মোটা মোটি কাজ শেষ । এবার এটাকে ব্যবহার করতে হবে । এর জন্য নীচের টিপস দেখুন ।


► এটা সারা জিবনের জন্য আপনার ব্লগে যুক্ত হয়েগেল এবার আপনি যখুন পোস্ট করবেন তখুনি HTML আকারে নীচের কোড পোস্ট করুন ।


<div id="wg-pushbutn"><a href="#" target="_blank">DOWNLOAD</a></div>





নোটঃ উপরের কোড এর মধ্যে থেকে শুধু DOWNLOAD এবং  #  মুছে দিয়ে DOWNLOAD এর যাইগাই আপনার ইছে মতো নাম দিন আর # এর যাই গাই আপনি যে Url দিতে চান সেটি দেন । 



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



▬ভালো থাকবেন সুস্থ থাকবেন▬

▬আল্লাহ্‌ হাফেজ▬

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

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

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

নবীনতর পূর্বতন

نموذج الاتصال