Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Saturday, July 25, 2009

Center widget di Sidebar

Jot Down by Mummy Dasy at 10:07 AM 2 yang membebel
Cara nak justify or center widget di sidebar
memang senang pada aku ah ye...
Ini yang senang dan ringkas to me

<b:widget id='BlogList1' locked='false' title='' type='BlogList'/>
<b:widget id='HTML2' locked='false' title='Laman Pilihan' type='HTML'/>
<b:widget id='Text3' locked='false' title='Hadis' type='Text'/>


me pilih HTML untuk di centerkan

1) cari kod ini ]]></b:skin> dan tambah di atasnye
#HTML1 {
text-align: center;
}
#HTML2 {
text-align: center;
}
#HTML3 {
text-align: center;
}



Preview lihat hasil & save..
that's all credit to AlmansuQie


head4_edited-1

Thursday, May 14, 2009

Membuat Mukasurat Blog

Jot Down by Mummy Dasy at 2:26 AM 3 yang membebel

Kali ni nak wat tutor tuk mukasurat nun di bawah sana coz me nak buang x lama lagi tu,,,hahaha ku yang tak tetap pendirian....
1st of all thanks to @liyannuar inspirasi dari blognye....

1 = klik pada Layout
2 = pilih Page Elements
3 = klik pada Add a gadget
4 = klik pada HTML/Javascript dan window akan keluar secara auto...
5 = copy coding di bawah ini letak dlm window HTML tadi


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</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 = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



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 += '�<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://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

var pageCount=5; = bilangan entry yang mahu dipaparkan
var displayPageNum=3; = bilangan muka surat yang mahu dipaparkan
setelah berpuas hati paste coding tersebut...
sila klik SAVE

kemudian... jangan lupa alihkan Page Element yang telah di SAVE tadi ke bawah Blog Post seperti di bawah

selepas itu SAVE...and then klik pada View Blog
waaalllllllllllaaaaaaaaaa u see the page bottom of ur blog cam contoh..okeh done






pic10-1

Wednesday, May 13, 2009

Sticky Mode

Jot Down by Mummy Dasy at 8:57 AM 4 yang membebel
Tutorial untuk sticky mode iaitu nak entry ni sentiasa diatas...
1) Tulis entry cam biasa
2) Publish Post cam biasa



3) Edit Post
4) Post Options
5) Tukar Post Date
6) Publish semula post

Dah settle....



pic10-1

Tuesday, April 21, 2009

Navigation Button

Jot Down by Mummy Dasy at 2:57 AM 1 yang membebel
To : Pn. Hernee & Siti
and for my memory
1. EDIT HTML

2. cari plak code
</b:skin>

3. pastu letak code dibawah ini di atas code tadi

#navigation{
height:2.2em;
line-height:2.2em;
margin:0 1px;
background:#AF7817;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#000;
color:#ffffff;
text-decoration:none;
}

4. kemudian cari code ini

<div id='content-wrapper'>

5. dan tambah ini dibawahnye

<div id='navigation'>
<ul>
<li class='selected'><a href='http://your-link-url.blogspot.com'>Your link</a></li>
<li><a href='http://your-link-url.blogspot.com'>Your link 2</a></li>
<li><a href='http://your-link-url.blogspot.com'>Your link 3</a></li>
</ul>
</div>

6. Tukarkan yang warna biru dengan link sendiri ye dan color sendiri ...







pic10-1

Monday, April 20, 2009

Besokan Post

Jot Down by Mummy Dasy at 5:23 PM 1 yang membebel
Dah macam cikgu lak rasa
kami pun budak baru belajo sebenonye...
hihihihi
okeh tuk Kirana & for my reminder
ok untuk membesokan post iaitu tempat tulis N3


1. Edit HTML
2. pastu cari kod

/* Outer-Wrapper


width main-wrapper + width sidebar-wrapper = width outer-wrapper

contoh

#outer-wrapper
width :660px

#main-wrapper
width : 420px

#sidebar-wrapper
width:220px

biar kurang dari outer-wrapper jgn lebih baru cantik..



pic10-1

Thursday, April 16, 2009

Pic's post footer image

Jot Down by Mummy Dasy at 4:21 AM 6 yang membebel
Ape itu post footer image?
nampak tak kat entry gambo budak 2
tu ah post footer image
mummy_ayu tanye camne na wat ni caranye ye....

1. masuk blogspot. gi kat Edit HTML

2. cari kod ini

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

3. kemudian tambah bawahnye sebelum }


background:#000000 url(http://korangnye sendiri);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:scroll;

4. Preview, puas ati baru save.


NOTE:
#000000 <-- background color leh tukar ni color hitam cam me punye
background-position <-- leh tukar left or center
kalau tak faham gak gi tengok kat blog minah cun ni ZIE


pic10-1

Tuesday, April 14, 2009

3 column

Jot Down by Mummy Dasy at 8:13 PM 6 yang membebel
Request dari Zie & untuk my collection..org dah banak ni kan selalu pelupa...

1. Masuk ruangan Layout

2. Klik pada Edit HTML

3. Cari kod seperti di bawah ini.



#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}




4. Tambah kod ini di bawah kod tadi



#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



5. Kemudian cari plak kod ini




<div id='main-wrapper'>



6. Tambahkan kan kod ini kat atas kod tadi



<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>



7. Untuk seimbangkan column, korang perlu tambahkan kelebaran (width) pada wrapper korang. Contohnya:



#outer-wrapper {
width: 660px; <---- syor tukar 880px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}




8. Cari kod seperti di bawah dan tambahkan kod yang di berwarna biru pada kod korang untuk elak dari melekat ke main-wrapper.



#main-wrapper {
width: 410px;
float: $startSide;
margin-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kemudian Save Template.
Try preview. Menjadi tak klu tak jadi try tengok kat Along Arman coz me pun yg stick tu dia yang ajar...

SEKIAN...GOOD LUCK YA..








pic10-1






Monday, April 13, 2009

Signature & Highlight Title

Jot Down by Mummy Dasy at 3:55 PM 3 yang membebel
N3 untuk Pn.Hernee & Cho_zila, yang penting untuk me ngingat semula nanti klu nak mengubah semula....

Signature bergambo



1. Edit gambo kat mana², me wat edit gambo kat PS pastu save kat flickr

2. pastu login blogspot. Masuk kat Setting

3. Then klik pada Formatting

4. Masukkan kod ini di bahagian Post Template


<p><image class="centered"alt="post signature" src="http://flickr.com/.jpg" /></p>


4. Save setting

NOTA kaki : Tukar url merah itu dengan url signature anda sendiri





HIGHLIGHT TITLE


1. Edit HTML

2. Cari kod --> .post h3 {

3. Pastu tambah code ini dibawah code tadi

background:#FA58AC; <-- ni color pink cam me punye tuk color lain rujuk SINI

4. Ingat jgn save dulu, PREVIEW dulu dah puas hati baru save.

Nota kaki : kalau nak alihkan text ke tengah,beso @ kecil tulisan tambah spt dibawah mesti sblm }

text-align:center;
font-size:140%;

Tak faham tanya ye murid²... cikgu ni tak reti nak wat ayat..hehehe



pic10-1

Sunday, April 12, 2009

Borderkan Blog post

Jot Down by Mummy Dasy at 11:48 PM 4 yang membebel
Actually ni untuk reminder untuk memborder blogpost,
al-maklum ah me ni pelupa...
tu yang letak tutorial kat sini jadi x lupe..
berasaskan dari blog @LiYaNNuaR
mule²

(1) Layout

(2) Edit Html

(3) CARI code .post {

(4) PASTE code di bawah ini seperti yang ditunjukkan pada gambar di atas... pastikan di paste kan sebelum tanda }

border: dashed #FD9C88 1px;
background: #000000;


(5) PREVIEW untuk melihat perubahan yang dibuat
(6) SAVE TEMPLATE sekiranya berpuas hati dengan perubahan yang dibuat
(7) View Blog

klu kat main-wrapper ada coding ni

background-color:#DF0174;

buang terlebih dahulu
insya'allah jadi.... cuba baru tau....




pic10-1

Tuesday, February 24, 2009

X nak widget hilang

Jot Down by Mummy Dasy at 7:14 PM 2 yang membebel
C&P dr Dunia Cik Ara..untuk dikongsi bersama korang..
dan untuk simpanan Mummy yg buta IT ni..
jom2 belajar..



1. Gi kat Layout -> Edit HTML

2. Kemudian search widget2nya dulu
kat bahagian Sidebar .
Kalau korang punye widget2 ada kat Header ker,
Main-Wrapper (Blog) ker atau Footer ker,
copykan kesemuanya utk elakkan daripada hilang.

3. Contoh: highlightkan dan copy semua widget2 kesayangan
dan letakkan dalam notepad untuk sementara macam gambar kat bawah:


4. Kemudian pun upload template baru,
dan akan terpapar satu amaran seperti gambar di bawah:


5. Tips. Jangan klik Confirm & Save

6. Kemudian cari balek dan
pastekan balek widget2 yang simpan dalam Notepad tadi di bawahnye.


7. Kemudian Save Template. Bukan Confirm and Save.

8. Jika ada widget2 id yang sama, tukarkan saja id yang lain. contoh: kalau dah ada widget ID HTML1, tukarkan kepada HTML2 atau HTML10 ker..
sebab widget2 ni kalau ada ID yang sama memang xbleh bersama sampai2 bila..
depa dengki kot kohkhohk!

9. Kesimpulannye, widget2 takkan hilang dan xperlu risau lagi setiap kali upload Template yang baru.

10. baca bismillah dulu sebelum buat...hehehh


nota belajar: seblm uat tue better copy semua coding dulu kat notepad..mane tahu korang tersilap tekan... habis hilang semua..kekeke



Till next episode...





 

Ω Bebelan DaSy Ω Template by Ipietoon Blogger Template | Gift Idea