Showing posts with label Tutorial. Show all posts

Tutorial : Buat Read More Pada Blog

Tutor ni adik nasuha yang request. Sori dik sebenarnya terlupa! Adik nasuha nak tahu cara buat read mora pada blog. Ok jom mula buat!^^


1- Login > Dashboard > Template > Edit HTML

2- Ctrl +F dan search kod ini :
 </head>

3- Dah jumpa? Ok good. Sekarang copy kod di bawah ni, than paste di bawah / selepas kod step ke dua tadi
<!--ReadMore -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#CD7388;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 3px solid #EAEAEA;float:left;height:145px;width:190px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 2px 2px 2px #111;}
.grow img{height:145px;width:190px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 300;
summary_img = 250;
img_thumb_height = 145;
img_thumb_width = 190;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->

4- Sekarang cari pula kod ini :
<data:post.body/>

5- Korang enter 2 kali, kemudian gantikan kod di step ke 4 tadi dengan kod kat bawah ni :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Read More &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

6- Preview.. Kalau dah ok takde error, Boleh klik Save Template :)



p/s: harap dapat membantu^^



Tutorial : Letak Button Send Facebook Pada Setiap Entri

Request daripada blogger Siti Zuraida.. Siti inginkan tutorial ni, nanti nak ping entri blog ke group facebook senang kan? Just klik send button ^_^

Ok jom buat^^

1- Login > Dashboard > Template > Edit HTML

2- Ctrl+F dan search kod ni :
<data:post.body/>

3- Enter 2 kali, then paste kod bawah ni selepas kod di step 2 tadi^^
<!--Facebook Send button Start --><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='float:right;padding: 01px 05px 05px 0;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:send colorscheme='light' expr:href='data:post.url' font=''/></div></b:if>

<!--Facebook Send button End -->

4- Preview, kalau dah jadi boleh klik Save template :)


5- Nanti korang boleh send entri ke group blogger kat facebook ~

Selamat mencuba :)


Tutorial : Cara Letak Gambar Dalam Entri Di Blog

Tutorial ini sambungan daripada tutorial sebleum ini :) Ok, simple je tutor ni.. Hanya untuk letak gambar di dalam entri :) **Klik gambar untuk lebih jelas

1 - Login > Dashboard > New Post

2- Taip tajuk entri, kemudian klik  "Insert Image" untuk masukkan gambar di dalam entri...

3- Kemudian akan keluar satu pop-up window

4- Ok, sekarang boleh pilih gambar :)

5- Gambar di"upload"

6- Yeay! Dah ada gambar dalam entri... ^_^ Boleh continue taip entri ....


Boleh upload gambar banyak-banyak dalam entri.. hehe :) 


Tutorial : Update Entri Dalam Blog

Inilah tutorial basic untuk seorang blogger... :) Sebenarnya tutorial ini requested by kakyana.. Sorry kak yana, deno terlewat.. Ok, jom kakyana upadate entri! ^^

**Klik gambar untuk lebih jelas

1- Pastikan anda ada blog! Then bukak www.blogger.com ......
2- Continue  step kat bawah.. Tutorial mengikut gambar  :)












Senang kan? Hari-hari boleh update entri :)


Tutorial : Letak Facebook Like Button Dalam Setiap Entri

Tutor ini request by adik Nasuha comel :) Okey, jom kita mula!


1. Login > dashboard > template > edit HTML

2. Ctrl F dan search kod ni
  <div class='post-body entry-content

3. Dah jumpa? Good. Sekarang copy pula kod bawah ni dan paste di bawah kod step nombor 2 tadi
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4. Preview, kalau tak ada error, boleh Save :)



p/s: harap ini  dapat membantu :)



Tutorial : Cara Melukis Mata Doodle

Bau-baru ni deno dapat request daripada adik Nur Asma nak lukis mata doodle.. Sori dik, baru sekarang berkesempatan buat tutor ni..

Sebenarnya doodle2 tu matanya ringkas je... hehe... Deno menggunakan software SAI, sori ya sebab mata ni tak "shine bright like a diamond". Ianya simple je :)

Kalau belum ada sofware SAI, boleh download kat SINI

then boleh ikut step bawah ni.. ^^



p/s: selamat mencuba!!!^^



Tutorial : Letak Top Commentators Di Blog

Nak lihat siapa paling kuat komen di blog korang? Meh sini deno kongsikan tutor..

Macam ni bila siap nanti......

Jommm!!!

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://' + 'dayangdeno.blogspot.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://dayangdeno.blogspot.com/feeds/comments/default?alt=json-in-script&callback=tcotp.fetcher&max-results=1">
</script>
</div>

3. Sekarang Save!^^

Biru : link blog korang
Merah :korang boleh pilih nak berapa orang top komentar :)


p/s: siapa "hantu" komen blog korang? hehe^^


Tutorial : Scroll Box For Labels

Labels! Request form my besfriend...! Sori dear baru berkesempatan buat :)

Okey, jom mula! *jangan lupa klik gambar untuk lebih jelas ya 

1. Login > dashboard > layout > labes *korang edit apa yang patut.. then Save.

2. Ok, sekarang kita nak buat scroll box. 

3. Template > edit HTML

4. Korang Klik "Jump to widget". Cari perkataan Label dan korang klik. Ia akan terus ke Label tu...

5. Dah jumpa? sekarang klik expand tick yang kecik warna hitam tu... *lihat kotak merah

6. Dah jumpa? sekarang klik sekali lagi expand tick yang keluar satu lagi kat bawah.. .. then cari kod ini:
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

7. Bila dah jumpa, sekarang korang gantikan kod pada step6 dengan kod ini:
 <div class='widget-content' style='overflow:auto; width:ancho; height:130px;'>
Jadi macam kat bawah ni......... ^^

*Warna merah pada kod baru tu korang boleh pilih height yang korang nak. Kemudian, preview template... Kalau ok dan menjadi, terus save template! :)

bila dah siap, labels akan jadi lebih ringkas macam ni ~


p/s: kalau ada apa2 tanya deno eh? ^^



Tutorial : Scroll Box For Blog Achieve

Kali ini tutor scroll box for blog achieve! Ramai yang tak dapat buat sejak ada blogger HTML baru ini kan... okey ini cara deno buat^^ *jangan lupa klik gambar untuk lebih jelas ya

1. Login > dashboard > template > edit HTML

2. Ctrl F dan taip tajuk blog achieve korang.. Macam deno, deno letak tajuk Achieve. Korang pula search tajuk blog achieve korang.

3. Lepas tu, korang klik expand tick yang kecik warna hitam tu... bawah barisan kod achieve tu.. *korang lihat kotak merah

4. Dah siap? Okey... deno cari kod ni <div class='widget-content'> dalam kotak search tapi tak detect kan.. betul tak? cuba korang buat. Jadi deno cari secara manual.. ada! Kat bawah tu je... *lihat kotak merah

5. Dah jumpa? Good! Korang ganti kod <div class='widget-content'> dengan kod yang ni pula.. 
<div class='widget-content' style='overflow:auto; width:ancho; height:200px;'>
Jadi macam kat bawah ni...

6. Warna merah pada kod baru tu tu korang boleh pilih height yang korang nak. Kemudian, preview template... Kalau ok dan menjadi, terus save template! :)



p/s: selamat mencuba! kalau tak faham boleh tanya ya ^^






Tutorial : Letak Lagu Dalam Blog

Dapat request daripada rakan satu kelas semasa  di UiTM.. Putri :) Okey, lagu yang ni dah autoplay^^ Jadi tak perlu dah nak ubah apa, just tukar link lagu, warna dan saiz :)


1. Login > Dashboard > Layout > HTML/Javascript

2. Copy kod kat bawah ni dan pastkan dalam ruangan HTML/Javascript tu
<div style="text-align: left;"><br />
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="170" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http://dc468.4shared.com/img/1384880697/8f55d94c/dlink__2Fdownload_2Ffo31RWu2_3Ftsid_3D20130527-24047-ef26f540/preview.mp3&amp;autoplay=1&amp;bgcolor=ffffff&amp;loadingcolor=000000&amp;buttoncolor=CC3366&amp;slidercolor=CC3366" />
</object><br /><div></div></div>

3. Then, korang boleh Save dan preview blog ya :)

NOTE:
Hijau : korang boleh adjust saiz korang nak
Merah : Korang boleh letak lagu yang korang nak.. deno cari di 4shared
Biru : korang boleh pilih warna..  klik SINI

Contoh deno punya macam kat bawah ni :


p/s: selamat mencuba :)




Tutorial : Letak Lagu Dalam Blog Link Youtube

Tutorial lagu dalam blog again! Sebelum ini lagu diambil daripada 4shared dan link lagu biasa.. Tapi kali ni kod daripada youtube :) Sama juga, autoplay^^

Step pun lebih kurang je..

1. Login > dashboard > Layout > Add a gadget > HTML/Javascript

