সবাইকে শুভ নববর্ষ আন্তরিক শুভেছা জানিয়ে আজকের এই পোস্ট শুরু করতে যাছি । সবাই আশাকরি ভালো ও খুব আনান্দ আছেন । আপনাদের দোয়াই এবং আল্লাহ্ এর রহমতে খুব ভালো ও সুস্থ আছি । যাই হোক আজকের কাজের কোথাই আসি । অনেকে দিন থেকে আমাকে অনেকে প্রশ্ন করছে কিভাবে আমার ব্লগের মতো প্রতিটি পোস্ট এর নীচে লেখক পরিচিতি বক্স যুক্ত করতে হয় ? আমি অনেককে ইংলিশ টিপস দিয়েছিলাম কিন্তু অনেকে কাজটি ঠিক ভাবে করতে পারেনি যাই হোক আজকে তার সমাধান নিয়ে এলাম আশাকরি কাজটি এবার সবাই করতে পারবে ।
লেখক পরিচিতি বক্স এটা খুব দরকারি একটি জিনিস প্রতিটি ব্লগ ব্যবহার কারির কাছে । কিন্তু অনেকে প্রতিটি পোস্টে ব্যবহার না করে ফুটারে ব্যবহার করে আবার অনেকে পোস্ট এর নীচে । যেমন আমি নিজেই পোস্ট এর নীচে ব্যবহার করি । সব থেকে বড় কথা এটা ব্যবহার করার ফলে ব্লগ পোস্ট দেখতে সুন্দর লাগে ।
♦ আশাকরি ডেমো দেখে বুঝেগেছেন জিনিসটি আসলে ঠিক কি । হুম আর আশাকরি আপনাদের পছন্দও হয়েছে । এটা অবশ্য হুব হু আমার মতো না তবে এটার স্টাইলও দারুন করেছে Mohammad Fazle Rabbi , যাই হোক তাহলে নীচে থেকে দেখে নিন কিভাবে এটা আপনার ব্লগে যুক্ত করবেন ।
কিভাবে আপনার ব্লগে যুক্ত করবেনঃ
২// এবার ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
৩// এবার উপরের ডান পাশ থেকে Backup অপশন এ ক্লিক করে আপনার টেম্পলেট এর ব্যাকআপ নিয়ে নিন । ব্যাকআপ নেবার একটাই কারন আপনি এটি অ্যাড করতে গিয়ে কোন ভুল করলে সেই ব্যাকআপ টেম্পলেট আবার অ্যাড করতে নিতে পারবেন ।
৪// এবার Edit HTML এ ক্লিক করুন । তারপর আপনার কীবোর্ড এর
]]></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;
}
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 == "item"'>
<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>
<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'>
</a>
|
<a href='https://www.facebook.com/Asobondhublog' rel='nofollow' target='_blank'>
</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 দিন ।
♦ তাহলে আশাকরি বুজতে কোন সমস্যা হলনা । তাহলে কাজ শুরু করে দিন কোন সমস্যা হলে নীচের কমেন্ট বক্সে কমেন্ট করে জানাতে পারেন । আর পোস্টে কোন ভুল থাকলে অবশ্যই ভুল ধরিয়ে দেবেন ।
▬ভালো থাকবেন সুস্থ থাকবেন▬
▬আল্লাহ্ হাফেজ▬
Darun post parvez oneker kaje lagbe ...............
উত্তরমুছুনহুম ভাই ।
উত্তরমুছুনThanks Aslam Vi
উত্তরমুছুন