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









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


১// প্রথমে আপনার ব্লগস্পট ব্লগ লগ ইন করুন । ড্যাশবোর্ড 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 এ ক্লিক করে সেভ করে বেরিয়ে আসুন এবার আপনার ব্লগ দেখুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন । যদি কাজটি করতে আপনার কোন রকম সমস্যা হয় আমাকে কমেন্ট করে জানান আমি হেল্প করবো দরকার হলে আপনার থিম ব্যাকআপ দিন আমি যুক্ত করে দেবো । থিম ব্যাকআপ দেবার জন্য কমেন্ট করুন ।

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

একটি মন্তব্য পোস্ট করুন Blogger

  1. ami amar blog author box add korchi.but amar author box poster upore ata amar kache akhon valo lagche na.ami ki kore amar author box ta upper theke down a anbo.
    janale khushi hobo
    mail:gsmideazone@gmail.com

    advance thanks because i got a lot of real tutorial from ur blog

    উত্তরমুছুন
    উত্তরগুলি
    1. ধন্যবাদ কমেন্ট করার জন্য ! এটা খুব সহজ ৬ নাম্বার স্টেপ দেখুন সেখানে যে ট্যাগ দিয়েছি সেই ট্যাগ এর ঠিক নিচে শেষের কোড গুল কপি পেস্ট করুন । ধন্যবাদ ।

      মুছুন

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

 
Top
Blogger Widgets