2. Copy kod kat bawah ni dan paste dalam ruangan  HTML/Javascript
<center><object width=&quot170" height="20"><param name="movie" value="http://www.youtube.com/v/9NcS_2Io9t4?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=ffffff&amp;amp;color2=ffffff " /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/9NcS_2Io9t4?version=2&autoplay=1&hl=en_US&amp;color1=ffffff&amp;amp;color2=ffffff "" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="170" height="20"></embed></object></center>


3. Then Save dan preview blog korang :)

Merah : korang boleh ubah saiz
Biru : kod diambil daripada youtube.. 

Korang ambil kod macam deno dah letak kotak merah tu... haaa kod tu la :)


p/s: selamat mencuba :)



Tutorial : Cara Buat Gambar Bergerak (animated GIF)

Pagi2 sebelum buat CAPD,, jom kita belajar buat animated GIF yang mudah! Sebelum tu, korang mesti ada software photoscape!^^

Ok, mula2 korang mesti lukis gambar.. Pastu lukis la ada part yang berubah-ubah sebab nanti nak bagi gerak2 kan? Haaaaa.... macam kat bawah ni, deno lukis budak lelaki yang sedang main bentuk2 mulut.. ekekek :p *klik gambar untuk lebih jelas!



1. Okey, dah siap lukis kan... Then korang open Photoscape dan pilih Animated GIF

2. Klik Add > Add a photo. 

3. Korang pilih gambar yang pertama.. Kemudian, next gambar.. Buat macam step 1 : Add > Add a photo > Pilih gambar... sampai la semua gambar tersusun macam rajah di bawah ni

4. Gambar dah bergerak-gerak kan? Okey, sekarang korang bolehlah nak adjust display time.. nak laju atau perlahan.. Klik "change display time"

5. Selepas dah set display time, dah puas hati gerak2 tu.. Korang boleh Save as gif! Siap!

inilah hasil animated GIF yang simple daripada deno ~




p/s: selamat mencuba^^

Tutorial : Open Link In New Tab Dan Off Tab Cara Mudah

Ehem2.. miss deno nak mengajar nih, dah tahu? tak kira nak ajar jugak! hihi

Biasanya kan, kalau kita nak open link in new tab, kita right-click dan click open link in new tab kan kan? ala.. macam yang senang macam kat bawah ni...


Ada sesetengan link kita tak boleh right-click! Adehhh.. malasnya nak klik satu2, nak kena tunggu loading lama la. Haaa... ini penyelesaiannya!



p/s: senangnya!^^




Tutorial : Tab Menu Di Sidebar *Tabber Widget

Pagi2 tutorial lagi^^



Ada beberapa blogger yang bertanyakan deno macam mana cara nak buat tabber widget macam blog deno ni ~ Kebaikan tabber widget ni.. kita dapat jimatkan ruang dalam blog dan blog pun jadi lebih kemas!:)

Jadi, apa kata kita cuba tutor ni? senang dan ringkas!

First, Login > Dashboard > HTML/Javascript > Then korang copy semua kod bawah ni :
<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb !important;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #ffffff;
     cursor:pointer;
    }
    html .tabber h2.active {
     background: #BDBDBD;
     border-bottom: 1px solid #BDBDBD; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 2px solid #BDBDBD;
     padding: 10px;
background: #fffffff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3     });
    });
    </script>
    <!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>


Merah :  warna background active tab & kaler border bawah tab
Biru : ketebalan border
Hijau : warna border tab
Kuning : warna background sidebar title
Merah jambu : bilangan tab


*lain2 korang boleh adjust mengikut kesukaan korang..... warna korang boleh cari kat SINI:)

Then, pada layout, korang kena susun sidebar widget macam kat bawah ni :


Pada HTML kod tabber widget tu, korang jangan letak apa2 tajuk.. Just susun tab yang korang nak letak kat bawah HTML tu.. Macam deno, tab tu deno letak tiga sahaja, jadi tiga je tajuk.. Tak kira letak apa2 pun, tapi mesti ada tajuk ya... :)

Dah siap susun, boleh SAVE! :)



p/s: selamat mencuba!


Tutorial : Kotak Iklan Bergerak-Gerak

Haaa.... siapa nak letak iklan kat blog?

Kali ni deno nak share macam mana nak letak kotak iklan bergerak-gerak kat blog macam kat bawah ni ha... bila bergerak-gerak nampak menarik kan? :)



Okey senang je...

1. Dashboard > Add a gadget > HTML/Javascript

2. Korang copy kod kat bawah ni dan paste pada kotak HTML tu...

