ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!

ব্লগে যখন কোন ধরনের Html, Css এবং JavaScript শেয়ার করা হয় তখন এগুলিকে সহজে চেনার জন্য Block Quotation ব্যবহার করা হয়।

যে কোন ব্লগে Block Quote অথবা Block Quotation দ্বারা সাধারনত ব্লগ পোষ্টের ভীতরের কিছু লেখাকে Highlight করা হয়। এটি আসলে ভিজিটরদের ব্লগের কোন অংশ সম্পর্কে স্পষ্ট ধারনা দেয়ার জন্য করা হয়। তাছাড়াও ব্লগে যখন কোন ধরনের Html, Css এবং JavaScript কোড শেয়ার করা হয় তখন এগুলিকে সহজে চেনার জন্য Block Quotation ব্যবহার করা হয়।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!

সব ধরনের ব্লগে বিভিন্ন স্টাইলের Block Quotation ব্যবহার করতে দেখা যায়। আমরা আজ আপনাদের সাথে ০২ টি Customize Blockquote Css Style শেয়ার করব। এ দুটিকে কাষ্টমাইজ করে আপনি চাইলে আপনার মনেরমত করে নিতে পারবেন।

কিভাবে করবেন?

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • এখন আপনার পছন্দমত নিচের যে কোন একটি স্টাইল টেমপ্লেট এর ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন

Customize Blockquote Style-1

ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
.post blockquote {
    background: url("https://2.bp.blogspot.com/-ExudhS_5kYA/UrBMFWQmNSI/AAAAAAAAFbs/VB-DcdJJukg/s1600/blockquote-bg.png") repeat scroll center top #F9F9F9;
    border-left:6px solid #CACACA;
    border-radius:6px;
    color:#000;
    font-size:11px;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style:italic;
    line-height:18px;
    margin:0px 0px 5px 0px;
    overflow:hidden;
    padding:10px 0px 10px 40px;
 }

Customize Blockquote Style-2

ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
.post blockquote {
    background-image: url('https://4.bp.blogspot.com/-y200gaXba74/VmVvlY3P8HI/AAAAAAAAFzc/GrTjvmg0W_c/s1600/Bloquote.png');
    background-position:0% 0%;
    background-repeat:no-repeat repeat;
    border-radius:6px;
    border-color:#007ABE;
    border-right:1px dotted;
    border-bottom:1px dotted;
    border-top:1px dotted;
    color:#000; font-size:11px;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style:italic; line-height:18px;
    margin:0px 0px 5px 0px;
    overflow:hidden;
    padding:10px 0px 10px 40px;
 }
  • সবশেষে Save Template এ ক্লিক করে Template টি Save করুন।

কাষ্টমাইজেশনঃ

  • উপরের background হতে ব্যাকগ্রাউন্ডের ছবি বা কালার পরিবর্তন করতে পারবেন।
  • border-left:6px solid #CACACA হতে Border কালার এবং Border Width পরিবর্তন।
  • এরপর color, font-size, font-family এবং font-style হতে ফন্ট স্ট্যাইল পরিবর্তন।
  • এছাড়ও Margin, Padding সহ আর অনেক স্টাইল যুক্ত করতে পারবেন।

Syntax Highlighter Style-3

যে সকল ব্লগ ওয়েব ডেভেলপমেন্ট বিষয়ে টিউটোরিয়াল শেয়ার করেন সেই সকল ব্লগের বিভিন্ন জায়গাতে কোড শেয়ার করতে হয় বিধায় কোডগুলো সুন্দর ও আকর্ষণীয় করার জন্য Syntax Highlighter ব্যবহার করার প্রয়োজন হয়। Syntax Highlighter দ্বারা ব্লগের কোডের মধ্যে বিভিন্ন ধরনের কালার ও ডিজাইন যুক্ত করা হয়। গুগল ব্লগস্পট ব্লগে ডিফল্টভাবে এ ধরনের কোড হাইলাটারের কোন অপশন থাকে না।

আজকের এই Syntax Highlighter টি আমাদের নিজের ডিজাইন করা নয়। এটি জনপ্রিয় কোড হাইলাইটার Prism তৈরি করেছে। এই কোড হাইলাইটারটি অনেক ভালোমানের ব্লগে ব্যবহার হচ্ছে। আমরা শুধুমাত্র কিভাবে যুক্ত করতে হয় সেটি আপনাদের সাথে শেয়ার করব। Prism এর Syntax Highlighter ব্যবহার করে ব্লগের HTML, CSS, Javascript, Php সহ অন্যান্য যাবতীয় কোড হাইলাইট করতে পারবেন। এটি বর্তমান সময়ের সকল ধরনের ব্রাউজার সাপোর্ট করে বিধায় কোড শো করাতে কোন সমস্যা করবে না। Prism এর Syntax Highlighter আপনার কোডগুলো নিচের ন্যায় হাইলাইট করবে।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='abovead'>
        <amp-fx-flying-carpet height='250px'>
            <amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
            </amp-ad>
        </amp-fx-flying-carpet>
    </div>
</b:if>

উপরের ডোমোতে দেখুন এটি কোডের প্রত্যেকটি অংশকে আলাদা আলাদা বিভিন্ন ডিজাইন ও কালারের মাধ্যমে হাইলাট করছে। একটি নরমাল Syntax Highlighter এর চাইতে কোডকে আকর্ষনীয় করে সহজে পাঠকের দৃষ্টি আকর্ষণ করতে সক্ষম হবে।

কিভাবে Syntax Highlighter যুক্ত করবেন?

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর নিচের চিত্রের ন্যায় Theme > Edit HTML এ ক্লিক করুন।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • উপরের চিত্র হতে Edit HTML ক্লিক করার পর ব্লগের থিমের ভীতরের সকল কোড দেখতে পাবেন।
  • তারপর কীবোর্ড থেকে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন </head> ট্যাগের ঠিক উপরে নিচের লাইনটি যুক্ত করুন।
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css' rel='stylesheet'/>
  • আবার কীবোর্ড থেকে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • তারপর </body> ট্যাগের উপরে নিচের লাইনটি যুক্ত করুন।
<script src='https://prismjs.com/prism.js'></script>
  • সবশেষে Theme Save করে বেরিয়ে আসুন। এতটুকো করলে আপনার ব্লগে Syntax Highlighter ইনস্টল হয়ে যাবে।

কিভাবে Syntax Highlighter পোস্টে যুক্ত করবেন?

  • আপনার কাঙ্খিত পেস্টের Editor এ প্রবেশ করুন।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • এখানে উপরের চিত্রের ন্যায় পোস্টের HTML বাটনে ক্লিক করলে নিচের চিত্রের ন্যায় পোস্ট HTML মোডে দেখতে পাবেন।
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • এখন উপরের চিত্রের ন্যায় আপনি যে স্থানে কোড বসাতে চান ঠিক সেই জায়গাতে নিচের কোডগুলো যুক্ত করুন।
<pre class="notranslate  language-markup">
<code class="language-html language-css language-javascript notranslate language-markup">
Code goes here...
</code>
</pre>
  • তারপর Compose এ ক্লিক করে HTML মোডটি অফ করুন।
  • HTML মোডটি অফ করার পর শুধুমাত্র Code goes here... লেখাটি দেখতে পাবেন। Code goes here... এর জায়গায় আপনার কাঙ্খিত কোড যুক্ত করলেই হয়ে যাবে।
সাহায্য জিজ্ঞাসাঃ এটি অত্যান্ত সহজ একটি পদ্ধতি। আমার মনেহয় আপনাদের কোন অংশ বুঝতে সমস্যা হবে না। তারপরও বুঝতে কোন সমস্যা হলে আমাদেরকে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের সর্বাত্মক চেষ্টা করব, ইনশাআল্লাহ্।

COMMENTS

BLOGGER: 6
  1. আমার সাইটে তো ব্লক কোটের চিহ্ন চলে আসছে। ওটাকে বন্ধ করব কীভাবে? তাছাড়া সব ঠিকই আছে মোটামুটি

    ReplyDelete
  2. ভাই আমার একটা জিনিস জানার দরকার
    নিম্নে উল্লিখিত ভাবে আমি সাইট বার সাজাতে চাই আমাকে হেল্প করবেন?
    ১। সোসাল মিডিয়া সমূহ
    ২। সার্চ
    ৩। রিসেন্ট পোষ্ট ৪টি
    ৪। নতুন পোষ্ট
    বাঁকী গেজেটেড গুলো আমি ডিলিট করতে পারছিনা কিভাবে ডিলিট করব একটু বলবেন প্লিজ

    ReplyDelete
    Replies
    1. আপনার ব্লগের এড্রেসটা আমাকে পাঠিয়ে দিন। তাহলে এ বিষয়ে সমাধান দেয়ার চেষ্টা করব।

      Delete
  3. Replies
    1. কাজ না করার মত এখানে কিছুই নেই। আমার ব্লগে দেখুন, এখনো কাজ করছে।

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
ব্লগে ৩ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
ব্লগে যখন কোন ধরনের Html, Css এবং JavaScript শেয়ার করা হয় তখন এগুলিকে সহজে চেনার জন্য Block Quotation ব্যবহার করা হয়।
https://1.bp.blogspot.com/-qNZb5myCB1I/Vm15lXOkCbI/AAAAAAAAF5c/Ho7Lz9zmHa4/s400/Blogger-Block-Quotation.png
https://1.bp.blogspot.com/-qNZb5myCB1I/Vm15lXOkCbI/AAAAAAAAF5c/Ho7Lz9zmHa4/s72-c/Blogger-Block-Quotation.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2015/12/2-attractive-customize-blockquote-style.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2015/12/2-attractive-customize-blockquote-style.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy