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

প্রত্যেকটি ব্লগ পোষ্টের Title এর নিচে 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='https://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 করুন।

COMMENTS

BLOGGER: 32
  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
  9. রশিদ ভাই বর্তমানে আরো একটা সমস্যায় পড়েছি সেটা post author দেখতে পাই না। Post এর নিচে SocialShare বটন লাগাতে চাই,আপনার যেমন আছে,মেনুবারের উপরে Breaking news animated লাইন লাগাতে চাই। Post এর নিচে আগের ও পরের post লাগাতে চাই এবং আপনার post এর pic গুলো যেমন automatically zoom হয় ঠিক তেমনটি করতে চাই।সমাধান আশা করছি। আমার blog www.sahajkhabar.blogspot.com আমার email mypampadas@gmail.com। ধন্যবাদ।

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

      Delete
  10. রশিদ ভাই পারছি না আপনি দেখুন।

    ReplyDelete
    Replies
    1. ওয়েব ডিজাইন সম্পর্কে বেসিক ধারণা না থাকলে কিছুটা কঠিন মনে হবে। আপনার কি সমস্যা হচ্ছে সেটা জানালে সমাধানের চেষ্টা করব।

      Delete
  11. ভাই author name, lebal,comment দেখা যাচ্ছে না কিন্তু ক্লিক করলে দেখা যায়।শুধু author ছবি এবং date দেখাচ্ছে এখানে কি কালারের সমস্যা হয়ে দয়া করে বলবেন ভাই কি করবো।

    ReplyDelete
    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
ব্লগার বাংলাদেশ: ব্লগে Post Author, Date, Labels ও Comments Display করুন
ব্লগে Post Author, Date, Labels ও Comments Display করুন
প্রত্যেকটি ব্লগ পোষ্টের Title এর নিচে Author এর ছবিসহ আকর্ষণীয় নতুন স্টাইলের Date, Labels এবং Comments অপশন Display করুন।
https://4.bp.blogspot.com/-5TyGxgMUO4w/VvfQSRX_Y4I/AAAAAAAAHOs/PbcD254LuxYNmaqkV4U8r2kZrUhhi5wTA/s400/Blog-Post-informations.png
https://4.bp.blogspot.com/-5TyGxgMUO4w/VvfQSRX_Y4I/AAAAAAAAHOs/PbcD254LuxYNmaqkV4U8r2kZrUhhi5wTA/s72-c/Blog-Post-informations.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2016/03/display-post-author-date-labels-comments.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2016/03/display-post-author-date-labels-comments.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