STUDIANA: Oktober 2010

Sabtu, 30 Oktober 2010

Cara letak favicon pada url blog

Jika kita membuka laman web biasanya kita boleh melihat satu ikon kecil yang terdapat disebelah url.Bagi laman blog biasa tertera dengan ikon huruf B.Ikon yang kecil ini dipanggil “favicon” .Jika hendak membuat sendiri favicon itu kita perlu membuatnya dalam saiz 32x32 piksel dalam format gif,bmp,jpeg,ico ataupun png.Kemudian upload imej tersebut ke photobucket.

Kemudian Masuk ke design-pilih edit HTML
Kemudian masukkan kod ini diantara kod <head> dan </head>

<link href='letak url imej disini' rel='shortcut icon' type='image/x-icon'/>

Untuk membuat icon dengan imej sendiri boleh juga gunakan laman web favicongenerator.com.Juga boleh lawati laman web iconj.com dan disitu juga terdapat favicon dalam bentuk animasi yang boleh pilih dan ambil kodnya untuk dimasukkan pada blog.

Jika menggunakan iconj :
Masuk kewebsite--kemudian pilih--animated favicon
pilih jenis favicon dan ambil html embed code and details..copy kod yang terdapat disitu.
kemudian kembali keblog ,masuk kedesign..pilih edit html

gunakan crtl+F untuk find dan taipkan </head> pada ruangan tersebut

setelah jumpa kod </head> dan pastekan kod favicon tersebut diatasnya.

Update 22/02/2011:
kalau tidak muncul favicon mungkin sebab gunakan google chrome.Untuk google chrome guna kod ini:

<link rel="icon" type="image/gif" href="url imej anda">

Selamat mencuba….

Cara letak tandatangan pada akhir posting

Membuat tandatangan atau signature pada bahagian bawah posting boleh kita lihat dikebanyakan blog dan laman web. Bila tandatangan diletakkan dibawah posting nampak lebih professional . Sebelum membuatnya kita perlu membuat imej tandatangan dan mengupload imej tersebut ke laman web hosting gambar seperti image shack ,photobucket dan sebagainya.Imej tersebut boleh juga kita buat dengan menggunakan perisian seperti Microsoft paint,Photoshop,Corel Draw dan sebagainya.Ataupun boleh juga gunakan kemudahan membuat tandatangan secara online seperti di mylivesignature.com.

Seterusnya selepas mendapat link gambar yang diupload tadi ,cari kod dibawah ini pada template.

Masuk ke design,pilih edit html

Klik pada expand template widget
Cari kod berikut:

Kemudian masukkan kod ini dibawahnya:

*gantikan url imej tandatangan dengan url imej yang diupload tadi.
Contohnya :

Kemudian Save Template

Atau pun satu cara lagi ialah dengan meletakkan pada post template:
Masuk ke design—setting--- formating
Dibawah sekali terdapat post template

Contoh kod imej yang saya upload ke photobucket

Kod diatas diubah menjadi begini:

Kemudian masukkan kod url imej yang di upload tadi pada post template

Kemudian klik pada save setting.Jadi setiap kali kita buat posting baru imej tadi akan dimasukkan secara automatik pada paparan posting.

Sabtu, 23 Oktober 2010

cara menyusun imej pada sidebar

Saya ada menerima pertanyaan dari rakan rakan blogger bagaimana nak buat susunan pada blog agar Nampak kemas dan tersusun. .Misalnya kita membuat tukar link tapi bannernya tidak sama saiz dan jika diletakkan sampai ada yang terkeluar dari sidebar.Bila keadaan jadi mcm ni tentunya sukar untuk kita menyusunnya. dan sudah tentu nampak tak kemas kerana ada yg ketepi dan ketengah.Jadi bagaimana kita hendak membuatnya supaya sama saiz.

Jadi disini saya ingin berkongsi bagaimana hendak menyusun imej pada sidebar agar saiznya sama lebar dan sama tingginya

Contoh Keadaan susunan pada sidebar seperti dibawah .bahagian penghujung tidak sama dan sebaris sahaja.

Sebenarnya boleh jimat ruang lagi dengan buat cara berikut;
Contoh ini bila kita nak letak button macam diatas biasa kita akan dapat kod seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" /></a>

Kita Cuma perlu tambah kod untuk tinggi(height) dan lebar(width) seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a>

Border “0” bermakna tiada border ,boleh letak nilai jika hendak letak border disekeliling

Supaya kedudukanya berada ditengah tengah tambahkan kod seperti ini:

<a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a>
Untuk kod button /imej seterusnya letak disini…
………….
…………

</center>

Untuk letak dua baris kena sesuaikan lebarnya sahaja.Bila ruang dan saiz kena akan jadi baris seterusnya.Bila terlalu panjang akan ia akan turun kebawah.

Supaya nampak tersusun lagi letaklah dalam border:

<div style="width: 140px; height: 220px; border: 1px solid; padding: 2px; margin: 5px 0pt 0pt;">

Letak kod untuk imej disini

</div>

atau pun buat table disekelilingnya.Cara membuatnya ada saya terangkan dalam tutorial sebelum ini.

Atau boleh juga guna garisan seperti dibawah ini untuk memisahkan kandungan pada sidebar
Dengan menggunakan kod ini:

<hr color=”#AC58FA”/>

Kod warna boleh ditukar mengikut kesesuaian.

Jumat, 15 Oktober 2010

Cara membuat berbagai bentuk link

Link adalah digunakan bagi menyambung antara satu halaman ke satu halaman blog atau web . Bagi membolehkan ia bersambung satu link atau pun pautan perlu wujudkan bagi kedua duanya bersambung. Cara paling senang untuk ~~membuat link~~ pada satu posting adalah dengan menggunakan fungsi Link yg ada pada tool bar .

Meletak link pada teks(penulisan) di posting

Cara nya ialah dengan highlightkan pada teks yang ada pada posting yang hendak disambung/link kepage/halaman lain.
Kemudian klik pada ikon Link

Kemudian pada web address taipkan alamat web/blog yang hendak dituju contoh saya nak link ke web googledan saya masukkkan pada web address http://www.google.com .ruangan text to display dikosongkan kerana kita guna teks yg ada pada posting.

Pada ruangan text to display jika kita hendak membuat link dengan memaparkan teks yang akan diklik akan membuka link baru.contohnya saya nak letak link bagi membolehkan saya menuju kemuka hadapan blog ini pada text to display saya masukkan HOME dan pada web address saya masukkan alamat blog saya

dan akan kelihatan paparan seperti ini

HOME

Atau Kita boleh juga gunakan kod seperti dibawah ini:

Cara membuat link terbuka dengan sendiri

Cara ini membolehkan kita membuka secara Otomatik tanpa perlu klik pada link.Bila pointer cursor mouse bergerak melaluinya ia terus terbuka

Cara membuat link terbuka pada tab baru di browser

Cuma perlu tambah target sahaja.

Membuat link dari imej atau gambar.
Selain dari menggunakan teks sebagai cara membuat link, kita boleh juga guna imej sebagai link.Untuk itu imej tersebut perlu kita upload ke Photobucket dan dapatkan alamat imej tadi

Contoh alamatnya begini:

http://i219.photobucket.com/albums/cc282/garam63/background4.gif

dan untuk membuat gambar tadi jadi link masukkan kod seperti dibawah:

<a href="http://teknikbuatblog.blogspot.com"><img src=" http://i219.photobucket.com/albums/cc282/garam63/background4.gif

"></a>

(tulis dalam satu baris)

Sabtu, 09 Oktober 2010

Memasang Widget Follow - Tersembunyi

CODE SCRIPT - Bagi Anda yang Blognya tidak terlalu banyak ruangan pada sidebarnya disini saya akan memberikan jalan alternatif mudah-mudahan bermanfaat untuk anda dan untuk kita semua yaitu WIDGET FOLLOWER TERSEMBUNYI/MELAYANG yang tentunya tidak memerlukan tempat banyak.

Baiklah akan saya berikan caranya adalah sebagai berikut :

1. Pastikan login Blogger terlebih dahulu
2. Masuk ke Perancangan Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :

.fltab{
height:32px;
width:270px;
float:top;
cursor:pointer;
background:url('http://i867.photobucket.com/albums/ab235/ruslan02/SEIPARINGTV-1.gif') no-repeat;
}
.flcontent{
float:right;
border:2px solid #676767;
background:url()#F90 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

HAPUS TEKS INI GANTI DENGAN Code script Follower Blog anda disini

<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.seiparing-tv.co.cc“target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Seiparing TV</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Setelah di Copas tapi jangan di simpan dulu ikuti langkah selanjutnya

5. Ambil dulu code script Followernya disini tapi sebelum anda ambil codenya lakukan langkah-langkah berikut ini :

- Logen dulu ke Akon google dengan mengklik MEMULAI ( Get Startet) kemudian masukan E-mail dan sandi anda kemudian

- Pilih blog sobat yang akan dipasang widget follownya “disamping kiri”
- Klik "Tambahkan gadget anggota" (Add the members gadget) atas
- Silahkan diatur ukuran, warna dll nya.. (Choose colors)
- Klik "Buat kode" (Generate code) paling bawah
- Silahkan Copy kodenya, dan ikuti kembali langkah selanjutnya

6. Paste kode Widget Follow yang anda copy tadi ke kode diatas dan ganti kode yang bernama (HAPUS TEKS INI GANTI DENGAN Code script Follower Blog anda disini) yang terdapat ditengah-tengah codescript diatas dengan kode Widget Follow yang sudah dicopy tadi)

7. Simpan (Save).
Terus langkah terakhir anda masuk ke Rancangan – Edit HTML cari <body> dan paste code brikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='http://i867.photobucket.com/albums/ab235/ruslan02/FOLLOWERS-LOGO-1.jpg'/></a>

Simpan Template anda lihat hasilnya Selamat mencoba semoga berhasil

Lihat Contoh disini

Kamis, 07 Oktober 2010

Membuat jumlah pembaca artikel pada blog

Membuat jumlah pembaca artikel pada postingan adalah merupakan fasiltas untuk mengetahui berapa jumlah pembaca pada salah satu artikel kita paling tidak sitamu mengklik artikel kita dan caranya adalah sbb :

Add Gadget for Reciprocal Verify
Login ke blogspot, Klik "Rancangan" kemudian Klik "Element Laman" dan "Tambah Gadget" pilih "HTML/JavaScript" masukan kode dibawah kemudian simpan (Login to the blogspot, click "Design" then click "Page Element" and "Add Gadget" select "HTML/JavaScript" paste the code and save).

<a href="http://www.putchoice.com/">
<img border="0" src="http://www.putchoice.com/picture.php?type=png" alt="Page Hits Counter"/></a>
Add Edit HTML for Show
Klik "Rancangan" kemudian Klik "Edit HTML". Dan beri centang Expand Template Widget. Sisipkan kode dibawah setelah <div class='post-header-line-1'/> atau <data:post.body/>.

Login to the blogspot, click "Design" then click "Edit HTML". And check Expand Widget Templates.
Paste the code after <div class='post-header-line-1'/> atau <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'><div align='left'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjighjc1PNgWaHZEENxm_BwpmxHux8lEEPPzvqHTTQpBbfc-jTb3UXOMaDXviM6OvCUicruXur_eZMBvJ0jo9CR7_NdVOl87sNYjhCe5DDYVw1U3ZHFD92TIAKyHXrb-h0p1L93iFbbGty_/' style='width: 26px; height: 20px;'/><b><font size='2'><script src='http://www.putchoice.com/stats.php?p=stats' type='text/javascript'/> <b>Views</b>
</font></b></div></b:if>

Vews : Ganti sesuai selera anda (Misal Jumlah Pengunjung, Jumlah Pembaca)
Setelah kode dimasukan silahkan keluar dari login admin dan tutup halaman blog anda (After the code is input please exit and close the admin login page for your blog).
Page Hits Counter akan muncul setelah di refresh 3 kali atau telah 3 kali dikunjungi
Selamat mencoba semoga berhasil contoh : Klik disini

Selasa, 05 Oktober 2010

Cara letak tajuk widget ditengah dan letak warna latarbelakang

Entri saya kali ini adalah cara bagaimana hendak meletakkan tajuk pada widget sidebar ditengah tengah ,kebiasaannya berada disebelah kiri dan juga meletak warna latar belakang agar nampak lebih mantap dan ceria.Selalunya template dari blogger warna latar belakang title adalah sama dengan background lainlah kalau template yang didownload dari web yang dah siap diwarnakan.Untuk meletak warna pada latar belakang widget pula boleh dirujuk pada artikel ini.

Untuk tajuk pada template biasanya bermula dengan kod h1,h2…dan sebagainya.untuk meletak warna latar belakang dan teks agar berada ditengah(center) kita cuma perlu tambah kod dibawahnya:

Masuk kedesign—edit HTML cari kod h2 ditemplate seperti dibawah:
Gunakan Ctrl+F untuk find

h2 {
background-color:#AEB404;
text-align: center;
}

*teks berwarna merah adalah kod yang ditambah
kod warna dengan teks hijau boleh ditukar dengan kod yang dinginkan.

kemudian seperti biasa preview dan save template.

Cara menukar warna background pada widget

Mungkin korang ingin menukar warna background pada widget disidebar atau pun hendak mempelbagaikan warna latarbelakang yang ada pada widget.Sebagai menunaikan permintaaan dari rakan kita yang meminta saya membuat tutorial menukar warna background,jadi tutorial saya kali akan memuatkan cara bagaimana membuatnya.Pada mula nya saya bercadang hendak memasukkan sekali cara menukar warna pada tajuk widget dan meletakkan teks yang kebiasaanya berada disebelah kiri ketengah,tapi akhirnya saya ambil keputusan untuk mengasingkan agar tidak mengelirukan dan memudahkan pencarian artikel dan juga nak letak tajuk pada posting pun agak panjang.

Untuk membuatnya:

1.Log in dan pilih design—Klik pada edit HTML
Dapatkan dulu widget id terlebih dahulu untuk widget yang hendak dtukar warna.Sebelum ini saya ada juga menunjukan cara hendak mendapatkan widget id boleh dirujuk disini
contoh kod untuk widget id ditemplate seperti dibawah ini:

</b:widget>
<b:widget id='BlogArchive2' locked='false' title='Archives' type='BlogArchive'>

2.Seterusnya masukkan kod seperti ini:
Kod hendaklah diletakkan diatas kod ]]></b:template-skin>

#BlogArchive2{
background-color:#7401DF;
}

Jika hendak memasukkan widget yang lain hanya tambah dibawahnya seperti ini:

#BlogArchive2{
background-color:#7401DF;
}
#linklist2{
background-color:#7401DF;
}

3.Kemudian preview dan save template setelah tiada apa apa error.