বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই ভালো ও সুস্থ আছেন । যাই হোক আজকে আমি আপনাদের জন্য দারুন একটি টিপস নিয়ে এলাম আশাকরি অনেকের এই পোস্ট থেকে উপকার হবে । আজকে আমি আপনাদের জন্য সুন্দর একটি 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 দিতে চান সেটি দেন । 



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



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

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

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

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

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

 
Top
Blogger Widgets