Jul 12, 2016

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

সকল ধরনের ব্লগের কোথাও না কোথাও মাঝে মধ্যে ডেমো, ডাউনলোড, Buy Now ইত্যাদি টাইপের বাটন যুক্ত করা প্রয়োজন হয়। যদিও বাটন ছাড়াই সাধারণ লিংকের মাধ্যমে এ ধরনের ছোট কাজগুলি চালানো সম্ভব হয়, তথাপিও ব্লগের ডিজাইন এবং ভাবমূর্তি আরো স্ট্যান্ডার্ড করার স্বার্থে ব্লগে বিভিন্ন ডিজাইনের আকর্ষণীয় বাটন যুক্ত করতে হয়। তাছাড়া একটি আকর্ষণীয় স্টাইলের ডাউনলোড বা ডেমো বাটন ব্লগ পোষ্টের পাঠকদের নিংসন্দেহে ঐ লিংকে ক্লিক করতে উৎসাহিত করবে। উল্লেখ্য যে, আমরা ইতিপূর্বেও এ ধরনের Animated Demo and Download Buttons শেয়ার করেছি। আপনি ইচ্ছে করলে উপরের লিংক থেকে পোষ্টটি দেখে নিতে পারেন।
ব্লগে Material Design Ripple Animated Buttons যুক্ত করুন!
আমরা বিভিন্ন কালারের সর্বমোট ১০ টি বাটন তৈরি করেছি। এ বাটনগুলি গুগলের Material Design এর নিয়মানুসারে তৈরি করার পাশাপাশি Ripple Animation Effect প্রদান করা হয়েছে। এতেকরে বাটনে ক্লিক করার পর বাটনটি পানির ঢেউ এর মত কেপে উঠবে, যা পাঠকদের আপনার ব্লগের প্রতি আরো আকৃষ্ট করবে বলে আমি মনে করি। এই বাটনগুলি সম্পূর্ণরূপে CSS3 ও HTML5 এবং আইকনগুলি Font Awesome এর সমন্বয়ে তৈরি করা হয়েছে। এর ফলে আপনি চাইলে খুব সহজে বাটনের আইকন ও স্টাইল পরিবর্তন করতে পারবেন।

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

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

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
  • কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.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 চেপে </body> অংশটি সার্চ করুন।
  • তারপর নিচের Scripts গুলি কপি করে </body> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
//]]>
</script>
  • এখন Template Save করে বেরিয়ে আসুন।
  • নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে।

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

  • নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
  • তারপর নিচের চিত্রেরমত পোষ্ট সেকশন হতে HTML বাটনটিতে ক্লিক করুন।
ব্লগে Material Design Ripple Animated Buttons যুক্ত করুন!
  • উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
ব্লগে Material Design Ripple Animated Buttons যুক্ত করুন!
  • এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>
  • সবশেষে পোষ্টটি Publish করলেই কাজ OK.
  • নোটঃ উপরের প্রত্যেকটি লাইনে একটি করে বাটন রয়েছে। প্রতিটি বাটনের Class তার কালারের নামানুসারে করা হয়েছে, যাতেকরে সবাই সহজে তার পছন্দের বাটনটি নির্বাচন করতে পারে। যখন কোন বাটন যুক্ত করা প্রয়োজন হবে, তখন কেবলমাত্র ঐ লাইনটি যুক্ত করে দিলেই বাটন যুক্ত হয়ে যাবে।

পরিবর্তনঃ

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

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

6 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. রিসেন্ট কমেন্ট উইডজেট নিয়ে টিউন আছে কিন্তু আরো স্টাইলিশ রিসেন্ট কমেন্ট উইডজেট চাই ।
    আপনার ব্লগের মত হলেও চলবে ।

    ReplyDelete
    Replies
    1. আপনার বিষয়টি আমার To Do তালিকায় রাখলাম। ভবিষ্যতে এ নিয়ে পোষ্ট করার চেষ্টা করব।

      তবে একটা কথা আমি বুঝতে পারি না, বাংলা ব্লগাররা কেন বার বার ব্লগপোষ্টকে পোষ্ট না বলে টিউন বলছে?

      Delete
    2. আমার মতে এটা প্রচলিত শব্দে পরিণত হয়ে গেছে । যেমনঃ- পানি যার বাংলা জল কিন্তু আমাদের মাঝে এই শব্দটি পানি নামেই বেশি প্রচলন । চা পান করে কিন্তু আমরা স্বাভাবিক বলে থাকি যে, চা খাবি ? এটা দুই বাংলায় সমস্যা ।

      Delete
    3. আপনি যা বুঝাতে চেয়েছেন, সেটি আমি পরিষ্কারভাবে বুঝতে পারছি। পানি-জল এগুলি সমার্থক শব্দ, সে জন্য এগুলি ব্যবহারে কোন ভূল বলা যাবে না। তবে টিউন এবং পোষ্ট এগুলি সম্পূর্ণ ভিন্ন দুটি অর্থবহ শব্দ। টিউন দ্বারা নতুন পোষ্টকে কোনভাবেই বুঝানো যায় না।

      আসলে বাংলা ব্লগাররা টেকটিউনস ব্যবহার করতে করতে টিউনসে অভ্যস্ত হয়ে গেছে। সে জন্য এখন পোষ্ট না বলে সব জায়গাতেই টিউন শব্দটি ব্যবহার করছে।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: