আপনার ব্লগার ব্লগের লিঙ্ককে দিন Css Anchor এনিমেশন ইফেক্ট !

আসসালামু আলাইকুম বন্ধুরা , আমি হেডিং এ বলেছি Css Anchor এনিমেশন ইফেক্ট আসলে এটা কি বুঝতে পেরেছেন ফটো দেখে হয়তো অনেকেই বুঝতে পেরেছেন তবে নতুন যারা তাদের জন্য বলি এই ইফেক্ট টি হল আপনি ধরুন কোন লিখার মধ্যে কোন সাইট লিঙ্ক বা কোন ডাউনলোড লিঙ্ক দিয়েছেন এখুন এই সিএসএস ইফেক্ট ব্যবহার করার ফলে আপনি যখুনি কোন লিখার মধ্যে কোন লিঙ্ক ব্যবহার করবেন সেটা ফটোও হতে পারে তখুন সেই লিঙ্কে কেউ মউস রাখলে একটি স্লাইডিং এনিমেশন ইফেক্ট দেখা যাবে ঠিক নিচে ফটোর মত , আশাকরি বিষয়টি বুঝতে পেরেছেন তাহলে চলুন দেখেনিন কিভাবে কাজটি করবেন -

Css Anchor Effect

আপনি যদি এটা নিজে মউস রেখে পরীক্ষা করে দেখতে চান তাহলে নিচের ডেমো বাটনে ক্লিক করুন এবং দেখুন উপরের ফটোত মত কিছু লিখা আছে তাতে মউস রাখুন -

Anchor Effect Demo

কিভাবে যুক্ত করবেন আপনার ব্লগে :

• প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন

• ড্যাশবোর্ড থেকে Template এ ক্লিক করুন

• এবার আপনার কীবোর্ড থেকে CTRL+F প্রেস করুন এবং নিচের ট্যাগটি সার্চ করুন

]]></b:skin>

• এবার উপরের ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন

/*sliding anchor animation*/
.post-body a {
display: inline-block;
position: relative;
text-decoration: none ! important;
}
.post-body a:after {
background: none repeat scroll 0px 0px transparent;
content: "";
display: block;
height: 3px;
margin: auto;
transition: width 0.5s ease 0s, background-color 0.5s ease 0s;
width: 0px;
}
.post-body a:hover:after {
background:none repeat scroll 0 0 #057CF6;
width: 100%;
}

এবার Save Template এ ক্লিক করুন এবং আপনার ব্লগের যেকোনো লিঙ্কে মউস রেখে চেক করুন আশাকরি কাজ হবে


তাহলে আজকের মত এই পর্যন্ত পোস্টটি বুঝতে বা কোন সমস্যা হলে নিচে কমেন্ট করুন , ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।