ব্লগার ব্লগের প্রতিটি পোস্ট এর নীচে যুক্ত করেনিন অসাধারন একটি লেখক পরিচিতি [ About Author ] বক্স ।

A+A-

PrintEmail

বন্ধুরা আজকে আমি আপনাদের সাথে ব্লগার ব্লগের দারুন একটি ওয়েডগেট শেয়ার করবো । হুম আমি এর আগেও  লেখক পরিচিতি বক্স নিয়ে একটি পোস্ট করেছি কিন্তু সেটার স্টাইল আর আজকের টির স্টাইল ভিন্ন । আগের পোস্ট যদি আপনি না দেখে থাকেন তাহলে এই লিঙ্কে ক্লিক করে দেখে আসুন ।
আমার ব্লগের মতো আপনার ব্লগেও যুক্ত করুন প্রতিটি পোস্টের নীচে লেখক পরিচিতি বক্স । [ Premium CSS3 Author info box ]
আশাকরি আমার আগের পোস্ট আপনাদের ভালো লেগেছে । যাই হোক এবার আজকের পোস্টে ফিরা যাক । আজকের স্টাইলও ভিসন সুন্দর । বিশ্বাস না হলে নীচে থেকে লাইভ ডেমো দেখে নিন । সঙ্গে কিভাবে ব্যবহার করবেন সেটাও ।

LIVE DEMO

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

১// প্রথমে আপনার ব্লগস্পট ব্লগ লগ ইন করুন । ড্যাশবোর্ড Template এ ক্লিক করুন । এবার ডান পাশ থেকে Backup এ ক্লিক করে Template ব্যাকআপ নিয়ে নিন ।

২// এবার Edit HTML এ ক্লিক করুন ।

৩// তারপর আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।

]]></b:skin>

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

.clear {
clear:both;
}

#author-box {
margin:10px 0;
}

#author-box a:hover {
background:none!important;
}

#author-box .row-1 {
background:#333;
padding:20px;
}

#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}

#author-box .row-1 .info {
margin:0 0 0 110px;
}

#author-box .row-1 .info h6 {
color:#FFF;
font-size:20px;
margin:-4px 0 0;
}

#author-box .row-1 .info h6 span {
font-size:11px;
font-weight:400;
background:#1BA1E2;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}

#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}

#author-box .row-2 {
background:#666;
}

#author-box .row-2 a.social-item {
display:block;
float:left;
color:#FFF;
text-align:center;
padding:15px;
}

#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}

#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}

#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
}

#author-box .row-2 .social-item .click {
font-size:11px;
color:#EAEAEA;
line-height:1;
}

#author-box .row-2 a.social-item:hover {
background:#1BA1E2!important;
}

#author-box .row-3 {
background:#1BA1E2;
}

#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}

#author-box .row-3 .donation-button {
background:#1BA1E2;
border:none;
font-family:Impact;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .donation-button:hover {
background:#000;
cursor:pointer;
}

#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:Impact;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .register-button:hover {
color:#000;
cursor:pointer;
}

#author-box .row-2 .social-item.twitter .icon {
background-position:0 -32px;
}

#author-box .row-2 .social-item.facebook .icon {
background-position:0 -64px;
}

#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}

#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}

#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}

#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}

#author-box .social-item .icon {
background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
background-repeat:no-repeat;
}

৫// Save Template এ ক্লিক করুন ।

৬// এবার আগের মতো করেই আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।


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


নোটঃ উপরের কোড গুলো আপনি অনেক বার পেতে পারেন কিন্তু আপনি ২ দ্বিতীয় নাম্বারে যেটা পাবেন তার নীচে নীচের কোড গুলো কপি করে পেস্ট করুন ।

<div id='author-box'>
            <div class='row row-1'>
                <div class='avatar'>
                    <a href='http://www.asobondhu.blogspot.com/2012/09/about-author.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://lh4.googleusercontent.com/-f325AKZQdCE/AAAAAAAAAAI/AAAAAAAAAAA/OQus3dqRZSI/s96-c/photo.jpg' width='90'/></a>
                </div>
                <div class='info'>
  <h6>Posted By: MD Aslam parvez <span>Admin and Author</span></h6>
    <p><strong><a href='http://asobondhu.blogspot.in/p/blog-page.html'>MD Aslam parvez </a> About Author</strong> <strong>About Author</strong></p>
                </div>
                <div class='clear'/>
            </div>
            <div class='row row-2'>
                <a class='social-item website' href='http://www.asobondhu.blogspot.com' meta='website' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Website</span>
                  <span class='click'><span class='val'></span> </span>
                </a>
         
                <a class='social-item twitter' href='https://twitter.com/asobondhu' meta='twitter' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Twitter</span>
                    <span class='click'><span class='val'></span></span>
                </a>
         
                <a class='social-item facebook' href='http://www.facebook.com/asobondhublog' meta='face' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Facebook</span>
                    <span class='click'><span class='val'></span></span>
                </a>
         
                <a class='social-item gplus' href='https://plus.google.com/101073711453747706715' meta='gplus' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Google+</span>
                    <span class='click'><span class='val'></span></span>
                </a>
         
                <a class='social-item linkedin' href='http://ph.linkedin.com/asobondhu' meta='linkedin' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>LinkedIn</span>
                    <span class='click'><span class='val'></span></span>
                </a>
         
                <a class='social-item youtube' href='https://www.youtube.com/user/asobondhu' meta='youtube' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Youtube</span>
                    <span class='click'><span class='val'></span></span>
                </a>
         
             
            <div class='clear'/></div>
            <div class='row row-3'>
            <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
                <input name='cmd' type='hidden' value='_donations'/>
                <input name='business' type='hidden' value='Paypal account email id'/>
                <input name='lc' type='hidden' value='US'/>
                <input name='item_name' type='hidden' value='Donate Blogger'/>
                <input name='no_note' type='hidden' value='0'/>
                <input name='currency_code' type='hidden' value='USD'/>
                <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
            </form><a class='register-button' href='http://www.asobondhu.blogspot.com/'>Become a asobondhu</a><div class='clear'/></div>
    </div>

➥ উপরের লাল রঙ্গের লিখা গুলো মুছে সেখানে আপনার সকল Id যুক্ত করুন । যেমনঃ

১// asobondhu গুলো মুছে সেখানে আপনার ফেসবুক , টুইটার , গুগল+ , ইউটিউব , লাইকড ID বসিয়ে দিন ।

২// https://plus.google.com/https://lh4.googleusercontent.com/-f325AKZQdCE/AAAAAAAAAAI/AAAAAAAAAAA/OQus3dqRZSI/s96-c/photo.jpg  মুছে সেখানে আপনার ফটো URL বসান ।

৩// About Author মুছে সেখানে আপনার সম্পর্কে কিছু লিখুন । তারপর এই লিঙ্ক http://asobondhu.blogspot.in/p/blog-page.html  মুছে সেখানে আপনার প্রোফাইল URL বসান ।

৪// Paypal account email id  মুছে সেখানে আপনার Paypal Email বসান ।



➥ ব্যাস হয়ে গেল এবার Save Template এ ক্লিক করে সেভ করে বেরিয়ে আসুন এবার আপনার ব্লগ দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন । যদি কাজটি করতে আপনার কোন রকম সমস্যা হয় আমাকে কমেন্ট করে জানান আমি হেল্প করবো দরকার হলে আপনার থিম ব্যাকআপ দিন আমি যুক্ত করে দেবো । থিম ব্যাকআপ দেবার জন্য কমেন্ট করুন ।

➥ পোস্টটি ভালো লাগলে এবং আপনাদের কাজে লাগলে অবশ্যই একটি কমেন্ট ও বন্ধুদের সাথে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।