ব্লগ ডিজাইন লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান
ব্লগ ডিজাইন লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান

২১ জুন ২০১৬

Dilip Poddar

Permalink ব্লগ পোস্টে কি করে ব্যবহার করে onpage seo করবেন?

By     1 টি মন্তব্য:

permalink

,

onpage seo

কিভাবে আপনার ব্লগ, ব্লগারে অনপেজ সার্চ ইঞ্জিন অপটিমাইজেশন, Permalink ব্যবহার করবেন ?
সার্চ ইঞ্জিন অপটিমাইজেশনের জন্য দুধরনের কাজ করতে হয়। একটি হচ্ছে নানাভাবে সাইটের প্রচার করা, অপরটি সাইট এমনভাবে তৈরী করা যেন সার্চ ইঞ্জিন সহজে খুজে পায়। যে কিওয়ার্ড ব্যবহার করে সাইটকে  প্রাধান্য দিতে চান সেগুলি সঠিকভাবে সঠিক যায়গায় ব্যবহার করা।

পারমালিংক(Permalink) এজন্য গুরুত্বপুর্ন একটি বিষয়। একে নির্দিস্ট ফোল্ডারে রাখা নির্দিস্ট ফাইলের নামের সাথে তুলনা করতে পারেন। ব্লগে (blog) যখন কোন পোষ্ট পাবলিশ করা হয় তখন সেটা যে নামে সেভ হয়। এখানে কিওয়ার্ড ব্যবহার করলে সার্চ ইঞ্জিন সহজে পোষ্টটি খুজে পায়।

গত কয়েক বছর আগেও পারমালিংকের(Permalink) জন্য ব্লগারে নির্দিস্ট ব্যবস্থা ছিল না। সাধারনভাবে পোষ্ট টাইটেলকে এজন্য ব্যবহার করা  হলেও অনেক সময় সেখানে পোষ্টের জন্য একটি সংখ্যা সেভ হয়।

permalink

,

onpage seo

বিশেষ করে বাংলা টাইটেলের ক্ষেত্রে।

আগে ব্লগারে পারমালিংক(Permalink) ব্যবহারের(use) পদ্ধতি ছিল বেশ জটিল। দুই ধাপে কোড লিখতে হত। ব্লগার (blogger) নতুন ব্যবস্থায় সরাসরি পারমালিংক(Permalink) পরিবর্তনের সুযোগ আনা হয়েছে।

যেভাবে ব্যবহার করবেনঃ-
নতুন পোষ্ট তৈরী করুন।
পোষ্ট বডির ডানদিকে Links নামে আইকনে ক্লিক করুন।
কাষ্টম অপশন সিলেক্ট করুন এবং পারমালিংক টাইপ করে দিন।




পারমালিংকে সব ধরনের অক্ষর ব্যবহার করা যায় না।

permalink

,

onpage seo

সাধারন নিয়ম হচ্ছে যে কিওয়ার্ডগুলি ব্যবহার করবেন সেগুলিকে ড্যাস (-) দিয়ে পৃথক করে পাশাপাশি লেখা।




permalink

,

onpage seo

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


এরসাথে সার্চ ইঞ্জিন অপটিমাইজেশনের অন্যান্য নিয়মগুলি ব্যবহার করুন। সার্চ ইঞ্জিনের স্পাইডার ব্লগের প্রতিটি পোষ্ট স্ক্রল করে। যে কিওয়ার্ডগুলি গুরুত্বপুর্ন সেগুলি পোষ্টের ভেতরে একাধিকবার ব্যবহার করুন। টাইটেল লেখার সময় সবচেয়ে গুরুত্বপুর্ন কিওয়ার্ড সামনের দিকে, তারচেয়ে কম গুরুত্বপুর্ন কিওয়ার্ড পরের দিকে ব্যবহার করুন। টাইটেল বিভিন্নভাবে ব্যবহারে কি ফল পাওয়া যায় দেখে নিতে পারেন।
সাইটের স্ট্যাটিসটিকস দেখে জেনে নিন কোন কিওয়ার্ড কতটা ব্যবহার হচ্ছে। সেগুলির ওপর বেশি গুরুত্ব দিন।
Read More

০৩ জুন ২০১৬

Dilip Poddar

ব্লগ পোষ্টের দুটি ছবিতে কিভাবে Rollover Effect দিতে হয়?

By     কোন মন্তব্য নেই:
Rollover Image Effect এর অর্থ হচ্ছে দু’টি ছবি আলাদা ভাবে পোষ্ট করবেন কিন্তু দেখতে মনে হবে একটি ছবি। এর সব চাইতে আকর্ষণীয় ব্যাপার হচ্ছে যে, ছবি একটি দেখালেও ছবিটিতে মাউজ ধরা মাত্রই আপনার অপর ছবিটি অটোমেটিক বেরিয়ে আসবে অর্থাৎ সুয়াইপ করবে। অনেকে ভাবছেন হয়তো বিষয়টি বাস্তবে দেখে আসবেন, তা না হলে আপনার মনের খটকা কাঠছে না। তাহলে আমার এই পোষ্টের নিচের ছবিটতে শুধু মাউজটা ধরলেই তার প্রমান পেয়ে যাবেন। যারা ওয়েব ডেভেলপমেন্ট এর ব্যাপারে একদম নতুন তাদের কাছে ব্যাপারটি হয়তোবা আশ্চর্যকর মনে হবে। কিন্তু এটি অত্যান্ত সহজ একটি ব্যাপার। নিচের কয়েকটি ধাপ অনুসরণ করে খুব সহজেই এই Rollover Image Effect টি তৈরী করে নিতে পারবেন।








Rollover Image Effect দেয়ার জন্যঃ আপনি যে খানে বা যে পোষ্টে ইফেক্টটি দিতে চান সেখানে নিচের কোডটি কপি করে পেষ্ট করুন। আপনি ইচ্ছামত এটি যে কোন পোষ্টের ভীতরে, স্ট্যাটিক পেইজে কিংবা যে কোন উইজেট এ ব্যবহার করতে পারবেন।
<a href="Url Address"><img src="Url of the first image goes here" onmouseover="this.src='Url of the scond image goes here'" onmouseout="this.src='Url of the first image goes here'" /></a>
  • Url Address: আপনার কাঙ্খিত ঠিকানা ব্যবহার করতে পারেন। যেমন মনে করেন www.prozokti.com ইত্যাদি। তবে অবশ্যয় ঠিকানার আগে http:// ব্যবহার করতে হবে।
  • Url of the first image goes here: এ খানে অর্থাৎ লাল অংশে আপনার কাঙ্খিত প্রথম ছবিটির Url দিতে হবে। এই ছবিটি ‍সুইয়াপ করার আগে শো করবে।
  • Url of the scond image goes here: এখানে ২য় ছবিটির Url দিতে হবে। এটি মাউজ ধরার পর ছবি শো করবে বা সুয়াইপ করবে।
  • That's all. ধন্যবাদ সবাইকে।
Read More
Dilip Poddar

কিভাবে Facebook App ID তৈরী করতে হয়?

By     কোন মন্তব্য নেই:
Facebook App ID
ফেইসবুকের অনেক টুকি-টাকি বিষয় আছে যে গুলি আমরা জানি না বা আসলে জানতে চেষ্টা করিনা। কিন্তু যারা ওয়েব ডেভেলপমেন্ট কিংবা সোসিয়াল মিডিয়ায় কাজ করেন তাদের জন্য এই বিষয়গুলি জানা আবশ্যক। Facebook App ID ব্যবহার করে আমরা ফেইসবুকের অভ্যন্তরিন অনেক বিষয় জেনে নিতে পারি। যেমন-আপনার পেইজে আজ কত লোক ভিজিট করলো, কে কোন পোষ্ট গুলি দেখলো কিংবা কোন পোষ্ট গুলিতে কমেন্ট করলো ইত্যাদি আরও অনেক বিষয়। তাছাড়া ব্লগে কিংবা ওয়েভসাইটে ফেইসবুক কমেন্ট বক্স যুক্ত করতে গেলে অনেক সময় এই Facebook App ID এর প্রয়োজন হয়। এছাড়াও যারা ফেইসবুক এর বিভিন্ন App Development এ কাজ করেন তাদের অবশ্যই এই Facebook App ID তৈরী করে নিতে হবে। নিচে আমি আপনাদের দেখাবো কিভাবে অতি সহজেই আপনার Facebook App ID তৈরী করে নিতে পারেন। তাহলে আর কোন বিষয় না বলে এবার কাজের কথায় আসি।

Facebook App ID তৈরী করার উপায়ঃ
  • প্রথমে আপনার Facebook Account এ লগইন করুন।
  • তারপর এই লিংকে ক্লিক করে ফেইসবুক Developer পেজে চলে যান।
  • এখন উপরের ম্যানু থেকে My Apps এ মাউস ধরলেই অপশন আসবে। এই অপশন থেকে Add a new app এ ক্লিক করলে নিচের চিত্রটি দেখতে পাবেন।
  • নিচের চিত্রের Website অপশনে ক্লিক করুন।
Facebook-App-ID
  • Website অপশনে ক্লিক করলে নিচের চিত্রটি শো করবে। এখানে আপনার App ID এর যে কোন একটি নাম দিয়ে Create New Facebook App ID-তে ক্লিক করুন।
  • এরপর নিচের চিত্রতে আপনার ব্লগ/ওয়েবসাইটের ঠিকানা দিয়ে Next এ ক্লিক করুন।
  • এখন উপরের ডান পাশের কালো অংশে Skip Quick Start নামের ছোট একটি বাটন শো করবে। এই বাটনটিতে ক্লিক করলেই আপনার কাঙ্খিত Facebook App ID দেখতে পাবেন। নিচের চিত্রে দেখুন-
ভিডিও টিউটোরিয়াল দেখুন

Read More
Dilip Poddar

ব্লগে Facebook এবং Blogger Multi Tab কমেন্ট সিস্টেম যুক্ত করুন

By     কোন মন্তব্য নেই:
আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে Facebook Comment Boxযুক্ত করবেন। আজ আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগে Multi Tab সিস্টেমের মাধ্যমে এক সাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহার করবেন। এর ফলে আপনার ভিজিটররা তাদের পছন্দ অনুযায়ি যে কোন কমেন্ট বক্স ব্যবহার করে তাদের মতামত ব্যক্ত করতে পারবেন। নরমালি যদিও দুটি কমেন্ট বক্স একসাথে ব্যবহার করা যায়, তারপরও সেখানে কিছু সমস্যা থেকে যায়। কারণ নরমালি দুটি কমেন্ট বক্স যুক্ত করলে একসাথে দুটি কমেন্ট বক্সই শো করবে। আর এই মাল্টি ট্যাব সিস্টেম ব্যবহার করার ফলে একটি ট্যাব সব সময় উজ্জ থাকবে। যেমন-Facebook কমেন্ট বক্স ব্যবহার করার সময় Blogger কমেন্ট বক্সটি উজ্জ থাকবে, আর Blogger কমেন্ট বক্স ব্যবহার করার সময় Facebook কমেন্ট বক্সটি উজ্জ থাকবে। তাছাড়াও উভয় ট্যাবেই কমেন্ট কাউন্ট করার সিস্টেম যুক্ত করে দেওয়া আছে। ফলে যে কেউ সহজে বুঝতে পারবে আপনার পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে।
Blogger Multi Comment System
কি ভাবে যুক্ত করতে হয়ঃ
  • প্রথমে ফেইসবুক একাউন্টে লগইন করে একটি Facebook App ID তৈরী করে নিতে হবে। আপনার যদি Facebook App ID না থাকে তাহলে এখান থেকে Facebook App ID তৈরী করে নিতে পারেন।
  • তারপর আপনার ব্লগার একাউন্টে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি </head> ট্যাগের উপরে পেষ্ট করুন।
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Your_Facebook_App_ID' property='fb:app_id'/>
<script type='text/javascript'>
//<![CDATA[
function commentToggle(selectTab) {
 $(".comments-tab").addClass("inactive-select-tab");
 $(selectTab).removeClass("inactive-select-tab");
 $(".comments-page").hide();
 $(selectTab + "-page").show();
}
//]]>
</script>
  • উপরের লাল চিহ্নিত অংশে আপনার Facebook এর App ID বসিয়ে দিন।
  • এখন পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি ]]></b:skin> ট্যাগের উপরের পেষ্ট করুন।
.comments-page{background-color:#FFF;border:1px dotted #93DAF8;border-radius:10px;margin-top:5px}
#blogger-comments-page{padding:0 5px;display:none}
.comments-tab{float:left;padding:5px;margin-right:3px;cursor:pointer;background-color:#b5e5fa;border-radius:2px}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#eeeeee}
.inactive-select-tab{background-color:#d1d1d1}
  • এখন আবার কিবোর্ড হতে Ctrl+F চেপে <b:include data='post' name='post'/> ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি এই ট্যাগটির নিচে পেষ্ট করুন।
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
   <img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAB_j08UK4F_f5k8eRf74pH5fmTV8BkhDip945bNVwaXNZq4P4o8ARVztJFCY_eDrAFRUR17LPDQe6shta3uxoNbWrzKr9j5wJN1Zkgr6rwIkFfwPAJTmMzy0MmPSmGkbFDFaK7Itg7vQ/s1600/FB.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
  </div>
 <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
  <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
 </div></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='comments-page' id='fb-comments-page'>
   <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='100%'/>
  </div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>
  • এরপর Save Template এ ক্লিক করলেই কাজ OK. 
সাহায্য জিজ্ঞাসাঃ ব্লগে একসাথে Facebook এবং Blogger দুটি কমেন্ট সিস্টেম ব্যবহার করার সবচাইতে সহজ পদ্ধতীটি আপনাদের সাশে শেয়ার করেছি। কারো যদি কোন অংশ বুঝতে অসুবিধা কিংবা সমস্যা হলে আমাদের-কে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যার সমাধান দেয়ার জন্য যথাসাধ্য চেষ্টার করব।
Read More
Dilip Poddar

ব্লগের Header এ যুক্ত করুন আকর্ষণীয় ডিজাইনের Social Media Icons

By     কোন মন্তব্য নেই:

\সব ধরনের ব্লগ এবং ওয়েবসাইটের সুন্দর্য বৃদ্ধি করার জন্য Social Media Icons যুক্ত করে থাকেন। আর ব্লগার টেমপ্লেটের Header এ Social Media Icon যুক্ত করার ফলে আপনার কাঙ্খিত ব্লগটির সুন্দর্য আরও অনেকগুন বেড়ে যায়। এ জন্য সবাই চায় অন্য কোথাও এই Social Media Icon যুক্ত না করে সরাসরি Header এ যুক্ত করতে। আমি আজ যে পোষ্টটি শেয়ার করবো এটিতে আপনি ইচ্ছে করলে আনলিমিটেড আইকন ব্যবহার করতে পারবেন। আপনার ইচ্ছামত আইকন যুক্ত করতে, আবার পছন্দ না হলে বাদ দিতেও পারবেন। কাষ্টমাইজ করার জন্য "প্রযুক্তি ডট কম" এর তৈরী বেশ কিছু Social Media Icons Set  ডাউনলোড করার লিংক দেব। যার ফলে ইন্টারনেট হতে আপনাকে খুজে খুজে এ গুলি সংগ্রহ করতে হবে না। এই Social Media Icons যুক্ত করার ফলে শুধুমাত্র যে আপনার ব্লগের সুন্দর্য বৃদ্ধি পাবে তা নয়, পাশাপাশি আপনার Social Media গুলির অনেক ফ্যান বৃদ্ধি পাবে।
Blogger-Header-Social-Media-Icons
কিভাবে যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
Blogger Html Edit
  • এরপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • নিচের Css কোডগুলি কপি করে ]]></b:skin> এর উপরে পেষ্ট করুন।
#social-icons-V2 {
  height:50px;
  width:40%;
  float:right;
  clear:both;
  z-index: 2;
  position: relative;
  margin-right:10px;
  margin-bottom:0px;
}
.social-media-icons-V2 {
  display:table
}
.social-media-icons-V2 ul {
  text-align:right;
  padding:5px 5px 0 0
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
.social-media-icons-V2 ul {
  margin-bottom:0;
  padding:0;
  float:right;
}
.social-media-icons-V2 li.media_icon {
  margin-left:6px;
  padding-left:0 !important;
  background:none !important;
  display:inline;
  float:left;
}
.social-media-icons-V2 li:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(-360deg);
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
  • তারপর প্রথমে নিচের ফুল ট্যাগটি সার্চ করুন। ফুল ট্যাগটি খুজে না পেলে শুধুমাত্র লাল অংশটি সার্চ করুন।
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  • উপরের লাইনটির ঠিক উপরে নিচের কোডগুলি কপি করে পেষ্ট করুন।
<div class='social-media-icons-V2' id='social-icons-V2'>
<ul>
 <li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpoN0UjDUj3S8WJY5NLktAQPt-acyZsVOZFSRXPo3uDAaDg7P_TUOdc0QI4kOV_JZvn70_-bVfxJzcZgPa-V3maIttBkxb8l1MnyDx8znW3TH3jGpsIICc_2vmFwliPidBjFGkqvF2_Xc/s1600/FB.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistH5MFa9txpu8LbLZ-64jXajNCZKMqZGCE88-UOHmUWzBv68w0Zh4ux-B0ckGJE9u3vjg-N3QCJMmFeBtLPvTppSa0y6S0ZMtGbH84riH99lfrIk1vzpnaP5W_lncM1fze9Syy5v33Xc/s1600/Tw.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLVn42wMx5EoEm2eiDCII40PvjETbBYM1QMmghMq9GhSUWH24KcvCeVXlTnOS3uiiyzDqAmlwI_w7IEVd7g1XU9ljM__LL5_DNzax6VUGx1U4tyWKglLrVeP4IN0wbsEmI0sC30TQOLcg/s1600/Go.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOZDAYdqJ27ZfN3y-l0DSv5faSUc0-QWvO-BNOa6cGDSA7HWKP8O4Il0DqDkrT3Ft4T-Y9b_5MQKPosG5lDk3axAXCe1Nf6Gfiz7MyKFdZnPz9qWvnH8Xg5pVltgtYtL4kOUBXf7hyZc/s1600/YT.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Pinterest"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixaZlvlY8ddx4jV8rZlg7tsH8TOGfNmXHv8glRerjHk8j1qHVpJYpDSwxo-G3ao_lYI-V1zLHpyjcDG37IvtomipqHQL-lKJll0r6dd50a-shz3rr9YqPIfGaKEfuxb_Qi1_o3Z3QqBfI/s1600/Pi.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3V07nAAEYX74-6TwwP1SMaU58YBVP7XGNLJp54DDHLsa9ETOPSY57x8yyhEws-HojG4DFzKWFBXk2A0gDfmr9Rt55bMGoKmDOzwQnYvOEoMaZHPymQ48lFve4xz9ub4cC3mPkleLRa4/s1600/Rs.png" /></a></li>
</ul></div>
  • সবশেষে Save Template এ ক্লিক করুন।
কাষ্টমাইজেশনঃ
  • # এর স্থলে আপনার Social Media Url দিন।
  • যদি কোন আইকন Remove করতে চান তাহলে <li .... </li> অংশটি ডিলিট করুন।
  • যদি নূতন আইকন যুক্ত করতে চান তাহলে এখান থেকে  Download করে নিন।
Read More
Dilip Poddar

কিভাবে ব্লগারে Automatically Guest Author Box যুক্ত করতে হয়

By     কোন মন্তব্য নেই:
ব্লগারের আকর্ষণীয় একটি ফিচার্স হচ্ছে Gust Blogging. ব্লগারের শুরুর দিকে এই Gust Blogging সুবিধা ছিল না। পরবর্তীতে ব্লগার সবার কথা বিবেচনা করে এই Gust Blogging সিস্টেম চালু করে। আপনি ইচ্ছা করলে আপনার পছন্দমত Gust Blogger এর সংখ্যা বাড়ীয়ে নিতে পারেন। যার ফলে সবাই মিলে বিভিন্ন পোষ্ট করে আপনার ব্লগের জনপ্রিয়তা শীর্ষে নিয়ে যেতে পারেন। তাছাড়া আপনার হাতে যখন সময় থাকবে না তখন Gust Blogger আপনার ব্লগিং চালিয়ে যতে সাহায্য করবে। তবে আমার আজকের টপিক Gust Blogging নিয়ে নয়। আমি আজ দেখাবো কিভাবে আপনার ব্লগে Automatically Guest Author Box যুক্ত করবেন। Automatically বলার কারণ হচ্ছে পোষ্ট করার পর বার বার এটি আপনার পোষ্টে যুক্ত করতে হবে না। শুধু একবার আপনার ব্লগার টেমপ্লেটে যুক্ত করে রাখলেই কে কোন পোষ্ট করল ব্লগ অটোমেটিক তা পোষ্টের নিচে এই ইমেজটির মত শো করবে।
Blogger Gust Author Box
কিভাবে Automatically Author Box যুক্ত করবেনঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
Edit Blogger Template
  • এরপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • নিচের Css কোডগুলি কপি করে ]]></b:skin> এর উপরে পেষ্ট করুন।
<!-- Prozokti Guest Post Start -->
.Prozokti-guest img {
margin:0;
border:0;
}
.Prozokti-guest-about {
font-size:13px;
margin:0 auto;
padding:3px;
width:625px;
min-height:125px; 
background:#EDF6FF;
margin:15px auto -10px -20px;
border:1px solid #F0F0F0;
}
.Prozokti-guest {
padding-top:15px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.Prozokti-guest-text {
float:right;
width:80%;
padding:5px;
text-align:left;
font:13px/1.6em arial,sans-serif;
text-align:justify;
margin-top: -14px;
margin-bottom: -12px;
padding:0;
}
  • তারপর এই কোডটি সার্চ করুন data:post.body । এই কোডটি হয়তো আপনার ব্লগার টেমপ্লেটের একাধিক জায়গায় দেখতে পাবেন। আপনি ২য় টিতে Try করে দেখতে পারেন। ২য় টিতে কাজ না হলে ৩য় টি অথবা ১ম টিতে Try করবেন। তাহলে অবশ্যই হবে।
  • উপরের অংশটির ঠিক নিচে এই কোডগুলি কপি করে পেষ্ট করুন।
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;মোঃ হারুন-অর-রশিদ&quot;'>
<div class='Prozokti-guest-about'>
<div class='Prozokti-guest'><img height='70' src='Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='Prozokti-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
</b:if></b:if>
  • আপনার ব্লগে যদি একাধিক Gust Author থাকে, তাহলে উপরের কোডটি না দিয়ে নিচের কোডগুলি ঠিক আগের জায়গায় পেষ্ট করুন।
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;1st Guest Author Name&quot;'>
<div class='Prozokti-guest-about'>
<div class='Prozokti-guest'><img height='70' src='1st Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='Prozokti-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write 1st author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;2nd Guest Author Name&quot;'>
<div class='Prozokti-guest-about'>
<div class='Prozokti-guest'><img height='70' src='2nd Guest Author Picture Url' width='80'/> Guest Author </div>
<div class='Prozokti-guest-text'>
<p><strong><font face='verdana'>About the Guest Author:</font></strong>
<br/> Write 2nd author Bio here <br/>
Follow her @ <a href='#' target='_blank'>Twitter</a> | <a href='#' target='_blank'>Facebook</a> | <a href='#' target='_blank'>Google+</a></p>
</div>
</div>
</b:if></b:if></b:if></b:if>
  • উপরের পিংক কালারের মোঃ হারুন-অর-রশিদ/1st Guest Author Name এর জায়গায় আপনার নাম অথবা Gust Author নাম দিতে হবে। নামটি অবশ্যই পোষ্টের নাম এর সাথে মিল থাকতে হবে। অন্যথায় এই Author বক্সটি শো করবে না। নিচের চিত্রে দেখুন -
Blogger Post Author Name
  • উপরের বক্সের লাল চিহ্নিত অংশে আপনার Author এর Picture Url দিতে হবে।
  • সবশেষে Save Template এ ক্লিক করুন। That's All.
Author Box কাষ্টমাইজেশনঃ
  • উপরের প্রথম বক্সের Css কোড হতে Author বক্সের Height, Width, Margin, Border, Background কালার পরিবর্তন করতে পারবেন।
  • এছাড়াও এই Css কোড গুলি কাষ্টমাইজ করে Author বক্সের অনেক পরিবর্তন করতে পারবেন।
Read More
© Copyright 2016 Newdisa-All Releted To knowledge|| Desingd by|| Dilip Poddar ||