Mar 27, 2016

ব্লগে Post Author, Date, Labels ও Comments Display করুন

প্রত্যেক ব্লগের জন্য এই ধরনের অপশনগুলি একদম কমন একটি বিষয় এবং ‍প্রায় সব ধরনের ব্লগে এই অপশনগুলি ব্যবহার করতে দেখা যায়। সেই জন্য অনেকে পোষ্টটি দেখেই বলবেন এ ধরনের অনেক পোষ্ট ইতিপূর্বে বিভিন্ন ব্লগে শেয়ার করা হয়েছে। হ্যাঁ, বিষয়টি আমিও রিসার্চ করে দেখেছি যে, এ ধরনের পোষ্ট ইতিপূর্বে বাংলা ও ইংরেজীসহ আরো বিভিন্ন ধরনের ব্লগে শেয়ার করা হয়েছে। তবে আপনি পোষ্টটির কোডগুলি ভালভাবে লক্ষ্য করলে ইতিপূর্বে বিভিন্ন ব্লগে শেয়ার করা পোষ্ট ও আমার পোষ্টটির মধ্যে পার্থক্য খোঁজে পাবেন।
ব্লগে Post Author, Date, Labels ও Comments Display করুন
উপরের চিত্রে সকল অপশন গুলির ডেমো দেখুন। এই অপশনগুলি আমরাও আমাদের ব্লগে ব্যবহার করছি। এটির Author এর নামের পাশে পোষ্টটির Author এর ছবিও শো করছে। অনেকে ভাবছেন এই ছবিটি আমরা ম্যানুয়ালি সেট করে দিয়েছি বিধায় ছবি শো করছে। এটির সবচাইতে বড় সুবিধা হচ্ছে আপনার ব্লগে যত জন Author থাকুক না কেন কারো ছবি সেট করে দেয়ার প্রয়োজন হবে না। এটি অটোমেটিক্যালি ব্লগের/Google+ প্রোফাইলের ছবি শো করবে। সে জন্য আমি বলেছি এটির তাফাৎ এখানেই যে, ইতিপূর্বে শেয়ার করা সকল পোষ্টগুলিতে সবাই Author এর ছবি ম্যানুয়ালি সেট করার পদ্ধতি দেখিয়েছে। যার ফলে একাধিক Author থাকলে সবার ছবি আলাদা আলাদাভাবে সেট করে দেয়ার প্রয়োজন হত। আমাদের এই পদ্ধতিতে এটি যুক্ত করে রাখলে Author-দের ছবি ও Bio আলাদাভাবে সেট করা নিয়ে ভাবতে হবে না।

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

  • প্রথমে ব্লগে লগইন করুন।
  • ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
ব্লগে Post Author, Date, Labels ও Comments Display করুন
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.admin-image img{width:23px;height:23px;border:1px solid #E2E2E2;border-radius:50px;margin-bottom:-10px;margin-right:-10px;padding:2px;cursor:pointer;background:none repeat scroll 0% 0% transparent}
.post-author{color:#999;font-size:12px;line-height:18px;padding:0 0 5px 0}
.post-author a:link {text-decoration:none;}
.post-author a:hover {text-decoration:underline;}
.post-author span{padding:0px 6px 5px;background-position:left center;background-repeat:no-repeat}
.post-author span.updated:before,.post-author span.meta-label:before,.post-author span.meta-comments:before{color:#39BFBF;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px;margin-left:-10px}
.post-author span.updated:before{content:"\f017"}
.post-author span.meta-label:before{content:"\f02c"}
.post-author span.meta-comments:before{content:"\f075"}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন নিচের Scripts গুলি </head> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
//Author Avatar
function author(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে <div class='post-header-line-1'/> অংশটি সার্চ করুন।
  • এখন নিচের কোডগুলি <div class='post-header-line-1'/> ট্যাগের ঠিক নিচে পেষ্ট করুন। (নোটঃ এই অংশটি আপনার ব্লগের টেমপ্লেটের একাধিক জায়গায় পাবেন। আপনি ২য় টির নিচে পেষ্ট করবেন)
<div class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.author'>
<span class='admin-image'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=author&quot;'/>
</span>
<span class='fn author' itemprop='name'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
</span>
</b:if>
<span class='updated'><data:post.date/></span>
<span class='meta-label'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
</b:loop>
</b:if>
</span>
<span class='meta-comments'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>0 Comments</b:if>
<b:if cond='data:post.numComments == 1'>1 Comment</b:if>
<b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Comments</b:if>
</a>
</b:if>
</span>
</div>
  • আপনার টেমপ্লেটে যদি Font Awesome স্টাইলশীট যুক্ত করা না থাকে তাহলে সেটি অবশ্যই যুক্ত করে নিবেন।
  • সবশেষে Template Save করুন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

26 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. Perfectly কাজ করেছে। আমার সকল Author এর ছবি এখন Auto Display হচ্ছে। আসলে আমি কখনো এভাবে ভাবিনি সব Author এর ছবি Auto Display করা যায়। A lot of thanks Rashid

    ReplyDelete
    Replies
    1. আমাদের সাথে থাকুন। ভবিষ্যতে আরো ভাল কিছু শেয়ার করার চেষ্টা করব, ইনশাআল্লাহ্।

      Delete
    2. রশিদ ভাই আপনাকে অসংখ্য ধন্যবাদ এই জন্য যে আপনি নতুনদের জন্য অনেক কষ্ট করে টিউন উপহার দিচ্ছে। আর আপনা দেওয়া পদ্ধতি অনুসণ করে নতুন অগ্রসর হচ্ছে বলে আমি আশা করছি।

      Delete
    3. Rashid Vai apne amar site visit kore janaba kono somossha karone author image alomalo dakache. Somadan Ashakorchi?

      Delete
    4. আপনার টেমপ্লেট হতে .single-posts img অংশটি সার্চ করুন। এই অংশটি একাধিক জায়গায় দেখতে পাবেন। style ট্যাগের ভীতরের অংশটি হতে .single-posts img এর img অংশটি ডিলিট করে দেন। তাহলে হয়ে যাবে। উল্লেখ্য যে, আপনি আমাদের আনিসা টেমপ্লেটের ফ্রি ভার্সন ব্যবহার করছেন। আমাদের নিয়মানুসারে ফ্রি ভার্সনে কোন সাপোর্ট দেয়া হয় না। ধন্যবাদ...

      Delete
    5. রশিদ ভাই আপনার দেওয়া তথ্য মোতাবেক style tags অংশ হতে .single-posts img img অংশটি ডিলিট করার পরেও কোন কাজ হচ্ছে না। আপনাদের পরবর্তী নির্দেশের অপেক্ষায় রইলাম। ধন্যবাদ।

      Delete
    6. আমি যে ভাবে বলেছি সে ভাবে করতে পারেননি। এখনো কোডটি আপনার ব্লগে রয়েছে। আপনার টেমপ্লেটের Backup টা পাঠিয়ে দেন। আমি আপনাকে ২ মিনিটে সমাধান করে পাঠিয়ে দিচ্ছি।

      Delete
    7. রশিদ ভাই আপনার ইমেইল আইডিটা দিবেন। তা না আমি আপনাকে কিভাবে আমার সাইটের টেমপ্লেট এর Backup ফা্ইলটি পাঠাতে ব্যর্থ হব। আমি আশা করছি আপনি আপনার ইমেইল আইডিটা দিবেন। ধন্যবাদ।

      Delete
    8. Template এর Backup ফাইলটাকে Zip করে আমাদের Contact Form এর মাধ্যমে পাঠিদে দেন।

      Delete
  2. রশিদ ভাই বর্তমানে আরো একটা সমস্যায় পড়েছি সেটা পেজ নেভিগেশন মেনু টা ফুটার মেনুতে শো করছে। সমাধান আশা করছি। আর আমি আপনাদের যোগাযোগ ফর্মের মাধ্যমে টেমপ্লেটটি জিপ আকারে পাঠিয়ে দিলাম। ধন্যবাদ।

    ReplyDelete
    Replies
    1. আপনার মেইল এড্রেসটা আমাদের Contact Form এর মাধ্যমে পাঠিয়ে দেন!

      Delete
    2. আপনাকে অসংখ্য ধন্যবাদ।

      Delete
    3. রশিদ ভাই আপনার নতুন পোষ্টে এর অপেক্ষায় রইলাম। রশিদ ভাই আপনার সাইটের জন্য ডাউনলোড পেজ তৈরি করতে চাই। কিন্তু তৈরি করার পরেও পেজ ভিউতে সাইডবার দেখাচ্ছে। কিভাবে সাইডবার বন্ধ করবো জানাবেন কি?

      Delete
  3. কাজ তো হল। কিন্তু আগের টাও শো করছে। আগেরটা কীভাবে বন্ধ করব?

    ReplyDelete
    Replies
    1. আপনি যদি কাষ্টম টেমপ্লেট ব্যবহার করেন, তাহলে অবশ্যই আগের কোডগুলি রিমুভ করে নিতে হবে।

      Delete
  4. আগের কোডগুলি কীভাবে রিমুভ করব, একটু বলে দিলে ভাল হত।

    ReplyDelete
    Replies
    1. আপনার ব্লগের Url পাঠিয়ে দেন, তাহলে আমি সমাধান দুই মিনিটে পাঠিয়ে দিচ্ছি।

      Delete
  5. আমার ব্লগের ইউ আর এল careercenter4u.blogspot.com হেল্প করেন প্লীজ।

    ReplyDelete
    Replies
    1. টেমপ্লেট হতে class='post-info' অংশটি সার্চ করুন। তারপর বাম পাশের নাম্বারে ক্লিক করে Expand করা কোডগুলিকে Close করুন। ফাইনালি সম্পূর্ণ div কোডগুলি ডিলিট করে টেমপ্লেট সেভ করুন। That's all

      Delete
  6. vaiya ami sokol kicho seT korchi kintu pic a sob show korche and alomelo hocche

    ReplyDelete
    Replies
    1. আপনার ব্লগের Url পাঠিয়ে দেন, তারপর আপনার সমস্যার সমাধান দিচ্ছি।

      Delete
  7. আমি আপনের টেম্পলেট ব্যাবহার করছি এবং ওটা দেওয়াই আছে ৷৷

    ReplyDelete
  8. Fb id er profile picture show korano jabe ki? r gelo ta kivabe?

    ReplyDelete
    Replies
    1. করা যাবে কিন্তু এ বিষয় নিয়ে বিস্তারিত আলোচনা করতে হবে। খুব শীঘ্রই এ বিষয় নিয়ে একটি পোষ্ট শেয়ার করব।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: