Jumat, 31 Desember 2010

Jaringan XL aman di Bromo

Aktivitas Gunung Bromo belum menunjukkan tanda-tanda akan menurun. Dampaknya adalah terputusnya aliran listrik PLN karena kabel yang terputus. Aliran listrik ke BTS milik PT XL Axiata Tbk (XL) menjadi terganggu. Akan tetapi perusahaan XL berusaha  untuk menjaga agar BTS tetap menyalani dan bisa melayani pelanggan
Para teknisi XL di terjunkan langsung ke lapangan untuk mengatasi masalah ini. Para teknisi XL terus berjaga dan memastikan BTS tetap menyala meski hujan abu vulkanik bahkan pasir juga menerjang dan membebani bangunan shelter BTS. Selain memastikan jaringan, XL juga terus menyalurkan bantuan tanggap darurat bagi warga sekitar Bromo. Bantuan yang diberikan selain bagian komunikasi bagi aparat dan warga, juga berupa donasi kesehatan pembagian masker dan obat-obatan. XL akan terus memantau kondisi warga di sana dan akan berusaha memberikan bantuan lanjutan. Semua ini membuat jaringan XL aman di Bromo
 

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

search 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

custom search


widget id bagi  search box  tadi yang bertanda warna hijau seperti rajah diatas.

Widget id berada dibahagian atas dihujung sekali iaitu CustomSearch1  Biasanya berakhir dengan widgetId=CustomSearch1.

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 :
  1. 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:
  1. flash : Untuk koneksi internet dengan menggunakan paket flash prabayar. Biaya koneksi bisa dibeli dengan cara mengirim SMS dan akan dipotong pulsa yang ada.
  2. 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.
Semoga ini bermanfaat bagi pengguna Telkomsel FLASH

Minggu, 26 Desember 2010

Cara pasang shoutbox melayang

shoutboxDalam 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 -->
Kemudian klik save
#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

comments bubble
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>


#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;
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:

red flower

flower

fancy flower

Kebiasaanya akan jadi seperti ini tersusun menjadi tiga baris.
untuk mengubahnya kita perlu masuk ke mode edit HTML

edit template


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>
<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:
red flower
bunga merah
flower
Bunga rose
fancy flower
Warna warni


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

  red border

Url imej: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7A6SN4kdUe7uY3v99Tmk5eu00j6opJdYNLoS8O23JLD0RCUbXKfQUgAP0Z42FbZKV-v7iKXg0tmgunXN2vDCCeh65mnDf4zpBSvj6sK1uJgYxxxdzBwsODhBCj1Iuz9Gk9-OBjyJduXE/s1600/flowerbar.gif


flower divider

Imej boleh didapatkan diinternet dengan mencari  horizontal line atau page divider 

Kamis, 16 Desember 2010

Cara membuat link berkelip disertai dengan kerlipan bintang

kerlipan
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>

atau gunakan yang dibawah ini:

bintang berkelip

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.

tweet button

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 = &#39;<data:post.url/>&#39;; </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>

kotak komentar
  • Masuk ke design
  • Edit HTML
dan masukkan kod dibawah ini:

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{
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.
recent posts
<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(http://2.bp.blogspot.com/-p-XwE0kTrbc/TVtsnJO6LFI/AAAAAAAABW8/bnFmpyHz8Ug/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>

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>

 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 == &quot;static_page&quot;'><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 == &quot;static_page&quot;'><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.
link dengan gambar






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:
menu button







Kemudian klik pada edit html
Gambar  yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar


edit html

Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:


masukkan link













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>

Kemudian klik pada save..selamat mencuba