*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks
Showing posts with label Blog Site Responsive. Show all posts
Showing posts with label Blog Site Responsive. Show all posts

মোবাইল Template থেকে অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করুন

Wednesday, May 4, 2016
মোবাইল Template থেকে কিভাবে অপ্রয়োজনীয় HTML ট্যাগ Remove করতে হয় তা নিয়ে আমরা গত পোষ্টে বিস্তারিত আলোচনা করেছি। এখন আমরা শিখব কিভাবে অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করতে হয়। মোবাইল টেমপ্লেটের Load Time Fast করার জন্য অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করা প্রয়োজন।
মোবাইল Template থেকে অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করুন।
ব্লগার টেমপ্লেটের সাইডবারসহ বিভিন্ন জায়গাতে অনেক ধরনের Widget ব্যবহার করা হয়ে থাকে, যেগুলি মোবাইল টেমপ্লেটে ব্যবহার করার প্রয়োজন পড়ে না। যদি সকল ধরনের Widget মোবাইল টেমপ্লেটে ব্যবহার করেন তাহলে আপনার ব্লগটি মোবাইল ভার্সনে অত্যন্ত স্লো গতির হবে। ইতিপূর্বে আমরা জেনেছি যে, কম্পিউটার ভার্সনের চাইতে মোবাইল ভার্সন খুবই স্লো গতির হয়ে থাকে। কাজেই সব ধরনের অপশন মোবাইল ভার্সনে ব্যবহার না করে শুধুমাত্র প্রয়োজনীয়গুলি মোবাইলে ব্যবহার করা উচিত। আমাদের ব্লগ মোবাইল থেকে ভিজিট করলে দেখতে পাবেন অনেক উইজেট Disable করে রাখা হয়েছে, শুধুমাত্র Hide করা হয়নি। সুতরাং অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করার জন্য প্রয়োজন সঠিকভাবে Conditional Tag ব্যবহার করা।
সকল পোষ্ট দেখুন

 কিভাবে Responsive Templates থেকে Widgets Disable করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন আপনি যে Widget টি Disable করতে চান সেটি খোঁজে বের করতে হবে। কিভাবে খোঁজতে হয় তাএই লিংক থেকে দেখে নিতে পারেন।
  • যে কোন উইজেট এর কোডগুলি সাধারনত নিচেরমত হবে।
<b:widget id='HTML3' locked='false' title='Most Commented' type='HTML'>
   <b:includable id='main'>
     <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'> <data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
     <b:include name='quickedit'/>
  </b:includable>
</b:widget>
  • সঠিকভাবে বন্ধ করার করার জন্য নিচের Conditional Tag টি ব্যবহার করতে হবে।
<b:widget id='HTML3' locked='false' title='Most Commented' type='HTML'>
   <b:includable id='main'>
   <b:if cond='data:blog.isMobileRequest == "false"'>
     <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'> <data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
     <b:include name='quickedit'/>
    </b:if>
  </b:includable>
</b:widget>
  • এখানে আমরা isMobileRequest Boolean Value টি False করে দিয়েছি। যার কারনে উইজেটটি শুধুমাত্র ডেস্কটপ ব্রাউজারে দেখাবে এবং মোবাইর টেমপ্লেট হতে Disable করে রাখবে।
  • আপনি যদি কোন উইজেট শুধুমাত্র মোবাইল টেমপ্লেটে দেখাতে চান তাহলে isMobileRequest Boolean Value টি True লিখে দিতে পারেন।
  • সব কিছু করার পর অবশ্যই Template Save করে নিবেন।

 কিভাবে Responsive Templates থেকে JavaScript Disable করবেন?

ব্লগের বেশীরভাগ Widget গুলিতে আমরা বিভিন্ন ধরনের Scripts ব্যবহার করে থাকি। যদিও উপরের পদ্ধতিতে শুধুমাত্র Widget Disable হবে কিন্তু Widget এর জন্য যে Scripts আপনার টেমপ্লেটের ব্যবহার করছেন সেগুলি ঠিকই কাজ করতে থাকবে। শুধুমাত্র Widget Disable করলেই হবে না, Widget এর সাথে যে সকল Scripts রয়েছে সেগুলিও Disable করতে হবে। তবেই Scripts গুলি আপনার ব্লগকে অযথা Render করতে পারবে না।

