বন্ধুরা সবাই সালাম নিবেন । আজকে আমি আপনাদের সাথে আবারও লেখক পরিচিতি বক্স ইংরেজিতে 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');
}
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 == "item"'>
<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>
<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 এ ক্লিক করে বেরিয়ে আসুন ।
☞ ব্যাস হয়েগেল এবার আপনার ব্লগ ভিজিট করে দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন এবং কোন সমস্যা ছাড়াই । কোন সমস্যা হলে অবশ্যই জানাবেন আমি হেল্প করবো । পোস্টটি ভালো লাগলে একটি লাইক ও শেয়ার করতে ভুলবেন না । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।
ভাই আমার প্রোফাইল Url কোথায় পাবো
উত্তরমুছুনPages অপশন থেকে আপনি নিজের সম্পর্কে একটি প্রোফাইল পেজ বানিয়ে নিতে পারেন সেটাকেই প্রোফাইল Url বলে ।
মুছুন