Memasang button Back to top dan Home pada sisi blog ~ • tutorial by ekin •

1.5.10

Memasang button Back to top dan Home pada sisi blog

Back to top dan home button yang boleh anda lihat pada sisi kanan dan kiri blog ini adalah fungsi yang dapat anda bina sendiri secara costum. Ia mungkin dapat memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button Back to top, dan visitor sudah pun selamat sampai ke header blog.

Button boleh disesuaikan mengikut pilihan sendiri jika mampu untuk mengubahnya, jika tidak, memadailah dengan menggunakan button yang serupa dengan blog ini. Sama aja. Tak menjejaskan apa pun. Heh..

Untuk memasang button back to top dan Home ini, sila ikut beberapa langkah yang mudah dibawah.

1 . Log in blog=> Dashboard => Layout => Edit HTML. Tick pada Expand Widget Template

2. Dengan menggunakan keyboard ataupun papan kekunci atau, sila tekan Ctrl+ F. Taip kod </head> pada ruang Find yang terpapar di atas taskbar

3 . Copy atau edit kod di bawah (jika perlu) dan paste di atas atau sebelum kod </head>

p/s: Kod yang berwarna purple boleh di edit (jika perlu)

4 . Akhir sekali, klik Preview. Pun penting juga. Jika tiada mesej Error yang bertulisan merah terpapar, klik saja Save.

lots of love

thanks for reading ♥ ekinyusri

0 ♥:

Post a Comment

ORDER NOW!

anda klik LAYOUT,then klik EDIT HTML..
nie adalah code2 dlm edit HTML...
aku nak ajar sikit2 cmne nak bce code2 nie...
part mane yg boleh diubah ikot ape yg kte nak...

body { <---- nie bhgn background
//CARA NAK TUKAR BACKGROUND,LIHAT KAT SIDEBAR SBLH KANAN YER
background:$bgcolor; //background color
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center; //position background
} //background leh diubah ikot ape yg aku ajar kat tepi blog nie

/* Header <---- bhgn header plak (bhgn ats skali tue)
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
//border header..klu xnak gne,boleh delete
}

#header-inner {
background-position: center; //position header
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.2em; //jarak antara huruf
font: $pagetitlefont; //jenis font digunaka
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description { //same cam header h1 kat atas
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/* Outer-Wrapper <---- adalah saiz blog nie
----------------------------------------------- */
#outer-wrapper {
width: 660px; //nie saiz blog..boleh ubah ikot kesesuaian nak
margin:0 auto;
padding:10px;
text-align:$startSide; //start ayat
(center, $startSide = kiri, $endSide =kanan)
font: $bodyfont; //font utk post/body
}

#main-wrapper {
width: 410px; //saiz blok utk posted
float: $startSide; //mule blok
(center, $startSide = kiri, $endSide =kanan)
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 */
}

#sidebar-wrapper {
width: 220px; //saiz blok utk sidebar
float: $endSide; //mule blok
(center, $startSide = kiri, $endSide =kanan)
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 */
}

/* Headings <---- bhgn tarikh post dan title sidebar
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont; //jenis font
line-height: 1.4em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.2em; //jarak antara huruf
color:$sidebarcolor; //warna font
background:#fffffff; //nie warne bckground klu nk gne
(cth link berwarne hitam kat blog nie)
//#ffffff leh ditukar ikot warne yg kte suke
//leh jgak klu nak ltak imej..tp kne sesuai
}

/* Posts <---- bhgn posted body
-----------------------------------------------
*/
h2.date-header { //bhgn tarikh
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
//nie adalah pembahagi antara 2 posted,klu xnak,leh delete atau tukar style (solid,dashed,dotted)
padding-bottom:1.5em; //jarak antara pembahagi bwh
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; //saiz font
font-weight:normal; //style font (bold, normal, italic)
line-height:1.4em;//jarak antara ayat line atas n bwh
color:$titlecolor; //warna font
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal; //style font (bold, normal, italic)
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em; //jarak antara ayat line atas n bwh
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor; //warna font
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.1em; //jarak antara huruf
font: $postfooterfont; //jenis font digunakan
line-height: 1.4em; //jarak antara ayat line atas n bwh
text-align:$startSide; //position ayat
(center, $startSide = kiri, $endSide =kanan)
}

.comment-link {
margin-$startSide:.6em;
}
.post img { //nie utk image post
padding:4px; //jarak antara pic ngan ayat
border:1px solid $bordercolor; //border image
//klu xnak gne,leh delete je
}
.post blockquote { (akan diajar kemudian)
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments //bhgn komen,xde ape nak ubah
----------------------------------------------- */

/* Sidebar Content <---- bhgn sidebar tepi (widget)
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor; //warna font sidebar
line-height: 1.5em; //jarak antara ayat line atas n bwh
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget { //bhgn widget2 yg digunakan
border-bottom:1px dotted $bordercolor; //nie adalah pembahagi antara 2 posted,klu xnak,leh delete atau tukar style (solid,dashed,dotted)
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Profile //xde ape nak ubah kot, hidekan je
----------------------------------------------- */

/* Footer <---- bhgn bwh posted
----------------------------------------------- */
#footer {
width:660px; //saiz footer
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.1em; //jarak huruf
text-align: center; //position ayat
(center, $startSide = kiri, $endSide =kanan)
}

• tulisan yg wane biru tue leh diubah ikot ape yg kte nak
• care terbaik,setiap kli kte ubah code2 nie,kte klik PREVIEW dulu...jgn save lg...dah rs ok,ubah part yg len plak...cube satu2..memg leceh,benda nie memerlukan kesabaran skit...
• dah puas hati,brulah SAVE...jgn lupe plak
• note tambahan :
margin : 1.0em 1.0em 1.0em
(tepi kiri, atas n bwh, tepi kanan)
padding : 1px 1px 1px
(tepi kiri, atas n bwh, tepi kanan)
• code2 nie kne rajin explore..brulah byk bnde kte leh tau
• ape2 yg x phm dan nak tny,leh tny...tq

the owner

klik nuffnang

1.5.10