Apr 14, 2016

ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন

ব্লগের আকর্ষণ বৃদ্ধি এবং পাঠকদের বিভিন্ন প্রন্থায় ব্লগের প্রতি আকৃষ্ট করার জন্য ওয়েব ডেভেলপাররা বিভিন্ন ধরনের কৌশল অবলম্বন করে থাকেন। একজন ভিজিটর যখন কোন ব্লগ ভিজিট করে তার প্রয়োজনীয় উপকরণ পাওয়ার পাশাপাশি ব্লগে আকর্ষণীয় ডিজাইন এবং নিত্য নতুন কৌশল দেখতে পান, তখন ভিজিটর এই ধরনের ব্লগের প্রতি আকৃষ্টি হন। এতেকরে দেখা যায় পাঠক নিয়মিত ঐ ব্লগে ভিজিট করতে থাকেন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
আমরা আজ যেটি শেয়ার করছি এটিকে সাধারণত Spoiler বা Show/Hide Button বলা হয়ে থাকে। এই বাটনটি ব্যবহার করে ব্লগপোষ্টের বিভিন্ন আর্টিকেল লুকায়িত অবস্থায় রেখে Click করার মাধ্যমে Expand করে Show/Hide করতে পারবেন। সাধারণত বড় আকারের পোষ্টগুলির সব অংশ না দেখিয়ে কিছু অংশ Hide করে রাখার ক্ষেত্রে এ ধরনের বাটন ব্যবহার করা হয়। এই বাটনটি কোন প্রকার Image ছাড়া সম্পূর্ণ CSS3 এর সমন্বয়ে তৈরি করা হয়েছে। আপনি ইচ্ছে করলে খুব সহজে এটির বিভিন্ন ডিজাইন পরিবর্তন করতে পারবেন। বাটনটির লাইভ ডেমো দেখুন- Live Demo

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

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
  • কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
#spoiler{text-align:center}
#spoiler button{-moz-box-shadow:inset 0 39px 0 -24px #e67a73;-webkit-box-shadow:inset 0 39px 0 -24px #e67a73;box-shadow:inset 0 39px 0 -24px #e67a73;background-color:#e4685d;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:15px;padding:5px 20px;text-decoration:none;text-shadow:0 1px 0 #b23e35}
#spoiler button:after{font-family:FontAwesome;position:relative;content:'\f0dc';padding-left:10px}
#spoiler button:active{position:relative;top:1px}
#spoiler button:hover{background-color:#F56A60;outline:none}
#spoiler-container{padding:1px;text-align:left;background:#f5f5f5;border:0;padding:20px;display:none}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • তারপর নিচের Scripts গুলি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#spoiler").click(function() {
$("#spoiler-container").slideToggle("normal");
 });
})
//]]>
</script>
  • এখন Template Save করে বেরিয়ে আসুন।
  • নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে।

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

  • নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
  • তারপর নিচের চিত্রেরমত পোষ্ট সেকশ হতে HTML বাটনটিতে ক্লিক করুন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
  • উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
  • এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<div id="spoiler"><button>সকল পোষ্ট</button></div>
<div id="spoiler-container">
21st February is international mother language day!
</div>
  • সবশেষে পোষ্টটি Publish করলেই কাজ OK.

পরিবর্তনঃ

  • উপরের লাল কালারের CSS হতে বাটনটির Background কালার পরিবর্তন করতে পারবেন।
  • পিংক কালারের অংশ হতে বাটনটির Hover কালার পরিবর্তন করতে পারবেন।
  • নোটঃ বাটনটির কালার পরিপূর্ণভাবে পরিবর্তন করার জন্য উপরের CSS হতে প্রত্যেকটি ব্রাউজারের Shadow কালার পরিবর্তন করে নিতে হবে।
Subcribe to our all updates

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

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

  1. পোস্টটি খুব কাজের। আমি অবশ্যই ট্রাই করে দেখব। এমন সব কাজের পোস্ট আমাদের উপহার দেওয়ার জন্য আপনাকে অনেক অনেক ধন্যবাদ।

    ReplyDelete
  2. পোষ্টটি ভালো লাগলো। ধন্যবাদ
    আমার ওয়ব সাইট: http://www.techspot.com.bd

    ReplyDelete

 
Subscribe for all Updates

Subscribe Now

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

Powered by: