লেখক পরিচিতি বক্স প্রতিটি পোস্টের নীচে ! সঙ্গে সোশ্যাল বাটন ব্লগার ব্লগের জন্য

বন্ধুরা সবাই সালাম নিবেন । আজকে আমি আপনাদের সাথে আবারও লেখক পরিচিতি বক্স ইংরেজিতে Author Box নিয়ে পোস্ট করতে বসলাম । আপনারা আপনাদের এই ব্লগে সার্চ দিয়ে দেখুন এর আগে (Author Box) লেখক পরিচিতি বক্স নিয়ে পোস্ট করা হয়েছে । তবে সব কটির স্টাইল আলাদা । আজকের টা সিএসএস ৩ (CSS3) স্টাইল । তাহলে চলুন দেখে নেওয়া যাক কিভাবে আপনার ব্লগে এই লেখক পরিচিতি বক্স যুক্ত করবেন । নিচে থেকে ডেমো দেখে নিন সঙ্গে সেটআপ করার প্রক্রিয়া ।









☞ উপরের বাটনে ক্লিক করে সিএসএস৩ স্টাইল লেখক পরিচিতি বক্স এর ডেমো দেখে নিন । আশাকরি আপনাদের দেখা হয়েছে এবং আপনি এটা ব্যবহার করতে ইছুক । যদি ব্যবহার করতে চান নিচের স্টেপ দেখুন ।


কিভাবে আপনার ব্লগে যুক্ত করবেন ! নিচের স্টেপ দেখুন ।


  • প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ।
  • ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন ।
  • এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগটি খোজ করুন ।

]]></b:skin>

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


.about-author {
    width: 100%;
}
.authorbox {
    overflow: hidden;
    padding: 0;
    background: #333;
    color: #ccc;
}
.authorbox .authorinfo {
    color: #ccc;
}
.authorbox .authorsocial {
    float: left;
}
.authorbox .authorsocial li {
    list-style: none;
    margin: 0;
    position: relative;
}
.authorbox .authorsocial li a {
    width: 32px;
    display: block;
    background: url("https://lh3.googleusercontent.com/-r76G6QNKIcA/U-3aauyvD9I/AAAAAAAAEok/j35IJG19xwY/h120/social-logo.png");
    height: 32px;
    margin: 0;
}
.authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 17%;
    background: #fff;
    padding: 5px;
}
.authorbox .authorinfo p {
    margin: 0;
    font-size: 18px;
    padding: 0 5px;
    line-height: 25px!important;
    font: 15px "Armata", Arial;
    text-align: left;
}
.authorinfo p a {
    text-decoration:none;
    color:#fff;
}
.authorbox h3 {
    margin: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    font: bold 20px Arial;
    padding: 5px 10px;
}
h3.boxtitle {
    background: #333;
    color: #fff;
    margin: 0 auto;
    width: 25%;
    padding: 2px 10px;
    font: bold 16px "Armata", Arial
}
.authorbox .authorsocial li .fb {
    background-position: 0px 0px;
}
.authorbox .authorsocial li .twitter {
    background-position: 0px -32px;
}
.authorbox .authorsocial li .google {
    background-position: 0px -64px;
}
.authorbox .authorsocial li .in {
    background-position: 0px -96px;
}
.authorbox .authorsocial li .in:hover {
    background-position: -32px -96px;
}
.authorbox .authorsocial li .google:hover {
    background-position: -32px -64px;
}
.authorbox .authorsocial li .twitter:hover {
    background-position: -32px -32px;
}
.authorbox .authorsocial li .fb:hover {
    background-position: -32px 0px;
}
.authorbox:hover img {
    background: #1BC3F8;
}
.authorbox .authorinfo img, .authorbox .authorsocial li a {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    src: local('Armata'), local('Armata-Regular'),
url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');



  • Save Template এ ক্লিক করে নিচের স্টেপ দেখুন ।

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

<data:post.body/>

  • উপরের ট্যাগটি খুজ পেলে তার ঠিক পরে বা নিচে নিচের কোড গুলো বসিয়ে দিন ।


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="about-author">
<h3 class="boxtitle">About Author</h3>
<div class="authorbox">
<div class="authorsocial">
  <li><a class="fb" href="http://facebook.com/asobondhu" rel="nofollow"></a></li>
  <li><a class="twitter" href="http://twitter.com/asobondhu" rel="nofollow"></a></li>
  <li><a class="google" href="https://plus.google.com/101073711453747706715" rel="author"></a></li>
  <li><a class="in" href="http://sa.linkedin.com/in/asobondhu" rel="nofollow"></a></li>
</div>
  <div class="authorinfo">
<img src="https://lh4.googleusercontent.com/-f325AKZQdCE/AAAAAAAAAAI/AAAAAAAAAbI/OrX0iQ5PXYo/s120-c/photo.jpg" />
<p>আপনার সম্পর্কে লিখুন<a href="আপনার প্রোফাইল URL বসান">Read More</a></p>
</div>
</div>
</div>
</b:if>



উপরের কালার দিয়ে ঘিরা লিখা মুছে সেখানে আপনার দরকারি লিঙ্ক , লেখা ইত্যাদি বসান ।

  • Save Template এ ক্লিক করে বেরিয়ে আসুন । 


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


একটি মন্তব্য পোস্ট করুন

2 মন্তব্যসমূহ

  1. ভাই আমার প্রোফাইল Url কোথায় পাবো

    উত্তরমুছুন
    উত্তরগুলি
    1. Pages অপশন থেকে আপনি নিজের সম্পর্কে একটি প্রোফাইল পেজ বানিয়ে নিতে পারেন সেটাকেই প্রোফাইল Url বলে ।

      মুছুন

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!