بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
Kamis, 09 Februari 2012
Selasa, 07 Februari 2012
Cara Membuat Widget Sms Gratis
Berikut ini langkah-langkah memasang Widget Sms Gratis pada Blogger :
Cara Membuat Widget SMS Gratis untuk Blogger
- Pertama login ke akun blogger Anda
- Klik menu rancangan
- Klik ‘Tambah Gadget’ (HTML/JavaScript)
- Isikan kode berikut
<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>
- lalu simpan, dan lihat hasilnya.
Semoga Bermanfaat..
Selasa, 17 Januari 2012
Cara Membuat Efek Loading Page Pada Blogger
Mau tau previewnya??? Ok. nih contohnya bisa dilihat DISINI
Gimana??? sobat tertarik kah????
kalau iya, langsung saja ya Cara Membuat Efek Loading Page Pada Blogger
- login blog
- buka menu rancangan >> edit HTML
- lalu cari kode </head>
- dan letakkan kode dibawah ini tepat diatas kode </head>
<!-- Loading Page Script – vikrymadz – http://vikrymadz.blogspot.com -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>
- lalu cari kode <body>
- lalu letakkan kode dibawah ini dibawah kode diatas <div id="page">
- cari lagi kode </body>
- dan taruh kode </div> diatas kode </body>
- lalu simpan deh...
Jumat, 06 Januari 2012
Cara Membuat Widget Kode Warna HTML
Cara Membuat Widget Kode Warna HTML - Buat para sobat Blogger yang ingin mempunyai widget Kode Warna HTML, yaaaahhh.. biar kita gak harus cari-cari Kode Warna HTML kemana-mana.... heheheheOk langsung saja ya sob....
Sobat hanya tinggal memasukkan semua kode HTML dibawah ini ke dalam kotak postingan (edit HTML bukan Compose)
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>
Dan jangan lupa diterbitkan dan lihat hasilnya....
bila ingin melihat hasilnya sobat bisa buka Kode Warna HTML
Semoga Bermanfaat..
Kamis, 08 Desember 2011
Cara Membuat Tombol Spoiler (Tombol Buka/Tutup)
Cara Membuat Spoiler atau Tombol Buka/Tutup pada blog yang disimpan di sidebar atau dalam postingan , selan itu sekalian juga Cara Membuat Spoiler Show/Hidden Widget .
Cara Membuat Spoiler Pada Sidebar atau Postingan
Sebenarnya
Spoiler bisa ditempatkan dimana saja di Sidebar, Komentar atau di
postingan , Dengan Spoiler kita bisa menghemat tempat dll. Cara
membuatnya sama saja tinggal menggunakan kode HTML seperti di bawah
ini :
Perhatikan tulisan berwarna merah, itu bisa diganti sesuai keinginan dan isi pokok dari spoiler bisa berupa teks atau gambar.
Contoh Spoiler bisa dilihat pada blog ini sementara spoiler dalam postingan bisa dilihat di sini.
Cara Membuat Spoiler Show / Hidden Widget
Untuk Membuat Spoiler Show/Hidden Widget kita harus merubah kode HTML langsung pada template blog., widgetnya bisa yang mana saja.. misalnya pada Daftar Isi, Label , Komentar atau Link Sahabat dll..
Langkah membuatnya :
1. Masuk ke Blogger , pilih Design atau Layout , lalu Edit HTML
2. Sebaiknya backup dulu dengan Download full template
3. Centang Expand Widget Templates
4. Cari kode widget yang akan di rubah. Berdasarkan pengalaman sebaiknya tiap widget itu
diberi nama, jadi mudah untuk mencarinya, tinggal Ctl+F lalu ketik nama widgetnya langsung
ketemu deh.
5. Contoh yang akan saya buat Spoilernya adalah Link Sahabat.
Widget Link Sahabat kodenya seperti ini :
6. Ganti kode yang berwarna pink dengan script berikut :
7. Copy kode dibawah ini & simpan diatas kode </b:includable> :
Selasa, 06 Desember 2011
Cara Membuat Tanda Tangan di Bawah Postingan
Cara Membuat Tanda Tangan di Bawah Postingan - Kali ini saya akan
membahas Cara Membuat Tanda Tangan di Bawah Postingan. Sekarang membuat
tanda tangan tidak usah ribet, seperti membuat tanda tangannya
menggunakan kertas atau yang lainnya, karena ada salah satu web yang
menyediakan pembuatan tanda tangan, yaitu MyLiveSignature. Selain di blog, sobat dapat memasangnya di tempat lain seperti forum.
Berikut Tutorialnya :
1. Kunjungi situs http://www.mylivesignature.com
2. Lalu Pilih Menu "Start Now"
3. Klik "Using the signature creaton wizard"
4. Pada Step 1, masukkan Nama tanda tangan yg nanti akan ditampilkan
5. Kemudian pada Step 2, Pilih jenis font (huruf) yang sobat inginkan
6. Step 3, Pilih ukuran font yang sobat inginkan. Step 4, Pilih warna background. Step 5, atur kemiringannya
7. Dibawah, ada 2 pilihan yaitu :
- Want us to animate this signature?
- Want to download this signature?
- Want to use this signature?
8. Pilih yang Want to use this signature?
9. Kemudian muncul halaman baru, pilih Generate HTML code.
10. Copy kodenya
11. Login ke blogger kamu
12. Pilih Template, Edit HTML, Ceklis "Expand Template widget"
13. Pastekan kodenya tepat dibawah kode <data:post.body/>
14. Simpan Template. dan lihat hasilnya. 
Semoga bermanfaat..
Rabu, 09 November 2011
Aturan Penulisan CSS
Css adalah kepanjangan dari Cascade Style Sheet, yaitu suatu bahasa pemrograman yang biasa digunakan oleh para desainer web/blog untuk mengatur style elemen yang ada di web mereka. Tujuan penggunaan CSS adalah agar diperoleh suatu style yang konsisten pada elemen tertentu.
Aturan Penulisan CSS
Selector
Terdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan value
Contoh:
H1
{
Color : #0000FF;
}
Keterangan :
Selector : H1
Properti : Color
Value : #0000FF
Macam-macam Selector :
· Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
· Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
contoh :
.font{
Font-family : ComicSans;
}
· ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer
dalam desain web karena didefiniskan denga ID berbeda. Contoh :
#font{
Font-family : ComicSans;
}
*) CSS Background
Property background
1. Background-color
Contoh:
Body {
Background-color : green;
}
2. Background-Image
Contoh:
Body {
Background-image : url(gambar1.jpg);
}
3. Background-attachment
Body {
Background-attachment : scroll;
}
4. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url(image/gambar1.jpg);
Background-position : bottom center
}
*) CSS Font
Property Font
1. Font-family
P {
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P {
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P {
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P {
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {
Font-weight : bolder;
}
*) CSS Teks
Property teks
1. color
P {
color :red;
}
2. teks-align (nilai left,right,center,justify)
P {
Text-align :justify;
}
3. text-decoration (nilai : none,underline,overline,line-through,blink)
P {
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize;
}
5. Letter-spacing
P {
letter-spacing : 20px;
}
6. Teks-indent
P {
Text-indent : 50px;
}
*) CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,loweralpha,
upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
*) CSS Border
Property Border
1. border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-style-type : groove ;
}
2. border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-bottom-style : groove ;
}
3. border-bottom-width ()
.b1 {
border-bottom-width :10px;
}
4. border-bottom-color ()
.b1 {
border-bottom-color :red;
}
*) Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
pada css
.kotak {
Padding-top : 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
*) Link
#font a:link, #font a:visited{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#6699FF;
padding-left:9px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
text-decoration:none;
}
#font a:hover{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#36ce76;
padding-left:3px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
}
Minggu, 06 November 2011
Cara Membuat Kotak Langganan RSS Feed Via Email Dibawah Posting
Cara Membuat Kotak Langganan RSS Feed Via Email Dibawah Posting :
1. Masuk pada blogger.com Pilih Template >>Edit HTML
2. Lanjutkan Centang Expand Template Widget
3. Cari kode ]]></b:skin> Letakkan kode berikut diatas kode ]]></b:skin> :
4. Selanjutnya cari kode
Letakkan kode berikut dibawah :
NB :
Simpan Template dan Lihat Hasilnya
Semoga Bermanfaat.. :)
1. Masuk pada blogger.com Pilih Template >>Edit HTML
2. Lanjutkan Centang Expand Template Widget
3. Cari kode ]]></b:skin> Letakkan kode berikut diatas kode ]]></b:skin> :
4. Selanjutnya cari kode
*Ganti Fahen dengan id feedbunner Anda
*Tambahan :
Untuk blog yang menggunakan readmore otomatis maka Anda akan menemukan 2 kode, letakkan kode di bawah kode yang kedua.
