প্রত্যেক ব্লগের জন্য এই ধরনের অপশনগুলি একদম কমন একটি বিষয় এবং প্রায় সব ধরনের ব্লগে এই অপশনগুলি ব্যবহার করতে দেখা যায়। সেই জন্য অনেকে পোষ্টটি দেখেই বলবেন এ ধরনের অনেক পোষ্ট ইতিপূর্বে বিভিন্ন ব্লগে শেয়ার করা হয়েছে। হ্যাঁ, বিষয়টি আমিও রিসার্চ করে দেখেছি যে, এ ধরনের পোষ্ট ইতিপূর্বে বাংলা ও ইংরেজীসহ আরো বিভিন্ন ধরনের ব্লগে শেয়ার করা হয়েছে। তবে আপনি পোষ্টটির কোডগুলি ভালভাবে লক্ষ্য করলে ইতিপূর্বে বিভিন্ন ব্লগে শেয়ার করা পোষ্ট ও আমার পোষ্টটির মধ্যে পার্থক্য খোঁজে পাবেন।
উপরের চিত্রে সকল অপশন গুলির ডেমো দেখুন। এই অপশনগুলি আমরাও আমাদের ব্লগে ব্যবহার করছি। এটির Author এর নামের পাশে পোষ্টটির Author এর ছবিও শো করছে। অনেকে ভাবছেন এই ছবিটি আমরা ম্যানুয়ালি সেট করে দিয়েছি বিধায় ছবি শো করছে। এটির সবচাইতে বড় সুবিধা হচ্ছে আপনার ব্লগে যত জন Author থাকুক না কেন কারো ছবি সেট করে দেয়ার প্রয়োজন হবে না। এটি অটোমেটিক্যালি ব্লগের/Google+ প্রোফাইলের ছবি শো করবে। সে জন্য আমি বলেছি এটির তাফাৎ এখানেই যে, ইতিপূর্বে শেয়ার করা সকল পোষ্টগুলিতে সবাই Author এর ছবি ম্যানুয়ালি সেট করার পদ্ধতি দেখিয়েছে। যার ফলে একাধিক Author থাকলে সবার ছবি আলাদা আলাদাভাবে সেট করে দেয়ার প্রয়োজন হত। আমাদের এই পদ্ধতিতে এটি যুক্ত করে রাখলে Author-দের ছবি ও Bio আলাদাভাবে সেট করা নিয়ে ভাবতে হবে না।
কিভাবে যুক্ত করবেন?
- প্রথমে ব্লগে লগইন করুন।
- ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
- তারপর কিবোর্ড হতে 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='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=author"'/>
</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 + "?&max-results=5"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>, </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 >= 2'><data:post.numComments/> Comments</b:if>
</a>
</b:if>
</span>
</div>
- আপনার টেমপ্লেটে যদি Font Awesome স্টাইলশীট যুক্ত করা না থাকে তাহলে সেটি অবশ্যই যুক্ত করে নিবেন।
- সবশেষে Template Save করুন।
Perfectly কাজ করেছে। আমার সকল Author এর ছবি এখন Auto Display হচ্ছে। আসলে আমি কখনো এভাবে ভাবিনি সব Author এর ছবি Auto Display করা যায়। A lot of thanks Rashid
উত্তরমুছুনআমাদের সাথে থাকুন। ভবিষ্যতে আরো ভাল কিছু শেয়ার করার চেষ্টা করব, ইনশাআল্লাহ্।
মুছুনরশিদ ভাই আপনাকে অসংখ্য ধন্যবাদ এই জন্য যে আপনি নতুনদের জন্য অনেক কষ্ট করে টিউন উপহার দিচ্ছে। আর আপনা দেওয়া পদ্ধতি অনুসণ করে নতুন অগ্রসর হচ্ছে বলে আমি আশা করছি।
মুছুনধন্যবাদ ভাই...
মুছুনRashid Vai apne amar site visit kore janaba kono somossha karone author image alomalo dakache. Somadan Ashakorchi?
মুছুনআপনার টেমপ্লেট হতে .single-posts img অংশটি সার্চ করুন। এই অংশটি একাধিক জায়গায় দেখতে পাবেন। style ট্যাগের ভীতরের অংশটি হতে .single-posts img এর img অংশটি ডিলিট করে দেন। তাহলে হয়ে যাবে। উল্লেখ্য যে, আপনি আমাদের আনিসা টেমপ্লেটের ফ্রি ভার্সন ব্যবহার করছেন। আমাদের নিয়মানুসারে ফ্রি ভার্সনে কোন সাপোর্ট দেয়া হয় না। ধন্যবাদ...
মুছুনরশিদ ভাই আপনার দেওয়া তথ্য মোতাবেক style tags অংশ হতে .single-posts img img অংশটি ডিলিট করার পরেও কোন কাজ হচ্ছে না। আপনাদের পরবর্তী নির্দেশের অপেক্ষায় রইলাম। ধন্যবাদ।
মুছুনআমি যে ভাবে বলেছি সে ভাবে করতে পারেননি। এখনো কোডটি আপনার ব্লগে রয়েছে। আপনার টেমপ্লেটের Backup টা পাঠিয়ে দেন। আমি আপনাকে ২ মিনিটে সমাধান করে পাঠিয়ে দিচ্ছি।
মুছুনরশিদ ভাই আপনার ইমেইল আইডিটা দিবেন। তা না আমি আপনাকে কিভাবে আমার সাইটের টেমপ্লেট এর Backup ফা্ইলটি পাঠাতে ব্যর্থ হব। আমি আশা করছি আপনি আপনার ইমেইল আইডিটা দিবেন। ধন্যবাদ।
মুছুনTemplate এর Backup ফাইলটাকে Zip করে আমাদের Contact Form এর মাধ্যমে পাঠিদে দেন।
মুছুনরশিদ ভাই বর্তমানে আরো একটা সমস্যায় পড়েছি সেটা পেজ নেভিগেশন মেনু টা ফুটার মেনুতে শো করছে। সমাধান আশা করছি। আর আমি আপনাদের যোগাযোগ ফর্মের মাধ্যমে টেমপ্লেটটি জিপ আকারে পাঠিয়ে দিলাম। ধন্যবাদ।
উত্তরমুছুনআপনার মেইল এড্রেসটা আমাদের Contact Form এর মাধ্যমে পাঠিয়ে দেন!
মুছুনআপনাকে অসংখ্য ধন্যবাদ।
মুছুনরশিদ ভাই আপনার নতুন পোষ্টে এর অপেক্ষায় রইলাম। রশিদ ভাই আপনার সাইটের জন্য ডাউনলোড পেজ তৈরি করতে চাই। কিন্তু তৈরি করার পরেও পেজ ভিউতে সাইডবার দেখাচ্ছে। কিভাবে সাইডবার বন্ধ করবো জানাবেন কি?
মুছুনকাজ তো হল। কিন্তু আগের টাও শো করছে। আগেরটা কীভাবে বন্ধ করব?
উত্তরমুছুনআপনি যদি কাষ্টম টেমপ্লেট ব্যবহার করেন, তাহলে অবশ্যই আগের কোডগুলি রিমুভ করে নিতে হবে।
মুছুনআগের কোডগুলি কীভাবে রিমুভ করব, একটু বলে দিলে ভাল হত।
উত্তরমুছুনআপনার ব্লগের Url পাঠিয়ে দেন, তাহলে আমি সমাধান দুই মিনিটে পাঠিয়ে দিচ্ছি।
মুছুনআমার ব্লগের ইউ আর এল careercenter4u.blogspot.com হেল্প করেন প্লীজ।
উত্তরমুছুনটেমপ্লেট হতে class='post-info' অংশটি সার্চ করুন। তারপর বাম পাশের নাম্বারে ক্লিক করে Expand করা কোডগুলিকে Close করুন। ফাইনালি সম্পূর্ণ div কোডগুলি ডিলিট করে টেমপ্লেট সেভ করুন। That's all
মুছুনvaiya ami sokol kicho seT korchi kintu pic a sob show korche and alomelo hocche
উত্তরমুছুনআপনার ব্লগের Url পাঠিয়ে দেন, তারপর আপনার সমস্যার সমাধান দিচ্ছি।
মুছুনআমি আপনের টেম্পলেট ব্যাবহার করছি এবং ওটা দেওয়াই আছে ৷৷
উত্তরমুছুনThank you, carry on.
মুছুনFb id er profile picture show korano jabe ki? r gelo ta kivabe?
উত্তরমুছুনকরা যাবে কিন্তু এ বিষয় নিয়ে বিস্তারিত আলোচনা করতে হবে। খুব শীঘ্রই এ বিষয় নিয়ে একটি পোষ্ট শেয়ার করব।
মুছুনরশিদ ভাই বর্তমানে আরো একটা সমস্যায় পড়েছি সেটা post author দেখতে পাই না। Post এর নিচে SocialShare বটন লাগাতে চাই,আপনার যেমন আছে,মেনুবারের উপরে Breaking news animated লাইন লাগাতে চাই। Post এর নিচে আগের ও পরের post লাগাতে চাই এবং আপনার post এর pic গুলো যেমন automatically zoom হয় ঠিক তেমনটি করতে চাই।সমাধান আশা করছি। আমার blog www.sahajkhabar.blogspot.com আমার email mypampadas@gmail.com। ধন্যবাদ।
উত্তরমুছুনআপনি যা যা চাইছেন তার সবগুলি আমাদের ব্লগে রয়েছে। পোষ্টগুলি অনুসরণ করুন, তাহলে হয়ে যাবে।
মুছুনরশিদ ভাই পারছি না আপনি দেখুন।
উত্তরমুছুনওয়েব ডিজাইন সম্পর্কে বেসিক ধারণা না থাকলে কিছুটা কঠিন মনে হবে। আপনার কি সমস্যা হচ্ছে সেটা জানালে সমাধানের চেষ্টা করব।
মুছুনভাই author name, lebal,comment দেখা যাচ্ছে না কিন্তু ক্লিক করলে দেখা যায়।শুধু author ছবি এবং date দেখাচ্ছে এখানে কি কালারের সমস্যা হয়ে দয়া করে বলবেন ভাই কি করবো।
উত্তরমুছুনআমার মনেহয় কালারের সমস্যা। আপনার ব্লগের লিংক শেয়ার করুন। নিশ্চিত হয়ে সমাধান দেব...
মুছুন