Jumat, 31 Desember 2010
Kamis, 30 Desember 2010
Antisipasi Operator CDMA Trafik Luar Kota di Akhir Tahun
Akhir Tahun 2010 sudah tinggal menghitung jam lagi. Semua manusia di bumi ini pasti akan menyambut datangnya Tahun baru 2011. Berbagai tempat yang di kunjungi untuk menyambut Tahun Baru 2011 ini, contohnya : ada yang menyambut di pantai, di atas rumah, ada juga menyambut di luar Kota. Pasti semua berbondong - bondong untk merayakan Tahun Baru di luar kota. Untuk menghadapi lonjakan trafik di akhir tahun, para operator seluler di sibukkan dengan orang yang trafik ke luar kota salah satunya operator CDMA
Code Division Multiple Access (CDMA) sudah menyiapkan jaringan dan nomor akses luar kota biar semua orang bisa menikmati Tahun Barunya dengan indah. PT Telekomunikasi Indonesia Tbk misalnya, sudah menyiapkan 3,2 juta nomor Flexi Combo untuk para pelanggan. Flexi Combo memungkinkan pelanggan berkomunikasi meski berada di luar area dengan cara menekan *777.
untuk kebutuhan Internet, FlexiNet juga telah menyediakan lima jalur internet di Medan, Jakarta, Semarang, Surabaya, dan Banjarmasin. Kelima koneksi internet ini memiliki kapasitas bandwidth 3,2 gigabyte per detik (Gbps). Sebagai tambahan, Flexi juga melakukan sejumlah strategi untuk mempertahankan pelanggan. Salah satunya dengan menyediakan layanan Flexi ngROOMpi, yakni fasilitas komunikasi dengan banyak orang. Untuk menikmati layanan ini; pelanggan tinggal membayar Rp 49 per menit. Semua ini untuk mengantisipasi operator CDMA trafik luar kota di akhir Tahun
cara letak border pada widget
Meletak border pada widget ini boleh dianggap sebagai penyeri pada sesuatu widget, juga sebagai pemisah diantara suatu widget dengan widget yang lain.
Sebagai contoh saya nak masukkan widget search pada blog ini dan saya hendak letakkan border dan juga background.
Mula mula masuk ke design dan pilih page elements
Kemudian pilih Add a Gadget ..
pada senarai yang terpapar pilih search box.
Seterusnya klik butang save pada widget tersebut:
Untuk mendapat widget id anda perlu membuka semula widget tadi dan paparan seperti dibawah
Kemudian masuk semula ke design—edit HTML
Cari kod ]]></b:skin>
Dan letakkan kod seperti dibawah ini diatasnya:
#CustomSearch1{
border: 3px solid ;padding:3px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background:url(letak url imej disini)repeat;
}
Pada background url masukkan url untuk imej jika ingin meletak latarbelakang
Kemudian save template.
Untuk widget lain anda cuma perlu dapatkan widget id dengan membuka semula widget yang nak dimasukkan border dan masukkan widget id tersebut pada ruangan teks hijau pada kod diatas.
Rabu, 29 Desember 2010
IPHONE 4 - Telkomsel : Spesifikasi dan Harga
IPHONE 4 akhirnya resmi diluncurkan oleh Apple ke pasar Indonesia. Telkomsel sebagai partner resmi Apple.Inc di Indonesia telah meluncurkan produk Apple terbaru iPhone 4 tanggal 17 Desember 2010. Pemasaran secara resmi iPhone 4 Telkomsel ini untuk memenuhi minat pasar yangtinggi dalam urusan teknologi.
Spesifikasi IPHONE 4 Telkomsel.
IPHONE 4 Telkomsel mempunyai kapasitas dua varian, 16 dan 32 GB. Prosessor Apple A4 yang merupakan prosessor generasi baru untuk IPHONE yang di gunakannya. Sistem operasinya menggunakan iOS 4 yang memiliki lebih dari 100 feature yang diperbaharui dari versi sebelumnya dan mendukung Wi-Fi 802.11n, 5,8 Mbps HSUPA, Three-axis gyro, dan Dual-mic noise suppression. Kejernihan Layar Iphone berkat retina display terbaru yang dipakai yaitu beresolusi tinggi, 960x640px, dengan kerapatan 326 ppi, merupakan satu-satunya tampilan beresolusi tertinggi yang pernah disematkan disebuah gadget Handphone, yang membuat kesempurnaan tampilan gambar, teks dan video di layar yang berukuran relatif kecil tersebut.
resolusi Kamera 5MP + LED flash dengan kamera depan beresolusi VGA membuat IPHONE 4 dari Telkomsel ini memiliki kemampuan untuk mengambil photo dengan kualitas SUPER serta merekam video dengan High Definition Quality. Baterai mampu bicara hingga 7 jam dalam 3G dan 14 jam dalam 2GFeature Applikasi iMovie yang hanya ada di iPhone 4. Dengan berbagai teknologi canggih ini, jelas sekali bahwa iPhone 4 merupakan penyempurna iPhone sebelumnya. Tidak heran bahwa ratusan orang langsung mengantre untuk memiliki IPHONE 4 - Telkomsel
Harga iPhone 4 ini sekitar Rp 6.999.000 yang berkapasitas 16 Gb. Untuk kapasitas 32 GB bisa didapatkan dengan harga Rp 8.199.000. Kedua versi iPhone 4 sudah dipasangi kartu simPATI Turbo dan telkomsel yang memberikan quota 500 MB data dan 20 MMS setiap bulannya, selama 1 tahun penuh.
Penjualan sendiri juga tersedia di berbagai tempat yaitu di 15 GraPARI pilihan, Apple Premium Reseller (iBox, eStore, EMAX, pcMax, Infinite), Oke Shop, Seluler Shop, Sarindo, Telesindo Shop, dan Global Teleshop untuk mendapatkan IPHONE 4 - Telkomsel.
Cara Setting Telkomsel Flash
Cara Setting Telkomsel Flash ternyata sangat begitu mudah. Untuk mendapatkan kecepatan optimal pastikan handphone atau modem GSM anda telah mendukung jaringan 3G atau lebih baik seperti 3.5G, HSDPU atau HSUPA.
Setting Telkomsel Flash :
- Pertama aktivasi kartu anda untuk layanan flash.
- Selanjutnya setingan pada handphone adalah membuat profile koneksi. Biasanya ini berada pada menu network.
- Buat sebuah profile koneksi baru dengan nama (mis: TSEL-INTERNET) dan masukkan AP NAME sebagai berikut:
- flash : Untuk koneksi internet dengan menggunakan paket flash prabayar. Biaya koneksi bisa dibeli dengan cara mengirim SMS dan akan dipotong pulsa yang ada.
- internet : Untuk koneksi internet dengan menggunakan paket flash paskabayar khusus kartu halo saja.
- Setingan username, password dan lain-lain kosongkan saja.
- Selanjutnya tinggal setingan aplikasi yang akan digunakan ber-internet (mis: browser atau IM) agar menggunakan profile koneksi yang dibuat diatas. Jika semua setingan OK maka anda terakses ke Internet dengan kecepatan sesuai dengan paket yang digunakan.
- Jika menggunakan modem untuk koneksi ke Internet dari PC, silakan gunakan software bawaan modem untuk membuat dialup. Umumnya modem yang ada sudah menyediakan profile dialup untuk telkomsel flash. Tetapi jika belum silakan buat sendiri dengan nama (mis: Telkomsel FLASH), AP Name seperti setingan diatas dengan nomor dial *99#.
- Untuk menggunakannya anda tinggal dial menggunakan Telkomsel FLASH untuk koneksi ke Internet.
Minggu, 26 Desember 2010
Cara pasang shoutbox melayang
Dalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana cuma perlu masukkan pada widget sahaja.
Cara memasangnya:1.Masuk ke design-klik page elements
2. pilih add a gadget
3.Pilih HTML/Javascript
Dan masukkan kod ini:
<!-- Start flying Shoutbox by ybl -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to ybl
$('a[name=ybl]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var tbbHeight = $(document).height();
var tbbWidth = $(window).width();
//Set heigth and width to tbb to fill up the whole screen
$('#tbb').css({'width':tbbWidth,'height':tbbHeight});
//transition effect
$('#tbb').fadeIn(1000);
$('#tbb').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#tbb').hide();
$('.window').hide();
});
//if tbb is clicked
$('#tbb').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#tbb {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#ddt .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#ddt #yblshoutbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIiWSjuZK6_yEQ48Ol0CbTJvn0n0JHDvRZ8gwzI0zenGw2FYWONBwGRqsANGLXe_t77v3RyDgYkEuen1WIKaftSEY5i55CioFr_y_AEn5FhAhTnG2yGhEO3eE-J7OYcdR_7NTGnx9y4E/s1600/shout.gif) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:60px 0 20px 15px;
}
#ttp {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTuo-9Q8s6uwkAs_gptl2-i5udnCQ25TI-E_VtK7ekv5js8u7wQa8Lc7GL2wc0bFmzGnlkpLUsvTMDWHPRFGQuWMDErMsMYrtRjuUszDFzwBWGfu71gGjAopl7ZfKr3ql6AX9J2d_3CQ/s512/button.gif" border="0" width="128" height="58" /></a> </center> </ul>
<div id="ddt">
<!-- Start Shoutbox -->
<div id="yblshoutbox" class="window">
LETAKKAN KOD SHOUTBOX DISINI
<div id="ttp"><input type="button" value="Close" class="close" style="background: #0066FF; color: #ffffff;"/><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-shoutbox-melayang.html"><font size="1">get this</font>
</a></div></div><!-- End Shoutbox -->
<div id="tbb"></div></div>
<!-- End of flying Shoutbox by ybl -->
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.
contoh kod shoutmix |
Jumat, 24 Desember 2010
Cara letak jumlah komen disebelah tajuk posting
Meletakkan jumlah komen disebelah tajuk posting dengan dengan bentuk gelembung boleh membuatkan blog anda nampak lebih menarik.Jika ingin mengubahsuai tampilan pada blog dengan jumlah komen ini, ikuti langkah berikut:
1.Masuk ke Design,dan pilih edit HTML,
2.Kemudian klik pada expand template widget
Dan cari kod ini pada template:
<h3 class='post-title entry-title'>
3. Sebelum atau selepas kod diatas ,letak kod dibawah ini:
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a>
</b:if>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a>
</b:if>
#Bahagian yang berhuruf merah adalah bagi membuat perkataan komen dibawahnya .
Jika tiada kod <h3 class='post-title entry-title'> ,cari kod <b:if cond='data:post.url'> dan letakkan kod diatas sebelum kod ini.
4.Kemudian cari kod ini pula:
</head>
5.Letakan sebelum atau selepasnya kod dibawah ini:
<style type="text/css">.comment-bubble {
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXF2e9ktzpjhbeOSwnLnR8LR4c0PXgtk5-4y-VvRkZ5NHQzDGVSQcQhR5cOUVPVslHq4dAty__bN6VMaVnyKVdTu2V9NLt9zOoqAZ4T3lKR-rcgIjaWcGAF-i0C_aAqExUfLydLjcl9yfD/s1600/Blogger+comment+bubble+%284%29.png) no-repeat;
font-size: 18px;
margin-top: -15px;
}
</style>
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXF2e9ktzpjhbeOSwnLnR8LR4c0PXgtk5-4y-VvRkZ5NHQzDGVSQcQhR5cOUVPVslHq4dAty__bN6VMaVnyKVdTu2V9NLt9zOoqAZ4T3lKR-rcgIjaWcGAF-i0C_aAqExUfLydLjcl9yfD/s1600/Blogger+comment+bubble+%284%29.png) no-repeat;
width: 55px;
height: 38px;font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;}
</style>
6.kemudian preview dan akhir sekali klik save template
Senin, 20 Desember 2010
cara susun gambar pada posting
Menyusun gambar semasa posting adalah satu perkara yang menyukarkan kerana kebiasannya gambar akan berada dibawah.Kalau dapat diletak sebelah menyebelah tentulah nampak lebih kemas dan menjimatkan ruangan.Sebagai contoh seperti gambar dibawah ini:
Kebiasaanya akan jadi seperti ini tersusun menjadi tiga baris.
untuk mengubahnya kita perlu masuk ke mode edit HTML
Dari compose klik pada mode edit HTML dan akan terpapar kod seperti dibawah :
<div style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJlisEvy7Np93QFGJvU3HyKqbQpR9QVTlDrYveZC51hiMIVOFvPOfeWGJ2C3zl4kpWuezSrn5xAMTMoeUeQRT-4FLtAHVSbgHKUIxXm2p6vmwMXqZTBU3if4iXaC-LJXqxJg9OL2l9Fw/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJlisEvy7Np93QFGJvU3HyKqbQpR9QVTlDrYveZC51hiMIVOFvPOfeWGJ2C3zl4kpWuezSrn5xAMTMoeUeQRT-4FLtAHVSbgHKUIxXm2p6vmwMXqZTBU3if4iXaC-LJXqxJg9OL2l9Fw/s1600/images.jpeg" /></a></div>
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJlisEvy7Np93QFGJvU3HyKqbQpR9QVTlDrYveZC51hiMIVOFvPOfeWGJ2C3zl4kpWuezSrn5xAMTMoeUeQRT-4FLtAHVSbgHKUIxXm2p6vmwMXqZTBU3if4iXaC-LJXqxJg9OL2l9Fw/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJlisEvy7Np93QFGJvU3HyKqbQpR9QVTlDrYveZC51hiMIVOFvPOfeWGJ2C3zl4kpWuezSrn5xAMTMoeUeQRT-4FLtAHVSbgHKUIxXm2p6vmwMXqZTBU3if4iXaC-LJXqxJg9OL2l9Fw/s1600/images.jpeg" /></a></div>
</div>
<div style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tferz2hVPQyCWw3N6FZcDs3dce4Kkmk9wtiyuiGg9orMm2wmN1dsY11d9L8TbyrjZ_4OylNVYQqyhyphenhyphenWwjXoKt6QlFxX_YmYn5201VVvP-72afMyzGSiUPhY4B0qt9RC8MuWK59a9WOs/s1600/imagesd.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tferz2hVPQyCWw3N6FZcDs3dce4Kkmk9wtiyuiGg9orMm2wmN1dsY11d9L8TbyrjZ_4OylNVYQqyhyphenhyphenWwjXoKt6QlFxX_YmYn5201VVvP-72afMyzGSiUPhY4B0qt9RC8MuWK59a9WOs/s1600/imagesd.jpeg" /></a></div></div>
<div style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6n-LkRUkymu84Ic_aCgQ_No7TwSNL8U1CQUKJMyjp7Nt4SPNZHhC5HNwokAnx9WLpGPIJK9gwLo53CLDmPE_MIxO-2VV7Sw3Xg_cscs3cgkeoMk5X4CrRp4CF99s9cVkNDH_15C93V3o/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6n-LkRUkymu84Ic_aCgQ_No7TwSNL8U1CQUKJMyjp7Nt4SPNZHhC5HNwokAnx9WLpGPIJK9gwLo53CLDmPE_MIxO-2VV7Sw3Xg_cscs3cgkeoMk5X4CrRp4CF99s9cVkNDH_15C93V3o/s200/flower.jpg" width="200" /></a></div></div>
<div style="clear: both;" /> <div/>Tambahkan kod warna hijau pada kod gambar seperti diatas
Hasilnya:
Jika gambar turun juga kebawah(ukuran melebihi ruang) letak atau ubah saiz gambar pada kod.Kalau tak ada pada kod kena tambah seperti dibawah.Perhatikan juga pada kod kadang kadang dah ada(kena periksa jgn ada kod lebih :) ) :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6n-LkRUkymu84Ic_aCgQ_No7TwSNL8U1CQUKJMyjp7Nt4SPNZHhC5HNwokAnx9WLpGPIJK9gwLo53CLDmPE_MIxO-2VV7Sw3Xg_cscs3cgkeoMk5X4CrRp4CF99s9cVkNDH_15C93V3o/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6n-LkRUkymu84Ic_aCgQ_No7TwSNL8U1CQUKJMyjp7Nt4SPNZHhC5HNwokAnx9WLpGPIJK9gwLo53CLDmPE_MIxO-2VV7Sw3Xg_cscs3cgkeoMk5X4CrRp4CF99s9cVkNDH_15C93V3o/s200/flower.jpg" height="200" width="200" /></a></div>
Imej diatas tidak sama besar jadi dengan memasukkan width dan height jadi sama kedudukannya.Cara nya lebih kurang sama dengan apa yg saya terangkan pada artikel susun imej pada sidebar sebelum ini.
Sabtu, 18 Desember 2010
Cara letak divider diantara posting
Divider atau pemisah ini adalah digunakan sebagai pemisah diantara setiap posting pada blog.Ia biasanya dalam bentuk garisan atau imej yang memanjang.selain dari itu juga ia boleh juga sebagai menghiasi lagi pada paparan blog kita dengan divider dalam pelbagai imej yang menarik.Imej yang dipilih biarlah bersesuaian dengan latar belakang blog kerana ada yang hanya sesuai untuk background yang berwarna cerah.
Untuk membuat garisan yang ringkas pada bahagian posting Cuma perlu masukkan kod seperti dibawah ini sahaja pada entri:
Berikut adalah garisan border yang boleh kita masukkan dengan meletakkan kod dibawah pada bahagian yang hendak diletakkan:
<hr>
Hasilnya:
Diatas adalah kod biasa untuk letak garisan melintang dan dibawah ini adalah kod yang boleh kita ubah panjang garisan dan warna.Kod ini cuma perlu dimasukkan sahaja bila membuat posting pada mana mana bahagian yang ingin dimasukkan.
<hr width="50%" size="4" />
<hr width="60%" size="4" noshade />
<hr width="80%" color=" #0080FF" size="4" />
Jika hendak letakkan dalam bentuk imej dan pada setiap posting .kod perlu dimasukkan pada template.
Caranya:
Masuk ke design—edit html—cari kod ini:
.post {
Atau sesetengah template kena letak pada
.post-body {
kebiasaanya kod pada template seperti ini:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
cuma perlu masukkan kod dibawah ini:
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrC_0MIv5A8uuz3lvzUMwIXGaUYVIK6FzAK3-vJ8q4zoh9xkv5nZiJJt5HQFVkz5KLNjLDTCXqEb146h4SqNjRHHqF1raTR1IytcVt_xKwUIulQX9skzQti_GgDJt5UQYAIMnALTv7dk/s400/ribbon.gif);
background-position: bottom center;background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
menjadi seperti dibawah ini
.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IsFuocb2qiRWO45bKDAXI6KSJYF6vE1lSckP4sVi9QmGFQYb3EKWwAPZ20q84YCSfLP-NPH3vTNG70ygyWoM6KuJ2DYVMhRHvpqoBNaBnS5HvOprVfNhMuvIbOeqzFtokDXqdhpSMgQ/s1600/zizzag.gif);
background-position: bottom center;
background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Untuk menjarakkan sedikit diantara border dan kandungan posting ubah pada padding
Dari: padding-bottom:1.5em; kepada ; padding-bottom:2.5em;
Kalau nak letak imej contohnya seperti dibawah ini cuma perlu gantikan url pada teks berwarna merah diatas:
Url imej:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRb08ya962K8WfFP4LqNn7UUUlUGTMaZ2a_jMh-Xz4bszPmwTsnMPa_39vXOnYD4aJTSxPaXcvuAkGXBC00PfUTw-jwPcPDPfo6UEcp2daN5QEUgAIuM9P343yRpPXcut8EOYabtxWrJA/s1600/red+border.gif
Url imej: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7A6SN4kdUe7uY3v99Tmk5eu00j6opJdYNLoS8O23JLD0RCUbXKfQUgAP0Z42FbZKV-v7iKXg0tmgunXN2vDCCeh65mnDf4zpBSvj6sK1uJgYxxxdzBwsODhBCj1Iuz9Gk9-OBjyJduXE/s1600/flowerbar.gif
Imej boleh didapatkan diinternet dengan mencari horizontal line atau page divider
Kamis, 16 Desember 2010
Cara membuat link berkelip disertai dengan kerlipan bintang
Cara ini membolehkan link berkelip bila dihalakan cursor padanya.Disamping berkelip ia kan mengeluarkan kerlipan bintang disekeliling.Tidak menggunakan javascript,hanya gabungan css dan imej sahaja.Contohnya boleh dilihat pada blog ini.Kalau berminat hendak membuatnya,berikut adalah langkahnya:
Klik pada Design
Edit HTML
Cari kod:
</head>
Dan letak kod ini diatasnya:<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVd-9PhN20bvkySx6ps-FAj50SXIeChml9ljPlZF79EvYAw0U9KMfVzMdazB3un41YZ8DY43LX8SXbZTlD7kv_3xJjQp74eUVY7ISfnaqCbDe87TWFt2ed7DffA4nWPtWmsFVPgMumD2E/s1600/blink.gif); }
</style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVd-9PhN20bvkySx6ps-FAj50SXIeChml9ljPlZF79EvYAw0U9KMfVzMdazB3un41YZ8DY43LX8SXbZTlD7kv_3xJjQp74eUVY7ISfnaqCbDe87TWFt2ed7DffA4nWPtWmsFVPgMumD2E/s1600/blink.gif); }
</style>
atau gunakan yang dibawah ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1Ch6trzW8SFkazGSgxdz1VbOWky8q9_Ma54_g_pFb8sGSjpcU5z0x_5AhX2HI0hg6BAf_h-dWBdIadt0ARrOhc3JwwSqrEUO14a2wwR2z4GXuLFT3aEAMN5vMggY65FYlK8wAZSxV3o/s1600/str4.gif
cuma tukarkan tulisan merah pada diatas dengan url bagi kerlipan seperti diatas
#sesuai hanya untuk template berwarna gelap.
Simpan template…selesai..
Rabu, 15 Desember 2010
Cara meletakkan butang Twitter (Retweet) pada posting blog
Ada berbagai cara bagi mendapatkan trafik pada blog kita,salah satunya adalah artikel blog itu sendiri.Butang social bookmarking boleh diletakkan pada posting bagi membolehkan pengunjung berkongsi dengan rakan artikel yang diminati.salah satu nya yg boleh diletakkan adalah butang like facebook.Untuk artikel kali ini saya akan tunjukan cara memasang butang retweet.butang ini boleh digunakan untuk mempromosi blog kita.selain dari boleh mendapatkan followers kita juga boleh mendapatkan traffic darinya.Butang ini terdapat dua bentuk iaitu biasa dan compact.
Cara meletakkan pada posting blog
Masuk ke design
Klik pada edit HTML >> Expand Widget Templates
Cari kod:
<data:post.body/>
Dan letakkan kod selepas atau sebelumnya.jika diletakkann diatas akan terpapar dibahagian atas posting,sebalik jika dibawah akan terpapar pada bahagian bawah posting
Atau boleh juga diletakkan pada kod ini:
<div class='post-header-line-1'/>
Kod bagi butang full size:
<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>
</div>
kod bagi butang compact size:
<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_style = "compact"; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
ubahkan pada kod teks hijau jika hendak diletakkan disebelah kiri(left) atau kanan(right)
Selasa, 14 Desember 2010
Cara letak background disekeliling kotak komen
Mungkin korang hendakkan sedikit kelainan pada kotak komen.Apa kata kalau kita letakkan background disekelingnya.Background ini boleh kita letakkan warna sahaja atau pun imej.Cara membuatnya agak mudah cuma masukkan kod dibawah ini sebelum kod ]]></b:skin>
Background warna:
.comment-form { background:#BE81F7; border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }
background imej:
.comment-form { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjd8JCxXHW2_kB6sV8BCoLth6qNKUMOAWPLZLuojVVTzP11b_z8EQNnZLVGhyqrxFdztZ6M6LQgk7RBkHXG37-UmnVLNH6jTdmMeP4MxLWSCaCuYRZEPlZbpNTaebucYX-8KeMlE5GsE/s1600/animated_50.gif); border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }
Bahagian teks berwarna hijau boleh diubah dengan warna yang dingini dan juga imej dengan meletakkan url bagi imej.
kemudian save template.
- Masuk ke design
- Edit HTML
Background warna:
.comment-form { background:#BE81F7; border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }
background imej:
.comment-form { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjd8JCxXHW2_kB6sV8BCoLth6qNKUMOAWPLZLuojVVTzP11b_z8EQNnZLVGhyqrxFdztZ6M6LQgk7RBkHXG37-UmnVLNH6jTdmMeP4MxLWSCaCuYRZEPlZbpNTaebucYX-8KeMlE5GsE/s1600/animated_50.gif); border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }
Bahagian teks berwarna hijau boleh diubah dengan warna yang dingini dan juga imej dengan meletakkan url bagi imej.
kemudian save template.
Selasa, 07 Desember 2010
Cara pasang widget animated recent post
Blogger ada menyediakan widget recent post yang memaparkan posting posting terkini.Recent post ini memaparkan thumbnail juga jumlah komen pada posting.Tapi kekurangan nya adalah bersifat statik.Recent post ini bergerak ini lebih menarik perhatian pengunjung untuk melihat artikel artikel lain yang ada pada blog kita
Caranya:
untuk dashboard lama:
Masuk ke Design:
Pada Page Element-Pilih Add Gadget
HTML/Javascript
Untuk dashboard baru:
pilih Layout--add a gadget -- HTML/Javascript
Dan masukkan kod dibawah ini:
<center>
<script src="https://sites.google.com/site/jendela-id/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphst2m-VI8x3FoNKSEst8fWcp4Q-1lpjVRo8py-9r4Ok-j7SCnGz2onnoMr2vRj3MjVncCnQ4rBJIhwfwJxY9WBJMDd95wsbfHonQCXW6_HzPJE_cxt_foeCbMlH6p12I77DRFmvkk24/s1600/jendela-idblogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jendela-id.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
<script src="https://sites.google.com/site/jendela-id/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphst2m-VI8x3FoNKSEst8fWcp4Q-1lpjVRo8py-9r4Ok-j7SCnGz2onnoMr2vRj3MjVncCnQ4rBJIhwfwJxY9WBJMDd95wsbfHonQCXW6_HzPJE_cxt_foeCbMlH6p12I77DRFmvkk24/s1600/jendela-idblogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jendela-id.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
Dibawah ini adalah kod bagi anda yang inginkan widget ini dalam bentuk yang lebih kecil untuk disesuaikan untuk sidebar yang ruangnya agak terhad.
<center>
<script src="https://sites.google.com/site/jendela-id/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:3px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:148px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:145px;
padding: 1px 1px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvMBu5i4YvEu7XfEQ-wfDz6msIoD7Q5A_SHxoZSa1ORsXTmqlvpM9vRmMbSAMtr-9NXHav3htY5b4jlikP07ZxtP1sxIxcYdgN2x59f9w-Hri5hYxa8D8uU9HYJRSlchdeBJfkQFO1u5s/s1600/back2.png) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:2px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jendela-id.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
<script src="https://sites.google.com/site/jendela-id/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:3px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:148px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:145px;
padding: 1px 1px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvMBu5i4YvEu7XfEQ-wfDz6msIoD7Q5A_SHxoZSa1ORsXTmqlvpM9vRmMbSAMtr-9NXHav3htY5b4jlikP07ZxtP1sxIxcYdgN2x59f9w-Hri5hYxa8D8uU9HYJRSlchdeBJfkQFO1u5s/s1600/back2.png) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:2px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jendela-id.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>
#Jangan lupa gantikan url blog saya,teks berwarna merah diatas dengan alamat blog sendiri.Kalau nak kecilkan size ubah pada kod warna hijau
Minggu, 05 Desember 2010
Cara membuat scrolling bloglist pada blog
Scrolling bloglist adalah seperti mana terdapat pada sidebar blog ini.Mempunyai butang untuk memasukkan link ,memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan .Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk menguruskan kannya.
Untuk membuatnya:
Mula mula masukkan bloglist dahulu.
Pada design pilih --page elements-add a gadget--bloglist
Sebelum itu backup template terlebih dahulu.
Kemudian :
masuk ke design—edit html-expand template widget
Kemudian cari kod yg dibawah,yg bertanda dengan warna merah adalah berbeza mengikut tajuk yg diberi pada widget.
<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Kemudian tambahkan kod berwarna hijau seperti dibawah ini.
<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>
Kemudian save template
#Lebar dan tinggi widget boleh diubah pada bahagian teks warna oren.
Kemudian save template
Topik berkaitan: Cara letak border,background dan scroll pada widget
Sabtu, 04 Desember 2010
Cara mengelakkan read more automatik pada halaman statik
Memasang read more secara automatik memang menyenangkan kita kerana tidak perlu lagi memasukkan apa apa kod dan memilih bahagian mana teks yang hendak dipotong.Tetapi masaalahnya bila kita membuat halaman statik pada blog pun ada read more juga.Halaman static untuk meletakkan sitemap dan tukar link tenyunya kita nak paparan penuhkan?Jadi tutorial ini adalah bagi rakan rakan ingin mengatasi masaalah dengan read more automatic ini.
Masuk kedesign—edit HTML
Tandakan pada expand template widget
Cari kod dibawah ini:
<div class='post-body'>
<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Apa yang perlu kita buat ialah tambahkan kod warna hijau padanya.Cara ini telah saya gunakan pada read more automatic dengan thumbnail yang ada pada blog ini.
Jika kod diatas tiada gunakan cara ini:
cari kod dibawah ini:
<div class='post-body entry-content'>
kemudian letakkan kod ini dibawahnya:
<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
kemudian cari pula kod ini:
<div style='clear: both;'/> <!-- clear for photos floats -->
dan letakkan kod ini diatasnya:
</b:if>
Selamat mencuba
Kamis, 02 Desember 2010
cara membuat menu dengan menggunakan gambar
Sebelum ini dalam entri yg lepas ada saya tunjukan cara membuat berbagai bentuk menu seperti menu bar tanpa hack,menu horizontal dan kali ini mengunakan gambar pula sebagai menu.Bila menggunakan gambar sebagai menu tentu nya kita mempunyai pilihan membuat berbagai bagai bentuk yang disukai ,tak semestinya asyik bentuk empat segi,bujur.Bagi yg belum tahu apa yang dimaksud menu,menu biasanya terdapat pada bahagian bawah header dengan perkataan yg biasa terdapat padanya seperti home,contact,site map dan sebagainya.
Untuk membuat menu ini kita perlu sediakan gambar dan diupload ke photobucket,imageshack dan sebagainya.Kemudian kita ambil url imej tersebut:
Contohya seperti ini:
http://i219.photobucket.com/albums/cc282/garam63/49Ccopy.jpg
kemudian tambah kod jadi seperti dibawah ini:
<img src="http://i219.photobucket.com/albums/cc282/home.jpg">
Kemudian masuk ke design-page elements
Pilih add gadget-HTML/Javascript
Masuk kod tadi padanya:
Kemudian klik pada edit html
Gambar yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar
Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:
Masukkan link pada ruangan enter a url.
Untuk button yang seterusnya ulang semula langkah diatas dengan memasukkan link gambar kedua .
Untuk memastikan saiz adalah sama klik semula pada edit html untuk masuk pada kod tadi
Dan perhatikan pada width dan height pada kod tersebut
<a href="http://jendela-id.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/home.jpg" /></a>
<a href="http://jendela-id.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/contact" /></a>
<a href="http://jendela-id.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/contact" /></a>
Kemudian klik pada save..selamat mencuba
Jumat, 26 November 2010
masaalah double posting pada blog
Kadang kadang terjadi posting pada blog kita berulang ulang.Maksud saya posting tersebut mempunyai entri yang serupa. Ada sesetengah berlaku bila membuat edit pada template.Bila membuat perubahan pada template sebaikbaiknya buat backup template terlebih dahulu.Kemudian perhatikan kesemua posting dan bahagian yang yang ada pada blog.Sebab kemungkinan boleh berlaku bahagian yang kita tidak buat apa apa edit pun boleh berubah.Pernah terjadi pada saya side bar yang memanjang kebawah bila klik pada read more..kalau tak buat backup susah....
berbalik kepada masaalah tadi..
berbalik kepada masaalah tadi..
Sekiranya terjadi double posting cara mengatasinya adalah seperti berikut:
Masuk kedesign--pilih edit HTML
dan cari kod berikut:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
bila dah jumpa delete kod ini yang digelapkan(bold):
<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>
kemudian preview dahulu sebelum save template
Kamis, 25 November 2010
Cara mengubah tarikh posting dan letak diatas tajuk
Posting kali ialah cara bagaimana hendak mengubah tarikh yang berada dibawah tajuk posting.Ini kerana sesetengah template meletak tarikh dibawah tajuk posting.Ada rakan rakan yg bertanya bagaimana hendak mengubahya seperti yang ada di blog ini.
Untuk mengubahnya dan meletakkan diatas,ikuti langkah berikut.
Cara mengubahnya:Seperti biasa masuk kedesign-edit HTML
Tandakan pada expand template widget
Kemudian cari kod ini:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Potong kod ini(cut) Ctrl+X
Kemudian cari kod seperti dibawah ini:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Kemudian pastekan kod yang dipotong tadi menjadi seperti dibawah
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Kemudian klik pada preview
Untuk meletak tarikh supaya berada ditengah tengah:
Cari kod ini:
h2.date-header {
margin:0 0 10px;
font:$postdatefont;
}
Tambah kod seperti ini:
h2.date-header {
margin:0 0 10px;
font:$postdatefont;
text-align:center;
}
Rabu, 24 November 2010
cara menukar perkataan read more dengan ikon
Memasang read more pada posting adalah dengan tujuan menyembunyikan sebahagian artikel dari paparan dan membolehkan lebih banyak posting dipaparkan pada halaman depan blog.Kebiasaannya terdapat perkataan READ MORE,selengkapnya dan sebagainya pada bahagian bawah posting.dan ada yg menukarnya dengan ikon.Sebelum menukarnya dengan ikon terlebih dahulu tentulah kena letak read more pada template.Tutorial untuk membuatnya ada pada blog ini.
Kemudian untuk read more kepada ikon:
Masuk ke design--dan pilih edit HTML
tandakan pada Expand Template Widget
Kemudian cari kod ini:
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE – <data:post.title/></a></span>
Pada kod diatas terdapat perkataan READ MORE.Jadi untuk menukarnya dengan ikon kita perlu meletak url gambar
contohnya seperti ini:
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLz4F2rUbSBR0MrdUG8jW2uHnLE41Sjec9txG3lwd-x9jIOEYw_cfGTsD-6btbZZptEci8TApCpDoFhvWRIOAMjsPh1hCvwgSnOXhYI9pjmFg068optTVODlDmhyJSAtvf1yAtvf9gYls/s1600/ReadMore.png" /><data:post.title/></a></span>
Bagi menghilangkan tajuk posting yang ada read more ini tambahkan NO pada kod seperti dibawah:
<data:post.title/></a></span>
menjadi seperti dibawah ini
<nodata:post.title/></a></span>
Selasa, 23 November 2010
Cara memaparkan hanya tajuk posting pada halaman blog
Biasanya kebanyakan blog mempunyai posting dengan tajuknya sekali.Tetapi ada sesetengah blog hanya memaparkan hanya tajuk posting sahaja pada halaman pertama blog.Mungkin ada yang ingin paparan hadapan blog nampak ringkas tanpa ada teks dan gambar atau ada yang mengatakan supaya tak nampak berserabut…
Cara membuatnya:
Masuk ke design dan pilih edit HTML
Kemudian tandakan pada expand widget template
Seterus cari kod </head>
Dan letakkan kod ini diatasnya:
(bahagian yang ingin dipaparkan tukarkan display:none kepada display:yes)
Kemudian save template.
Kemudian masuk ke design settings—pilih formatting
Kemudian pada show at most masukkan jumlah posting yang hendak dipaparkan di halaman hadapan
Dan kemudian klik pada save setting
Cara membuatnya:
Masuk ke design dan pilih edit HTML
Kemudian tandakan pada expand widget template
Seterus cari kod </head>
Dan letakkan kod ini diatasnya:
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>
(bahagian yang ingin dipaparkan tukarkan display:none kepada display:yes)
Kemudian save template.
Kemudian masuk ke design settings—pilih formatting
Kemudian pada show at most masukkan jumlah posting yang hendak dipaparkan di halaman hadapan
Dan kemudian klik pada save setting
Senin, 22 November 2010
Cara pasang email subscription form pada blog
Memasang langganan secara email pada blog adalah dengan tujuan bagi membolehkan pengunjung mengetahui jika blog kita membuat entri atau pun posting terbaru. Menambahkan borang langganan email ke blog sangat mudah dilakukan dan merupakan salah satu cara untuk merangsang kunjungan berulang ke blog kita.Ia membolehkan pengunjung blog menerima email bila terdapat update pada blog kita.Langganan ini adalah menggunakan kemudahan yg disediakan oleh feedburner.
Cara memasangnya pada blog:
1.Jika belum mempunyai akaun dengan feedburner daftar dulu disini.
2.kemudian klik pada my feed pada link bahagian atas paparan,kemudian klik pada nama blog
Jika belum ada feed masukkan url blog pada burn a feed right this instant dan klik next
3.seterusnya pilih publicize
4.Kemudian pilih email subscription
5.Kemudian pilih activate
6.Seterus pilih Use a Widget in dan pilih blogger..klik go untuk memasang secara automatik
Jika ingin memasang sendiri :
copy kod yang terpapar
Kemudian masuk ke design—page elements
Add gadget—pilih HTML/Javascript
Paste kod tadi dan klik save.
Jika ingin memasang chicklet
Pada menu publicize seperti diatas tadi pada sidebar kiri pilih feed count .Kemudian akan keluar paparan seperti dibawah.cara memasang kod ini seperti diatas juga.
Cara memasangnya pada blog:
1.Jika belum mempunyai akaun dengan feedburner daftar dulu disini.
2.kemudian klik pada my feed pada link bahagian atas paparan,kemudian klik pada nama blog
Jika belum ada feed masukkan url blog pada burn a feed right this instant dan klik next
3.seterusnya pilih publicize
4.Kemudian pilih email subscription
5.Kemudian pilih activate
6.Seterus pilih Use a Widget in dan pilih blogger..klik go untuk memasang secara automatik
Jika ingin memasang sendiri :
copy kod yang terpapar
Kemudian masuk ke design—page elements
Add gadget—pilih HTML/Javascript
Paste kod tadi dan klik save.
Jika ingin memasang chicklet
Pada menu publicize seperti diatas tadi pada sidebar kiri pilih feed count .Kemudian akan keluar paparan seperti dibawah.cara memasang kod ini seperti diatas juga.
Senin, 15 November 2010
cara pasang back to top
Pemasangan back to top pada blog adalah bagi memudahkan pengunjung kembali semula keatas setelah menggunakan scroll untuk membaca artikel sampai kebawah.Jika menggunakan nya adalah lebih cepat dari menggunakan scroll.Kadang kadang back to top ada pada blog tapi kita dah biasa guna scroll tak nampak pun button tu..terlupa..termasuk lah saya.
Cara membuatnya:
Masuk ke design dan pilih page elements
Klik pada add gadget-pilih HTM/Javascript
Masukkan kod dibawah ini:
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://img179.imageshack.us/img179/1849/backtotop.png"/></a></div>
*Kod ini hendaklah diletakkan dibahagian bawah sekali pada page element supaya tidak terlindung
kemudian klik save...selamat mencuba
Langganan:
Postingan (Atom)