Archive for January 2021

Tutorial Buat Slider Sebagai Header Using JQuery

Friday 29 January 2021

1. Log in blogger>>Dashboard>>Theme>>Edit HTML

2. Cari code

]]></b:skin>

3. Copy code bawah ni

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 560px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

4. Paste diatas code ]]></b:skin>

5. Kemudian cari code

</head>

6. Copy code bawah ni

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
<script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 560, navigation: false, delay: 5000 }); });</script>

7. Paste di atas code </head>

8. Save template

9. Pegi pada page element

dashboard>>page element>>Add a gadget>>HTML/Java

10.Copy code bawah ni

<div id='coin-slider'>
<a href="LINK Post" target="_blank">
<img src="URL image" />
<span>
  Image's decription
</span>
</a>

<a href="LINK Post" target="_blank">
<img src="URL image" />
<span>
  Image's decription
</span>
</a>
<a href="LINK Post" target="_blank">
<img src="URL image" />
<span>
  Image's decription
</span>
</a>
</div>

11. Paste dalam box HTML tadi

560 - lebar boleh adjust ikut kesesuaian blog masing-masing

LINK Post - link post yang nak diletakkan dalam slide

URL image - URL image yang nak diletakkan dalam slide

Image's decription - boleh ambil terus dari post entry [copy+paste] atau nak buat ayat sendiri

+ READ MORE

html Tutorial

Tutorial Tukar Font Dalam Blog Tanpa Install

1.Pilih font di web Google font API

Nak pilih font click sini

2. Log in blogger>>Theme>>Edit HTML>>Cari code <head>
*untuk memudahkan pencarian tekan cltrl+F serentak,kemudian masukkan code<head> dalam box pencarian td.

3.Copy code ni

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

4. Paste di bawah code <head> tadi
*pastikan code Font+Name korang tukar name font yang korang dah pilih tadi [yang Fiza bulatkan dalam gambar kat atas tu adalah contoh name font]

5. Copy code ni

font-family: 'Font+Name', arial, serif;

paste pada part yang korang nak tukar font

