আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ 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("http://3.bp.blogspot.com/-JMP2QSbDyx0/UPe_5fbsjnI/AAAAAAAAAh0/IStTy4spyJs/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 Aslam parvez' 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 Aslam parvez'>
                              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/Asobondhu' 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 দিন । 


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


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

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

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

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

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

নবীনতর পূর্বতন

نموذج الاتصال