ব্লগার সাইটের জন্য একটি অধারণ author about widget।

আসসালামুআলাইকুম
কেমন আছেনস?? আশা করি ভালো আছেন সবাই। হুম.......আমিও ভালো আছি।
আজ আমি আপনাদের মাঝে আরো একটি নতুন টিউটোরিয়াল নিয়ে হাজির হয়েছি, আর তা হলো author about widget.

কিভাবে এড করবেন: প্রথমে নিচের কোডটি ডাউনলোড করুন।

<style>
              .about-author{font:16px Roboto,"Helvetica Neue",Helvetica,sans-serif;transition:all .3s ease-out 0s;text-align:center;clear:both}
              .about-author a{display:inline-block;color:#484848}
Read More :কিভাবে ব্লগে CSS Variable Definitions যুক্ত করার মাধ্যমে ব্লগের বিভিন্ন অংশের Color এবং Font পরিবর্তন করতে হয়
              .about-author img{margin-top:15px;width:72px;height:72px;border-radius:50%;-webkit-border-radius:50%;border:2px solid rgba(0,0,0,0.12)}
              .about-author .name{font-size:16px;font-weight:bold;line-height:0;margin:10px 0}
              .about-author .name svg{vertical-align:middle;max-width:16px;min-width:16px;height:16px;width:16px}
              .about-author .name svg path{fill:#4285F4;paint-order:stroke;stroke-width:3px;stroke:#ffffff}
              .about-author .aboutme{font-size:15px;text-align:justify;line-height:1.5em;max-width:414px;margin:auto}
              .about-author .social{padding-top:10px;line-height:0}
              .about-author .social-icon{height:32px;width:32px;display:inline-block;transform:scale(.75)}
              .followytb-icon:before{font-family:"Font Awesome 5 Pro", "Font Awesome 5 Brands";content:'\f167';background:#ff0000;text-align:center;color:#ffffff;height:32px;line-height:32px;width:32px;float:left;font-size:16px}
              .followfb-icon:before{font-family:"Font Awesome 5 Pro", "Font Awesome 5 Brands";content:'\f39e';background:#4267b2;text-align:center;color:#ffffff;height:32px;line-height:32px;width:32px;float:left;font-size:16px}
              .followblog-icon:before{font-family:"Font Awesome 5 Pro", "Font Awesome 5 Brands";content:'\f37d';background:#f5821f;text-align:center;color:#ffffff;height:32px;line-height:32px;width:32px;float:left;font-size:16px}
Read More :ব্লগে যুক্ত করুন Recent Post Widget by Label with Multi Thumbnails
              </style>
              <div class="about-author">
              <a href="//facebook.com/sayeem.hasnaen" rel="nofollow" target="_blank" data-toggle="tooltip" title="Sayeem Hasnaen">
              <img alt="Sayeem Hasnaen" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6crdvKPNbEFHsvQOqp3nNN57N6Ai2OzElE9LsmEJC5ehftyWS8wKNki3RmehLNrvpG2K91bHAmE1fSPRG8e2gWuZ5QeAFXl9XU1ts4FW2qqoek0y7RrGSZs-fNWq1E8lahOdqBhgUcS6/s320/FB_IMG_1571364958834.jpg" />
              <p class="name">
              <span>Sayeem Hasnaen</span>

Your Ads Here

Your Ads Here

              <span>
              <svg focusable="false" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>
              </svg>
Read More :ব্লগার ব্লগে যুক্ত করুন " উপরে ফিরুন " ( Back to Top ) বাটন সঙ্গে বাউন্স ইফেক্ট !!
              </span>
              </p>
              </a>
              <p class="aboutme">আমি মোঃ সাঈম হাসনাঈন, পেশায় একজন চাকরিজীবি। বর্তমানে সৌদি আরবে বসবাস করছি। আমি অবসর সময়ে অনলাইনে আর্টিকেল শেয়ার করার পাশাপাশি সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) এবং কম্পিউটার গ্রাফিক্স ডিজাইন করতে পছন্দ করি।<br /></p>
              <p class="social">
              <a href="//facebook.com/sayeem.hasnaen" rel="noopener" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Facebook"><span class="followfb-icon social-icon"></span></a>
              <a href="https://www.blogger.com/follow.g?blogID=8137694724900224739" rel="noopener" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Blog"><span class="followblog-icon social-icon"></span></a>
              <a href='https://www.youtube.com/channel/UC_Xl8iSRnrUuFeht9L3IGqg?sub_confirmation=1' rel='noopener' target='_blank' data-toggle="tooltip" data-placement="bottom" title='Youtube'><span class='followytb-icon social-icon'></span></a>
              </p>
              </div>