লেখক পরিচিতি (Author) বক্স ব্লগার ব্লগ এর জন্য ।

4 106

বন্ধুরা সবাই ক্যামন আছেন ভালতো আজে আমি আপনাদের জন্য নিয়ে এলাম একটি ভিন্ন ধরনের লেখক পরিচিতি বক্স মানে Author বক্স । এটা দেখতে খুবি সুন্দর এবং একটা স্লাইড করবে । তাই এটাকে দেখতে আরও সুন্দর দ্যাখাবে । তাহলে নীচে ডেমো তে ক্লিক করে এর ডেমো দেখে নিন ।

 

 

dsrfsetr

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

1. আপনার ব্লগার ব্লগ ড্যাশবোর্ড এ যান তারপর Layout এ ক্লিক করুন ।

২. এবার Add a Gadget এ ক্লিক করে HTML/JavaScript করুন । 
 
3. এবার Content ঘরে নীচের কোডটি কপি করে পেস্ট করুন । 
<style>
#BloggerSpiceRibbonAuthorBox {
position: absolute;
top: 30px;right: 32%;
z-index: 10;
width: 108px;
height: 160px;
background-color: #333;
color: #999;
-webkit-box-shadow: 0 5px 7px rgba(0,0,0,.7);
-moz-box-shadow: 0 5px 7px rgba(0,0,0,.7);
box-shadow: 0 5px 7px rgba(0,0,0,.7);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: right 5.15s linear;
-moz-transition: right 5.15s linear;
-ms-transition: right 5.15s linear;
-o-transition: right 5.15s linear;
transition: right 5.15s linear;
border: 1px solid;
border-color: #444 #222 #222 #444;
padding: 10px;
-webkit-transition: all 7s ease-out;
-moz-transition: all 4.26s ease-out;
-ms-transition: all 7s ease-out;
-o-transition: all 4.26s ease-out;
transition: all 7s ease-out;
}
#BloggerSpiceRibbonAuthorBox:hover {right: 12%;-webkit-transition: all 0s ease-out!important;
-moz-transition: all 0s ease-out!important;
-ms-transition: all 0s ease-out!important;
-o-transition: all 0s ease-out!important;
transition: all 0s ease-out!important;}
#BloggerSpiceRibbonAuthorBox, {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
-animation-duration: 2s;
}
#BloggerSpiceRibbonAuthorBox:after {
content: “”;
display: block;
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 20px;
border: 15px solid transparent;
border-top-color: #333;
}
#BloggerSpiceRibbonAuthorBox .img-container img {
display: block;
background-color: #3c3c3c;
padding: 5px 0;
}
#BSBack li a {
display: block;
background-color: #3c3c3c;
color: #ccc;
font: normal normal 8px/normal Arial,Sans-Serif;
text-transform: uppercase;
position: relative;
-webkit-transition: all .26s ease-out;
-moz-transition: all .26s ease-out;
-ms-transition: all .26s ease-out;
-o-transition: all .26s ease-out;
transition: all .26s ease-out;
padding: 6px 10px;
}
#BloggerSpiceRibbonAuthorBox .img-container {
width: 82px;
border: 3px double #3c3c3c;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.4);
margin: 0 0 10px auto;
padding: 10px;
}
#BSBack {
width: 108px;
display: block;
margin: 0 0 0 -10px;
}
#BSBack li a:before {
content: “”;
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
border: 11px solid transparent;
border-right-color: #333;
}
#BSBack li {
list-style: none;
}
#BSBack li.BS1 a:hover, #BSBack li.l-3 a:focus {
background-color: #0186cb;
}
#BSBack li.BS2 a:hover, #BSBack li.l-3 a:focus {
background-color: #005C91;
}
<!–www.asobondhu.blogspot.com–>
</style>
<div id=”BloggerSpiceRibbonAuthorBox” style=”margin-right: 0px; width: 108px; overflow: hidden;”>
<div>
<a href=”/”><img alt=”MD Aslam parvez” src=”https://www.pchelplinebd.com/wp-content/uploads/2013/09/photo.png” height=”70″ width=”82″ /></a>
</div>
<ul id=”BSBack”>
<li>
<a href=”#“>About Author</a>
</li>
<li>
<a href=”#“>Contact Us</a>
</li>
</ul>
</div>

* এবার একটু এডিট করতে হবে !

 

1. সব উপরে top: 30px;right: 32% মুছে আপনার ইছে মতো করে নিতে পারেন তবে না করলেও সমস্যা নাই । 

 
2. এবার https://www.pchelplinebd.com/wp-content/uploads/2013/09/photo.png  এটাকে মুছে সেখানে আপনার ফটো Url টি দিন । 
 
3. এবার গুলকে মুছে আপনার দরকার মতো Url দিন । ব্যাস এবার Save এ ক্লিক করে সেভ করে নিন । 
 
 
* তাহলে আজকের মতো এই পর্যন্ত কোন সমস্যা হলে জানাবেন । ভাল থাকবেন । আল্লাহ্‌ হাফেজ । 
* আমার ব্লগ এখানে সময় পেলে ঘুরে আসুন । আমার ফেসবুক ফ্যান পেজ এখানে সময় পেলে ঘুরে আসুন ভাল লাগলে একটি লাইকে দিয়ে আসুন । 

পিসি হেল্পলাইন বিডি এর সঙ্গেই থাকুন

4 মন্তব্য
  1. আকাশ বলেছেন

    চমৎকার পোস্টটি শেয়ার করার জন্য ধন্যবাদ।

  2. হামিদ খান বলেছেন

    thanks for share

  3. Nafiz Ur Rahman বলেছেন

    পোস্টটি শেয়ার করার জন্য অসংখ্য ধন্যবাদ ।

  4. নাঈম প্রধান বলেছেন

    সুন্দর পোস্ট । শেয়ার করার জন্য ধন্যবাদ।

উত্তর দিন