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

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

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

 

• আশাকরি ডেমো দেখে বুঝেগেছেন জিনিসটি আসলে ঠিক কি । হুম আর আশাকরি আপনাদের পছন্দও হয়েছে । এটা অবশ্য হুব হু আমার মতো না তবে এটার স্টাইলও দারুন করেছে Mohammad Fazle Rabbi , যাই হোক তাহলে নীচে থেকে দেখে নিন কিভাবে এটা আপনার ব্লগে যুক্ত করবেন ।

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

১// আপনার ব্লগার ব্লগ লগইন করুন ।

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

৩// এবার উপরের ডান পাশ থেকে Backup অপশন এ ক্লিক করে আপনার টেম্পলেট এর ব্যাকআপ নিয়ে নিন । ব্যাকআপ নেবার একটাই কারন আপনি এটি অ্যাড করতে গিয়ে কোন ভুল করলে সেই ব্যাকআপ টেম্পলেট আবার অ্যাড করতে নিতে পারবেন ।

৪// এবার Edit HTML এ ক্লিক করুন । তারপর আপনার কীবোর্ড এর Ctrl+F প্রের করে নীচের কোড খুজে বের করুন ।

]]></b:skin>


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

.BSpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:auto;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
text-shadow:1px 0 0 #000000;
color:#111;
border: 2px solid #0066B3;
border-radius: 5px;
background: #cae0e4;
background: -moz-linear-gradient(top,  #cae0e4 0%, #9ad0d8 15%, #62b6c0 36%, #9ad0d8 86%, #9ad0d8 99%, #cae0e4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae0e4), color-stop(15%,#9ad0d8), color-stop(36%,#62b6c0), color-stop(86%,#9ad0d8), color-stop(99%,#9ad0d8), color-stop(100%,#cae0e4));
background: -webkit-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -o-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -ms-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: linear-gradient(to bottom,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae0e4', endColorstr='#cae0e4',GradientType=0 );
border-left: 5px solid #333;
border-right: 5px solid #333;
border-top: 5px solid #333;
border-bottom: 5px solid #333;
padding: 10px 15px 10px 15px;
-webkit-box-shadow: inset -5px -9px 100px -18px #333333;
-moz-box-shadow: inset -5px -9px 100px -18px #333333;
-o-box-shadow: inset -5px -9px 100px -18px #333333;
-ms-box-shadow: inset -5px -9px 100px -18px #333333;
box-shadow: inset -5px -9px 100px -18px #333333;
-webkit-border-radius:11.5px;
-moz-border-radius:11.5px;
-o-border-radius:11.5px;
-ms-border-radius:11.5px;
border-radius:11.5px;
background-color: #000000;
color: #000000;
font-size: 14px;
-ms-border-radius:1.0em;
}
.BSpostauthoravatar {
background: #fff;
border: 1px solid #D3D3D3;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.BSpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.BSpostauthoravatar:hover img {
opacity: 1;
}
.BSpostauthorlabel {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim40csOJo-SPdLABosyiLBLTwaIbD9vHfdW3Otfzcz_96jEVCgxP4Mvjd3xWjWh4jEuZsEPcNRzBUJ6qSQttqGYTcbRX7IkPT932ei1SGG2x45yKf1WHL464RripoMzRFj79BeKBd6LvE/s1600/badge_admin.png") no-repeat center transparent;
display: block;
height: 30px;
position: absolute;
bottom: -30px;
width: 128px;
}
.BSpostauthorcontent {
margin-left: 160px;
}
.BSpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.BSpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.BSpostauthorbox p a {
color: #E65002;
}
.BSpostauthorbox-footer{
padding:10px 0 10px;
font:bold 12px Trebuchet MS;
}

৬// এবার Save Template এ ক্লিক করে সেভ করে নিন । এবার দ্বিতীয় স্টেপ দেখুন ।


৭// একি ভাবে উপরের মতো করেই নীচের কোড খুজে বের করুন ।

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


৮// উপরের কোড ৩ থেকে ৪ বার  খুজে পেতে পারেন কিন্তু দ্বিতীয় নাম্বারে যে কোড থাকবে তার আগে বা উপরে নীচের কোড কপি করে পেস্ট করুন ।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <div class='BSpostauthorbox'>
                      <div class='BSpostauthoravatar'>
                        <img alt='Md. Anwar Hossain' src='Author Image URL Here'/>
                        <div class='BSpostauthorlabel'/>
                      </div>
                      <div class='BSpostauthorcontent'>
                        <div class='BSpostauthorhead'>
                          <h5>
                            Posted By:
                            <a href='About Author Page URL' title='Md. Anwar Hossain'>
                              MD Aslam parvez
                            </a>
                          </h5>
                        </div>
                        <div class='postAuthorbio'>
                          আপনার সম্পর্কে কিছু লিখুন                           <b>
                            <a expr:href='data:post.url'>
                              <data:post.title/>
                            </a>
                          </b>
                        </div>
                        <div class='BSpostauthorbox-footer'>
                          <div style='float:left;text-align:left;'>
                            Join Me On:
                            <a href='http://www.twitter.com/AsobondhuAso' rel='nofollow'>
                              Twitter
                            </a>
                            |
                            <a href='https://www.facebook.com/Asobondhublog' rel='nofollow' target='_blank'>
                              Facebook
                            </a>
                            |
                            <a href='http://plus.google.com/101073711453747706715' rel='nofollow' target='_blank'>
                              Google Plus
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </b:if>

নোটঃ উপরের রঙ্গে ঘিরা লিখে মুছে আপনার Url দিন ।

• Author Image URL Here মুছে সেখানে আপনার ফটো Url দিন । 
• আপনার সম্পর্কে কিছু লিখুন এর স্থানে আপনার সম্পর্কে কিছু লিখুন । 
• Asobondhu মুছে আপনার টুইটার Url দিন । 
• Asobondhublog মুছে আপনার ফেসবুক Url দিন । 
• 101073711453747706715 মুছে আপনার গুগল+ Url দিন । 

♦ তাহলে আশাকরি বুজতে কোন সমস্যা হলনা । তাহলে কাজ শুরু করে দিন কোন সমস্যা হলে নীচের কমেন্ট বক্সে কমেন্ট করে জানাতে পারেন । আর পোস্টে কোন ভুল থাকলে অবশ্যই ভুল ধরিয়ে দেবেন । 

▬ভালো থাকবেন সুস্থ থাকবেন▬

▬আল্লাহ্‌ হাফেজ▬