৬ জুলাই, ২০১৫

ব্লগারে যুক্ত করুন Animated Demo and Download Buttons

ব্লগারে যুক্ত করুন Animated Demo and Download Buttons
4/ 5 stars - "ব্লগারে যুক্ত করুন Animated Demo and Download Buttons" আমি আজ আপনাদের সাথে শেয়ার করবো অত্যান্ত সুন্দর এবং আকর্ষণীয় দুটি Animated Demo and Download Buttons. সাধারণত এ ধরনের বাটন ব্লগ পোষ্টের বিভ...
-
আমি আজ আপনাদের সাথে শেয়ার করবো অত্যান্ত সুন্দর এবং আকর্ষণীয় দুটি Animated Demo and Download Buttons. সাধারণত এ ধরনের বাটন ব্লগ পোষ্টের বিভিন্ন জায়গায় যখন কোন কিছুর ডাউনলোড লিংক কিংবা ডেমো দেখানোর প্রয়োজন হয়, তখনই এ ধরনের বাটন ব্যবহার করা হয়। এ ধরনের আকর্ষণীয় বাটন ব্লগ পোষ্টে ব্যবহার করার ফলে ব্লগ পোষ্টগুলি আরও আকর্ষণীয় হয়ে উঠে। এ বাটনগুলি আমার নিজস্ব তৈরী নয়। বিভিন্ন ব্লগে প্রায় এই ধরনেরই বাটন দেখতে পাবেন। তবে এটা সত্য যে, আমি এটিকে কাষ্টোমাইজ করে অনেকাংশ পরিবর্তন করেছি, যা বাটনগুলিকে আরও আকর্ষণীয় করেছে।
Blogger-Demo-and-Download-Buttons
উপরের চিত্রে বাটনগুলির ডেমো দেখতে পাচ্ছেন যে, বাটনে মাউস ধরার পর Animation এর মাধ্যমে Hover Effect হচ্ছে। বাটনগুলি দেখতে অনেকটা ইমেজ এর মত মনে হলোও এটা সত্য যে, এখানে কোন প্রকার ইমেজ ব্যবহার করা হয়নি। এটি সম্পূর্ণরূপে Css এবং HTML এর মাধ্যমে স্টাইল করা হয়েছে। যার ফলে এটি লোড নিতে বিন্দুমাত্রও সময় নেবে না। লাইভ ডেমো দেখতে চাইলে এখান থেকে দেখে আসতে পারেন - Live Demo

কিভাবে ব্লগে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
blogger template
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন এবং নিচের লিংকের মাধ্যমে প্রদত্ত Font Awesome Icons এর আইকনগুলি </head> এর উপরে পেষ্ট করুন।
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের Css কোডগুলি পেষ্ট করুন।
#pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    padding: 0;
    border-radius: 5px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}

.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}

.pro-down span.circle, .pro-demo span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 21px;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}

.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
    left: 100%;
    margin-left: -25px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
    position: absolute;
    left: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;}
  •  তারপর Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।

Demo এবং Download বাটন ব্যবহারঃ

  • যখন আপনি বাটনগুলি ব্যবহার করতে চাইবেন, তখনই আপনার ব্লগের কাঙ্খিত পোষ্ট এর HTML Editor এ যাবেন এবং সেখানে নিচের কোডগুলি পেষ্ট করবেন।
 <div id="pro-buttons">
 <a class="pro-down" href="#" target="_blank">
    <span class="circle"><i class="fa fa-rocket"></i></span>
    <span class="title">Demo</span>
    <span class="title-hover">Click here</span>
 </a>
  <a class="pro-demo" href="#" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
 </a>
</div>
  • উপরের লাল চিহ্নিত # এর স্থলে আপনার কাঙ্খিত Demo এবং Download লিংক দেবেন।
Subcribe to our all updates

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

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

  1. css এই কোডটিতে ভূল আছে । ব্লগে ]]> ট্যাগের ঠিক ‍উপরে কোড গুলি বসালে সাইট ভিজিট করার পর হেডারে কোডগুলি শো করছে ।

    উত্তরমুছুন
    উত্তরগুলি
    1. সঠিক জায়গায় কোডগুলি বসান, তাহলে কোন সমস্যা হবে না।

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: