আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ 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 দিন । 


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


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

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

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,6,অ্যান্টিভাইরাস,6,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,35,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,121,টেম্পেলেট,53,ডাউনলোড,74,নোটিফিকেশন,1,পিসি টিপস,14,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,3,
ltr
item
এসো বন্ধু: আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ Premium CSS3 Author info box ]
আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ Premium CSS3 Author info box ]
http://4.bp.blogspot.com/-MgiMFwedKXI/U0y6mCgKrgI/AAAAAAAADaQ/2r_0pyRlv7E/s1600/Premium+CSS3+Author+info+box+1.png
http://4.bp.blogspot.com/-MgiMFwedKXI/U0y6mCgKrgI/AAAAAAAADaQ/2r_0pyRlv7E/s72-c/Premium+CSS3+Author+info+box+1.png
এসো বন্ধু
http://www.esobondhu.com/2014/04/premium-css3-author-info-box.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2014/04/premium-css3-author-info-box.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy