Cara pasang photo slider pada blogspot

Cara pasang photo slider pada blogspot

Ditulis oleh: Nescafe ais | 

Untuk memasang photo slider seperti yang boleh anda lihat pada blog ini (sila klik), sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+F dan taip atau paste kod]]> pada ruang Find.seterusnya tekan kekunci Enter.

Langkah 3

Salin kod CSS di bawah dan paste diatas atau sebelum kod ]]>

p/s: Anda boleh edit kod yang di bold mengikut kesesuaian saiz width dan height.

/*Slider*/
#coverslide{
position:relative;
width:340px;
float:center;
height:230px;
margin-left:30px;
border:2px solid #666666;
overflow: hidden;
}
#slider ul{
margin:0px 0px;
padding:0;
list-style:none;
}
#slider li{
width:340px;
height:230px;
overflow:hidden;
margin:0px 0px;
}
.slider-position {
position:relative;
}
.post-tittle {
position: absolute;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj84aCIxJAxTtKWbuR1bUtEdR-vO96zWuztlXxhgKl29cp2gfMBlRnfBskCCYKN9GXX5fvHo9AtZldlec_pQJRsErbTFl-_f_1AZ2JP4fUdj1ObwuUQB-rBhc3rqjUtT-cNYD77qoF_SCl/s1600/titlebg.png) repeat 0 0;
font-family:Trebuchet MS;
font-style:bold;
width:340px;
height:36px;
margin-top:195px;
overflow: hidden;
}
.post-tittle h3 {
padding:0px 10px 0px 10px;
margin:0 0 -10px 0;
font-size: 16px;
font-weight:bold;
color: #ffffff;
}
.post-tittle-p {
font: italic 12px Trebuchet MS;
padding:0px 0px 0px 10px;
color:#cccccc;
}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod  dan seterusnya tekan kekunci Enter.

Langkah 5

Salin javascript di bawah dan paste diatas atau sebelum kod  . Seterusnya klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Langkah 6

Salin kod HTML dibawah dan paste pada notepad. Edit pada URL gambar dan juga teks yang di bold pada kod.

Natlie Imbruglia

Doesn`t she look very cool?

Thousands of Years

Earth has lived thousands of years...

Fruits

Fruits are vital for health and their nutrients...

The Lonely Road

The Lonely Road reminds Me with You...

Twister

Here are some twisting graphics for you...

Langkah 7

Klik pada Layout => Add A Gadget => HTML/Javascript. Seterusnya, salin kod yang telah siap di edit dan paste pada ruang Content HTML/Javascript.

Akhir sekali klik Save.

Mengubah saiz flash banner

Mengubah saiz flash banner

Ditulis oleh: Nescafe ais | 

Ada blogger yang bertanya pada Mari bina blog, adakah flash banner seperti yang di tunjukkan pada artikel yang lepas boleh di ubah saiznya atau tidak. Pada mulanya Mari bina blog menyatakan bahawa flash banner tersebut tidak boleh di ubah saiznya, tetapi setelah Mari bina blog cuba mengubah kod dengan menambah tag HTML pada kod tersebut, sebenarnya flash banner tersebut boleh di ubah saiznya mengikut kesesuaian saiz blog kita sendiri. Minta maaf kepada blogger yang bertaya itu.

Pada artikel kali ini, Mari bina blog akan menunjukkan, bagaimana untuk mengubah saiz flash banner tersebut. Sebelum itu, Mari bina blog ingin memaparkan contoh flash banner yang di bina dari Flashvortex.com yang bersaiz 468px x 90px.


Contoh flash banner yang bersaiz 468px x 90px.

Flash banner di atas adalah bersaiz asal, dan tidak boleh di edit dengan mengubah angka yang terdapat pada tag HTML nya. Jika di ubah, akan terjadinya error, iaitu flash banner tersebut tidak akan terpapar keluar. Untuk mengubahya, anda perlu menambahkan kod pada tag HTML flash banner tersebut.

Untuk membinanya, pastekan dahulu tag HTML flash banner yang telah di bina dari Flashvortex.com pada posting yang baru dan klik publish post. Seterusnya klik view blog. Pergi ke bahagian tool bar Mozilla Firefox dan seterusnya klik Tool => Page info=> Media. Scroll pada ruangan Adress dan cari address seperti contoh di bawah:

http://h1.flashvortex.com/files/42/3_1246350829_578_306_0_468_60_8_42.swf

Copy address tersebut dan pastekan pada notepad. Kemudian, copy pula tag HTML di bawah ini dan pastekan pada notepad:





Copy semula adress flash banner pada notepad tadi dan pastekan pada bahagian yang bertulis pastekan adress flashvortex.swf

Anda boleh mengedit saiz flash banner itu mengikut kesesuaian saiz blog anda dengan mengubah angka pada kod height="50" dan width="390". Setelah selesai mengedit dan berpushati, copy tag HTML yang telah di edit itu dan pastekan pada blog anda.

Contoh flash banner yang telah di ubah saiznya kepada 390px x 50px.

HTML Escaper

HTML Escaper

Ditulis oleh: Nescafe ais | 

Jika kita menulis kod HTML pada posting, contohnya, kita ingin memasukkan kod bagi gambar berserta url blog seperti di bawah ini, kod akan memaparkan image gambar tersebut, tetapi apa yang kita mahukan ialah kod tersebut terpapar juga sebagai bentuk kod .

'HTML Escaper' adalah satu tool yang membantu untuk melepaskan (escape)  fungsi kod HTML tanpa menjejaskan script kod tersebut.

Apa yang perlu di lakukan ialah, masukkan kod HTML pada kotak di bawah dan seterusnya tekan 'Escape'. Salin kod yang telah di 'Escape' itu dan paste pada posting.

Cara resize text pada link

Cara resize text pada link

Ditulis oleh: Nescafe ais | 

Jika anda letakkan kursor mouse pada active link, contohnya pada tajuk post ini, teks pada tajuk tersebut berubah saiznya. Efek ini sebenarnya sangat mudah untuk di buat kerana anda hanya perlu membuat sedikit ubahsuai pada script template yang sedang anda gunakan. Anda hanya berlu mengubah di bahagian CSS dengan mencari kod a:hover { dan edit pada bahagian font size.

Satu cara lagi yang paling mudah ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Log n blog => Dashboard => Layout => Edit HTML

Langkah 2

Dengan menggunakan keyboard tekan kekunci CTRL dan F secara serentak. Bar Find akan muncul. Seterusnya taip atau paste kod ]]> pada ruang Find dan seterusnya, tekan Enter.

Langkah 3

Salin kod biru dibwah dan pastekan kod tersebut diatas atau sebelum kod]]>

Anda boleh edit angka 18 jika efek pada text menjadi terlebih besarnya. bold juga boleh ditukar kepada normal.

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


Contoh:

a:hover {
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
]]>

Membina costum search bar pada blog

Membina costum search bar pada blog

Ditulis oleh: Nescafe ais | 

 

Untuk membina search bar secara kostum seperti yang bolah anda lihat di atas, hanya ikut beberapa langkah di bawah:

Langkah 1

Salin dan paste kod yang berwarna merah di bawah. Edit pada perkataan yang di boldkan itu kepada perkataan dan teks anda sendiri.

Langkah 2

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript. Kemudian, salin kod yang telah siap di edit tadi (rujuk langkah 1) dan paste pada Content HTML/Javascript itu.

Akhir sekali, klik save.

p/s: Seelok-eloknya, search bar diletakkan di bahagian atas (header) ataupun pada sidebar.

Masuk gambar pada background blog

Masuk gambar pada background blog

Memasukkan gambar pada background  di template blog
Mungkin anda ingin supaya background blog anda lebih menarik dengan memasukkan imej kedalamnya,tetapi belum tahu bagaimana hendak membuatnya.Berikut adalah cara untuk membuatnya:
Login ke blogger, klik link layout, setelah masuk ke halaman template, klik sub menu Edit HTML, kemudian cari kod/tag CSS body { }, biasanya seperti dibawah ini:

body {
font: $bodyFont;
color: $textColor;
background: $bgColor;
}

kemudian  tambahkan kod untuk background dengan gambar seperti ini:
body {
font: $bodyFont;
color: $textColor;
background: $bgColor;
background-image: url(http://www.domain.com/gambar.jpg);
}
Gantikan http://www.domain.com/gambar.jpg dengan url dimana anda upload gambar/imej untuk background . Untuk upload gambar, anda boleh  boleh gunakanimageshack atau di Tinypic

Anda mungkin juga meminati:

• Meletakkan warna background berbeza pada komen
• Design blog anda sendiri
• membaiki imej yang kelabu
• keyword melalui imej

Meletakkan warna background berbeza pada komen

Meletakkan warna background berbeza pada komen

Selalunya komen antara pemilik blog dan pengunjung mempunyai paparan yang sama. Oleh itu agak sukar untuk melihat yang mana satu komen oleh pengunjung dan komen oleh admin sesuatu blog.Disebabkan  itu biasanya pemilik blog meletakkan paparan warna background yang berbeza bagi jawapan untuk pengunjung. Oleh sekiranya anda   ingin meletakkan paparan kotak komen berbeza dan belum tahu caranya, ikutilah langkah dibawah ini.

Pada blog anda pilih Layout
Klik edit html.
Klik pada Expand template widget.
Cari kod yang seakan di bawah ini, kemudian tambahkan kod yang berwarna merah. 

/* Comments ----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em; text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.admin-comments{
background:#00CC33;(tukarkan kod warna background disini jika ingin mengubah warna)
border:3px solid #FF9966;
padding:5px; 

kod  berwarna merah ini adalah yang perlu anda tambahkan.Boleh juga diletakkan diatas kod  ]]>


Kemudian cari kod dibawah ini  dan tambahkan juga kod yang berwarna merah.

 Nota:Kod yang berwarna merah perlu anda tambah
 Kemudian klik preview,jika tiada masaalah ,jangan lupa klik butang save


 

Anda mungkin juga meminati:

• Masuk gambar pada background blog
• Letak widget navigasi halaman
• Letak banner iklan
• memasang shoutbox tersembunyi