বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই ভালো ও সুস্থ আছেন । যাই হোক আজকে আমি আপনাদের জন্য দারুন একটি টিপস নিয়ে এলাম আশাকরি অনেকের এই পোস্ট থেকে উপকার হবে । আজকে আমি আপনাদের জন্য সুন্দর একটি CSS বাটন নিয়ে এলাম এটাকে আবার অনেকে Download বা Live Demo বাটনও বলে থাকে । যাই হোক আপনার দেখে থাকবেন আমি যখুন কোন কিছুর ডেমো দেখাই একটি বাটন এ দিই তাতে লিখা থাকে Live Demo ঠিক একি অতে স্টাইল আলাদা আমি যেটা ব্যবহার করি সেটা আমি অনেক আগেই শেয়ার করেছি । যাই হোক যারা এখুনও বুজতে পারেনি তারা নিচে থেকে ডেমো দেখে নিন আশাকরি বুজতে পারবেন ।
► আশাকরি এবার বিষয়টি বিস্তারিত বুজতে পারলেন । যাই হোক এবার দেখে নিন কিভাবে এটাকে আপনার ব্লগে ব্যবহার করবেন । তাহলে আর কথা না বাড়িয়ে চলুন শুরু করে দিই ।
১// আপনার ব্লগার ব্লগ লগ ইন করুন ।
২// এবার ড্যাশবোর্ড থেকে Edit HTML এ ক্লিক করুন ।
৩// তার আগে আপনি আপনি আপনার ব্লগ টেম্পলেট ডাউনলোড করে নিতে পারেন কারন কোন ফুল হলে যাতে আপনি পুনরাই আগের অবসথাই যেতে পারেন ।
৪// এবার আপনার কিবোর্ড এর
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>
নোটঃ অনেকে অনেক কাজে আগে থেকেই এই কোড ব্যবহার করে থেকে তাই যদি আপনিও আগে এই কোড ব্যবহার করে থেকেন তাহলে এটা ব্যবহার করার দরকার নাই । নীচের টিপস দেখুন ।
৫// এবার একি ভাবে আপনার কিবোর্ড এর
#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 দিতে চান সেটি দেন ।
► তাহলে আজকের মতো এই পর্যন্ত আবারও এই রকম নতুন কিছু নিয়ে দেখা হবে । পোস্টটি ভালো লাগলে কমেন্ট করতে এবং বন্ধুদের সাথে শেয়ার করতে ভুলবেন না ।
▬ভালো থাকবেন সুস্থ থাকবেন▬
▬আল্লাহ্ হাফেজ▬