Selasa, 17 Desember 2013

widget label berbentuk daun

Label  adalah merupakan salah satu cara untuk memberikan kategori pada setiap postingan kita. Pemberian label pada setiap artikel kita, akan sangat bermanfaat untuk memudahkan pengunjung dalam memilih kandungan dengan kategori yang sesuai dengan yang mereka cari dan  membolehkan  pengunjung dengan mudah mengakses kandungan  yang mereka perlukankan.


Posting kali ini adalah unuk memberi kelainan pada paparan widget label.paparannya adalah berbentuk bujur sperti daun.bagi yang inginmembuanya berikut adalah langkahnya

Cara membuatnya.
1.Masuk ke dashboard blogger
2. Pilih template -> Edit HTML Cari ]]></b:skin> dan salin kod label seperti dibawah dan
    letakkan diatas kod ]]></b:skin>
3.Simpan template anda


.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}

Minggu, 17 November 2013

Cara pasang widget related post nrelate

Sebelum ini Admin ada membuat posting tentang cara memasang artikel terkait linkwithin.Nrelate adalah satu widget yang serupa dengan linkwithin tetapi lebih menarik kerana anda mempunyai pilihan bagi mengubah setting pada widget ini.Terdapat enam styles widget yang boleh anda pilih serta pilihan untuk tidak memaparkan logo nrelate pada paparan widget.

related post

Cara memasangnya:
1.Masuk ke web nrelate.com
2.pada sebelah kanan web terdapat ruangan untuk daftar dengan nrelate

related post

3.klik pada create and acccount

related post
4. Isikan form yang muncul dengan butiran yang dikehendakki dan klik pada complete sign up
5.kemudian email akan dihantar bagi mengesahkan pendaftaran tadi
6.Buka email dan verify pendaftaran tadi
7.Selepas berjaya log in ke akaun anda
   Paparan berikut akan terpapar setelah berjaya log in ke akaun anda
 
related post

8.Klik pada menu install
9.Pada paparan seterusnya pilih logo blogger

related post


10.Masukkan url blog anda dan klik submitt

related post

11.Pilih version untuk widget anda

related post

12.Pada add page element pilih blog yang diperlukan dan klik add widget

related post

Jika anda ingin membuat perubahan pada widget,log in ke nrelate dan pilih menu setting,disana anda boleh menetapkan bentuk paparan dan sebagainya dan akhir sekali jangan lupa pilih save untuk menyimpan setting anda.

Kamis, 31 Oktober 2013

Cara pasang pop up facebook like box dengan timer

Facebook like box ini akan muncul sebaik sahaja pengunjung blog anda.Facebook like box ini mempunyai kaunter masa sebelum ia hilang secara automatik dan boleh juga ditutup dengan butang close yang ada

Facebook like box



Cara memasangnya:
1.Masuk ke blogger
2.Pada dashboard pilih template >> Edit HTML


3.Salin kod dibawah dan letakkan diatas kod </body>

<!-- Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
 KNFBFansPRO='TEKNIKBUATBLOG'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:

9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
}
#fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
}
.fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;
}
#fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-

weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
}
</style>
<script type='text/javascript' src='https://sites.google.com/site/mmktricks/jquery.js'></script>
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script type='text/javascript' src=https://sites.google.com/site/teknikbuatblog/tbb/fbLIKEpopup.js></script>
<script language='javascript'>
//<![CDATA[
 $(document).ready(function(){     
  $().KNFBFansPRO({
   timeout: 20,
   wait: 0,
   url: 'http://www.facebook.com/ TEKNIKBUATBLOG ',
   closeable: true  });
 });
//]]>
</script>
<div id='fbtpdiv'></div>
<!--  Likebox Pro FBFan Code End -->




Catitan:
•    Tukarkan Teknikbuatblog dengan username Facebook anda.
•    Timer boleh telah diset pada 30 saat,jika anda ingin mengubahnya Cuma perlu edit bahagian 
      timeout:30
•    Widget ini akan terpapar sebaik sahaja pengunjung berkunjung keblog anda.Jika ingin dipaparkan 
      selepas 1 minit atau lebih ubah bahagian wait:0

Sumber: MMK tricks

Kamis, 10 Oktober 2013

Tukar previous post dan next post kepada tajuk artikel

Salah satu ciri yang ada pada wordpress tapi tiada pada blogger ialah perkataan newer post dan older post dipaparkan dengan tajuk artikel.Kebaikan mempunyai tajuk posting ialah keberangkalian pengunjung akan klik  artikel seterusnya yang akan meningkatkan  page view pada blog anda
.
tutorial blog

Cara memasangnya pada blog.

Masuk ke dashboard pilih template,klik pada edit HTML


Gunakan ctrl+F untuk mencari kod pada template ( klik sini untuk cara guna HTML editor terbaru blogger)
Cari kod  </head>
Letakkan kod ini sebelumnya

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Seterusnya cari kod </body>
Dan letakkan kod ini diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(//([^/_]+)(_.*)?.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>

Kemudian cari kod  ]]></b:skin>
Dan letakkan kod berikut diatas/sebelumnya

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

Simpan template anda
Credit to MS-Potilas :Yet Another Blogger Tips Blog

Minggu, 15 September 2013

Cara letak contact form pada blog

Untuk pengguna blogspot, jika ingin meletakkan contact form anda mungkin memilih Formstack,Foxyform,dan sebagainya.Sekarang anda tidak perlu menggunakannya lagi kerana blogger telah mengeluarkan contact formnya sendiri.

contact form

Cara memasukkan contact form pada blog

Masuk ke dashboard , pilih layout dan klik pada add a gadget


Kemudian pilih more gadget dan masukkan contact form


Cara meletakan pada page statik
Setelah memasukkan contact form pada blog seperti langkah diatas,kemudian pada dashboard pilih >>Template>>edit Html


Pada template cari ContactForm(gunakan Ctrl+F)
Klik anak panah dihujung untuk membuka kod seterusnya

kod blog

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Kod warna merah perlu dipadam.
Kemudian save template anda
Pada dashboard pilih pages>>new page>>blank page
Masukkan kod ini pada page kosong tersebut dan masukkan namakan page tersebut dengan nama yang anda inginkan.

Jumat, 06 September 2013

Cara pasang widget popular post berwarna warni

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.


Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout>>Add A gadget



2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang diingini.


3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F(rujuk sini)
Kemudian letakkan kod ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}



5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template


Rabu, 28 Agustus 2013

Tukar perkataan post a comment dengan imej

Komen adalah satu cara yang baik bagi menjalin hubungan dan berinteraksi dengan pengunjung blog.Diakhir setiap posting mempunyai perkataan add a coment.Ia boleh ditukarkan kepada bentuk imej supaya nampak lebih menarik lagi.


Cara menukarnya:
1.Masuk ke Blogger>> Dashboard PilihTemplate ->Edit HTML


2.Cari kod yang berwarna merah(Ctrl+F) rujuk tutorial ini cara menggunakan fungsi search

<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>

Cari kod seterusnya <data:postCommentMsg/>,kelihatan seperti dibawah ini
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Tukar <data:postCommentMsg/>dengan kod imej seperti dibawah


<img src="http://i219.photobucket.com/albums/cc282/garam63/comment5copy.png" border="0" alt="add a comment photo comment5copy.png"/>





<img src="http://i219.photobucket.com/albums/cc282/garam63/comment6copycopy.png" border="0" alt=" photo comment6copycopy.png"/>






<img src="http://i219.photobucket.com/albums/cc282/garam63/komen.png" border="0" alt=" photo komen.png"/>



<img src="http://i219.photobucket.com/albums/cc282/garam63/leaveacomment4.png" border="0" alt=" photo leaveacomment4.png"/>



4.Akhir sekali simpan template anda

Sabtu, 17 Agustus 2013

Widget komen terbanyak dengan avatar

Widget ini adalah untuk memaparkan komen terbanyak diblog.Yang menarik tentang widget ini  adalah ia mempunyai avatar disamping bilangan komen.Pemasangannya adalah bagi menggalakan pengunjung memberi komen pada artikel diblog anda.

komen pada blog

Cara pemasangannya:
1.Masuk keblogger
2.Pada dashboard pilih Layout dan klik pada Add a Gadget


dashboard blog
 3. dan pilih HTML/Javascript
kod pada blog


