আসসালামুয়ালাইকুম
প্রিয় বন্ধুরা আশা করি সকলে ভালো আছেন। আজকে আবারো হাজির হয়েছি নতুন একটি টিউটোরিয়াল নিয়ে। আজকের আর্টিকেল এ আমরা দেখব কিভাবে আপনি আপনার ব্লগার ব্লগ সাইটে কাস্টম ভিউয়ার Widgets লাগাবেন।
এই উইজেটটি ব্যবহার করে আপনি আপনার ব্লগের মোট পৃষ্ঠাগুলি কতবার দেখা হয়েছে , কতটা পোস্ট আছে এবং কতটি মন্তব্য আছে তা প্রদর্শন করবে। কিন্তু সাধারণত আমরা দেখতে পাই ব্লগার পরিসংখ্যান উইজেট এ শুধু ভিজিটর পরিসংখ্যান দেখায়। কোন কমেন্ট বা পোস্ট এর মোট পরিসংখ্যান দেখায় না।
তাই আমরা ইন্টারনেটে এ খুঁজে এই কোড গুলো বের করলাম এবং দেখলাম কোড এর অথর স্টাইল শীট এ কিছু সংশোধন করছেন এবং মোট পোস্ট এবং মন্তব্য এর জন্য কিছু Additional Script যুক্ত করেছেন ।
কি কি থাকছে এই উইজেট এ
- এই উইজেটের নকশাটি আধুনিক এবং পরিষ্কার।
- কিছু অসাধারন ফন্ট ব্যবহার করা হয়েছে
- অসাধারণ কিছু আইকন ব্যবহার করা হয়েছে।
কাস্টম পরিসংখ্যান উইজেট খুব দরকারী ব্লগার উইজেট । যার মাধ্যমে মাধ্যমে আমরা ব্লগার ব্লগ এর পরিসংখ্যান দেখতে পারি। আমি ও আমার নিজস্ব টেমপ্লেটে একটি কাস্টম পরিসংখ্যান উইজেটও ব্যবহার করছি। তবে এটি কেবলমাত্র প্রদর্শন করে মোট পেইজ ভিজিটর।
এটি খুব সুন্দর এবং স্মার্ট নকশা করে তৈরি করা হয়েছে। তাই আজ আমি আপনাদের মাঝে শেয়ার করে দিলাম এই কোড গুলো। যার মাধ্যমে আপনি আপনার ব্লগের পরিসংখ্যান দেখতে পারেন।
উইজেট এর বৈশিষ্ট্য
- আপনার ব্লগের পরিসংখ্যান দেখতে পারবেনক
- কতটি পোস্ট আছে তা দেখতে পারবেন
- আপনার ব্লগকে আরো সুন্দর দেখাবে
সরাসরি দেখুন
কীভাবে কাস্টম পরিসংখ্যান ব্লগার উইজেট ইনস্টল করবেন
কাস্টম পরিসংখ্যান ব্লগার উইজেট ইনস্টল করার জন্য খুব সহজ কিছু পদক্ষেপ এখানে রয়েছে । এই ব্লগার উইজেটে হরফ আইকন এবং পিটি সানস গুগল ফন্ট ব্যবহার করা হয়েছে। সুতরাং আপনার নিজের ব্লগে এই ফন্টগুলি যুক্ত করতে হবে। যদি হরফ হ'ল ফন্টটি ইতিমধ্যে আপনার ব্লগে যুক্ত থাকে। তাহলে আপনার ফন্ট এড করার কোন প্রয়োজন নেই ।
পদক্ষেপ 1: লেআউট এ যান > একটি গ্যাজেট যুক্ত করুন> ব্লগের পরিসংখ্যানগুলি যুক্ত করুন।
ব্লগারের জন্য কাস্টম পরিসংখ্যান উইজেট ইনস্টল করুন
পদক্ষেপ 2: এখন থিমস > সম্পাদনা এইচটিএমএল এ যান এবং নীচের কোডগুলি সন্ধান করুন।
<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget> code-box
এখন উপরের কোড গুলোর সাথে নীচের কোড গুলো পরিবর্তন করুন।
<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + "_content"' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
</b:if>
<b:if cond='data:showGraphicalCounter'>
<span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
</b:if>
<script type='text/javascript'>
function postCount(json){
document.write("<span class='counts post2'> Total Posts ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
function numberOfComments(json){
document.write("<span class='counts comment'> Total Comments ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/>
</div>
</div>
</b:includable>
</b:widget>
আপনি সমস্ত কাজের 80% সম্পন্ন করেছেন। এখন </ translation > এর জন্য সিএসএস কোডের নীচে সমস্ত পেস্ট করুন
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:"Page Views";float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:"\f06e";}
.counts.post2:before {content:"\f044";}
.counts.comment:before{content:"\f0e6";}#Stats1_content{width:auto;height:auto;background-color:#fff;}</style>
কোড গুলো যদি সঠিকভাবে বসাতে পারেন তাহলে এখন টেমপ্লেটটি সংরক্ষণ করুন এবং পৃষ্ঠা রিফ্রেশ করে ফলাফল দেখুন।
ব্লগার আপডেট হওয়ায় নতুন ব্লগার এ হয়তো এটি কাজ নাও করতে পারে পুরনো ব্লগার এ চেষ্টা করুন alert-info
আশা করি আপনি এটি বুঝতে পেরেছেন, কীভাবে ব্লগ বা ব্লগার সাইটে কাস্টম স্ট্যাটাস ব্লগার উইজেট যুক্ত করতে হয়।
আপনার যদি কোনও সমস্যা হয় তবে মন্তব্য বাক্সের মাধ্যমে নির্দ্বিধায় যোগাযোগ করুন। আপনি যদি এই উইজেটটি পছন্দ করেন তবে আপনার পোস্টটি আপনার সামাজিক যোগাযোগ মাধ্যমে শেয়ার করতে ভুলবেন না।
আপনার সমর্থন আমাদের ভবিষ্যত আরো ভালো আর্টিকেল বা টিউটোরিয়াল লিখতে সহায়তা করবে। আশা করি আর্টিকেলটি শেয়ার করবেন এবং আমাদের উৎসাহ প্রদান করবেন। ধন্যবাদ ।
Post a Comment