Memaparkan catatan dengan label tutorial. Papar semua catatan
Memaparkan catatan dengan label tutorial. Papar semua catatan

Sabtu, 15 September 2012

Tutorial - Membuat pages pada blog

Siti Nurfariha | 9:22 PTG | 0Comments |
Nampak tak gambar dekat atas ni?
Okey Cik Taring nak ajar macam mana nak buat pages dekat belog korang 

Klik Layout > Add a Gadget Javascript / HTML

Copy and paste kod dekat bawah ni

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>


<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';


var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://blogkomputers.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>






Tutorial - Divider di setiap post entry

Siti Nurfariha | 9:10 PTG | 0Comments |
Malam ni nak ajar cara letak divider di setiap entry okey:-), jom belajo

1.Login ke Blogspot, clik design/ layout > Edit HTML > jangan lupa untuk tick pada Expand Widget Templates.

2. Untuk langkah keselamatan sila download full templete tau.

3. Cari code ni

.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
4. Kalau dah jumpa sila tukar dengan code di bawah, lain templete lain jenis so ambil bahagian .post { sampai }

.post {
background: url(url divider anda);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:5.5em;
}

5. Sila letakkan url korang di url divider korang.

6. Lepas dah letak URL silalah PREVIEW dulu..then dah okey save.

Tuturial - Top button

Siti Nurfariha | 8:55 PTG | 0Comments |
Untuk buat top button korang ikut tutorial sejibik macam yang Cik Taring ajar tau , insyallah menjadi dengan perfect!heheh tanpa sebarang erro :p

1. design > page element > add gadget > Html/java script

2.copy & paste code ini .

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>

3. save !

Tuturial - Free template blog untuk butik online

Siti Nurfariha | 8:50 PTG | 0Comments |
dekat sini ada lah beberapa jenis template yang boleh di jadikan theme untuk web korang yang ada sikit kelainan dari web-web lain.

Biasanya butik online ni banyak letak gambar dekat belog kan. Ini sebenarnya juga dapat memudahkan pengunjung yang masuk ke butik online korang untuk explore setiap gambar yang berkaitan sebagai rujukan.












Showcase-Light

Okey, Bye!!!

Tuturial - Cara pasang jump link Klik untuk komen di blogspot

Siti Nurfariha | 8:50 PTG | 0Comments |
Jump link Klik untuk komen seperti yang korang boleh tengok dekat bahagian bawah post ni, sangat sesuai untuk pasang pada blog yang mempunyai jumlah komen yang banyak ataupun jika kita ingin memudahkan pembaca untuk membuat komen tanpa perlu membuat scroll yang panjang. Korang juga boleh menggantikan teks Klik untuk komen kepada icon seperti yang boleh di lihat pada blog  Rojakstory.blogspot.com

sila ikut beberapa langkah mudah di bawah.

Sila save script template anda terlebih dahulu.

Langkah 1
Login Blogger Dashboard --> Design --> Edit HTML. Seterusnya tick pada Expand Widget Templates.

Langkah 2
Pada script template, cari kod <b:if cond='data:post.commentPagingRequired'>

Langkah 3
Salin kod di bawah dan kemudian, paste di atas atau sebelum kod <b:if cond='data:post.commentPagingRequired'> (rujuk langkah 2)

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>

Contoh:

<div style='margin: -30px 0px 0px 250px;'>

<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>
<b:if cond='data:post.commentPagingRequired'>

Akhir sekali, klik Save.

p/s: 
1. korang boleh menggantikan teks Klik untuk komen kepada icon, dengan menggantikan kod <b>Klik untuk komen</b> kepada <img src='masukkan URL icon disini'/>

Contoh:
<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><img src='masukkan URL icon disini'/></a>
</div>

2. Untuk mengubah kedudukan, edit pada margin: -30px 0px 0px 250px;

Jumaat, 14 September 2012

Tutorial - besarkan link

Siti Nurfariha | 11:21 PTG | 0Comments |
Dashboard-Design-edit HTML-tick Expand Widget Templat.Dengan CTRL+F cari code ni:

]]></b:skin>

Dah jumpa,copy code ini:


a:hover {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}

Dan paste kat ATAS  code ]]></b:skin>.


Merah-size yang kita nak
Purple-underline.Kalau nak underline pulak,silalah tukar none kepada underline.

Preview dan Save.

Jumaat, 17 Ogos 2012

Tutorial - header berbukit-bukit

Siti Nurfariha | 9:11 PG | 0Comments |
http://2.bp.blogspot.com/-3HXaOOGSoZc/T-bQ9PNGDTI/AAAAAAAADag/gJfJcJOVBIQ/s1600/berbukit-bukit_aten.png

Nak copy url image tu, highlight kan url tu then tekan ctrl dgn f serentak.
Lepastu save dekat laptop korang. 

Act, benda alah ni warna putih. bila pergi kat new tab, warna dia tak nampak lah kan :). Nanti masa guna nak buat header, nampak lah warna nya :)

Done!Yeeeaaa

Tutorial - Link Warna Warni.

Siti Nurfariha | 9:07 PG | 0Comments |

Apa itu link warna warni? Ianya akan berubah ubah warna apabila disentuh. Macam Cik Taring punya link, cuba klik dekat Cik Taring punya link

Design >> Page Element >> Add Gadget >> Edit HTML

Then copy and paste kan kod ini. And SAVE!

<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">
/***********************************************
* Script edited by Ynn Ainul at http://fwzynn.blogspot.com/
* Please keep this notice intact
***********************************************/
</script>