Masukkan kod berikut padanya:
<style type="text/css">
.top-commenter-line img {

-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-line {margin: 3px 0;}
.top-commenter-avatar {vertical-align:middle;}
</style><br />
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var minComments = 1;        // minimum komen
var maxTopCommenters = 5;   // bilangan senarai top commentator
var excludeMe = true;       // true: tidak masukkan komen sendiri
var numDays = 0;            // komen sejak bila (ex. 30), atau 0 sejak dari mula
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // kecualikan username ini
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(//sdd+-c//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(//sdd+(-c){0,1}//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);

document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script><br />
<div style="text-align: center;">
<span style="font-size:11px;"><a href="http://teknikbuatblog.blogspot.com/2013/08/widget-komen-terbanyak-dengan-avatar.html" target="_blank">:: Dapatkan Widget Ini ::</a></span>
4.Klik save untuk melihat perubahannya.

Nota:
Untuk mengecualikan nama anda dari senarai ubah pada  someotherusertoexclude dengan nama anda

credit to MS-potilas  (http://yabtb.blogspot.com)

Sabtu, 10 Agustus 2013

Recent comments dengan avatar

Recent comments adalah widget bagi memaparkan komen yang diterima pada posting blog anda.Kebiasaannyanya Cuma dalam bentuk teks sahaja,tapi kali ini agak menarik kerana akan memaparkan avatar disamping komen yang dibuat.
recent comments


Cara membuatnya:
1.Masuk ke dashboard blogger,pilih layout dan klik add a gadget


2.pada paparan scroll ini pilih HTML/Javascript


3.masukkan kod berikut padanya

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;

}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/tbbcirclecomment.js"></script>
<script type="text/javascript" src="http://teknikbuatblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></div></div>
<span style="font-size:10px;"><a href="http://teknikbuatblog.blogspot.com/2013/08/widget-komen-terbanyak-dengan-avatar.html" target="_blank"> <center><font color="blue">**Dapatkan widget ini**</font></center> </a></span> 


Nota:
Tukarkan teknikbuatblog pada kod dengan nama blog anda
Tukarkan nilai “5” bagi memaparkan jumlah komen yang hendak dipaparkan
numComments  = 5
dan
&max-results=5
Untuk menukar saiz avatar ubah nilai 60 pada kod diatas.

Kredit untuk Hrish @ way2blogging.org

Selasa, 06 Agustus 2013

Cara pasang google map pada blog

Pemasangan google map membolehkan pelanggan mengetahui lokasi perniagaan anda.Ia adalah elemen utama bagi sesiapa yang menjalankan perniagaan online.Dengan pemasangan Google map ini membolehkan pelanggan mencari lokasi dengan lebih tepat.Jika anda ingin memasangnya pada blog berikut adalah caranya:

1.Masuk ke web https://maps.google.com/
2.Masukkan alamat pada ruangan search dan klik search.


3.paparan interaktif peta akan terpapar,anda boleh memilih untuk meletakkan peta satelit atau peta biasa .terdapat menu pilihan untuk meletakkan detail pada peta anda seperti foto dan sebagainya.


4.Klik pada butang link

5.Salin kod yang terpapar pada bahagian Paste HTML to embed in website

6.kemudian masuk ke blogger >>pada dashboard pilih pages>>new page>>blank page>>pilih tab  HTML dan masukkan kod tadi.Boleh juga diletakkan pada post anda,klik pada tab html pada posting dan salin kod tadi.





7.kemudian klik publish

Sabtu, 27 April 2013

Cara guna HTML editor terbaru blogger

HTML editor adalah tempat dimana kita boleh mengubahsuai template mengikut citarasa sendiri.Blogger telah mengeluarkan HTML editor terbaru.Sebelum ini anda perlu tandakan Expand widget template jika hendak memaparkan keseluruhan kod yang ada pada template.Berbeza dengan yang baru kita boleh memilih untuk terus ke widget widget tertentu pada template.Jika sebelum ini anda menggunakan fungsi search (Ctrl+F) pada browser (contohnya seperti Mozilla Firefox) untuk mencari kod pada template,pada HTML editor terbaru ini kod tidak akan dijumpai jika menggunakan Ctrl+F pada browser.



 Untuk mencari kod pada HTML editor terbaru ikutilah langkah berikut ini



Klik dimana mana bahagian didalam HTML editor dan tekan butang Ctrl + F pada keyboard.Ruangan search akan dipaparkan pada bahagian atas ruangan HTML editor.

 
Taipkan teks yang hendak dicari pada ruangan search dan tekan butang enter.Teks yang dijumpai akan dihighlightkan.Bagaimana pun sesetengah browser tidak boleh digunakan untuk mencari teks pada editor baru ini.Saya menggunakan Mozilla Firefox dan ia berfungsi.Editor lama rasanya lebih senang digunakan dan sesuai untuk kebanyakan browser .

Kamis, 21 Februari 2013

Cara pasang widget Live Traffic

Widget live traffic memboleh anda mengetahui dari mana datangnya pengunjung sebaik saja mengunjungi blog anda.Jika anda ingin memasangnya.ikutilah langkah dibawah ini.

live traffic











 

1.Masuk ke web feedjit.com
2.Klik pada choose your Feedjit


traffic







3.Pilih feedjit completely free dan klik pada sign up


signup









4.Bahagian ini anda boleh mengubah saiz widget,background,jenis teks,border dan button



trafik blog




















Pada bahagian bawah kita boleh memilih untuk memasang widget ini pada blogger blog,wordpress dan sebagainya. Kemudian klik pada go

5.Kemudian muncul instruction for installing on blogger

pasang widget




















Klik pada butang click to open a new window and install on blogger.

6.Muncul Add Page element...Klik pada add widget
pasa blog













7.Live traffic telah siap dipasang pada blog anda



layout blog