Thursday, March 5, 2015

আসসালামু আলাইকুম, কেমন আছেন সবাই ? আশা করি মহান আল্লাহ তায়ালার অশেষ রহমতে সবাই ভাল আছেন। আজ আমি আপানদের সাথে  blog design কিভাবে সুন্দর করতে হয় তা নিয়ে লিখব। তাহলে চলন শুরু করি ।
পর্ব -১ এর  টিউন টি দেখার জন্য এখানে ক্লিক করুন (মেগা টিউন)
পর্ব -২ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন
পর্ব -৩ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন ( মেগা টিউন)
পর্ব -৪ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন
পর্ব -৫ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন  (মেগা টিউন) [এ পর্বটা মিস করবেন না]
পর্ব -৬ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন  (গেমা টিউন)
পর্ব -৭ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন ( মেগা টিউন)
পর্ব -৮এর টিউন টি দেখার জন্য এখানে ক্লিক করুন
পর্ব -৯এর টিউন টি দেখার জন্য এখানে ক্লিক করুন
৫ নং টিউন টি মিস করবেন না।

১. কিভাবে আপনার ব্লগ এ পেজ নাম্বার এড(add) করবেন???

 আপনার ব্লগ এ sing in করে design>>>Page Elements>>>>Add a Gadget>>>HTML/JavaScript select করেন , তারপর নিচের codeটি past করন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- Stylish colored  Navigation Widget For Blogger By Alamin @ http://freecall24.blogspot.com -->
 
<style type="text/css">
 
#blog-pager{padding:5px 0 !important;}
 
.showpageArea {font-weight: bold;margin:5px;}/* www.way2blogging.org */
 
.showpageArea a {text-decoration:underline;color: #fff;}/* www.way2blogging.org */
 
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }/* www.way2blogging.org */
 
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* www.way2blogging.org */
 
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.way2blogging.org */
 
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.way2blogging.org */
 
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.way2blogging.org */
 
</style>
 
<script type='text/javascript'>
 
var home_page="/";
 
var urlactivepage=location.href;
 
var postperpage=5;
 
var numshowpage=5;
 
var upPageWord ='Previous';
 
var downPageWord ='Next';
 
</script>
 
<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js' type='text/javascript'></script>
 
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Alamin @ http://freecall24.blogspot.com -->
আখন সেভ করন ।
preview a demo

২. কিভাবে সুন্দর একটি Search Box এড(add) করবেন????

আপনার ব্লগ এ sing in করে design>>>Page Elements>>>> Add a Gadget>>>HTML/JavaScript select  করেন , তারপর নিচের codeটি past করন
1
2
3
4
5
6
7
8
9
<div>
    <form method="get" id="searchform" action="/search">
        <table width="100%">
            <tr>
              <td><input type="text" style="width:98%;padding:2px;" value="Search this blog..." onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q" id="sbox"></td> <td width="75px"><input type="button" Value="Search" id="sbutton" alt=""></td>
            </tr>
        </table>
    </form>
</div>
preview a demo

৩. কিভাবে ব্লগ কমেন্ট বক্স এ replay to the post add করবেন।

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>
তারপর search করন   <data:commentPostedByMsg/> এবং এই কোড এর নিচে(under) নিচের কোড টি past করন
1
2
3
4
5
6
7
8
<a href='http://www.spiceupyourblog.com'>
    <img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqj2tpxr_kR1jIsF_gouILeJXczW3cS4D65mlaUILGMnG44TA1UprgFyfnZ6Pn_QNPs2Rp7gYybRIaX7r5BGawsvMMWox6whV-CK-6d8K9-pvnQ6jvzbu4YXIqVx2kz5Fwes-nWr6IiNv/s1600/best+blogger+tips.png'/>
</a>
    <span class='comment-reply'>
        <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<span style="color: #ff0000;">YOUR-BLOG-ID-HERE</span>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9t1df3sbSCKTexm6dwH7BTHBreG08-OV0Vypi-9-rdmGLHjjHrdUf1FRpzESPH_3U5R9XjkvDRofHVvXrNU1-td2lce2zAXglFBb0cW0T-OaQGkzgYPTWWwQPqwC_Ok739BQcW9CUe79K/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/>
        <a>
    </span>
লাল লেখার(YOUR-BLOG-ID-HERE) জায়গায় আপনার blogger ID লিখন...address barএ আপনারব্লগ Id টি পাবেন। তারপর SAVE TEMPLATE এ ক্লিক করন।
preview a Demo

৫. কিভাবে ব্লগ এর কমেন্ট বক্স এর design পরিবর্তন করবেন????

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>
search করন
1
<data:postCommentMsg/>
এবং এই লেখাটি পরিবর্তন করন নিচের কোড টির মত
1
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqj2tpxr_kR1jIsF_gouILeJXczW3cS4D65mlaUILGMnG44TA1UprgFyfnZ6Pn_QNPs2Rp7gYybRIaX7r5BGawsvMMWox6whV-CK-6d8K9-pvnQ6jvzbu4YXIqVx2kz5Fwes-nWr6IiNv/s1600/best+blogger+tips.png'/></a><img alt='Comment here' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDKG5kt-AhWTOteF_sCGaWomKUuRs5536eeEl6Otx7VwuNfm72YtH1gG1e9pFapHou0R6qhDTmnu_nF3Am7YKRcz3asJrIAJrk8O2uqj4yGQ10S4_rFQPyCS5i0BPfaEi8zDiAVEHK93HD/s1600/animated+comment+arrow.gif'/>
এখন সেভ করন।

৬. কিভাবে footer এর লেখা remove করবেন ?????

অনেক সময় ব্লগ এর নিচে লেখা থাকে copywriter By ---------এই লেখাটি remove করার জন্য  আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>
তারপর search করন
1
<!-- outside of the include in order to lock Attribution widget -->
কোড এর নিচের <div style= থেকে </div> ডিলিট করে দিন। অথবা আপনি যদি লেখাটি পরিবর্তন করতে ছান তাহলে করতে পারেন।
preview a demo

৭. কিভাবে subscription to Atom Remove করবেন??????

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>তারপর search করন <data:f.feedType/>
এবং এই কোড টি delete করে দিন ।
অথবা searchকরন <b:include name=’feedLinks’/> এবং এটি delete করে দিন ।
আসসালামু আলাইকুম ব্লগস্পট মাষ্টাররা। আশা করি সবাই ভালো আছেন। আজকাল নিজেরে ব্লগার বলতে ডর করে। তাই নিজে ব্লগার বলতে সাবধানে বলি অন্যকে বলতে ও সাবধানে বলি। কি জানি কখনও কি হয়ে যায়... :P
বাদ দেন ঐসব। আজকে একটি গুরুত্বপূর্ন্য বিষয় নিয়ে আলোচনা করবো। আর সেটি হল Blogspot সাইটের HTML Sitemap page. হে একটি ব্লগস্পট সাইটে সাইটম্যাপ পেইজের গুরুত্ব আছে। এবং ইহা খুবই হাই লেভেলের গুরুত্ব।  আর এই গুরুত্ব টা গিয়ে SEO পর্যায়ে পড়ে। আর এসইও কি সেটার সম্পর্কে তো মুটামুটি সবারই ধারনা আছে।
সাইটম্যাপ অনেকে যোগ করেন ঠিকই। কিন্তু যারা নতুন হয়তা তাদের সে সম্পর্কে কোন ধারনা নেই। যে কারনে তারা যোগ করতে পারেন না বা Sitemap page যোগ করার প্রয়োজনবোধ মনে করেন না। বেশী কথা বাড়াবো না। কেন সাইটম্যাপ পেইজ যোগ করতে হয় তা সম্পর্কে সংক্ষেপে কিছু বলে নেই। যদি ও আমি এ সম্পর্কে তেমন কিছু জানি না। তবে ততটুকু জানি তা থেকেই বলছি।
HTML Sitemap পেইজে একটি সাইটের সবগুলো পোষ্ট সারিবদ্ধ ভাবে থাকে। এবং এটির প্রধান কারণ হল গুগল ইনডেক্স এর জন্য। যখন গুগল বট আপনার সাইটে আসবে তখন এদিক সেদিক থাকাবে না। সরারসি সাইটম্যাপ খুজবে। যখন সে সাইটম্যাপ পেইজ খুজে পাবে তখন সেখান থেকে আপনার পোষ্ট সে ইনডেক্স করবে। আর ইনডেক্স করা পোষ্ট গুলোই গুগল সার্চ ইঞ্জিনে দেখায়। তাছাড়া অনেক ভিজিটর এবং ওয়েবমাষ্টার আছেন যারা সাইটম্যাপের সাহায্যে পোষ্ট বের করে থাকেন। এই হল সাইটম্যাপ সম্পর্কে আমার সীমিত ধারনা। আমার এই সীমিত ধারনা থেকেই হয়ত বুঝতে পারছেন যে HTML Sitemap প্রয়োজনীয়তা কতটুকু।

এবার চলুন মূলকাজে চলে যাই। প্রথমে আপনি আপনার ব্লগারে একটি নতুন পেইজ তৈরী করুন এবং নাম দিন "Sitemap"
Sitemap Create for blogger
এবার HTML বাটনে ক্লিক করে নিচের কোড টুকু কপি করে পেষ্ট করে দিন এবং পেইজ টি পাবলিশ করে দিন।
</style> <div dir="ltr" style="text-align: left;" trbidi="on"> <script src="https://ms-design.googlecode.com/svn/Sitemap.js" type="text/javascript"></script> <script src="http://your -site.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> <div style="display: none;"> </div> <style type="text/css"> .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 {background:#fff;border-bottom:1px solid #fafafa;color:#444;font-size: 20px;margin: 0 0 10px 2px;padding: 0 0 10px;} .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a {background:#fff;color:#444;display:block;border-bottom:3px solid #f0f0f0; font-size: 14px; line-height: normal; outline:none;padding:10px 15px;transition:all .25s ease-in-out;} .ct-columns-3 p a:hover {background:#02a4e5;color:#fff;border-bottom:3px solid #0392cb;} .ct-columns-3 p span{color:#fff!important;font-style:normal!important;font-weight:normal!important;} @media screen and (max-width: 768px){ .ct-columns-3 {-moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style></div>
নোটঃ লাল রঙ চিহ্নিত লিংকটির জায়গায় আপনার সাইটের লিংক বসাবেন।

Sitemap


Sunday, March 1, 2015

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ
আসসালামালাইকুম।
সবাই কেমন আছেন ?
আশা করি ভালোই আছেন।
আমিও আপনাদের দোয়ায় ভালোই আছি।
আজ অনেক দিন পর আমি আমার ব্লগস্পট ব্লগের ধারাবাহিকতায় ফিরে আসলাম।
টাইটেল দেখেই অনেকেই হয়তো বুঝতে পারছেন।
আমি ঠিক এই রকম একটি টিউন আগেও করেছিলাম তবে অনেকেই ঔখানে মন্তব্য করেছিল যে কোড কাজ করছেনা।
তাই সবার কথা বিবেচনা করে এবং ফেইসবুকে একজন ফ্রেন্ডের অনেক দিনের অনুরোধের কারনে আজকে টিউনটি করতে বসলাম।
আর হুম এই টিউনটি ১০০% কাজ করবে আমি এই মাত্র নিজে চেষ্টা করে তারপর টিউন করতে বসলাম।
যাই হোক আজ অনেক লেকচারই দিলাম , আসুন তাহলে এবার আমরা শুরু করি।

ব্লগস্পট ব্লগে মাউসের লেজ তৈরি করার উপায় :

  • প্রথমে আপনার ব্লগে লগ ইন করে Deshboard >>> Design >>> Add A Gadget >> HTML/JavaScript এ ক্লিক করে নিচের কোড গুলো সম্পূর্ণ কপি পোস্ট করে দেন ।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script language="javascript">
 
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Welcome to Techtunes';
 
var delay=30; // SPEED OF TRAIL
var Xoff=-0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=12; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.
 
//********** NO NEED TO EDIT BELOW HERE **********\\
 
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
 
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
 
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
 
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
 
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
 
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
 
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
 
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
 
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>
  • এবার গেডজেডটি সম্পূর্ণ সেইভ করুন
  • ব্যাস আপনার কাজ শেষ

যা যা পরিবর্তন করতে পারবেন :

  • উপরে টেকটিউনন্স লেখাতির স্থলে আপনার পছন্দের লেখাটি লিখবেন ।
  • কোডের একেবারে উপরের দিকে থাকা কয়েকটি মান পরিবর্তন করতে পারবেন।
  • var delay=30; // SPEED OF TRAIL
    var Xoff=-0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
    var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
    var txtw=12; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
    var beghtml='<span ><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
    var endhtml=''; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.
  • উপরের অংশটিতে প্রয়োজনীয় পরিবর্তন করতে পারবেন। বাকী অংশে হাত দেয়ার দরকার নেই। সমস্যা হতে পারে।
  • এখানে ver delay=30, var Xoff=0, var Yoff=30, var txtw=12 ইত্যাদি মানগুলো পরিবর্তন করে দিন।
আর হ্যাঁ পেইজ সম্পূর্ণ লোড হওয়ার পর লেজ কাজ করবে :D
ভালো লাগলে কমেন্ট করবেন আর কোন ভুল-ভ্রান্তি হলে ক্ষমা সুন্দর দিষ্টিতে দেখবেন।
সবাই ভালো থাকুন, সুস্থ থাকুন, ভালবাসাসহ ১০০ টিউনের অপেক্ষায় :D আপনাদেরই সাব্বির আলম :P

ব্লগস্পট ব্লগের ফেভিকন যেভাবে পরিবর্তন করবেন :


  • প্রথমে একটি ছবি সিলেক্ট করুন যেটি আপনি আপনার ব্লগের ফেভিকন হিসেবে এড করতে চান
  • তারপর   এই লিংকে ক্লিক করুন
  • এখন নিচের ছবিটির মত একটি ফর্ম আসবে


  • এখানে শুধু মাত্র  browse অপশনে এ ক্লিক করে আপনার সিলেক্ট করা ছবিটি সিলেক্ট করুন
  • তারপর Convert বাটনে ক্লিক করুন
  • ছবিটি এবার সেইভ করুন

  • এবার আপনার ব্লগে লগ ইন করুন
  • তারপর  Deshbord > Design >Layout> Edit Fevicon এ ক্লিক করুন



  • এখন আপনার শেষ কাজ , Edit Favico  এ ক্লিক করার পর আপনার কনভার্ট করা ছবিটি সিলেক্ট করে সেইভ করুন
  • এবার আপনার ব্লগ একবার প্রিভিউ দিয়ে দেখুন যে আপনার তৈরি করা ফেভিকন শো করছে।
  • আর হুম যদি ফেভিকন শো না করে আমাকে গালি দিবেন না :lol:
[ছবি: VC2Zq.png]
একটি নতুন গেজেট (New Gadget) নিয়ে আজ আমি আপনাদের সামনে উপস্থিত হয়েছি। এই গেজেটটি দিয়ে আপনার ব্লগে মোট কতটি পোস্ট (Post) প্রকাশিত হয়েছে এবং আপনার ব্লগের ভিজিটর-পাঠকরা (Visitor-Reader) মোট কতগুলো মন্তব্য (Comment) করেছেন তা দেখা যাবে।
<script style="text/javascript">
function numberOfPosts(json) {
document.write('মোট পোস্ট: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('মোট কমেন্টস: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="blue"><script src="http://shuvo1020.blogspot.com//feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://shuvo1020.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
এই সুবিধাটি ব্লগে স্থাপন করা খুব সহজ।
উপরে দেয়া কোডটি কপি (Copy) করে নিয়ে একটি নতুন HTML/ Javascripts গেজেটে পেস্ট (Paste) করে দিন।
গেজেটটির নাম 'ব্লগ পরিসংখ্যান' (Blog Statistics) বা নিজের পছন্দমতো কোন একটি দিন।
কোডের অভ্যন্তরের shuvo1020 লেখাটি পাল্টে আপনার ব্লগের ঠিকানাটি (Blog address) লিখে দিন।
এবার সেভ (Save) করুন।