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

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই ভালো ও সুস্থ আছেন । যাই হোক আজকে আমি আপনাদের জন্য ব্লগার ব্লগের ২৬ তম পর্ব নিয়ে এলাম আগের পর্ব মিস করলে উপর থেকে সব কটি পর্ব দেখে আসুন । যাই হোক আজকে আমি আপনাদের জন্য দারুন একটি লেখক পরিচিতি বক্স নিয়ে এলাম । এটা আপনার প্রতিটি পোস্ট এর নীচে শো করবে এটা একদম নতুন এবং সবার থেকে আলাদা একটি স্টাইল আমি আশাকরি আপনাদেরও ভালো লাগবে । লেখক পরিচিতি বক্স আশাকরি বুজতে পারনেন ডেমো দেখতে বেশি দুন যেতে হবে না এই ব্লগের নিচেই দেখে নিন আমার সম্পর্কে যে বক্স আছে সেটাই আরও ভালো ভাবে বুজতে আমার ব্লগ থেকে দেখে আসতে পারেন । আমার ব্লগ  কোন একটি পোস্ট দেখুন এবং পোস্ট এর নীচে দেখুন আমার সম্পর্কে একটি বক্স আছে সেই রকম একটি আজকে আমি আপনাদের দেবো তবে স্টাইল আলাদা । নীচে থেকে দেখে নিন ।

 

 

about author box

 

 

 

 

সেরকম কোন ডেমো দিলাম না উপরের ফটো দেখুন সেম ঐ রকম হবে আপনি ইছে করলে বাংলা করে নিতে পারবেন সেটা আপনার নিজের ব্যাপার । আসালে আমি এটা যে থিমে প্রথম অ্যাড করি সেটা আমি অন্য থিম ব্যবহার করার ফলে সেটা আর নেই তাই আপনাদের ডেমো দিতে পারলাম না । যাই হোক এবার দেখে নিন কিভাবে আপনার ব্লগে অ্যাড করবেনঃ

১//ব্লগার ব্লগের প্রতিটি পোস্ট এর নীচে যুক্ত করেনিন অসাধারন একটি লেখক পরিচিতি [ About Author ] বক্স ।

২// আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ Premium CSS3 Author info box ]

 

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

 

 

১// প্রথমে আপনার ব্লগস্পট ব্লগ লগ ইন করুন । ড্যাশবোর্ড Template এ ক্লিক করুন । এবার ডান পাশ থেকে Backup এ ক্লিক করে Template ব্যাকআপ নিয়ে নিন ।

 

২// এবার Edit HTML এ ক্লিক করুন ।

 

৩// তারপর আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।

 

]]></b:skin>

 

৪// উপরের কোড খুজে পেলে তার ঠিক উপরে নীচের কোড গুলো কপি করে পেস্ট করুন ।

 

#BS-authorbox {
background:#000000 url(http://2.bp.blogspot.com/-Y5BDoWT0eCw/UQ3qalggHSI/AAAAAAAABQw/wbsrl3dpYG4/s400/About%2Bthe%2Bauthor.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
}
#BS-authorbox:hover {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
#BS-authorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#BS-authorbox .author_small {
font-style:italic;
}
#BS-authorbox img {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
float:left;
border:4px solid #F9780E;
margin:10px;
padding:0;
}
#BS-authorbox img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
#BS-authorbox p {
color:#F9EAD4;
margin:0;
padding:0 10px 10px;
}
#BS-authorbox a {
color:#F9780E;
}

 

৫// Save Template এ ক্লিক করুন ।

 

৬// এবার আগের মতো করেই আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।

<div class=’post-footer-line post-footer-line-1′> বা <data:post.body/>

নোটঃ উপরের কোড গুলো আপনি অনেক বার পেতে পারেন কিন্তু আপনি ২ দ্বিতীয় নাম্বারে যেটা পাবেন তার নীচে নীচের কোড গুলো কপি করে পেস্ট করুন ।

 

<div id="BS-authorbox">
<img alt="About Author" src="<del>https://lh4.googleusercontent.com/-f325AKZQdCE/AAAAAAAAAAI/AAAAAAAAAAA/OQus3dqRZSI/s96-c/photo.jpg</del>" height="80" width="80"/>
<h4><a href="https://plus.google.com/102331886274459115104/" title="Posts by MD Aslam parvez" rel="author">Posted by<del> MD Aslam parvez</del></a></h4>

<p><del>Hello This is MD Aslam parvez ,from India, I like to Blogger</del> </p> <p>Visit My Blog <a href="http://www.asobondhu.blogspot.com">Asobondhu</a> | Follow Me On <a href="http://www.twitter.com/<del>asobondhu</del>">Twitter</a> Or <a href="http://www.facebook.com/<del>asobondhu</del>">Facebook</a></p></div>

 

নোটঃ উপরের সব কটি কাটা লিখা গুলো মুছে সেখানে আপনার দরকার সব কিছু যুক্ত কর নিন ।

 

➥ ব্যাস হয়ে গেল এবার Save Template এ ক্লিক করে সেভ করে বেরিয়ে আসুন এবার আপনার ব্লগ দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন । যদি কাজটি করতে আপনার কোন রকম সমস্যা হয় আমাকে কমেন্ট করে জানান আমি হেল্প করবো দরকার হলে আপনার থিম ব্যাকআপ দিন আমি যুক্ত করে দেবো । থিম ব্যাকআপ দেবার জন্য কমেন্ট করুন ।

➥ পোস্টটি ভালো লাগলে এবং আপনাদের কাজে লাগলে অবশ্যই একটি কমেন্ট ও বন্ধুদের সাথে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।

 

Series Navigation<< ব্লগার ব্লগ দিয়ে নিজের একটি সম্পূর্ণ ব্লগ তৈরী করুন [পর্ব-২৫] :: Animated android Bird শুধু মাত্র ব্লগার ব্লগে জন্য । নতুন স্টাইল ।ব্লগার ব্লগ দিয়ে নিজের একটি সম্পূর্ণ ব্লগ তৈরী করুন [পর্ব-২৭] :: ওয়ার্ডপ্রেস ব্লগকে ব্লগার ব্লগে কনভার্ট ( Convert ) করুন । A to Z টিউটোরিয়াল । >>