Tips Modifikasi dan Gambar Motor Drag Terbaru

Motor drag kian naik daun di kalangan masyarakat pecinta otomotif. Motor jenis ini seringkali digunakan dalam balapan dengan lintasan lurus. Balapan seperti ini sangat cocok bagi penyuka kecepatan lurus dengan motor yang telah dimodifikasi sedemikian canggih untuk mendapatkan kemampuan berlintas di area secepat mungkin. Motor drag tentu saja berbeda dengan Ninja RR 150 yang memiliki perawakan

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;
}

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.

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

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

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.

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


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

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)

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

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

CARA MENGGANTI TEMPLATE BLOGGER

Mengganti Template Blogger

Mungkin sebagian dari kita belum seberapa faham apa yang dimaksud dengan template, dalam dunia blog template sering diartikan sebagai tema atau tampilan blog, template juga sangat berpengaruh besar dalam menentukan jumlah pengunjung.

Biasanya seorang pengunjung akan melihat tampilan blog kita, apakah blog kita tampilannya bagus atau tidak. Apabila bagus pasti akan mengunjuginya lagi dan jika jelek sudah pasti akan pindah ke yang lainnya, disamping itu kita juga harus mengimbanginya dengan artikel-artikel yang up to date yang dibutuhkan oleh para pengunjung. Tidak hanya bagus tampilannya saja sedangkan tidak ada artikel yang bagus itu juga pengunjung enggan untuk mengunjungi blog kita.

Agar pengunjung tetap setia pada blog kita juga harus memostingkan arikel yang up to date jika merasa bingung baca juga artikel cara posting di blogger. Ok langsung saja kita membahas cara mengganti template blogger.

Sebelum memulai terlebih dahulu anda harus mendownload template blog pada situs yang menyediakan template gratis, dibawah ini adalah daftar alamat penyedia template blogger yang menurut saya bagus untuk dicoba
Jika anda sudah mendownloadnya kemudian file yang dalam Rar klik kanan truz ektract dan selanjutnya anda sudah bisa mulai ke tahap untuk mengganti template blog

 

Langkah untuk mengganti template blogger

    1. Buka situs www.blogger.com
    2. Login dengan akun blog anda. 
    3. Selanjutnya akan diarahkan kehalaman home dan pilih Template seperti pada gambar 
    4. Kemudian klik Cadangan/Pulihkan yang ada di sebelah pojok kanan atas  seperti pada gambar
    5. Kemudian anda akan diminta untuk memasukkan template yang kita download tadi dengan cara klik Choose File yaitu memasukkan file template yang sudah kita ekstrack lalu klik Unggah
    6. Jika proses sudah selesai makan tampilan akan seperti berikut, lalu klik Lihat Blog untuk mengecek blog kita. seperti pada gambar dibawaha ini.
    Itulah beberapa tahapan untuk mengganti template blog agar tampak lebih bagus, mungkin hanya itu yang bisa saya postingkan. jangan lupa untuk meninggalkan komentar dibawah ini :-) 

    Demikian Tutorial Cara Mengganti Template Blogger

    CARA POSTING ARTIKEL DI BLOG

    Posting Artikel di Blog 

    Membuat postingan atau mebuat daftar bacaan merupakan suatu keharusan yang tidak boleh dilupakan bagi pemilik blog, terkhusus untuk mereka yang baru belajar blog, karena jantung blog itu sendiri adalah banyaknya sebuah postingan, semakin banyak postingan semakin kuat pula blog tersebut.
     
    Oleh karena itu kali ini saya akan menuntun anda tahap demi tahap untuk memostingkan sebuat artikel atau karya tulis anda dengan benar dan tepat, dan juga agar mudah untuk terdeteksi oleh mesin pencari google. tanpa panjang lebar langsung saja kita membahas caranya.

    Langkah-langkah posting di blogger

    1. Buka alamat berikut www.blogger.com
    2. Masukkan alamat email dan password sobat, lalu klik Masuk
    3. Kemudian akan dibawa kehalaman home blog sobat lalu pilih Entri baru seperti pada gambar 
    4. Setelah itu akan muncul halaman lembar kerja baru yang masih kosong, halaman inilah yang nanti anda gunakan untuk membuat postingan atau tulisan anda 
    5. Selanjutnya tuliskan artikel yang akan anda buat seperti contoh pada gambar, lulu klik Publikasi untuk menampilkan artikel sobat
    6. Sekarang postingan anda sudah selesai tinggal mengecek di alamat blog anda, klik Lihat blog seperti pada gambar dan anda akan melihat hasilnya. 

    Itulah tahapan-tahapan dalam membuat postingan di blogger, jangan lupa tinggalkan komentar sobat dibawah ini ya, dan sukses slalu buat sobat blogger semuanya.

    Demikian Tutorial Cara Posting Artikel di Blog