ব্লগার টেমপ্লেটের JavaScript গুলি সাধারনত টেমপ্লেটের <head>......</head> এর ভীতরে ব্যবহার করা হয়ে থাকে। সুতরাং আপনি নিজেই জানেন আপনার কাঙ্খিত Widget গুলির Scripts কোথায় আছে। সেগুলি খোঁজে তারপর নিচের পদ্ধতি অনুসরণ করুন।
  • JavaScript Disable করার জন্য নিচের Conditional Tag টি আপনার ব্লগের Scripts আগে ও পরে ব্যবহার করতে হবে।
<b:if cond='data:blog.isMobileRequest == "false"'>

JavaScript to Hide

</b:if>
  • JavaScript to Hide অংশটিতে অপ্রয়োজনীয় Scripts ব্যবহার করবেন। তাহলে এটি মোবাইল ভার্সন হতে Disable হয়ে থাকবে। 
  • অপরদিকে যদি শুধুমাত্র মোবাইলে দেখাতে চান তাহলে False এর স্থলে True লিখে দিন।
সাহায্য জিজ্ঞাসাঃ এই পদ্ধতিতে সবগুলি অপ্রয়োজনীয় HTML, Widgets ও JavaScript Disable করে রাখলে আপনার ব্লগটির Load Time অনেকাংশে বৃদ্ধি পাবে। আশা করছি উপরের সহজ টিপসটি আপনাদের বুঝতে কোন অসুবিধা হবে না। এরপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের জানাতে পারেন।
Read More »
Share this Post Share to Facebook Share to Twitter Email This Pin This

ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন

Wednesday, April 27, 2016
প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৫ম পর্ব শুরু করছি। আমাদের আজকের পর্বে শেয়ার করব কিভাবে ব্লগার Template এর Header এ আকর্ষণীয় Menu Bar যুক্ত করবেন। উল্লেখ্য যে, আমরা ইতিপূর্বে প্রফেশনাল ব্লগার টেমপ্লেট তৈরি করার ৪ টি টিউটরিয়াল পাবলিশ করেছি। এই পোষ্টটি আপনার ব্লগে Apply করার আগে অবশ্যই আগের পর্বগুলি ভালভাবে দেখে নেবেন।
ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন
যে কোন পার্সোনাল এবং ব্যক্তিগত ব্লগে কিংবা ওয়েবসাইটে একটি Menu Bar থাকা আবশ্যক। Menu Bar ছাড়া কিছুতেই কোন প্রকার ওয়েবসাইটেরই পূর্ণতা পেতে পারে না। আপনি যদি ভিজিটরদের আপনার ব্লগ সম্পর্কে স্পষ্ট ধারনা দিতে চান তাহলে অবশ্যই আপনার ব্লগে একটি Menu Bar যুক্ত করে রাখতে হবে। ভিজিটররা ওয়েবসাইটের Menu Bar দেখলেই বুঝতে পারবে আপনার সাইটে কি ধরনের কনটেন্ট আছে। উপরের চিত্রে আজকের পর্বে Menu Bar টির ডেমো দেখতে পাচ্ছেন। এটি সম্পূর্ণ Responsive ডিজাইনে তৈরি করা হয়েছে। কাজেই ছোট-বড় সব ধরনের ডিভাইসে ভালভাবে শো করাতে পারবেন।

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

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগার Template এর Header অংশে Responsive Menu Bar যুক্ত করুন
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </header> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি </header> ট্যাগের নিচে পেষ্ট করুন।
<div class='clear'/>
<nav id='main-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='max-wrapper'>
<a class='responsive-menu' href='#' id='mobile-menu'><i class='fa fa-reorder'/> Menu</a>   
   <ul class='menu'>
    <li><a class='home' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> HOME</a></li>
    <li><a href='#'><i class='fa fa-bullhorn'/> BLOGING</a></li>
    <li><a href='#'><i class='fa fa-wrench'/> WIDGETS</a></li>
    <li><a href='#'><i class='fa fa-android'/> ANDROID <i class='fa fa-sort-desc'/></a>
   <ul class='sub-menu'>
    <li><a href='#'>Sub-Menu 1</a></li>
    <li><a href='#'>Sub-Menu 2</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
    <li><a href='#'>Sub-Menu 3</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
   </ul>
    </li>
    <li><a href='#'><i class='fa fa-dollar'/> EARNING</a></li>
    <li><a href='#'><i class='fa fa-tags'/> CATEGORIES <i class='fa fa-sort-desc'/></a>
   <ul class='sub-menu'>
    <li><a href='#'>Sub-Menu 1</a></li>
    <li><a href='#'>Sub-Menu 2</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
    <li><a href='#'>Sub-Menu 3</a>
   <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
    <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
    <li><a href='#'>Sub Sub-Menu 5</a></li>
   </ul>
    </li>
   </ul>
    </li>
    <li><a href='#'><i class='fa fa-search'/> SEO</a></li>
    <li><a href='#'><i class='fa fa-gear'/> TOOLS</a></li>
    <li><a href='#'><i class='fa fa-camera'/> PORTFOLIO</a></li>
   </ul>
  </div>