<center><div style='-moz-box-shadow: 0 0 5px 2px #ddd; -webkit-box-shadow: 0 0 1px 1px #ddd; background: url(Bakcgroundurl); border: 4px solid #fdcfde; padding: 2px; width:600px;'><div style='text-align: center;'><marquee behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2'>
<a href='link iklan'><img height='100' src='URL image' width='100'/>
<a href='link iklan'><img height='100' src='URL image' width='100'/>
<a href='link iklan'><img height='100' src='URL image' width='100'/>
<a href='link iklan'><img height='100' src='URL image' width='100'/>
<a href='link iklan'><img height='100' src='URL image' width='100'/>
</a>
</a></a></a></a></marquee><br/></div></div></center>

Hijau : Panjang keseluruhan kotak iklan
Merah :  letak link iklan atau banner
Biru : letak URL gambar iklan atau banner

*setiap kali nak tambah kotak iklan, tambahkan kod ini
<a href='link iklan'><img height='100' src='URL image' width='100'/>


p/s: selamat mencuba! :)




Tutorial : Open New Tab Cara Mudah!

Mudah sangat2.. tak payah klik.. hohoho... (✿◠‿◠)


Biasanya kita klik tab kan kalau nak bukak tab baru....

klik gambar untuk lebih jelas

Kali ni korang tekan je Ctrl dan T serentak.. 

Mesti secara automatik terus ke new tab kan?^^ Takpe la korang dah tahu, deno nak beritahu jugak.. hehe^^







Tutorial : Cara Buat Sticky Post

Saja2 nak berkongsi... hihi^^ Mula2 blogger buat perubahan pening juga tau, macam2 deno cuba, last2 menjadi juga...

Ok, jom buat! :)

1. Login > Dashborad > New Post

2. Taip entri yang korang nak buat sticky post tu.. Dah siap taip? ok, sekarang publish!

3. Bila dah siap publish, korang edit balik. Then, korang ke Post setting > Schedule > Set Date and time tu... Korang set la sampai bila post tu nak melekat kat blog dan sampai pukul berapa, korang boleh edit.. contoh mcm kat bawah ni ~


Bila dah publish, post tu akan melekat sehingga tarikh dan masa yang korag dah setting.. Maksudnya bila korang buat entri baru pun, sticky post tu takkan berubah... :)

Deno tahu ramai dah pandai buat tapi nak buat juga tutor ni.. hihi^^



p/s: selamat mencuba :)

Tutorial : Scroll Box For Bloglist

Nak berkongsi dengan korang cara buat scroll box cara deno

Deno tahu ramai dah tahu buat kan tapi bila dengan new blogger template HTML ni, dah tak sama macam dulu.. deno ada buat kajian! hehe.. ^^ Kenapa? Bila cari kod tak jumpa!

Jadi jom buat tutor cara deno.. *klik gambar untuk lihat lebih jelas!

1. Login > dashborad > template > edit HTML

2. Ctrl + F dan cari tajuk apa yang korang nak buat scroll box tu. Macam deno letak Bloglist dan search Bloglist.

3. Tekan Enter 2 kali

4. Dah jumpa? sekarang klik expand tick yang kecik warna hitam tu... *lihat kotak merah

5. Sekarang, klik sekali lagi expand tick yang keluar satu lagi kat bawah .. *lihat kotak merah

6. Dah siap? Okey... deno cari kod ni <div class='widget-content'> dalam kotak search tapi tak detect kan.. betul tak? cuba korang buat. Jadi deno cari secara manual.. ada! Kat bawah tu je... *lihat kotak merah

7. Dah jumpa? Bagus! Korang ganti kod <div class='widget-content'> dengan kod yang ni pula.. 
<div class='widget-content' style='overflow:auto; width:ancho; height:200px;'> 

Jadi macam kat bawah ni..



8. Warna merah tu korang boleh pilih height yang korang nak. Kemudian, preview template... Kalau ok dan menjadi, terus save template! :)


p/s: tutorial ni korang boleh buat scroll box untuk semua.. cthnya blog achieve, scroll box, bloglist, HTML*cthnya url gambar dll.. :)


Tutorial : Letak Corak Pada Doodle

Dah lama dikdina request tutor ni...

Hari ni bolehlah kakdayangdeno buat tutor ya..*dah rasa sangat tua .. hihi

Tutor ni menggunakan photoscape! sebelum cuba tutor ni, lukis dulu doodle dan jangan lupa buat transparent tau tempat yang nak letak corak tu ya.... okeh, jom cuba! *klik gambar untuk lebih jelas

Mula-mula macam biasa la kan, bukak dulu Photoscape > Editor





haaaa... macam mana.. boleh cuba buat kan....




p/s: boleh dapat banyak corak di teratak mr google ^_^