Page Text
cari code
body {

paste code
font-family: 'Font+Name', arial, serif;
selepas codebody {

contoh code yang dah siap

body {font-family: 'Font+Name', arial, serif;

Tajuk Post entry
cari code
.post h3 {

dan paste di bawah code .post h3{
contoh

.post h3 { font-family: 'Font+Name', arial, serif;

Sidebar
cari code
.sidebar h2 {
paste kat bawah code .sidebar h2{
contoh
.sidebar h2 { font-family: 'Font+Name', arial, serif;

untuk part lain pun same juga. Cari code dan paste selepas tanda { dan pastikan tiada code font selain code font-family tu ye.

Jangan lupa code Font+Name perlu tukar kepada name font

font arial dan serif tu tak kesah nak letak font ape sebab tu 2nd and 3rd font yang akan appear kalau first font yang korang pilih tu PC tak leh bace.

Kemudian preview. Kalau dah jadi dah puas hati, save terus. Kalau masih tak puas hati atau tak jadi re-check steps atau silap nama font atau coding.

+ READ MORE

Tutorial widget

Tutorial Letak Icon Facebook/Twitter/Friendster/Myspace di Tepi Blog

Sunday 24 January 2021

2.Copy kod kat bawah ni

<div style="display:scroll; position:fixed; top:200px; left:0px;">
<a class="linkopacity" href="http://www.facebook.com/facebook ID" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />
</div>

3.Paste code dalam box HTML/JavaScript

4.edit code

200-kedudukan icon dari atas ke bawah
[kalau nak letak atas..boleh letak start dari 0px..kalau tengah,mungkin 300px..adjust la mane korang rase ok]
left-kedudukan icon
[nak letak kanan pun boleh]
0-jarak icon dari kiri ke kanan atau dari kanan ke kiri
[adjust ikut suke]
facebook ID-facebook ID korang
click profile and copy je url atas tu
Facebook-nama icon
URL icon/imageurl icon korang..boleh google je icon ni

5.save!

kalau nak letak lebih dari satu icon, copy kod bawah ni

<a class="linkopacity" href="http://www.facebook.com/instagram" target="_blank" rel="nofollow" title="instagram" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

paste selepas code <br /> yang pertama tadi

Tukar nama icon kepada media sosial yang kau orang nak.

+ READ MORE

sidebar Tutorial widget

Tutorial Recent Post Bergerak

Tuesday 19 January 2021

Menarik bukan kalau letak recent post bergerak kat sidebar tu. Marilah cuba buat tutorial recent post bergerak.

Tutorial recent post bergerak

Copy kod kat bawah ni and paste dalam kotak gadget html

Font warna merah tukar url blog sendiri.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">

</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "url blog";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>

Save!

+ READ MORE

widget

Tutorial Buat Font Tile Cursor

Contoh tutorial font tile cursor

Tutorial Buat Font Tile Cursor

Tukar tulisan berwarna merah dengan kod warna pilihan dan perkataan pilihan masing-masing.

<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF6699;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>
<script type="text/javascript">
;(function(){
var msg = "Sihatimerahjambu";
var size = 18;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

+ READ MORE

Tutorial widget

Tutorial sparkles cursor

Satu lagi tutorial cantikkan blog, iaitu Tutorial sparkles cursor untuk blogger yang menggunakan blogspot.

Tutorial sparkles cursor

Sign in blogger>>dashboard>>layout
add a gadget>>HTML>>copy kod kat bawah ni then paste dalam kotak gadget HTML tadi
Save!

<script type='text/javascript'>
// <![CDATA[
var colour="pink";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

+ READ MORE

sidebar Tutorial widget

Tutorial letak icon comel sebelah title sidebar

Dashboard>>design>>edit HTML

Click Expand Widget Templates. Kemudian cari kod kat bawah ni

<h2 class='title'><data:title/></h2>

atau kod bawah ni

<h2 class='title'>your widget title</h2>

contohnya kod macam ni

<h2 class='title'>About me</h2>

Untuk memudahkan pencarian tekan Ctrl+F button. copy kod di atas dan paste dalam kotak pencarian.
Bila dah jumpa kod yang nak dicari tu, copy kod bawah ni

<img src='letak URL icon disini'/>

dan paste kan ditengah tengah antara dua kod yang dicari tadi.

Contoh yang dah siap paste macam ni.

<h2 class='title'><img src='letak URL icon disini'/><data:title/></h2>

atau

<h2 class='title'><img src='letak URL icon disini'/>About me</h2>

Dah siap, sila preview. Kalau dah kelihatan ada icon comel tu, save. Ulang langkah yang sama untuk letak di setiap tajuk sidebar.

+ READ MORE

html Tutorial

Tutorial Popup New Tab

Wednesday 13 January 2021

Tutorial Buat Popup New Tab atau "Open Link in Popup Window opens as a new tab"

1. Log in blogger
2. Template>>Edit HTML
3.Cari code

<head>

4. Copy code di bawah ni dah paste selepas code <head>

<base target='_blank'/>

5. Save

+ READ MORE

html Tutorial

Tutorial Auto Read More

Tuesday 12 January 2021

Tutorial Auto Read More untuk blogspot

1. Log in bloggger.com

2. Pergi ke dashboard>>>Template>>Edit html

[save and back up template dulu]

3.Cari code </head>
[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]
2.copy code bawah ni and paste sebelum code </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;

summary_noimg = 450;

summary_img = 350;

img_thumb_height = 140;

img_thumb_width = 140;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Editing

summary_noimg = 450; jumlah patah perkataan yang muncul pada homepage pada entri tidak bergambar

summary_img = 350;jumlah patah perkataan pada homepage pada entri bergambar

img_thumb_height = 140;tinggi gambar entri

img_thumb_width = 140;lebar gambar entri

3.Cari code <data:post.body/> kemudian gantikan code tersebut dengan code di bawah..

[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]

*Ada beberapa code ni <data:post.body/> dalam html, korang gantikan dengan code yang kedua korang jumpa.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'> <data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'><span style='color:#000;font-weight:bold:font-size:20px;border-radius:5px; padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 2px; padding: 9px; background:#c7c7c7;'>Read More</span></a></span>
</b:if>
</b:if>
</div>

Editing

color :#000; Tukar warna tulisan
font-size:20px; Size tulisan
background:#c7c7c7; warna background tulisan
Tukar ikut tema warna blog ye :)

4. Preview
5. Kalau tiada error dan menjadi boleh terus save

Selamat mencuba sehingga berjaya

+ READ MORE

html Tutorial

Tutorial Letak Widget Top Komentator Bulanan

1. Log in blogger.com

2. Dashboard >> Layout >> Add gadget >> HTML/Javascript

3. Copy code bawah ni

<script type="text/javascript"> function getYpipe(feed) { document.write('<ol>'); var i; for (i = 0; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; if(feed.value.items[i].link == "") var item ="<li>" + feed.value.items[i].title + "</li>"; else var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=URL BLOG &ExcludedNick1= NAMA ADMIN &ExcludedNick2= Anonymous &ShowHowMany=10 &ExcludeCommentsBefore=01-05-2014 &IncludeCommentsBefore=31-05-2014 &_callback=getYpipe &_id=50b225c916b74b06779b9489abceef2a &_render=json" type="text/javascript"></script>

4. Paste ke dalam box HTML/Javascript
5. Edit coding.
URL BLOG = Url Blog korang contoh http://www.tutorialpemblog.com/
NAMA ADMIN = Admin 10 = Jumlah komentator 01-05-2014 = kiraan tarikh komen mula masuk Hari-Bulan-Tahun
31-05-2014 = kiraan tarikh komen berakhir Hari-Bulan-Tahun

6. Dah siap Edit. Save!

+ READ MORE

html Tutorial

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan.

1. Login >>> dashboard >>> layout >>> add a gadget >>> HTML/javascript

2. Copy kod kat bawah ni paste di ruangan HTML/javascript

<style type="text/css">
.tcotp_tallyBox {
margin-top: 1em;
}
</style>
<div id="tcotp">
<div id="tcotpMsg">
</div>
<div class="tcotp_tallyBox">
<form name="tcotp_tallySpace">
<select id="tcotp_period" name="period"></select>
</form>
</div>
<div id="tcotpScriptBox">
</div>
<script type="text/javascript">
var tcotpUserPrefs = {
blogName: 'http://' + 'www.tutorialpemblog.com',
period: 'month',
maxNumberToShow: 10,
excludeBlogAuthors: true,
excludeAnonymous: true,
excludeCommenters: []
};
</script>
<script>
var tcotp=function(){var x,k,q,y,z,s,n,t,A,o,m=[],r=[],i=[];x=tcotpUserPrefs.blogName;k=tcotpUserPrefs.period;q=tcotpUserPrefs.maxNumberToShow;z=tcotpUserPrefs.excludeBlogAuthors;y=tcotpUserPrefs.excludeAnonymous;s=tcotpUserPrefs.excludeCommenters;o=function(a){a=a.slice(0,23).split("T");a=a[0].split("-").concat(a[1].split(":"));a[1]=a[1]-1+"";a=a.concat(a.pop().split("."));return new Date(a[0],a[1],a[2],a[3],a[4],a[5],a[6])};t=function(){var a,g,b,f,d,l,j,c=new Date,e=new Date,h=[];d={};var u=document.getElementById("tcotpMsg");
e.setHours(0,0,0,0);c.setHours(23,59,59,999);k=document.tcotp_tallySpace.period.value;switch(k){case "day":e.setDate(e.getDate()-1);break;case "week":e.setDate(e.getDate()-7);break;case "month":e.setMonth(e.getMonth()-1);break;case "year":e.setMonth(e.getMonth()-6);break;case "halfyear":e.setFullYear(e.getFullYear()-1);break;case "alltime":e=0;break;default:if(/ /.test(k)){e=new Date(k.split(" ")[0]+" 1, "+k.split(" ")[1]);c=new Date(e);c.setMonth(c.getMonth()+1)}else{e=new Date("January 1, "+k);
c=new Date(e);c.setFullYear(c.getFullYear()+1)}c.setMilliseconds(c.getMilliseconds()-1)}f=function(){return e===0?true:j>=e};a=function(){return e===0?true:j<=c};g=function(v,w){var p=w.count-v.count;if(p===0){p=w.latest-v.latest;return p===0?w.name>v.name?1:-1:p}else return p};for(b=0;b<i.length;b++){j=o(i[b].published.$t);if(a())break}for(a=b;b<i.length;b++){j=o(i[b].published.$t);if(f()){a=i[b].author[0].name.$t;l=i[b].author[0].uri?i[b].author[0].uri.$t:"";if(d[a])d[a].count++;else{d[a]={};d[a].name=
a;d[a].uri=l;d[a].latest=new Date(j);d[a].count=1}}else break}for(b=0;b<m.length;b++)delete d[m[b]];for(b in d)if(d.hasOwnProperty(b))for(a=0;a<r.length;a++)if(d[b].uri===r[a]){delete d[b];break}for(b in d)if(d.hasOwnProperty(b))h[h.length]=d[b];if(h.length===0)u.innerHTML="<i>No comments were made during that period.</i>";else{h.sort(g);g=document.createElement("ul");a=q!==0?q<h.length?q:h.length:h.length;for(b=0;b<a;b++){f=document.createElement("li");if(h[b].uri!==""){d=document.createElement("a");
d.href=h[b].uri;d.target="_blank";d.appendChild(document.createTextNode(h[b].name));f.appendChild(d);f.appendChild(document.createTextNode(" ("+h[b].count+")"))}else f.appendChild(document.createTextNode(h[b].name+" ("+h[b].count+")"));g.appendChild(f)}u.innerHTML="";u.appendChild(g)}};A=function(a){var g,b,f,d,l,j,c;f=new Date;f.setDate(1);f.setHours(0,0,0,0);b=new Date(a[0],a[1]-1);d=["Since One Day Ago","Since One Week Ago","Since One Month Ago","Since Half a Year Ago","Since One Year Ago","Since Forever"];
l=["day","week","month","halfyear","year","alltime"];j=["January","February","March","April","May","June","July","August","September","October","November","December"];a=document.tcotp_tallySpace.period;for(c=0;c<d.length;c++){g=document.createElement("option");g.value=l[c];g.appendChild(document.createTextNode(d[c]));a.appendChild(g)}for(;f>=b;){c=j[f.getMonth()]+" "+f.getFullYear();g=document.createElement("option");g.value=c;g.appendChild(document.createTextNode(c));a.appendChild(g);if(f.getMonth()===
0){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}f.setMonth(f.getMonth()-1)}if(f.getMonth()<11){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}for(c=0;a.options[c].value!==k&&c<6;)c++;a.selectedIndex=c===6?2:c};n=function(){var a,g,b,f=0,d=false,l=true,j=false;g=function(c,e){return o(e[0].published.$t)-o(c[0].published.$t)};
b=function(c){for(var e=[];c.length!==0;)e=e.concat(c.shift());return e};a=function(){if(!d&&!l&&!j){j=true;t()}};return{lockGate:function(){d=true},unlockGate:function(){d=false;a()},addBlock:function(){f++},removeBlock:function(c){var e,h;c=c.feed.entry;h=i.length;i[h]=[];for(e=0;e<c.length;e++)i[h][i[h].length]={author:c[e].author,published:c[e].published};f--;if(f===0){i.sort(g);i=b(i);A(i[i.length-1].published.$t.slice(0,7).split("-"));l=false;a()}}}}();return{gateway:n,fetcher:function(a){var g,
b,f,d;g=x+"/feeds/comments/default?alt=json-in-script&callback=tcotp.gateway.removeBlock";b=document.getElementById("tcotpMsg");f=document.getElementById("tcotpScriptBox");if(!a||!a.feed)b.appendChild(document.createTextNode("This widget did not work. Please refresh the page you are viewing to try again."));else if(!a.feed.entry||a.feed.entry.length===0)b.appendChild(document.createTextNode("There are no comments available on this blog, or this blog is set to private which makes the comment feed inaccessible."));
else{document.tcotp_tallySpace.period.onchange=t;if(z)for(b=0;b<a.feed.author.length;b++)r[r.length]=a.feed.author[b].uri.$t;if(y)m[m.length]="Anonymous";for(b=0;b<s.length;b++)m[m.length]=s[b];b=parseInt(a.feed.openSearch$totalResults.$t,10);a=Math.ceil(b/200);n.lockGate();for(b=0;b<a;b++){n.addBlock();d=document.createElement("script");d.type="text/javascript";d.src=g+"&start-index="+(b*200+1)+"&max-results=200";f.appendChild(d)}n.unlockGate()}}}}();
</script>
<script type="text/javascript" src="http://www.tutorialpemblog.com/feeds/comments/default?alt=json-in-script&callback=tcotp.fetcher&max-results=1">
</script>
</div>

3. Gantikan
merah : link blog sendiri.

biru : jumlah bilangan komentator pilihan.

4. Save

Jangan letak widget ni di sidebar sebab akan menyebabkan blog lambat loading. Letakkan di pages.

+ READ MORE

html Tutorial

Cara Daftar Akaun Pinterest dan Tutorial Letak Button Pinterest Dalam Blog

Cara Daftar Akaun Pinterest

Masuk ke website pinterest (https://www.pinterest.com)
Sign up, daftar akaun baru dengan menggunakan facebook atau google account. Boleh juga create business, click pada create business account bahagian bawah sekali.
Selepas berjaya daftar, verikasi link blog untuk menghubungkan antara link blog dengan akaun pinterest di bahagian setting pinterest.

Kalau gunakan template blog yang dah siap-siap ada script pinterest pin it button for images tu. Sila gunakan sepenuhnya dan jangan sesekali buang!

Kalau tak ada, boleh cuba tutorial letak button pinterest pin it button for images dalam blog sendiri ye.

Tutorial Letak Button Pinterest Dalam Blog

1. Dashboard>>Theme>>Edit HTML
2. Cari code </head>
3. Copy code dibawah dan paste atas code </head>

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGigXliMhZL5100laPsaVuVWDivJKhyqqGHiVzsZ4Z-6JTJdzRn7Ap5DmB5XOmO-fseJ9S3_XxElvaiWFi24DsK0THg5a6qAfsP6dc4OSefG6iRKSwzjr-KbUHIoxtFdgyX831BUJPu3I/s72/pinterest-round.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1B(1C).1A(s($){$(\'Z\').1z(\'<4 x="w:H;" U="B" T="\'+15+\'">\');3 l;3 m;3 n;$(\'.B\').1w(s(){m=$(\'.B\').K(L);n=$(\'.B\').M(L);$(\'.B\').1x()});1d();s 1d(){$(\'.7-19 4,.r-Z 4,.7-14 4,.r-7 4,.r-J 4,.16-J a\').1y(\'.1a,.1a 4\').1D(s(){$(\'.9-p\').u("w","H");1c(l);3 a=$(q);3 b=13(a.u("W-v"));3 c=13(a.u("W-t"));3 d;3 e;1E(1K){D\'1L\':d=a.6().v+a.M(L)/2-n/2;e=a.6().t+a.K(L)/2-m/2;C;D\'1I\':d=a.6().v+b+5;e=a.6().t+c+a.K()-m-5;C;D\'1F\':d=a.6().v+b+5;e=a.6().t+c+5;C;D\'1G\':d=a.6().v+b+a.M()-n-5;e=a.6().t+c+a.K()-m-5;C;D\'1M\':d=a.6().v+b+a.M()-n-5;e=a.6().t+c+5;C}3 f=a.1k(\'T\');3 g=a.1i(\'.r,.1j,.7\').R(\'.r-S,.7-S,.7-1u\');3 h=g.1o();y(O 18===\'P\'){18=\'\'}y(O 11===\'P\'){11=\'\'}y(g.R(\'a\').1q){3 Y=g.R(\'a\').G(\'Q\').1b(/\\#.+\\b/1e,"")}V{3 Y=$(1r).G(\'Q\').1b(/\\#.+\\b/1e,"")}3 i=\'<12 U="9-p"x="1s:E;6:1m;z-1l:1J;1N:2c;" ><a Q="24://2e.28/27/26/29/?2a=\'+Y+\'" 2b="25"><4 U="23" x="-1S-I-F:E;-1T-I-F:E;-o-I-F:E;I-F:E;20:21;W:0;1Y:0;1X:0;" T="\'+15+\'" S="1W 17 1Z"></a></12>\';3 j=a.10().1V(\'a\')?a.10():a;y(!j.A().1U(\'9-p\')){j.1P(i);y(O l===\'P\'){j.A(\'.9-p\').G("1h","q.x.1f=1;q.x.w=\'X\'")}V{j.A(\'.9-p\').G("1h","q.x.1f=1;q.x.w=\'X\';1c(1R)")}}3 k=j.A(".9-p");k.u({"v":d,"t":e});k.u("w","X");k.N().1g(1Q,1.0,s(){$(q).1O()})});$(\'.7-19 4,.r-Z 4,.7-14 4,.r-7 4,.r-J 4,.16-J a\').17(\'2d\',s(){y(/1p [1-8]./.1H(1v.2f.1t())){3 a=$(q).A(\'.9-p\');3 b=$(q).10(\'a\').A(\'.9-p\');l=22(s(){a.N().u("w","H");b.N().u("w","H")},1n)}V{$(\'.9-p\').N().1g(0,0.0)}})}});',62,140,'|||var|img||position|entry||pinit||||||||||||||||wrapper|this|post|function|left|css|top|visibility|style|if||next|pinimgload|break|case|none|shadow|attr|hidden|box|image|outerWidth|true|outerHeight|stop|typeof|undefined|href|find|title|src|class|else|margin|visible|pinitURL|body|parent|bs_pinSuffix|div|parseInt|summary|bs_pinButtonURL|block|on|bs_pinPrefix|content|nopin|replace|clearTimeout|hoverCheck|gi|opacity|fadeTo|onmouseover|closest|hentry|prop|index|absolute|3000|text|msie|length|location|display|toLowerCase|header|navigator|load|remove|not|append|ready|jQuery|document|mouseenter|switch|topleft|bottomright|test|topright|9999|bs_pinButtonPos|center|bottomleft|cursor|show|after|300|bsButtonHover|moz|webkit|hasClass|is|Pin|border|padding|Pinterest|background|transparent|setTimeout|pinimg|http|_blank|create|pin|com|button|url|target|pointer|mouseleave|pinterest|userAgent'.split('|'),0,{}))
//]]>
</script>

Tukar tulisan warna merah dengan url button pinterest pilihan. Copy url button yang disediakan dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQc2aaLZeBFxtupopLzb4Qp8Hg_Inf_iUOp-bLTn2WSYywaRqZy_SZUR7ZZJSZvKnxP9XLqMUj_nZeTCYHFXymIEmsRlLbTc41DqIs3SzIi6FZpzJ2TD6AqOR_Dwkkv03Jxd8YxaGFVCc/s72/pinterest-square.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGigXliMhZL5100laPsaVuVWDivJKhyqqGHiVzsZ4Z-6JTJdzRn7Ap5DmB5XOmO-fseJ9S3_XxElvaiWFi24DsK0THg5a6qAfsP6dc4OSefG6iRKSwzjr-KbUHIoxtFdgyX831BUJPu3I/s72/pinterest-round.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtcnzX9ymk47heAWNnkv4wR0uWLdWMk3kKmaP51Ev-oy9q4abWjYyxN_OIGrOye0ZoVNxxeBZZGaawjdo6Qjdt_YdnwzkYQcxOgnunrQW6kJV4mhcs_uM2DOkgAfcsug6lSYr6BHkvZ8f/s84/pinterest-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTP554sCtcD4E2MqZbZY18MEO-1UHIKNR6SZABCSgfjC29hyphenhyphenKa4meMevt3W3ejxnn-EIykfT5loBYmmU05igj6ZgdwOFrMlV-hperIeAAjx6Je48SHHWIcBYd6wnl9ev8jr2tPN8y7Asqa/s92/pinterest-button-pin+it.png

Untuk tulisan warna biru center kedudukan button interest pada gambar. Boleh ubah posisi mana ikut suka, gantikan kod center dengan salah satu kod dibawah.

topleft
topright
bottomright
bottomleft

5. Save Template

Dah save lepas tu check kat blog samada button pinterest berfungsi atau tidak. Kalau dah berfungsi rajin-rajinlah pin it gambar untuk promote dan secara tak lansung boleh naikkan traffic blog.

Credit untuk owner script pinterest.

+ READ MORE

Tutorial

Tutorial Disable Highlight Text Blogspot

Saturday 9 January 2021

Login blogger dashboard

Pergi ke Layout
>> Add a Gadget
>> pilih HTML/Javascript

Copy code di bawah dan paste dalam kotak gadget html tadi

<script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

Dan save.

Gadget boleh letak dimana mana dalam layout. Tak ada masalah.

+ READ MORE

Main Menu

Image Slider

Tutorial Buat Slider Sebagai Header Using JQuery

Tutorial Tukar Font Dalam Blog Tanpa Install

Tutorial Letak Icon Facebook/Twitter/Friendster/Myspace di Tepi Blog

Tutorial Recent Post Bergerak

Tutorial Buat Font Tile Cursor

Tutorial Buat Font Tile Cursor

Tutorial sparkles cursor

Tutorial letak icon comel sebelah title sidebar

Tutorial Popup New Tab

Tutorial Auto Read More

Tutorial Auto Read More untuk blogspot

Tutorial Letak Widget Top Komentator Bulanan

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan

Cara Daftar Akaun Pinterest dan Tutorial Letak Button Pinterest Dalam Blog

Cara Daftar Akaun Pinterest

Tutorial Letak Button Pinterest Dalam Blog

Tutorial Disable Highlight Text Blogspot

Welcome

Author

Popular Posts

Blog Archive

Labels

Main Menu

Top Social

Image Slider

Tutorial Buat Font Tile Cursor

Tutorial Auto Read More untuk blogspot

Cara Daftar Akaun Pinterest

Tutorial Letak Button Pinterest Dalam Blog

Welcome

Author

Popular Posts

Blog Archive

Labels