ব্লগে Material Design Ripple Animated Buttons যুক্ত করুন!

সকল ধরনের ব্লগের কোথাও না কোথাও মাঝে মধ্যে ডেমো, ডাউনলোড, Buy Now ইত্যাদি টাইপের বাটন যুক্ত করা প্রয়োজন হয়। যদিও বাটন ছাড়াই সাধারণ লিংকের মাধ্যমে এ ধরনের ছোট কাজগুলি চালানো সম্ভব হয়, তথাপিও ব্লগের ডিজাইন এবং ভাবমূর্তি আরো স্ট্যান্ডার্ড করার স্বার্থে ব্লগে বিভিন্ন ডিজাইনের আকর্ষণীয় বাটন যুক্ত করতে হয়। তাছাড়া একটি আকর্ষণীয় স্টাইলের ডাউনলোড বা ডেমো বাটন ব্লগ পোষ্টের পাঠকদের নিংসন্দেহে ঐ লিংকে ক্লিক করতে উৎসাহিত করবে। উল্লেখ্য যে, আমরা ইতিপূর্বেও এ ধরনের Animated Demo and Download Buttons শেয়ার করেছি। আপনি ইচ্ছে করলে উপরের লিংক থেকে পোষ্টটি দেখে নিতে পারেন।

আমরা বিভিন্ন কালারের সর্বমোট ১০ টি বাটন তৈরি করেছি। এ বাটনগুলি গুগলের Material Design এর নিয়মানুসারে তৈরি করার পাশাপাশি Ripple Animation Effect প্রদান করা হয়েছে। এতেকরে বাটনে ক্লিক করার পর বাটনটি পানির ঢেউ এর মত কেপে উঠবে, যা পাঠকদের আপনার ব্লগের প্রতি আরো আকৃষ্ট করবে বলে আমি মনে করি। এই বাটনগুলি সম্পূর্ণরূপে CSS3 ও HTML5 এবং আইকনগুলি Font Awesome এর সমন্বয়ে তৈরি করা হয়েছে। এর ফলে আপনি চাইলে খুব সহজে বাটনের আইকন ও স্টাইল পরিবর্তন করতে পারবেন।

সরাসরি দেখুন ডাউনলোড সোর্স

 কিভাবে যুক্ত করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
• কিবোর্ড হতে Ctrl+F চেপে ]]>

অংশটি সার্চ করুন।

এখন নিচের Css কোডগুলি ]]>

ট্যাগের উপরে পেষ্ট করুন।

.ripple {
    text-align: center;
    display: inline-block;
    padding: 4px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple{
  100%{opacity:0;-webkit-transform:scale(2.5)}
}
@-moz-keyframes ripple{
  100%{opacity:0;-moz-transform:scale(2.5)}
}
@-o-keyframes ripple{
  100%{opacity:0;-o-transform:scale(2.5)}
}
@keyframes ripple{
  100%{opacity:0;transform:scale(2.5)}
}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}

.red:before,.pink:before,.blue:before,.cyan:before,.teal:before,.yellow:before,.orange:before,.brown:before,.grey:before,.black:before{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px}
.red:before{content:"\f06e"}
.pink:before{content:"\f019"}
.blue:before{content:"\f07a"}
.cyan:before{content:"\f06e"}
.teal:before{content:"\f019"}
.yellow:before{content:"\f07a";color:#000}
.orange:before{content:"\f06e"}
.brown:before{content:"\f019"}
.grey:before{content:"\f07a"}
.black:before{content:"\f06e"}

• আবার কিবোর্ড হতে Ctrl+F চেপে

অংশটি সার্চ করুন।

তারপর নিচের Scripts গুলি কপি করে

ট্যাগের উপরে পেষ্ট করুন।

• এখন Template Save করে বেরিয়ে আসুন।
• নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে।

 পোষ্টের ভীতরে বাটন যুক্ত করার পদ্ধতী

• নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
• তারপর নিচের চিত্রেরমত পোষ্ট সেকশন হতে HTML বাটনটিতে ক্লিক করুন।

• উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।

• এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।

Button
Button
Button
Button
Button
Button
Button
Button
Button
Button

• সবশেষে পোষ্টটি Publish করলেই কাজ OK.
• নোটঃ উপরের প্রত্যেকটি লাইনে একটি করে বাটন রয়েছে। প্রতিটি বাটনের Class তার কালারের নামানুসারে করা হয়েছে, যাতেকরে সবাই সহজে তার পছন্দের বাটনটি নির্বাচন করতে পারে। যখন কোন বাটন যুক্ত করা প্রয়োজন হবে, তখন কেবলমাত্র ঐ লাইনটি যুক্ত করে দিলেই বাটন যুক্ত হয়ে যাবে।

 পরিবর্তনঃ

• উপরের Css কোডের Grey কালারের অংশগুলি হতে বাটনের রং পরিবর্তন করতে পারবেন।
• লাল কালারের অংশগুলি হচ্ছে Font Awesome আইকন এর Unicode সংখ্যা। এগুলি হতে বাটনের আইকন পরিবর্তন করা যাবে। Font Awesome আইকন এর অফিসিয়ার ওয়েবসাইট হতে খুব সহজে এই Unicode গুলি পেয়ে যাবেন।
• বাটনে Ripple Animation Effect দিতে না চাইলে, ২য় ধাপের JavaScript গুলি যুক্ত করার কোন প্রয়োজন নেই।