ব্লগার Sidebars জন্য অভিনব রিবন পটভূমিগুলি!

আপনার ব্লগের সাইডবারে পরিবর্তে যে ভোঁতা প্লেইন টেক্সট শিরোনাম শিরোনাম জন্য একটি শীতল নকশা পরিবর্তন খুঁজছেন? আজ আমরা ব্লগস্পট টেমপ্লেট মধ্যে পার্শ্বদন্ডে শিরনাম পটভূমিগুলি কাস্টমাইজ একটি মজার উপায় শিখতে হবে. আপনি রিবন, গাছের আচ্ছাদন বা চাঁদোয়া বা কার্টেন স্টাইল ফটোশপ গ্রাফিক ডিজাইন দেখেছি কিন্তু তাদের সঙ্গে সমস্যা হল আপনি তাদের আরও তারাও তৈরি আপনার ওয়েবপেজ লোড সময় মন্দীভূত করা ভাল নকশা দক্ষতা আছে প্রয়োজন হয়. তাই আমরা এগিয়ে একটি একক চিত্র ব্যবহার ছাড়া বিশুদ্ধ সিএসএস 3 নিয়ম সাহায্যে রিবন শৈলী ব্যাকগ্রাউন্ড ডিজাইন দ্বারা সবচেয়ে সহজ সমাধান নিয়ে আসছে! পদ্ধতি নীচে বর্ণিত এটা ওয়ার্ডপ্রেস বা ব্লগার হতে পারে, কোনো প্ল্যাটফর্ম পটি ব্যাকগ্রাউন্ড তৈরি করতে ব্যবহার করা যেতে পারে. সমস্ত আপনাকে যা করতে হবে কিছু সিএসএস শৈলী আপ যোগ করুন. আমরা নিশ্চিত এই আপনার অনলাইন ডায়েরি একটি অতিরিক্ত সাধারণ বর্ণন যোগ এবং বোধ করবে! ডেমো আমাদের ব্লগ পার্শ্বদন্ডে লাইভ দেখা যাবে. তার সময় আপনার ব্লগার কারখানা ঢোকা এবং সৃজনশীল হতে. চল শুরু করি! এছাড়াও পড়ুন: সর্বাধিক জন্য মন্তব্য বুদবুদ উইজেট মন্তব্যব্লগারে রিবন ব্যাকগ্রাউন্ড তৈরি করুনকোন সাইডবার উইজেট জন্য একটি পটি পটভূমি তৈরি করার জন্য প্রথমে আমরা যে উইজেট আইডি মান জানা প্রয়োজন. যে জন্য নিচের কাজগুলো করুন:উইজেট আইডি মূল্য খোঁজা: উইজেট উইন্ডোটিতে আপনি একটি দীর্ঘ http- র URL টি পাবেন পপ আপ এর এড্রেস বারে বিভাগে আপনার উইজেট খুলতে এডিট বাটনে ক্লিক ব্লগার> লেআউটে যান. লিংক এর শেষের দিকে আপনি নিচে দেখানো widgetid মান পাবেন. যা আমাদের ক্ষেত্রে HTML13 হয়.সঠিক একই আকারে উইজেট আইডি 4. কপি এই উইজেট মান. 5. সম্পন্ন! পরবর্তী পদক্ষেপসমূহ এখন সরান.দ্রষ্টব্য: এই উইজেটডিজাইনিং সিএসএস 3 দিয়ে পটি পটভূমি

1. Go To Blogger > Template
2. Backup your template
3. click Edit HTML to open the template editor
4. Inside the editor hit Ctrl + F to open a search box.
5. Search for ]]></b:skin>
6. Just above it paste the following style code:

/*####### FANCY RIBBON BACKGROUNDS BY MBT #######*/
#HTML13 h2
{
position: relative;
padding: 10px 0px 15px !important;
margin: 0px 0px 10px 27px !important;
color: #ffffff;
background-color: #282C2F;
box-shadow: 0px 2px 4px rgb(136, 136, 136);
border-top: 3px solid #000000;
background-image: none !important;
height: auto !important;
width: 338px;
}

#HTML13 h2:before
{
    content: ' ';
    position: absolute;
    width: 30px;
    height: 0;
    left: -30px;
    top: 16px;
    border-width: 20px 10px;
    border-style: solid;
    border-color: #282C2F #282C2F #282C2F transparent;
     
}

#HTML13 h2:after
{
    content: ' ';
    position: absolute;
    width: 30px;
    height: 0;
    right: -30px;
    top: 16px;
    border-width: 20px 10px;
    border-style: solid;
    border-color: #282C2F transparent #282C2F #282C2F;
}


#HTML13 h2 span:before
{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #353A3D #353A3D transparent transparent;
        z-index:99999;
}

#HTML13 h2 span:after
{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #353A3D transparent transparent #353A3D;
        z-index:99999;

এর জন্য অনুবাদ দেখাচ্ছে Follow these customization tips to give your ribbon any color you want: To change the background color of the ribbon edit the hexadecimal color codes highlighted as yellow i.s: #282C2F Tip: you can use our color generator tool To change the background color of the ribbon tails edit: #353A3D Tip: Give it a slightly lighter shade compared to the background. See an example of ribbon tails below. Background is Red but tails are lighter Red. ribbon tails To change the text color edit #ffffff To change the color of border top edit #000000; if you don't want to add a border then delete border-top: 3px solid #000000; ribbon top border To change the width of the ribbon background edit 338px 7. Now Click "Jump to widget" button located at the top in template editor and select the widget value. In our case it was HTML13 so I will select this one: jump to widget 8. Expand the code by clicking the black arrow. You will need to expand it one more time. expand widget 9. In the expanded code you will find this code: <h2 class='title'><data:title/></h2> Replace it with this one: <h2 class='title'><span><data:title/></span></h2> Here we simply enclosed the sidebar Headline with a Span tag in order to apply the ribbon tail effect. The headline could have a Tag <h2> or <h3> or even <h1> . This tag may differ in custom templates. 10. Save your template and you are all done! Visit your blog and discover a Fantabulous ribbon background on your sidebar! Ain't it that easy? :) Need Help? We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help. Peace and blessings buddies. :)

পরিবর্তে এর থেকে অনুবাদ করুন Follow these customization tips to give your ribbon any color you want: To change the background color of the ribbon edit the hexadecimal color codes highlighted as yellow i.e: #282C2F Tip: you can use our color generator tool To change the background color of the ribbon tails edit: #353A3D Tip: Give it a slightly lighter shade compared to the background. See an example of ribbon tails below. Background is Red but tails are lighter Red. ribbon tails To change the text color edit #ffffff To change the color of border top edit #000000; if you don't want to add a border then delete border-top: 3px solid #000000; ribbon top border To change the width of the ribbon background edit 338px 7. Now Click "Jump to widget" button located at the top in template editor and select the widget value. In our case it was HTML13 so I will select this one: jump to widget 8. Expand the code by clicking the black arrow. You will need to expand it one more time. expand widget 9. In the expanded code you will find this code: <h2 class='title'><data:title/></h2> Replace it with this one: <h2 class='title'><span><data:title/></span></h2> Here we simply enclosed the sidebar Headline with a Span tag in order to apply the ribbon tail effect. The headline could have a Tag <h2> or <h3> or even <h1> . This tag may differ in custom templates. 10. Save your template and you are all done! Visit your blog and discover a Fantabulous ribbon background on your sidebar! Ain't it that easy? :) Need Help? We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help. Peace and blessings buddies. :)

সম্পাদনা হেক্সাডেসিমেল কালার কোড হলুদ হিসেবে তুলে ধরা হয় পটি পটভূমির রঙ পরিবর্তন করতে: আপনার পটি কোনো রং আপনি চান দিতে এই স্বনির্ধারণ টিপস অনুসরণ # 282C2F টিপ যদি আমাদের রঙ জেনারেটর টুল ব্যবহার করতে পারেন পটি পটভূমির রঙ পরিবর্তন করতে মুদ্রার উলটা পিঠ সম্পাদনা: # 353A3D টিপ: এটি ব্যাকগ্রাউন্ডে তুলনায় সামান্য লাইটার ছায়া দাও. নিচে পটি মুদ্রার উলটা পিঠ একটি উদাহরণ দেখুন. পটভূমি রেড কিন্তু মুদ্রার উলটা পিঠ হালকা লাল.মুদ্রার উলটা পিঠ ফিতে টেক্সট রঙ সম্পাদনা #FFFFFF পরিবর্তন করতে সীমানার শীর্ষ # 000000 সম্পাদনা রং পরিবর্তন করতে; যদি আপনি একটি সীমানা যোগ করতে না চান, তাহলে সীমান্ত টপ মুছতে: 3px কঠিন # 000000;শীর্ষ সীমান্ত ফিতে পটি পটভূমি সম্পাদনার প্রস্থ পরিবর্তন করতে 338px 7. এখন ক্লিক করুন টেমপ্লেট এডিটর মধ্যে শীর্ষে অবস্থিত বাটন "ঝাঁপ উইজেট" এবং উইজেট মান নির্বাচন করুন. আমাদের ক্ষেত্রে এটি HTML13 ছিল তাই আমি এই এক নির্বাচন হবে:উইজেট 8. লাফ কালো তীর ক্লিক করে কোড প্রসারিত করুন. আপনি এটা আরো এক সময় প্রসারিত করতে হবে.উইজেট 9. প্রসারিত কোড প্রসারিত আপনি এই কোড পাবেন: <h2 & বর্গ = 'শিরোনাম'> <তথ্য: শিরোনাম /> </ h2>এই এক সঙ্গে এটি প্রতিস্থাপন করুন: <h2 & বর্গ = 'শিরোনাম'> <span> <তথ্য: শিরোনাম /> </ span> </ h2>এখানে আমরা কেবল অর্ডার পটি লেজ প্রভাব প্রয়োগ করার জন্য একটি স্প্যানের ট্যাগ দিয়ে পার্শ্বদন্ডে শিরনাম ঘিরা. শিরোনামটি একটি ট্যাগ <h2> বা <h3> বা এমনকি <h1> থেকে থাকতে পারে. এই ট্যাগটি কাস্টম টেমপ্লেট মধ্যে ভিন্ন হতে পারে. 10. আপনার টেমপ্লেট সংরক্ষণ করুন এবং আপনার সব সম্পন্ন করা হয়!আপনার ব্লগ ভিজিট করুন এবং আপনার সাইডবারে একটি অবিশ্বাস্যরকমের চমত্কার পটি পটভূমি আবিষ্কার! এটা যে সহজ নয়? :)সাহায্য দরকার?আমরা এই টিউটোরিয়ালে সাহায্য করে আপনি আরও আগে কখনও মত আপনার ব্লগ সাজাইয়া রাখা এবং সুন্দর উইজেট যে আপনার পাঠকদের আরও নিয়োগ করিতে পারিবে তৈরি আশা. আমাদের যদি আপনার কোন সাহায্যের প্রয়োজন হলে আমাদের জানতে দিন. শান্তি ও অনুগ্রহ বর্ষিত বন্ধুদের. :)

খবর বিভাগঃ ব্লগ টিপস

শেয়ার করুন