Blogger About Me Widget Code ।। নিজের সম্পর্কে একটি Html , Css দ্বারা তৈরি Template Code.

Blogger About Me Widget Code

হেলো বন্ধুরা,

আমি সুদীপ কুমার রায়। আজকে আমি আপনাদের মাঝে নতুন একটি কোড নিয়ে হাজির হয়েছি। আশা করি আজকের এই নিজের সম্পর্কে Widget Code টিও আপনাদের অনেক অনেক উপকারে আসবে।

...শুরু করা যাক...

ব্লগারের নিজের সম্পর্কে একটি উইজেট যোগ করা অনেক সুন্দর এবং সাধারনত পাঠকদের জন্য খুব সুবিধাজনক। এটি আপনার ব্লগের পাঠকদের নিজের সম্পর্কে আরও জানতে সাহায্য করবে এবং তাদের আপনার কাছে আস্থা জন্মানোর সুযোগ দিবে।

আপনি এই উইজেট কোডটি আপনার ব্লগের যেকোনো জায়গায় সংযোজন করতে পারেন, যেমন সাইডবার, ফুটার বা হোম পেজে।

এটি একটি `<div>` ট্যাগের মধ্যে থাকে এবং স্টাইল প্রোপার্টিগুলি ব্যবহার করে উইজেটের ব্যাকগ্রাউন্ড রং এবং প্যাডিং নির্ধারণ করে। আপনি চাইলে স্টাইল প্রোপার্টিগুলি পরিবর্তন করে আপনার পছন্দমত করতে পারেন।

উপরের উদাহরণেঃ-

- `background-color: #f2f2f2;`: এটি উইজেটের ব্যাকগ্রাউন্ড রং নির্ধারণ করে। আপনি চাইলে এটিকে আপনার ব্লগের ডিজাইনে মিলান করতে পারেন।

- `padding: 10px;`: এটি উইজেটের প্রান্তিক প্যাডিং নির্ধারণ করে। আপনি চাইলে প্যাডিংটি পরিবর্তন করে উইজেটের প্রান্তিক সংখ্যাটি পরিবর্তন করতে পারেন।

উইজেটের ভিতরে `<h2>` ট্যাগে আপনার নাম বা ব্লগের শিরোনাম দিতে পারেন এবং `<p>` ট্যাগে আপনার ব্লগের সংক্ষিপ্ত বিবরণ যুক্ত করতে পারেন। আপনার ব্লগের উপযুক্ত কন্টেন্ট এবং তথ্য সাহায্যে উইজেটটি আপনার পাঠকদের সাথে ভালোভাবে পরিচিত করবে।

আপনি এই উইজেট কোডটি নতুন HTML ফাইলে কপি করতে পারেন এবং ব্লগের মাধ্যমে এটি সংযোজন করতে পারেন। ব্লগের টেমপ্লেট অনুযায়ী সম্পাদনা করার জন্য আপনি CSS ব্যবহার করে উইজেটটির ডিজাইন নিজের পছন্দ অনুযায়ী কাস্টমাইজ করতে পারেন। আপনি চাইলে উইজেটের ডিজাইন এবং স্টাইল পরিবর্তন করতে CSS ব্যবহার করতে পারেন।

উইজেটে আপনার নাম, ছবি, সামাজিক নেটওয়ার্ক লিঙ্কগুলি যুক্ত করার মতো অপশনও আছে। এই উপাদানগুলি যুক্ত করতে আপনি এই উইজেট কোডটিতে <a> ট্যাগগুলি ব্যবহার করতে পারেন।

# About Me Html Template Code


