How to create about me widget in blogger / blogspot
 |
| ব্লগারে নিজের সম্পর্কে ১টি উইজেট |
আশা করি সবাই ভালো আছেন। আমিও ভালো আছি।
সবার মত আমি বলব না যে SMsudipBD.Com এর সাথে থাকলে সবাই ভালো থাকে।
তবে আমি চেস্টা করি সবাই কে ভালো রাখার।আর পরম করুনা ময় সৃষ্টি কর্তার কাছে প্রার্থনা করি যেন তিনি সবাই কে ভালো রাখেন।
আজ আমি আবার একটি বিষয়ে লিখতে চাচ্ছি।
কি ভাবে ব্লগারে নিজের সম্পর্কে ১টি উইজেট বানাবেন।
অনেকেই এই বিষয় পারেন।কিন্তু আমি আজ এই টিউটোরিয়াল দিচ্ছি তাদের জন্য যারা পারেন না।
আর যারা পারেন তাদের কে অসংখ্য ধন্যবাদ।
এই Widget সম্পর্কে এর আগের ১ টি টিউটোরিয়াল দেওয়া আছে কিন্তু অনেকে বলতেছেন সোস্যাল আইকন ইরর আছে।
 |
নিজের সম্পর্কে ১টি উইজেট
|
তাই নতুন করে আবার এই বিষয়ে টিউটোরিয়াল লিখলাম।
আশা আপনার সমস্যার সমাধান আজ পেয়ে যাবেন।
তবে শুরু করা যাক...
আপনি আপনার ব্লগার সাইটে চলে যান।
Dashboard থেকে Layout এ যান।
Sidebar gadget থেকে Add Gadget/widget এ ক্লিক করে Html / Javascript Gadget add করুন।
১ টি New window open হবে।
একটি বক্স দেখতে পাবেন সেখানে নিচের কোড টি পেস্ট করুন
এবং Save করুন।
[CODE]<! -- ABOUT ME CSS START -->
<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>
<! -- ABOUT ME CSS END -->
<! -- ABOUT ME HTML START-->
<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/AVvXsEgwWwr_3UopPOq-DXtxW5PiAmgSLleeLJHJDmVfNiw5JAvcl3ls5JYlaeWX5brU0ryBIb7pt3izJQJgIU8YbCEqdtUWmwOH-IzBq8f0Cw354wx0LdoCyyz1PG-YE0kH8HQw8OaorrJttMj5/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>
<! -- ABOUT ME HTML END -->[/CODE]
এবার Dashboard থেকে Theme এ যান।
Theme edit করুন।
এবার
search করুন < head>
search করার জন্য Kyeboard এ চাপুন ctrl + f
নিচের স্টাইল শীট কোড টি এড করে নিন।
[CODE]<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"/>[/CODE]
এবার টেমপ্লেট টি Save করুন।
এবার ভিসিট করে দেখুন।
সোস্যাল আইকন আর এরর আস্তেছে না।
সব শো করতেছে।
আজ এ পর্যন্তই । সকলে ভালো থাকবেন।
সকল কে শারদীয়ার শুভেচ্ছা।
8 comments