এটি 28 পর্বের ব্লগার টিউটোরিয়াল বিষয়ক টিউনের 20 পর্ব
wp-content/uploads/2013/04/blogger_logo.png
ব্লগার টিউটোরিয়াল

 

বন্ধুরা সবাই ভাল তো আশাকরি সবাই ভাল আছেন । আজকে আমি আপনাদের জন্য দারুন একটি  CSS  Blockquote নিয়ে এলাম এটি আমি একটি ইংলিশ সাইট থেকে পেয়েছি আর আমার খুব পছন্দ হল তাই আপনাদের জন্য পোস্ট করতে বসেগেলাম । আশাকরি আপনাদের পছন্দ হবে ।  Blockquote ব্যবহার করার ফলে আপনি আপনার ব্লগে যখুনি কোন HTML বা CSS কোড পোস্ট করবেন সেই কোড গুল কে খুব সুন্দর ভাবে উপস্থাপনা করতে পারবেন । ডেমো দেখলে ব্যাপারটি সম্পূর্ণ বুজতে পারবেন ।

 

dsrfsetr

fghtfhgtfh

  • কিভাবে ব্লগে যুক্ত করবেন নীচের টিপস লক্ষ করুন 🙂

 

  1. ব্লগ লগ ইন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করে Edit html এ ক্লিক করুন । 
  2. এবার Ctrl + F প্রেস করে নীচের কোড টি খুজেবের করুন । 

 

 ]]></b:skin>

 

  • এবার উপরে কোডটি খুজে পেলে তার ঠিক উপরে বা আগে নীচের CSS কোডটি কপি করে পেস্ট করুন ।

 

 .post blockquote {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#0066B3;
  border:10px solid #80C8FE;
  border-left-color:#00477D;
  border-right-color:#00477D;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}
.post blockquote:hover {
  padding:10px 15px;
  background-color:#BFE3FE;
  border:5px solid #00477D;
  height:350px;
}

 

 

  • এবার Save template এ ক্লিক করে সেভ করে নিন ।

 

  • কিভাবে ব্যবহার করবেন ? নীচে দেখুন ।। 

 

  • এবার কোন কিছু পোস্ট করার সময় এটা ব্যবহার করবেন তখুন যে কোড গুলকে এই বক্স এর মধ্যে রাখতে চান সেগুল কে সিলেক্ট করে Quote এ ক্লিক করুন । নীচে চিত্রে দেখুন । 

 

  • তাহলে এবার উপভোগ করুন নতুন স্টাইল এর  CSS  Blockquote  এর । ভাল থাকবেন সুস্থ থাকবেন । ভাল লাগলে কমেন্ট করে জানাবেন । 

 

  • এই সব ওয়েডগেট গুল ব্যবহার করলে কামনা লাগবে আপনার ব্লগ এর পোস্ট উদাহারন হিসাবে দেখে আসুন আমার ব্লগে  এখানে ক্লিক করে

 

  • পোস্টটি আমার দ্বারা পূর্বে প্রকাশিত এখানে সময় পেলে ঘুরে আসুন এখান থেকে । 

 

 

 

Series Navigation<< ব্লগার ব্লগ দিয়ে নিজের একটি সম্পূর্ণ ব্লগ তৈরী করুন [পর্ব-১৯] :: গুগলে আপনার ব্লগার ব্লগের Sitemap – সাইট ম্যাপ সাবমিট করুন । ( মেগা পোস্ট )ব্লগার ব্লগ দিয়ে নিজের একটি সম্পূর্ণ ব্লগ তৈরী করুন [পর্ব-২১] :: দেখেনিন কিভাবে আপনার ব্লগার ব্লগের Background,Font Size & Font Family পরিবর্তন করবেন । >>