Sunday, June 26, 2011

Pengenalan Blog Baru Saya BisnisNewbie.Com dan Blogdesainer.Com

Halo sobat,

Lama gak ada bukan berarti saya off untuk jangka panjang. Sorry udah lama gak posting karena saya mengerjakan 2 Blog saya yaitu BisnisNewbie.Com dan BlogDesainer.Com. Untuk Bisnis newbie, saya fokuskan pada materi berbisnis online dengan cara terbaru yang mungkin sampai sekarang belum dilakukan oleh orang lain tapi bisa menghasilkan profit yang lumayan. Penasaran sama tampilannya. Cekidot.
Biar gak penasaran datang aja langsung ke Bisnisnewbie.com.

Untuk blog yang kedua, saya akan menggunakan blog tersebut untuk sharing template gratis. Ini blog sebenarnya sudah lama, namun karena saya pada saat itu sedang ujian jadinya saya tinggal. Namanya Blogdesainer.Com. Penasaran sama tampilannya? Lihat yuk.
Mau liat langsung tampilannya? datang aja ke Blogdesainer.com.

Pastinya temen-temen pada kangen sama tutorial cara membuat template blogspot. Tutorial selanjutnya akan saya terbitkan pada 5 Juli. Karena sekarang saya mau UAS. Jadi saya harus belajar terlebih dahulu baru blogging lagi.

Tuesday, June 21, 2011

Cara Membuat Template Blogspot: Layout CSS part2


Halo sobat,

Mohon maaf nih baru posting lagi tentang membuat template blogspotnya. Pada posting kali ini saya akan membuat sidebar atas dari CSS, Sehingga tampilannya akan seperti dibawah ini:

Cara Membuat Template Blogspot
Pada tutorial kali ini saya tidak membuat video tutorialnya karena banyak teman blogger newbie yang internetnya agak lemot jadi tidak bisa melihat tutorialnya. Sebelumnya kita telah membuat ini pada tutorial : Cara Membuat Template Blogspot: Membuat Menu(Video)

Untuk yang kali ini kita hanya menambahkan sidebar atas. Ikutin langkah-langkahnya ya.

1. Buka Dreamweaver Anda.
2. Buatlah sebuah id tags baru dengan nama outer-wrapper seperti dibawah ini:
Cara Membuat Template Blogspot
 Mengapa saya membuat outer wrapper? Biar terlihat lebih rapih pada saat dibuka nantinya.
3. Buat New CSS Rule dengan nama outer-wrapper seperti dibawah ini:
Cara Membuat Template Blogspot
 4. Ikuti settingan seperti di bawah ini: 
Cara Membuat Template Blogspot
Mengapa pada height saya tulis auto? karena saya ingin heightnya akan terus bertambah ketika tinggi yang ada di dalam outer-wrapper bertambah.

Membuat Sidebar
 
1. Buat id tags sidebar-top. Caranya sama dengan di atas.
2. Lalu buat New CSS rule dengan nama #sidebar-top. Cara sama dengan di atas.
3. Ikuti settingan berikut ini:
Cara Membuat Template Blogspot
Buat border dengan menyetting seperti ini:
Buat Backgroundnya dengan menyetting seperti ini:
 
Membuat sidebar1, sidebar2 dan sidebar3

1. Buat id tags sidebar1. Caranya sama dengan di atas.
2. Lalu buat New CSS rule dengan nama #sidebar1. Cara sama dengan di atas.
Ikuti setting dibawah ini untuk Type Mengubah warna font:
Ikuti setting dibawah ini untuk memberikan border:

Ikuti setting ini untuk membuat box dengan ukuran sidebar yang sesuai:
Ulangi langkah diatas hingga anda selesai membuat 3 sidebar. Jika ada pertanyaan silahkan tinggalkan komentar anda. Selamat mencoba ya sobat. 


Jangan lupa berbagi dengan menempelkan sidebar peduli blogger indonesia di blog anda yang ada pada posting:

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!

Monday, June 20, 2011

CSS Tutorial: ID Tags VS Class Tags(Versi Khusus)

Halo sobat,

Kali ini saya posting sesuai dengan permintaan teman saya di kotak komentar yaitu "Penjelasan Detail Id Tags Dan Class Tags". Pertanyaan teman saya CheatGame4U seperti ini:
Untuk itu saya buat tutorialnya seperti dibawah ini:


Penjelasan Detail ID Tags

Seperti yang sudah saya jelaskan sebelumnya, Untuk ID tags awalnya selalu ditandai dengan tanda "#" dan setelah itu anda bebas memilih variabel apa saja. Contoh:
Saya ingin membuat menu, nah anda bisa memberikan variabel apa saja setelah pagar:

#menu_atas{}
#menusaya{}
#list_atas{}

Pada saat penulisan css sebagai selector. Anda tidak boleh menuliskan spasi seperti ini:

#menu saya{}

Mengapa? Karena tidak akan terbaca oleh css tersebut. Lalu bagaimana dengan kasus yang ini:

#menu #navigasi a{}

Sebenarnya itu hanya penegasan saja, dimana saya tegaskan bahwa selector navigasi ada di dalam selector menu. Anda bisa saja menuliskan seperti ini:

#navigasi a{}

Sekarang anda pasti bertanya lagi? Kok ada a{} fungsinya untuk apa?
Didalam bahasa css ada selector general seperti dibawah ini:

p : Untuk menyeleksi paragraf.
li: Untuk menyeleksi list.
ul: Untuk menyeleksi tag HTML ul.
a: Untuk menyeleksi Link.
a:hover: Untuk menyeleksi link yang dilalui mouse.
dan masih banyak lagi.

Saya kasih contoh biar lebih jelas, misalkan saya ingin paragraf yang berada di dalam selector posting mempunyai ukuran font 16px. Maka saya membuat cssnya seperti ini:

#posting{font-size:9px;}
#posting p{font-size:16px;}

Untuk pemanggilan CSSnya seperti ini:

<div id="posting"><p>Ini paragraf yang terpengaruh p</p></div>

Lihat, saya menambahkan tag html p. Sehingga tag HTML tersebut akan mempunyai ukuran font 16px.

Jika anda memanggilnya tanpa p seperti ini.

<div id="posting">Ini paragraf yang tidak terpengaruh p</div>

Sekarang timbul pertanyaan lagi, saya sering melihat css seperti ini:
#posting,#sidebar{}

Bagaimana jika seperti itu, jika anda menemukan css seperti ini berarti command pada selector posting sama saja dengan sidebar. Misalkan posting mempunyai huruf 16px berarti itu berlaku juga pada sidebar.
Sekarang sudah mengerti kan? Bagaimana dengan class?

Penjelasan Detail Class Tags.

Untuk Class mungkin anda akan sering melihat kode seperti ini di blogspot:
.sidebar .widget{font-size:16px;color:#ccc;}
Jika anda menemukan kode seperti ini. Berarti yang terseleksi adalah Widget yang berada di dalam selector sidebar. Atau seperti ini:
<span class="sidebar">
Tulisan yang tidak terpengaruh.
 <span class="widget">Tulisan yang terpengaruh</span>
</span>
Span adalah pengganti div dan hanya berlaku pada class tags.
Untuk permasalahan lainnya sama dengan ID tags.
Jika ada yang mau di tanyakan tanya aja langsung melalui komentar. Pasti dibalas kok.

Sunday, June 19, 2011

E-Book Cara Membuat Template Blogspot Dibagikan Gratis.

Halo sobat,

Di pagi hari saatnya berbagi, untuk pagi yang cerah ini saya ingin berbagi e-book dari amanda fazani. Walaupun buku ini berbahasa inggris tapi buku ini lengkap pembahasannya yang disertai gambar sehingga mudah di pahami. Mau tau bukunya seperti apa? Cekidot.

Sekarang bagaimana cara mendapatkannya? Gampang banget. Anda cukup pasang aja banner yang ada di posting :

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!

Udah liat bannernya, di pasang deh. Saya gak mau cuma anda yang bisa sendiri, teman-teman blogger juga harus pada tau supaya mereka bisa membuat template mereka masing-masing.
Kalo udah pasang banner gimana?
Tinggalkan email di kotak komentar dan saya akan mengirimkan link downloadnya untuk anda.

Update: Sekarang anda bisa langsung mendownloadnya klik ini.

Cara Membuat Template Blogspot: Membuat Menu(Video)

Halo sobat,

Pasti udah gak pada sabaran nih buat lihat tutorial yang selanjutnya. Pada posting kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Membuat Menu". Kalau bagi blogger professional membuat menu hanya hitungan menit. Tapi kalau newbie belum tentu tau. Oleh sebab itu saya membuat tutorial ini.



Tutorial-tutorial saya nantinya akan menjadikan anda mahir dalam membuat template blogspot. Jadi jangan lupa langganan artikel saya. Biar gak ada yang ketinggalan. Langsung aja deh kita lihat tutorialnya di bawah ini.




Untuk Resourcenya Silahkan Copy Code Dibawah ini:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
    margin: 0px;
}
#menu {
    height: 50px;
    width: auto;
    background-color: #242424;
}
#menu #navigasi {
    float: right;
    height: 50px;
    width: 600px;
}
#menu #navigasi a {
    display: block;
    float: left;
    margin: 0px;
    padding: 15px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
}
#menu #navigasi a:hover {
    color: #999999;
    background-color: #333333;
}
-->
</style>
</head>

<body>
<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="image/logo.png" alt="ilove" border="0" /></a></div>

</body>
</html>
Untuk resource gambarnya tinggal download aja logo ini:

Nah bagi temen-temen yang ngerasa tutorial ini sangat berguna, Ajak teman-temanmu untuk datang ke blog ini dengan memasang banner yang ada di posting :

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!
Jangan lupa tinggalkan komentarnya ya.

Saturday, June 18, 2011

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!

Halo sobat,

Pada posting kali ini saya tidak memberikan tutorial, tapi saya ingin meminta bantuan. Seperti yang sobat ketahui, banyak blogger-blogger newbie yang mungkin selama ini tersesat dan bingung. Mereka cenderung menggunakan template orang lain dan ingin membuat template sendiri tapi tidak bisa.

Oleh karena itu, saya meminta sahabat untuk menyebarkan banner ini untuk memandu para newbie agar mereka bisa membuat template sendiri. Dengan mengarahkan banner tersebut ke link: http://intuts.blogspot.com.

Bannernya seperti apa sih?ini dia bannernya:


Untuk memudahkan cukup copas aja code dibawah ini:

<a href="http://intuts.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jznOLgOBuYkvSu4rC1y2t1G1v3B0nacB2HiNc-wPha48xz8RrHtt1Wr2rDbSbJZLy9Ekatr0lCdc5_dbBgFYOu1QZWtx85TOVaLis5fCIo25RiCFviFn3fOFbIARBDysDC3t35aF6Uo/s400/banner.png" width="300" />

Saya minta tolong ya sob buat semuanya. Ini demi kemajuan blogger indonesia karena ilmu buat di share bukan untuk diperjual belikan jika anda memang benar-benar seorang blogger.

Cara Membuat Template Blogspot: Layout CSS Part1

Halo sobat,

Sorry nih hari ini agak maleman postingnya, pada tutorial kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Layout CSS Part1". Jika anda ingin membuat template blogspot pasti yang anda butuhkan pertama kali adalah layout css.

Nah saya udah buat video tutorialnya untuk anda. Isi dari video tutorial ini adalah untuk membuat outerwrapper, header, sidebar, menu dan posting.
Video tutorialnya adalah sebagai berikut:






Lanjutannya:


Untuk sourcenya anda bisa mengambilnya di bawah ini:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
    margin: 0px;
}
#outer-wrapper {
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #666666;
    height: 1000px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}
#outer-wrapper #header {
    height: 100px;
    width: auto;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
}
#outer-wrapper #header #logo {
    float: left;
    height: 80px;
    width: 300px;
    border: 1px solid #666666;
    margin: 10px;
}
#outer-wrapper #header #banner {
    float: right;
    height: 80px;
    width: 500px;
    border: 1px solid #666666;
    margin: 10px;
}
#outer-wrapper #menu {
    height: 35px;
    width: auto;
    background-color: #CCCCCC;
}
#outer-wrapper #content-wrapper {
    height: 600px;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #999999;
    margin-top: 10px;
}
#outer-wrapper #content-wrapper #posting {
    float: left;
    height: 600px;
    width: 600px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #999999;
}
#outer-wrapper #content-wrapper #sidebar {
    float: right;
    height: 600px;
    width: 240px;
}
-->
</style>
</head>

<body>
<div id="outer-wrapper">
  <div id="header">
    <div id="logo">Content for  id "logo" Goes Here</div>
    <div id="banner">Content for  id "banner" Goes Here</div>
  </div>
  <div id="menu">Content for  id "menu" Goes Here</div>
  <div id="content-wrapper">
    <div id="posting">Content for  id "posting" Goes Here</div>
    <div id="sidebar">Content for  id "sidebar" Goes Here</div>
  </div>
</div>
</body>
</html>
Semoga tutorial yang saya berikan bermanfaat, Besok kita buat sidebar bawah dan juga menu. Jangan sampai ketinggalan ya.

Thursday, June 16, 2011

Cara Membuat Template Blogspot: Dasar Dasar CSS.(Video)

Halo sobat,

Seperti yang telah saya janjikan, hari ini saya akan merelease postbook "Cara Membuat Template Blogspot". Sebelum melangkah jauh dalam pembuatan template blogspot. Anda wajib mengerti tentang CSS. Oleh sebab itu pada pembahasan yang pertama dalam postbook saya, Saya akan membahas tentang "Dasar Dasar CSS".

Tanpa ada CSS anda tidak bisa membuat template dengan desain yang rapih dan juga cepat di akses. Langsung saja ke tutorial.

Dalam CSS ada dua tag yang digunakan dalam membangun template css yaitu ID Tags dan Class Tags. Apa bedanya? Saya akan membahasnya dibawah ini:

Id Tags CSS

Id tags pada CSS biasanya menggunakan tanda "#" pada awalan selector. Contohnya adalah seperti dibawah ini:
#contohid{}
Untuk pemanggilan selector tersebut biasanya menggunakan id="selector" seperti dibawah ini:
<div id="contohid"></div>

Class Tags CSS

Id tags pada CSS biasanya menggunakan tanda "." pada awalan selector. Biasanya penggunaan class ini pada selector yang sudah di kelompokan. Kalau pada blogspot kita akan menemui banyak tags jenis ini. Contohnya adalah seperti dibawah ini:
.contohclass{}
Untuk pemanggilan selector tersebut biasanya menggunakan class="selector" seperti dibawah ini:
<div class="contohclass"></div>
Sekarang saya lanjutkan ke Command CSS. Apa itu?

Command Css

Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:

Untuk mempermudah anda dalam belajar, save gambar tersebut ke komputer anda.

Untuk penggunaan Command CSS saya akan memberikan simulasinya seperti dibawah ini:
Copy gambar tersebut supaya anda bisa melihat simulasinya.

Ini video tutorialnya biar anda lebih jelas:



Source Tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
}
p{color:#cccccc;}
-->
</style></head>

<body>
<p>Ini paragraf.</p>
</body>
</html>
Supaya anda lebih jelas lagi tentang penggunaan css, Datang lagi besok pada postingan tentang "Membuat Layout CSS Untuk Blogspot", ada video tutorialnya juga lho. Jangan lupa tinggalkan komentarnya ya.

Cara Menghias Form RSS Feedburner Anda.

Halo sobat,

Sorry banget nih kemaren gak posting, karena saya harus mendatangi wisuda pacar saya. Pada posting kali ini saya akan sharing tentang "Cara Menghias Form RSS Feedburner Anda". Banyak nih temen-temen blogger saya yang ingin tau bagaimana cara menghias formulir langganan rss supaya menarik para pembaca untuk mendaftar di feed mereka.

Saya akan membuat formulir feedburner seperti dibawah ini tapi dengan versi yang berbeda. Lihat contohnya dibawah ini:

Menghias kotak langganan feedburner

Untuk membuat kotak langganan seperti diatas, langkah pertama yang harus anda lakukan adalah

1. Login ke Blogger.com
2. Pilih Rancangan>>Elemen Halaman.
3. Pilih Tambah Gadget pada sidebar.
4. Copy paste code dibawah ini:

<div id="langganan">
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!</p>
<p>Masukan Email Anda:</p>
<p><input id="alamat" type="text"  name="email"/></p><input type="hidden" value="intutsblogspot" name="uri"/><input type="hidden" name="loc" value="en_US"/><input id="tombol" type="submit" value=" " /></form></div>

Ganti kata yang dihuruf tebal merah dengan id feedburner anda. Setelah anda insert dan anda save maka hasilnya akan seperti ini:






Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Saya sudah membuat 3 Id tags CSS pada html disana yaitu: langganan, alamat dan tombol. Sekarang saya ingin anda menghiasnya dengan CSS dengan memasukan kode dibawah ini tepat diatas kode yang saya berikan tadi:
<style type="text/css">
#langganan{}
#alamat{}
#tombol{}
</style>
Fungsi dari ketiga kode diatas adalah untuk memanggil id yang telah saya tuliskan pada kode HTML. Sekarang saya akan menjelaskannya satu persatu. Jika anda lihat dengan detail, kode
<div id="langganan"></div>
berada diluar form yang menandakan bahwa besar area untuk form anda bisa ditentukan dengan memberikan kode tambahan pada id="langganan". 


Saya akan menambahkan kode width untuk menyetting lebar. Dan kode height untuk menyetting tinggi. Lihat kodenya seperti dibawah ini:


#langganan{width:350px;height:150px;}
Sekarang tampilannya akan menjadi seperti dibawah ini:






Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Sekarang saya akan menambahkan border dan background pada tag langganan.
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;}
Maka hasil tampilannya akan seperti dibawah ini:







Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:



Sekarang saya mau tambahkan padding dan font-size supaya rapih:
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;padding:5px;font-size:12px;}
Hasilnya sekarang akan seperti ini:







Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Nah udah jadi nih sebagian, Langkah selanjutnya adalah mengedit kotak email dan juga tombolnya. Tambahkan float dan juga position.
#alamat{float:left;position:relative;}
#tombol{float:left;position:relative;}
Perubahannya akan seperti ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Sekarang saya ingin menambahkan background pada tombol seperti ini:
Maka saya akan menyetting tombol seperti dibawah ini:
#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
Tampilannya akan seperti dibawah ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:



Tombol sekarang sudah kelar, Tinggal rubah textnya seperti dibawah ini untuk menyesuaikan dengan tombol:
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
Hasil akhirnya akan seperti dibawah ini:





Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:


Kode hasil akhirnya adalah seperti dibawah ini:
<style type="text/css">
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;text-align:left;padding:10px;font-size:12px;}
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
</style>

<div id="langganan">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!

Masukan Email Anda:
<input id="alamat" name="email" type="text" />
<input name="uri" type="hidden" value="intutsblogspot" /><input name="loc" type="hidden" value="en_US" /><input id="tombol" type="submit" value=" " /></form>
</div>
Sekarang udah kelar deh. Untuk yang lainnya silahkan berkreasi sendiri ya. Karena kalau saya posting semua akan sangat panjang. Jangan lupa tinggalkan komentarnya.

catatan: Jika perletakan tombol kurang sempurnya, anda bisa menyempurnakannya dengan menggunakan top(posisi atas),bottom(posisi bawah),left(kiri), dan right(kanan).

Monday, June 13, 2011

Persiapan Untuk Membuat Template Blogspot.

Halo Sobat!

Capek nih abis pulang kuliah tapi masih semangat buat posting. Hari ini saya mau berbagi tentang "Persiapan Sebelum Membuat Template Blogspot". Sebelum membuat template blogspot yang akan saya share pada tanggal 17 Juni 2011 sampai dengan selesai. Saya mau kasih tau dulu kepada anda bahwa ada yang perlu dipersiapkan untuk membuat template blogspot.

Apa aja sih?

1. Notepad ++/Dreamweaver.

Nah software ini nanti sangat diperlukan untuk mengkode blogspot anda, terutama untuk CSS dan HTML. Sehingga anda bisa lebih mudah membuat kode yang rapih untuk blogspot anda. Saya sangat menyarankan kepada anda untuk menggunakan Dreamweaver, mengapa? Karena banyak fitur yang dapat mempermudah kita dalam membuat template hanya dengan klikan mouse.

2. Firebug.

Firebug ini nanti buat memastikan apakah template kita ini sesuai atau tidak setelah dijalankan di browser. Kalau tidak kita bisa mengeditnya dengan tool addon dari mozilla ini.

3. Coreldraw/Photoshop.

Nah untuk software yang satu ini anda wajib punya, kenapa? karena dengan software tersebut kita bisa mendesain blog kita lebih bagus dan hidup. Kalau bisa harus ada dua-duanya, karena nanti saya akan mengajarkan anda membuat logo dengan Coreldraw, sehingga terlihat lebih professional.

4. Paham Sedikit Bahasa CSS, Javascript dan HTML.

Untuk masalah ini kalau banyak yang belum mengerti saya akan berikan tutorialnya step by step sehingga anda bisa lebih mengerti.

Nah bagi anda yang belum mempersiapkan point-point di atas mulai dari sekarang di siapin deh. Cari di mbah Google apa aja yang dibutuhkan. Jangan lupa tinggalin komentarnya ya jangan cuma baca doank.

Sunday, June 12, 2011

PostBook: Cara Membuat Template Blogspot.

Halo sobat,

Sorry nih, postingnya agak maleman karena saya harus belajar dulu buat ujian. Mungkin ini posting yang nantinya akan dicari-cari oleh teman blogger. Kenapa? Karena saya membuat "PostBook: Cara Membuat Template Blogspot". Mengapa saya namakan postbook, karena buku yang saya sajikan nanti kepada teman-teman adalah berupa posting. Penasaran sama PostBooknya, Lihat tampilan Cover depannya ya.
Cara Membuat Template Blogspot

Mengapa saya membuat postbook?

Kalau membuat e-book pengalaman saya setelah anda baca maka e-book tersebut pasti akan di delete. Kalau bentuk postbook, pasti ilmu ini akan terpakai oleh blogger-blogger newbie yang pada bermunculan.

Apakah postbook ini gratis?

Postbook ini tidak diperjual-belikan alias gratis, saya memberikannya melalui posting untuk anda. Yang paling penting adalah, anda cukup langganan feed kami dengan memasukan email anda pada formulir langganan yang ada di sidebar kanan.
Apa yang anda dapatkan?

Walaupun ini gratis tapi bukan sembarang gratis, saya akan memberikan full tutorial step by step dengan gambar dan juga video. Nah bagi anda yang mempunyai reseller hosting/server hosting yang mau menyumbangkan spacenya untuk gambar-gambar untuk memperlancar penerbitan postbook ini silahkan hubungi saya. Karena saya akan menampilkan logo hosting anda sebagai sponsor blog ini. Lumayan kan dapat traffic nantinya dari blog ini.

Kapan postbook ini diluncurkan?

Saya akan memposting postbook ini mulai tanggal 17 Juni 2011. Jadi jangan ada yang ketinggalan ya untuk belajar membuat template blogspot dari blog ini.

Nah bagi temen-temen blogger yang merasa informasi ini penting untuk disebarkan, sebarkan deh biar semuanya pada bisa buat template blogspotnya masing-masing bukan cuma download atau pake template buatan orang lain.

Friday, June 10, 2011

Cara Merotasi Text Dan Gambar Dengan CSS.

Halo sobat,

Pada hari ini saya akan sharing tentang "Merotasi Text Dan Gambar Dengan CSS", mungkin ketika datang ke blog saya anda akan bertanya-tanya, itu gambar dibuat miring atau dimiringi dengan javascript. Sebenarnya gambar tersebut murni dari editan CSS.

