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

ব্লগার সাইটের জন্য একটি অধারণ author about widget।
Posted by Sayeem
Your Ads Here

            আসসালামুআলাইকুম  
কেমন আছেনস??  আশা করি ভালো আছেন সবাই।        হুম.......আমিও ভালো আছি।
আজ আমি আপনাদের মাঝে আরো একটি নতুন টিউটোরিয়াল নিয়ে হাজির হয়েছি, আর তা হলো 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}
              .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}
              </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>
              <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>
              </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>

 Download 

ডাউনলোড করা শেষ হলে,  এবার আপনি আপনার ব্লগার মেনু থেকে লেআউট এ যান।

লেআউট এ যাওয়ার পর আপনি আপনার পছন্দমত যাইগা ছিলেক্ট করুন।


তারপর HTML/JavaScript ছিলেক্ট করুন।

এবং এখানে ডাউনলোড করা কোডগুলো পেস্ট করুন।


অবশেষে সেইভ করুন।এবং উপভোগ করুন।

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here

নবীনতর পোস্টসমূহ নবীনতর পোস্টসমূহ পুরাতন পোস্টসমূহ পুরাতন পোস্টসমূহ

Related Posts

Your Ads Here

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন
Loading comments...