:root {
--red:#ff0000;
--white:#ffffff;
--black:#000000;
--ddd:#dddddd;
--blue:#0000ff;
}
#profile-wrapper {
    background: var(--ddd);
    width: 100%;
    max-width: 300px;
    margin: 0px auto;
    padding: 10px;
    border-radius: 3px;
}
#profile-wrapper h2 {
    font-size: 15px;
    text-align: left;
    color: var(--white);
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding: 5px;
    border-bottom: 2px solid var(--black);
}
#profile-wrapper h2::before {
    position: absolute;
    content: "About Me";
    background: var(--black);
    width: 70px;
    height: 17px;
    margin: -5px 0px 0px -5px;
    padding: 5px;
}
#profile-wrapper h2::after {
    content: "";
    position: absolute;
    border-top: 27px solid transparent;
    border-left: 50px solid var(--black);
    border-right: 30px solid transparent;
    margin: -5px 0px 0px 10px;
}
.profile-box {
    border-top: 20px solid transparent;
    border-left: 115px solid transparent;
    border-right: 115px solid transparent;
    border-bottom: 100px solid var(--black);
}
.profile-image {
    background: var(--white);
    width: 60px;
    height: 60px;
    margin: 0px auto;
    border-left: 5px solid var(--black);
    border-right: 5px solid var(--black);
    border-top: 5px solid var(--black);
}
.profile-image img {
    width: 60px;
    height: 60px;
}
.profile-box span a {
    position: absolute;
    background: var(--ddd);
    padding: 3px 5px;
    color: var(--blue);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    margin:5px 0px 0px -10px;
    border-radius: 10px 0px;
}
#profile-wrapper p {
    display: grid;
    position: absolute;
    color: var(--black);
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
    font-weight: bold;
    margin-block-start: 0px;
    margin-block-end: 0px;
    background: var(--ddd);
    padding: 5px;
    width: 290px;
    height: 50px;
    margin: 40px 0px 0px -115px;
    border: 1px solid var(--black);
    align-items: center;
}
#profile-wrapper p:before {
    position: absolute;
    content: "";
    border-top: 0px solid transparent;
    border-bottom: 12px solid var(--ddd);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    margin: -70px 0px 0px 130px;
}
.profile-link-left {
    display: grid;
    width: 30px;
    height: 30px;
    background: var(--black);
    margin: 10px 0px -50px -80px;
    border-radius: 5px 0px;
    align-items: center;
}
.profile-link-right {
    display: grid;
    width: 30px;
    height: 30px;
    background: var(--black);
    margin: -50px 0px 10px 120px;
    border-radius: 0px 5px;
    align-items: center;
}
.profile-link-left a,.profile-link-right a {
    color: var(--white);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}


<div id='profile-wrapper'>
<h2>About Me</h2>
<div class='profile-box'>
<div class='profile-link-left'>
<a href='https://facebook.com/smsudipbd' title='Facebook'>F</a>
</div>
<div class='profile-image'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBYq7SUpqM1LXcACUY5Y-5UH5i_E9isMyYh8fUlvAVc-Vr-dBWHjWz65w0g699yRuihrqIgtP-g7zlZ_zPCsiqh6hNY4spOpKzwVKwc-UOR-P48YJ2EhVZetgSeF_O1UWJ1htZDl5KSOkri7E1QF70PfoumCNZpTMSuFL-EKOb0nz/s220/sudip.png' alt=''></img>
</div>
<div class='profile-link-right'>
<a href='https://twitter.com/smsudipbd' title='Twitter'>T</a>
</div>
<span><a href='' title='Profile'>SMsudipBD</a></span>
<p>I am Web Developer.<br/>+8801761106753</p>
</div>
</div>

প্রিয় বন্ধুরা আশা করি আজকের কোড টি পেয়ে আপনারা খুশি হয়েছেন। কমেন্ট বক্সে আপনার মুল্যবান মতামত জানাতে ভূলবেন না। ধন্যবাদ।

ক্রেডিট বাইঃ- এস এম সুদীপ বিডি ডট কম।

ট্যাগসঃ- Blogger About Me Widget Code ।। নিজের সম্পর্কে একটি Html , Css দ্বারা তৈরি Template Code.