</nav>
<div class='clear'/>
  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের কোডগুলি পেষ্ট করুন।
/* Main Menu
-------------------------------------------------------- */
#main-nav{display:block;margin-top:0px;background:#374147}
.menu{padding:0px;margin:0px;display:block}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#ff675c}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;left:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;left:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:normal;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#4496A4;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.home{background:#ff675c}
@media (min-width:768px) and (max-width:979px){
  .mainWrap{width:768px}
  .menu ul{top:37px}
  .menu li a{font-size:12px}
  a.home{background:#374147}
}
@media (max-width:768px){
  .mainWrap{width:auto;padding:50px 20px}
  .menu{display:none}
  .responsive-menu{display:block;margin-top:100px}
  nav{margin:0;background:none}
  .menu li{display:block;margin:0}
  .menu li a{background:#fff;color:#797979}
  .menu li a:hover,.menu li:hover>a{background:#9ca3da;color:#fff}
  .menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
  .menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}
  .menu ul ul{left:0;transform:initial}
  .menu li>ul ul:hover{transform:initial}
}
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • নিচের কোডগুলি </head> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#mobile-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>
</script>
  • আবার কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • নিচের লাইন দুটি </body> ট্যাগের উপরে পেষ্ট করুন।
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
  • সবশেষে Save Template এ ক্লিক করুন।
পরবর্তী পোষ্টঃ পরবর্তী পোষ্টে আমরা ব্লগার টেমপ্লেটের আরেকটি গুরুত্বপূর্ণ অংশ Footer নিয়ে বিস্তারিত আলোচনা করব। ততক্ষণ আমাদের সাথে থাকুন।
Read More »
Share this Post Share to Facebook Share to Twitter Email This Pin This

কিভাবে ব্লগের Posts এবং Sidebar Column Responsive করতে হয়?

Wednesday, April 27, 2016
গত পোষ্টে আমরা ব্লগের Header অংশগুলিকে Responsive করার একটি টিউটরিয়াল শেয়ার করেছি। তাছাড়া Responsive Web Design কি এবং কিভাবে তৈরি করতে হয় সে ব্যাপারে বেসিক টিউটরিয়ালও আপনাদের সাথে শেয়ার করেছি। আগের পোষ্টগুলি যদি পড়ে না থাকেন তাহলে এই পোষ্টটি পড়ার আগে অবশ্যই আগের পোষ্টগুলি পড়ে নিবেন। তাহলে Responsive Web Design কি এবং কিভাবে করতে হয় তার বিস্তারিত ধারনা পাবেন।
কিভাবে ব্লগের Posts এবং Sidebar Column Responsive করতে হয়?
সাধারণত ব্লগের Content Area এর ভীতরে Post এবং Sidebar দুটি অংশ থাকে। নিচের চিত্রে দেখুন Blogger Layout এ Post ও Sidebar দুটি অংশ রয়েছে। ডিফল্ট টেমপ্লেটে সাধারণত 2 Column এর হয়ে থাকে। তবে Custom টেমপ্লেট 3 Column এরও হয়। আমরা আজ আপনাদের দেখাব কিভাবে 2 Column Template এর Post ও Sidebar Responsive করতে হয়।
কিভাবে ব্লগের Posts এবং Sidebar Column Responsive করতে হয়?


উপরের এই চিত্রটি হচ্ছে ব্লগার টেমপ্লেটের Input এর Layout. এটি কম্পিউটার ভার্সনের Output হবে নিচের চিত্রের মত।
কিভাবে ব্লগের Posts এবং Sidebar Column Responsive করতে হয়?
এটিতে Responsive Media Queries যুক্ত করার পর পোষ্ট এবং সাইডবার দুটি Full Width হয়ে যাবে। যার ফলে ‍দুটি অংশেরই কনটেন্ট সহজে সকল ধরনের ডিভাইস থেকে পড়া যাবে। নিচের চিত্রে দেখুন Responsive করার পর কেমন দেখাচ্ছে।
কিভাবে ব্লগের Posts এবং Sidebar Column Responsive করতে হয়?

 কিভাবে Posts এবং Sidebar Responsive করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
@media only screen and (max-width:768px) {

#outer-wrapper {overflow:hidden!important;width:100%!important;}

#main-wrapper, .post, .comments {width:95%!important; overflow:hidden;}

.comments .comments-content {width:95%!important;}

#sidebar-wrapper {float:none;margin:0 auto}

}
  • উপরের কোডের মূল আইডি #outer-wrapper এর Width:100% রেখেছি, যা আমরা গত পর্বে আলোচনা করেছিলাম।
  • সবসময় মূল আইডি এর মধ্যেকার সকল সেকশনগুলি মাপ মূল আইডির মাপের চাইতে কিছুটা ছোট রাখতে হবে। অভ্যন্তরিন সেকশনগুলির মাপ 95% বা তার চেয়ে একটু কম-বেশী করে দিতে পারেন।
  • সর্বশেষ সাইডবার অংশটি Float:none করার ফলে কোথাও Float হতে পারবে না এবং margin:0 auto করার কারনে Footer টি অটোমেটিক মাঝখানে বসে যাবে।
  • এছাড়াও আপনার প্রয়োজনানুসারে বিভিন্ন সাইজের Media Queries যুক্ত করে নিতে পারেন।
  • নোটঃ উপরের সবুজ কালের ID গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।
সর্বশেষঃ এছাড়াও ব্লগের পোষ্টের ভীতরে Image ও Related Posts Widget সহ আর কিছু অপশন থাকে। পোষ্টের Image Responsive করার একটি পোষ্ট খুব শীঘ্রই আমরা শেয়ার করব। উপরের পদ্ধতীতে পোষ্টের ভীতরের বাকী অপশনগুলি আপনি নিজেই Responsive করে নিতে পারবেন। তারপরও কোন সমস্যা হলে আমাদের জানাতে পারেন।
Read More »
Share this Post Share to Facebook Share to Twitter Email This Pin This

কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?

Wednesday, April 27, 2016
আমরা ইতিপূর্বে Responsive Blog Design তৈরির কয়েকটি পোষ্ট শেয়ার করেছি। আজকের পোষ্টের মাধ্যমে আমাদের এ সিরিজের সকল পোষ্ট সমাপ্ত হবে। আমরা আজকের পোষ্টে শেয়ার করব কিভাবে Blog Posts Image ও Posts Thumbnail Image সহ সকল সেকশনের Image এর Resolution নষ্ট না করে Responsive করতে হয়? সাধারণত ব্লগের বেশীর ভাগ Image সাইজ বড় হওয়ার করনের ছোট মাপের ডিভাইসগুলিতে Image Adjust হয় না। ফলে পোষ্টের Image ব্রাউজারের বাহিরে অবস্থান নেয়। এতে ব্লগ পোষ্টগুলির Interface নষ্ট হয়ে যায়।
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?

 কেন ব্লগের Images Mobile Friendly করতে হয়?

বেশীরভাগ মোবাইল বা স্মার্ট ফোন ছোট সাইজের এবং মোবাইল ইন্টারনেট Low Bandwidth এর হয়ে থাকে। এর ফলে মোবাইল ডিভাইস থেকে ভিজিট করার সময় Image লোড নিতে সময় নেওয়ার পাশাপাশি প্রচুর পরিমানে Bandwidth অযথা নষ্ট করে। যার দুটিই বিরক্তকর এবং ব্যয়বহুল। ব্লগের Image Responsive করার ফলে সকল ধরনের ছোট বড় ডিভাইসের সাইজ অনুযায়ী Image গুলি Auto Adjust হয়ে যায়। যার ফলে ব্লগের Interface ভাল হওয়ার পাশাপাশি দ্রুত লোড নিয়ে অযথা Bandwidth নষ্ট হওয়ার হাত থেকে রক্ষা করে। অধীকন্তু Responsive Image আপনার ব্লগের SEO Ranking এর ক্ষেত্রেও গুরুত্বপূর্ণ অবদান রাখবে।

অবস্থানবেধে Image Size এর পরিবর্তনঃ সাধারণ Responsive ব্লগের Image গুলি ডিভাইসের সাইজবেধে বিভিন্ন রকমের হয়ে থাকে। বিশেষ করে ব্লগের হোম পেজের Image ছোট ডিভাইসের মাঝামাঝি অবস্থান করে এবং আর্টিকের Image এর নিচে অবস্থান করে, অন্যদিকে মাঝারি মাপের ডিভাইসে হোম পেজের Image বাম পাশে থেকে আর্টিকেল Float হয়ে ডান পাশে অবস্থান নেয়। এতেকরে সকল ডিভাইস থেকে ব্লগের হোম পেজকে আকর্ষনীয় দেখা যায়। তাছাড়া ব্লগের পোষ্ট পেজের Image Responsive করার পর সকল ধরনের ডিভাইসের সাইজ অনুযায়ী Automatic ছোট বড় হতে থাকে। যার ফলে পাঠকের চাহিদা সহজে মেঠানো যায়। নিচে আমরা তিনটি Screenshot এর মাধ্যমে আপনাদের ধারনা দিচ্ছি Responsive ব্লগের Image অবস্থানবেধে কি রকম হয়?

ছোট ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?
মাঝারি মাপের ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?
ব্লগের পোষ্ট পেজের Image নিচের চিত্রেরমত সকল ডিভাইসে Auto Adjust হতে থাকবে-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?

 কিভাবে ব্লগের Image Responsive করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
@media only screen and (max-width:768px) {

.headerleft a img, .headerright a img {max-width:75%!important;margin-left:0;position:absolute;height:auto;left:30px}

.post img, .post a img {max-width:95%;height:auto}

#sidebar .widget-content img, #sidebar .widget-content a img {max-width:98%;height:auto}

#footer-wrapper img, #footerbar-wrapper a img {max-width:98%;height:auto}

}
  • উপরের সবগুলি সেকশনেরই Max-Width ব্যবহার করা হয়েছে। এটি Image Responsive করার জন্য খুব গুরুত্বপূর্ণ একটি মাপ। এটি সবসময় 100% এর কম রাখবেন। তাহলে প্রত্যেকটি Image মূল জায়গার চেয়ে কিছুটা ছোট হয়ে ঠিকমত অবস্থান করবে।
  • নোটঃ উপরের সবুজ কালের ID ও Class গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।

 কিভাবে Home Page এর Post Thumbnails Image কে Responsive করবেন?

  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর নিচে পেষ্ট করুন।
<b:if cond='data:blog.pageType == "index"'>
<style>
   @media only screen and (max-width:786px) {
   .post img, .post a img {max-width:50%; height:auto; float:left; margin: 0px 10px 10px 0px}
}
   @media only screen and (max-width:480px) {
   .post img, .post a img {width:95%; float:none; height:auto; clear:both; margin-bottom:10px}
}
</style>
</b:if>
  • উপরের কোডটিতে একটি Conditional Tag ব্যবহার করা হয়েছে। এটি আপনার ব্লগের Home Page এর Thumbnails Image -কে সকল ধরনের ডিভাইসের উপযোগী করে নেবে, যেটি আমরা উপরের প্রথম দুটি মোবাইল Screenshot এ দেখিয়েছি।
  • সবশেষে Template Save করে নিন।
সাহায্য জিজ্ঞাসাঃ এখন আপনি ইচ্ছে করলে আমাদের ০৭ টি টিউটরিয়ালের মাধ্যমে আপনার ব্লগকে পরিপূর্ণ Responsive করে নিতে পারবেন। কারণ আমরা সবগুলি পোষ্ট বিশ্লেষণ করে ধারাবাহিকভাবে বর্ণনা করেছি। তারপরও যদি কোন পোষ্টের অংশ বুঝতে অসুবিধা হয় তাহলে আমাদের জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের পরিপূর্ণ চেষ্টা করব।
Read More »
Share this Post Share to Facebook Share to Twitter Email This Pin This

কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করতে হয়?

Wednesday, April 27, 2016
Responsive Blog Designs কি তা নিয়ে আমরা ইতিপূর্বে একটি পোষ্ট শেয়ার করেছি। এ ব্যাপারে বেসিক বিষয়গুলি জানতে চাইলে আগের পোষ্টটি পড়ে নিবেন। ব্লগার টেমপ্লেটে Header, Body এবং Footer এই তিনটি গুরুত্বপূর্ণ অংশ রয়েছে। এই তিনটি অংশ এবং Image গুলিকে Responsive করতে পারলেই সম্পূর্ণ টেমপ্লেটই Responsive Designs এর হয়ে যায়। আমরা এই চারটি অংশকে আলাদা আলাদাভাবে Responsive করার টিউটরিয়াল শেয়ার করব।
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
ডিফল্ট ব্লগার টেমপ্লেটের Header এ সাধারণত দুটি সেকশন থাকে। প্রথম সেকশনে থাকে ব্লগের Logo এবং দ্বিতীয় অংশে থাকে ব্লগ পেজের Menu Bar. অন্যদিকে কাষ্টম ব্লগার টেমপ্লেটের Header অংশ দুট ভাগে ভাগ করা থাকে। বাম পাশে থাকে ব্লগার টেমপ্লেটের Logo এবং ডান পাশে একটি উইজেট যুক্ত করার অপশন থাকে। ডেস্কটপ এবং লেপটপ এর সাইজ বড় হওয়াতে এই অংশগুলি কম্পিউটার থেকে ভিজিট করার সময় কোন সমস্যা হয় না, কিন্তু মোবাইল থেকে ভিজিট করলে হেডার অংশ পরিষ্কারভাবে দেখার জন্য Zoom করার প্রয়োজন পড়ে। এই সমস্যা থেকে পরিত্রান পাওয়ার জন্য বিভিন্ন সাইজের Media Queries যুক্ত করে নিতে হয়।

Media Queries কিঃ Media Queries সকল ধরনের ডিভাইসের সাইজ অনুযায়ী ব্লগের Layout কে উপযুক্ত করে নেয় অর্থাৎ কম্পিউটার, টেবলেট ও মোবাইলের বিভিন্ন সাইজবেধে Layout কে সঠিকভাবে Display করে। এতেকরে ব্লগের সকল অপশন দেখতে সুবিধা হয়। উদাহরণ স্বরূপ-কম্পিউটার থেকে কোন সাইট ভিজিট করলে তখন ব্লগের Menu Bar গুলি সঠিকভাবে দেখা যাবে কিন্তু যখন 480PX এর মোবাইল থেকে ভিজিট করবে তখন Menu Bar ঠিকমত না দেখে এলোমেলোভাবে দেখা যাবে। এই জন্য প্রয়োজন হবে 480PX এর মাপমত Media Queries যুক্ত করা। 480PX এর Media Queries ঐ সাইজের মোবাইলে আপনার ব্লগের ম্যানুবারটি সঠিকভাবে Display করবে। এ ভাবে আপনি যখন ব্লগের প্রত্যেকটি অংশে সঠিক মাপের Media Queries যুক্ত করে নিবেন তখন ব্লগের প্রত্যেকটি অংশ সব ধরনের Device এ সঠিকভাবে Display করবে। কি কি সাইজের Media Queries যুক্ত করতে হয় তা নিয়ে আমরা ইতিপূর্বে আলোচনা করেছি।

 কিভাবে Header অংশগুলিকে Responsive করবেন?

নিচের চিত্রে আমাদের ব্লগের কম্পিউটার ভার্সনের Header এর একটি Screenshot দেখুন। এখানে আপনি বেশ কিছু অপশন দেখতে পাচ্ছেন। যেটিতে Media Queries যুক্ত না করলে ছোট মাপের ডিভাইসে কিছুতেই সঠিকভাবে দেখা যাবে না।
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
উপরের চিত্রের এই Header টিতে বাম পাশে Blog Log, ডান পাশে Search Box, উপরে একটি Menu এবং নিচে আরেকটি Menu Bar রয়েছে। সুতরাং উপরের চারটি অংশকে প্রত্যেকটির Section অনুযায়ী Responsive করতে হবে অর্থাৎ প্রত্যেকটি অংশকে Media Queries এর ভীতরে রেখে সাইজমত CSS Style যুক্ত করতে হবে। তবেই এই Header টি Responsive হবে। এখন নিচে আরেকটি চিত্রে আমাদের ব্লগের Responsive Header এর Screenshot দেখুন-
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
উপরের চিত্রটিতে দেখুন যেখানে আমরা Top Menu ও Bottom Menu সহ Search Box টি isMobileRequest ব্যবহার করে মোবাইল টেমপ্লেট হতে Disable করে রেখেছি। সর্বোপরি একটি সার্চ বক্সসহ মোবাইল ফ্রেন্ডলি ম্যানুবার যুক্ত করার পাশাপাশি Header Logo টিকে Center করে রেখেছি। এতেকরে Header অংশটি ছোট বড় সকল ধরনের ডিভাইসে সঠিকভাবে Display হবে।

 কিভাবে Media Queries যুক্ত করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
@media only screen and (max-width:768px) {

#header {overflow:hidden!important;width:100%!important;}

.headerleft{top:5px;margin-bottom:10px!important; width:100%;}
.headerright{float:none;margin:0 auto!important;width:100%;}

.headerleft a img,.headerright a img{
  max-width: 75%!important;
  height:auto;
  margin-left: 0;
  position: absolute;
  left: 30px;}
}
  • সবসময় মূল ID অথবা Class এ Overflow Property যুক্ত করতে হবে। এই overflow অংশটি Horizontal Scroll-Bar টি বন্ধ করে রাখবে। সব ধরনের ব্লগার টেমপ্লেটে #header সেকশনের ID টি এক ধরনের হয়ে থাকে।
  • প্রত্যেকটি সেকশনের Width:100% করার ফলে সবগুলি অংশ Full Width হয়ে থাকবে। যার ফলে কোন অংশ ডানে কিংবা বামে Float করতে পারবে না।
  • সবশেষের Header Logo টিকে 75% করা হয়েছে, যাতেকরে ব্লগের Logo টি Header এর চাইতে একটু ছোট হয়ে মাঝখানে বসে থাকে। আপনি ইচ্ছে করলে এই সাইজটি আপনার প্রয়োজনানুসারে ছোট বড় করে নিতে পারেন।
  • অপ্রয়োজনীয় Menu Bar ও Search Box বন্ধ করার জন্য isMobileRequest ব্যবহার করুন, যা আমরা পূর্বের দুটি পোষ্টে আলোচনা করেছি।
  • নোটঃ উপরের সবুজ কালের Class গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।
সাহায্য জিজ্ঞাসাঃ যাদের HTML5 ও CSS3 সম্পর্কে ধারনা কম রয়েছে তাদের জন্য উপরের বিষয়গুলি কিছুটা কঠিন মনে হবে। তাপরও যদি সম্পূর্ণ পোষ্টটি ভালভাবে বুঝে পড়েন তাহলে খুব সহজেই Header অংশটিকে Responsive করে নিতে পারবেন। সব কিছুর পরেও যদি কোন অংশ বুঝতে অসুবিধা হয় তাহলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা ২৪ ঘন্টা মধ্যে সমাধান করার চেষ্টা করব, ইনশাআল্লাহ্।
Read More »
Share this Post Share to Facebook Share to Twitter Email This Pin This

Badiuzzaman ( Rubel )