ব্লগার এর নিজের সম্পর্কে একটি html widget code

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

আশা করি সকলেই ভাল আছেন।

আজ আমি আপনাদের নতুন একটি টিউটোরিয়াল শেয়ার করব।

আশা করি আজকের টিউটোরিয়াল টি আপনাদের অনেক অনেক ভালো লাগবে।

ব্লগার এর নিজের সম্পর্কে একটি html widget code

আজ আমি আপনাদের দেখাবো নতুন একটি ব্লগার উইজট দেখাবো। এটি ব্লগার এবাউট মি উইজট।

এই ব্লগার এবাউট মি উইজট দেখতে অনেক সুন্দর আশা করি আপনাদেরও অনেক অনেক ভালো লাগবে।

ইদানিং দেখতেছি আমাদের এই ওয়েব সাইট এ অনেক অনেক ভিজিটর কমে গেছে। তার কারন আমি জানি , তবে কিছু করার নেই।

এই ব্লগার ওয়েব সাইট এ আমি এক মাত্র একাই জা জানি তা শেয়ার করি। সকল নিউন নিজের তৈরি এবং পরীক্ষিত।

এখানে কোন কিছু কপি করে আমি শেয়ার করি না। আশা করি সকলেই এই বিষয় টি বুঝতে পেরেছেন।

এক জন মানুষের পক্ষে নিত্য নতুন কিছু শেয়ার করা সহজ হয়ে উঠে না।  আমি বিভিন্ন প্রোগ্রামিং করি সে গুলো তৈরি করতেও বেশ সময় লেগে যায়।

তাই বলে আমি অফ লাইনেও থাকি না। কোন না কণ কাজে ব্যস্ত থাকি।

যাই হোক কাজের দিকে আসা যাক, আজ আমি আপনাদের মাঝে ব্লগার এর নিজের সম্পর্কে একটি html widget code share করতেছি।

আপনাদের ভাল লাগলে অবশ্যই কমেন্ট করে জানাতে ভুলবেন না।

#যে ভাবে এই widget টি ব্লগারে সেটআপ করবেন ?

যে ভাবে এই widget টি ব্লগারে সেটআপ করবেন তার ধাপ গুলো লিস্ট আকারে দিয়ে দিচ্ছি। লক্ষ্য করুন।

১। ব্লগারে লগিন করুন।

২। Layout এ ক্লিক করুন।

৩। যেখানে নিজের সম্পর্কে widget টি যুক্ত করবেন সেই সেকশনে গিয়ে add html/javascript এ ক্লিক করুন।

৪। একটি বক্স ওপেন হবে। এখানে title এ লিখে দিবেন about me.

আর নিচের ফাকা বক্সে নিচের কোড টি দিয়ে দিবেন।

# নিজের সম্পর্কে কোডঃ-

<div id="about-me">

<div class="about-me">

</div>

<a href="" title="Admin of JagrotoDesh"><div class="profile-me">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCmvn9YvEQ8YQ7EBbjWC-cXB6aifQ_fEm8W1HptLYZTEuLb1ZdawJl7OOMTCvyWBG8iGsgXOzZhrtKD77ZtiFGDyVjyJuDs8Ae-FWzoBSB9bfFOdcqEqaDDr9cldl05lPv7gBsepJu2uw/w100/favicon.png" width="108px" height="108px"/>

</div></a>

<div class="my-name"><a href="" title="Admin of JagrotoDesh">JagrotoDesh</a></div>

<div class="my-bio">

I Am Student Of Architechture And Interior Design.

<br />

I Like Design And Writing A Love Story.

</div>

<div class="social-me">

<a href="https://facebook.com/sudip.modhusodon" title="Find me Facebook"><i class="fa fa-facebook-f" style="font-size:15px;" aria-hidden="true"></i></a>

<a href="https://twitter.com/smsudipbd" title="Find me Twitter"><i class="fa fa-twitter" style="font-size:15px;" aria-hidden="true"></i></a>

<a href="https://Youtube.com/channel/UC7JLnSaRsWEbhMQuuzd7T3w" title="Find me YouTube"><i class="fa fa-youtube-play" style="font-size:15px;" aria-hidden="true"></i></a>

</div>

</div>

<style type='text/css'>

/*-- About me css (start) --*/