Bagaimana sih caranya? Ikutin saya ya:
Saya buat sebuah kode css dengan id tags rotasi seperti dibawah ini:
#rotasi{
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}
Setelah itu saya coba panggil css tersebut:
<div id="rotasi">Percobaan Rotasi 35 Derajat</div>
Nah kalau anda sudah pernah lihat cara membuat autoreadmore dengan thumbnail, anda bisa memodifikasi tampilan gambar tersebut dengan merubah cssnya seperti dibawah ini:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}
Catatan: Tutorial ini akan terlihat hasilnya jika di lihat dari firefox. Untuk IE silahkan tambahkan kode.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Angka 0 untuk 0 derajat, 1 untuk 90 derajat, 2 untuk 180 derajat, 3 untuk 270 derajat.

Sekarang lihat hasilnya di blog anda, semoga bermanfaat.

Cara Pasang Animasi Text Blogroll Dengan Javascript.(Bukan Marquee)

Halo Sobat,

Mungkin kebanyakan dari anda bingung mau pasang blogroll marquee tapi bikin website lambat, nah saya punya solusi nih buat anda yang mau pasang blogroll yang gak boros tempat dan bisa mempercantik tampilan website anda.

Saya menamainya Animasi Text Blogroll. Terus tampilannya bagaimana? Jika anda melihat kotak Follow Me pada blog saya, dibawah ada kata teman. Nah tampilannya akan seperti itu. Lalu caranya gimana?

Gampang kok. Ikutin ya.

1. Masuk ke Blogger.com.
2. Terus Klik Design>>Page Element.
3. Klik Add a Gadget Pilih HTML/Javascript.
Masukin deh kode ini:

<script type="text/javascript">
var imgsa = new Array("Intuts","Habil","Kompas","Cayun");
var lnksa = new Array("http://intuts.blogspot.com","http://nsxcrew.blogspot.com/","http://kompas.com","http://tanpa-isi.blogspot.com/");
var alta = new Array();
var currentAda = 0;
var imgCta = 4;
function cyclea() {
  if (currentAda == imgCta) {
    currentAda = 0;
  }
document.getElementById('adLinka').innerHTML = imgsa[currentAda];
  document.getElementById('adLinka').href=lnksa[currentAda]
  currentAda++;
}
  window.setInterval("cyclea()",10000);
</script>
Teman : <a style="font-size:12px;color:#003366;font-family:verdana;" href="http://intuts.blogspot.com" id="adLinka" target="_new">Intuts</a>
Lihat kata  var imgsa itu bisa anda ganti dengan nama teman blogger anda, sedangkan var lnksa itu untuk link teman anda. Saya beri contoh seperti ini.
var imgsa = new Array("sobat1","sobat2","Sobat3","Sobat4");
var lnksa = new Array("http://sobat1.blogspot.com","http://sobat2.blogspot.com/","http://sobat3.com","http://sobat4.blogspot.com/");

Pada kata:
var imgCta = 4;
Sesuaikan dengan link yang ingin anda tambahkan. Kalau ada 4 tulis 4 kalau ada 5 tulis 5.

Sesuaikan kecepatan tampilan dengan menyetting window.setInterval("cyclea()",10000);

Nah sekarang udah tau kan, Jika di copas jangan lupa tampilin sumbernya ya. Hargai apa yang sudah saya buat dengan menampilkan sumbernya.

Thursday, June 9, 2011

Layanan Statistik Baru Blogger.com Memanjakan Usernya.

Halo para blogger,

Setelah lama ditunggu-tunggu akhirnya keluar juga layanan statistik baru dari blogger.com. Layanan ini baru diterbitkan blogger pada awal tahun 2011. Apa sih keunggulannya? kita lihat yuk.

Lihat, ada overview, Post, Traffic Source dan Audience.

Dengan adanya layanan ini pastinya akan mempermudah para usernya untuk melakukan research tentang artikel mana yang paling disukai para pembacanya, sehingga mempermudah user pula dalam pemilihan niche. Jangan pada bengong aja, gunain toolsnya sekarang.

Tips Memilih Warna Untuk Template Blogspot Anda.

