Home » Archive for 2013
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.
Cara memasangnya:
1.Masuk ke web nrelate.com
2.pada sebelah kanan web terdapat ruangan untuk daftar dengan nrelate
3.klik pada create and acccount
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
8.Klik pada menu install
9.Pada paparan seterusnya pilih logo blogger
10.Masukkan url blog anda dan klik submitt
11.Pilih version untuk widget anda
12.Pada add page element pilih blog yang diperlukan dan klik add widget
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
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
• 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
.
.
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 == "item"'>
<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("<< 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 >><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.
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
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Kod warna merah perlu dipadam.<b:includable id='main'>
<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
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.
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 + "_comment-editor-toggle-link"' 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
4.Akhir sekali simpan template anda
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 + "_comment-editor-toggle-link"' 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.
Cara pemasangannya:
1.Masuk keblogger
2.Pada dashboard pilih Layout dan klik pada Add a Gadget
3. dan pilih HTML/Javascript
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>
.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>
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.
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>
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
- http://www.mastemplate.com/
- http://www.borneotemplates.com/
- http://www.zoomtemplate.com/
- http://btemplates.com/
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
- Buka situs www.blogger.com
- Login dengan akun blog anda.
- Selanjutnya akan diarahkan kehalaman home dan pilih Template seperti pada gambar
- Kemudian klik Cadangan/Pulihkan yang ada di sebelah pojok kanan atas seperti pada gambar
- 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
- 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
- Buka alamat berikut www.blogger.com
- Masukkan alamat email dan password sobat, lalu klik Masuk
- Kemudian akan dibawa kehalaman home blog sobat lalu pilih Entri baru seperti pada gambar
- Setelah itu akan muncul halaman lembar kerja baru yang masih kosong, halaman inilah yang nanti anda gunakan untuk membuat postingan atau tulisan anda
- Selanjutnya tuliskan artikel yang akan anda buat seperti contoh pada gambar, lulu klik Publikasi untuk menampilkan artikel sobat
- Sekarang postingan anda sudah selesai tinggal mengecek di alamat blog anda, klik Lihat blog seperti pada gambar dan anda akan melihat hasilnya.