.admin-profile h2{margin:0!important;border-radius:5px 5px 0 0;color:#fff;padding:5px;font-size:13px;background:#fff;background-color:#ff12cf;text-align:center;background-image:-webkit-gradient(linear,left top,right top,from(#1da1f2),to(#4f37ac));background-image:linear-gradient(to right,#ff12cf,#5336ad)}#about-me{background:#fff;text-align:center;padding:15px;margin-bottom:15px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 2px 0 -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 2px 0 -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 2px 0 -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.12);-webkit-transition:box-shadow .25s;-moz-transition:box-shadow .25s;-ms-transition:box-shadow .25s;-o-transition:box-shadow .25s;transition:box-shadow .25s;border-radius:5px}

.about-me{background:#444;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc47S6rh0wg_HOXe3E4v6h-jXCzhGPhEgkvUoAw6D_fJ3by7zCFE8ZxWz6cAb1uCy5QqF2ANkr6XmECOa0eRVDxVN_f838syiqkQv3ORkpN9WN6D5__qosM9u_E8OfUL-Kc-KxpH7uPXjz/s220/FFF.png");background-repeat: no-repeat;background-position: center;width:100%;height:150px;margin:0 auto;border-radius:10px;background-size: cover;}

.profile-me {

    position: relative;

    width: 110px;

    height: 110px;

    margin: -100px auto 0;

}

.profile-me::before{

    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1jYg_5XaxljjxrUxDaZfNLF0lNUEz2s4JEJI5iXISaOYBYTjmBbPUSYPTeTLBfPmdlO-buJaFvr2cfZ4DWd93dE0oEwajXBJnZ8bnhlVrHP6DNzOR-iFLqq6dGKOfbYoPcrLh-exiwQ/s1600/circle-border-pink-over.png");

    background-position: center;

}

.profile-me::before {

    content: '';

    position: absolute;

    top: -1%;

    right: -1%;

    left: -1%;

    bottom: -1%;

    z-index: 90;

    background-repeat: no-repeat;

    background-size: 100% 100%;

}

.profile-me img{width:110px;height:110px;background:#ddd;border:2px solid #ff12cf;border-radius:100px;position:relative}.social-me{margin:30px auto 0}.social-me a:hover{background:#4f37ac;color:#fff}.social-me a{background:#ff12cf;font-size:15px;padding:5px 10px;color:#fff;text-decoration:none;border-radius:5px;margin:0 20px}.my-name a:hover{color:#4f37ac}.my-bio{color:#000;padding:5px}.my-name{margin:10px auto}.my-name a{color:#ff12cf;font-size:16px;padding:10px;text-decoration:none}

/*-- About me css (end) --*/

</style>

পরিশেষে বলতে চাই , আমার এই আর্টিকেলে যদি এত টুকু ও সমস্যা অনুভব করেন তবে নির্দ্বিধায় কমেন্ট বক্সে

বলে ফেলুন।

অবশ্যই আমি আপনাদের সমস্যা টি সমাধান করার সর্বচ্ছ চেষ্টা করব।

এত ক্ষন ধরে আমার এই টিউটোরিয়াল মনোযোগ সহকারে পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।

অনেক সময় ব্যয় করে ১ টি টিউন বানাই , অথচ আপনাদের মন্তব্য আমি পাই না। তখন মনে হয় আমার টিউন গুলো কারো উপকারে আসে না।

আপনাদের মন্তব্য পেলে নতুন আরেক টিউন নিয়ে হাজির হব খুব শিগ্রই।

ব্লগার এর নিজের সম্পর্কে একটি html widget code

কোন অসুবিধা মনে হলে নিচের কমেন্ট বক্সে কমেন্ট করে জানাবেন।আজ আর বেশি কিছু লিখছি না।

অবশ্যই আমার ভুল গুলো ধরায় দিবেন , আমি চেস্টা করব আমার ভুল গুলো শোধরানোর।

সকলের মঙ্গল ময় জীবন, সুসাস্থ কামনা করে আজকের টিউটোরিয়াল এখানেই শেষ করতেছি।

ভালো থাকবেন।

ভুল অথবা ত্রুটি গুলো ক্ষমা সুন্দর দৃষ্টি তে দেখবেন।

আজ এ পর্যন্তই।

টাটা।

ক্রেডিট বাইঃ- SMsudipBD.Com