Halo sobat,

Hari ini saya ingin membahas tentang "Tips Memilih Warna Untuk Template Blogspot Anda".Terkadang kita sering melihat template blogspot yang warnanya tidak selaras, jadinya mengurangi minat kita untuk membaca. Kalau blog dengan desain professional pastinya selalu enak dilihat dan enak dibaca. Mengapa? Karena adanya keselarasan warna yang mereka gunakan.

Saya punya rahasia yang mungkin bisa anda gunakan dalam membuat template. Ada rahasia rupanya yang sering digunakan para desainer wordpress dalam menyelaraskan desain-desain website yang mereka buat. Apa itu?

Kuler Tools yang disediakan oleh Adobe Corporation untuk para desainer website. Sehingga selain para desainer website bisa menyelaraskan warna website. Mereka juga bisa memaksimalkan penjualan dengan melihat warna favorit yang disukai para pembaca.
Dengan menggunakan tools ini anda tidak perlu repot lagi memilih-milih warna untuk membuat template blogspot anda. Semoga bermanfaat..

CSS Tutorial:Pengenalan CSS.

Hai sobat,
Di pagi yang cerah ini, saya mau share tentang "Pengenalan CSS". Banyak blogger yang gak mau tau nih tentang CSS. Katanya susah untuk dipelajari dan ribet, padahal CSS ini paling gampang dibandingkan dengan bahasa pemograman yang lainnya. Tapi sebelum melangkah ke kode-kodean. Kita harus tau dulu apa kegunaan dari CSS tersebut, biar lebih meresapi.

Apa sih CSS? 

Cascading Style Sheet, Pemograman CSS bertugas menggantikan fungsi table pada HTML, sehingga tampilannya lebih terstruktur dan lebih cepat di akses dibandingkan menggunakan table.

Apa Fungsi CSS?

Fungsi CSS adalah sebagai berikut:
1. Pengganti Table
2. Pewarnaan Pada HTML
3. Mengatur Perletakan Tags
4. Menyembunyikan Suatu Tags
dll.

Nah kalau anda ingin menjadi desainer blogspot, CSS wajib anda kuasai, karena 80% dari desainer blogspot kebanyakan hanya tau tentang CSS sedangkan pemograman yang lain masih raba-raba. Untuk saat ini saya hanya membahas tentang pengenalan terlebih dahulu, 

Pada posting tentang CSS Tutorial berikutnya saya akan membahas tentang syntax dasar dan bagaimana cara memanggil kode CSS tersebut. Tunggu posting selanjutnya ya.

Auto Read More Dengan Thumbnail Baru(Tanpa Javascript)

Halo sobat,

Membuat blog dengan Auto Read More pastinya lebih asyik dibandingkan dengan mengklik jumplink setiap kali memasukan post. Tutorial yang saya buat mungkin berbeda dengan yang diberikan para master lain. Karena kebanyakan para master menggunakan javascript.
Lho! emangnya kenapa kalau pakai javascript? Ada beberapa kelemahan.

1. Memperberat Loading Blog.
2. Jika browser tidak mendukung javascript, posting akan berantakan jika di akses.

Untuk menangani masalah itu, saya akhirnya menemukan cara untuk membuat Auto Read More Tanpa Javascript. Ikuti ya caranya:

1. Login Ke Blogger.com.
2. Klik Rancangan>> Edit HTML>> Expand Template Widget.
3. Cari kode seperti dibawah ini:
<data:post.body />
4. Ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<br/>
<data:post.body/>
<b:else/><b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if></b:if>
5. Simpan Template.

Biar bagus tampilannya, tambahin deh kode CSS seperti di bawah ini:
.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
Taruh sebelum kode:

</b:skin>
Source: http://www.bloggerbuster.com(Jika anda melihat di sumber asli pada halaman static anda juga akan ada readmore. Kode diatas sudah saya modifikasi dari sumber aslinya. sehingga tidak akan ada readmore pada halaman statis anda)
Selesai deh, semoga bisa menambah gaya blogspotmu, Tinggalin komentar donk kalau tutorial ini berguna.