Friday, April 24, 2009

5 colomn blogger

This is template i was created for free and named Complexion Magazine Template, another magazine style template and suitable for your blog which focused on business blog and if you are looking to monetize your blog with goggle adsense this is right choose template because i'm design for the sidebar section suitable almost for goggle ads format. And you have don't to worry i'm already have check this layout in many browser on firefox, google chrome, opera, safari and most important is in IE 6 ( its hard work to be good layout in this browser!) and i hope you do not remove credits links because i spend so many hours to create this template for you. Just enjoy this Complexion Magazine Template and start earning with your google adsense :p.

Features :
  1. Automatic readmore and automatic resize an image in home post.
  2. Magazine style
  3. Left sidebar width : 210px ( google ads format :180x150,180x90,200x200)
  4. Midle left width : 130px (googgle ads format : 125x125, 120x600,120x90)
  5. Midle right width : 270px (googgle ads format :250x250x)
  6. Right sidebar width  310px (googgle ads format :300x250)
  7. 5 Column template: 
  8. Vertical navbar from dynamicdrive

Mengganti Background Blog Dengan CSS

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.


Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya :
http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

CSS Background


Masih membahas tentang CSS (Cascading Style Sheets) background yang memungkinkan Anda dapat mengatur posisi background, warna elemen background, pengulangan background dan yang lainya. Saya akan membahas CSS yang digunakan dalam pengaturan background secara singkat dan jelas, semoga bisa sedikit membantu Anda dalam mengontrol background dari elemen.

Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.

1. background-color

Memungkinkan Anda memberikan warna pada background











PropertyKeterangan
transparent
Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya.
#FF3366
Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.

Contoh :
#kotak
{
background-color:#FF3366;
}

Menjadi


ELEMEN KOTAK


2. background-image

Memungkinkan Anda menambahkan gambar pada background

PropertyKeterangan
url(URL_GAMBAR)
memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda.
none
Mengosongkan background gambar pada elemen.

Contoh:

#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}

Menjadi :

ELEMEN GAMBAR

3. background-attachment

Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar

PropertyKeterangan
scroll
Memungkinkan elemen background mengikuti penggeseran scroll bar.
fixed
Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.

Contoh

#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}

Menjadi


BACKGROUND FIXED

GESER SCROLL

BACKGROUND FIXES

GESER SCROLL

4. background-repeat

Memungkinkan Anda mengatur pengulangan background gambar

PropertyKeterangan
repeat
Membuat elemen gambar background menjadi berulang-ulang
no-repeat
tidak ada pengulangan
repeat-y
pengulangan vertikal
repeat-x
pengulangan horizontal

Contoh :

#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}

Menjadi :
PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.

PropertyKeterangan
top leftPenempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi :
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.

Contoh:

#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}

Menjadi :


ELEMEN BACKGROUND

PENGULANGAN

ATAS KIRI

Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :

#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}

Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.

TUTOR SINGKAT BLOGGER HACK


Artikel, September 19th, 2008 

Dibawah ini merupakan Kumpulan tutorial singkat Blogspot dan beberapa Blogger Hack yang paling sering ditanyakan. Sengaja saya tidak membuat tulisan per-artikel mengingat penjelasannya terlalu singkat dan terbilang sederhana. Nah..untuk menjawab pertanyaan yang sama dan sering pada komentar dan Imel yang masuk saya kumpulkan aja jadi satu. Silahkan dicoba :)

Agar Title SEO Friendly
Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.
Cari kode title dibawah ini:

<title><data:blog.pageTitle/></title>
Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Menghapus Link Subsribe Post (atom) atau Berlangganan: Posting (atom)
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode dibawah lalu hapus kode warna merah dibawah.

<b:includable id=’feedLinks’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’> <!– Blog feed links –>
<b:if cond=’data:feedLinks’>
<div class=’blog-feeds’>
<b:include data=’feedLinks’ name=’feedLinksBody’/>
</div>
</b:if>

Menghilangkan Navbar
Masuk halaman Edit HTML kemudian letakan dibawah kode <b:skin><![CDATA[
#navbar{height:10px; visibility:hidden; display:none}

Auto Hide pada Navbar Blogger

Pada halaman Edit HTML, kemudian letakan kode dibawah kode <b:skin><![CDATA[

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Mengganti Default Atom dengan RSS
Kadang mungkin kita ingin menggunakan default feed sebagai RRS, caranya masuk halaman Edit HTML, Kemudian cari kode warna hijau dibawah

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Ganti kode warna hijau dengan kode dibawah ini:
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

Memasang Icon Sebelum title Post
Pertama cari .post h3{ pada deretan kode CSS kemudian masukan sesuai kode warna hijau dibawah:

.post h3{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZSIWzWBmeBueaZcsbiVHs-42apyLASRj-fp0t30veHgpWomYdSGnOXrpZ1fAREfZhMRhmsyN88vEmlx56U67qnAMx7X_qBjjGUbMXgISBeILhz0z9ob5pNbq1-NSoZnHlaMvpQQcY_bL/

s400/dotlink.gif") 0px 0px no-repeat; margin:.5em 0; padding:0 20px 0; font-size:120%; font-weight:bold; font-style:normal; line-height:1.3em; color:#333}

Pasang Icon Pada Setiap Judul SideBar

Pertama cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#sidebar-wrapper h2{ background: url("http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/

8XPCqtzzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}

Memasang Icon di link Sidebar
Pertama cari #sidebar-wrapper li{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#sidebar-wrapper li {background:url("http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/

AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}

Memasang Icon Sebelum Title Post pada halaman List Label
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di kemudian masukan sesuai kode warna merah dibawah:

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<img alt='&gt;&gt;&gt;' border='0' src='http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/

8XPCqtzzzs4/s400/dotlink.gif'/>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Pasang Icon Sebelum Jumlah Komentar
Pertama cari #comments h4{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#comments h4{ background:#eee5e5 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfyMTWWuviKuJE_o4DlnwjFnhdx078sjhc4zakwkTUV76oQ81TJwXYkZ5DeyjZYyi_XIpludWIF3VCapkJooNqmBRwcSJKbNjLqW5bZs-yQ56RtL7vTICrY5W79am1OTkpUbiDGMbYN4g/

s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}

Pasang Icon Sebelum Nama Komentator
Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("http://bp3.blogger.com/_C6KkooKXCEw/SJGzpDac4VI/AAAAAAAACGo/

2L5Y5P_BDWU/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}

Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan tulisan sendiri atau bergaya Icon
Anda mungkin ingin mengganti tulisan standar Posting Lebih Baru - Halaman Utama - Posting Lama dengan gaya sendiri atau anda juga bisa menganti tulisan tersebut dengan icon. Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di bawah kemudian ganti kode warna merah dibawah sesuai keinginan.Untuk menganti gaya tulisan sendiri anda bisa langsung menulisnya sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img src="http://loakasit-gambar-anda.com/contoh.jpg"/>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> <data:newerPageTitle/> </a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/> </a>
</b:if>
</b:if>

</div>

Cara mencetak halaman (Print Page)

Anda mungkin ingin mencetak perhalaman langsung ke default Printer, caranya tinggal memasang kode dibawah ini langsung disetiap halaman atau letakan di dalam halaman Post.

<a href="javascript:print(document)"> Cetak Halaman Ini </a>

TANSFER ACCOUNT BLOGGER KE ACCOUNT LAIN

Punya Account Blogger yang berbeda tentu saja susah untuk melakukan manage, kadang hanya untuk memposting blog dengan account lainnya kita harus melakukan logoff terlebih dahulu (kecuali kita login menggunakan web browser berbeda juga), tidak seperti wordpress, blogger tidak mempunyai fasilitas untuk melakukan transfer blog ke account berbeda, sangat disayangkan memang, masa sekelas blogger tidak ada fasilitas ini. Trus gak mungkin dong melakukan transfer blog di blogger? siapa bilang..tentu saja bisa, dengan adanya fasilitas mengundang penulis lain di blogger, ini yang akan kita manfaatkan sebagai transfer antar blog dengan account berbeda.

Cara melakukan Transfer blog dengan account berbeda:

Contoh : Andai kata kita mempuanyai 2 account berbeda sebut saja Account-A dan Account-B, rencana kita ingin melakukan transfer salah satu blog di Account-A ke Account-B, hal yang harus diperhatikan bahwa Account yang memberi kuasa (Account yang mengundang/Account-A) adalah account yang blog-nya akan ditransfer, dengan kata lain Account-B inilah yang akan menerima kuasa penuh terhadap blog di Account-A.

1. Login ke account yang akan di transfer (contoh Acount-A)

2. Kemudian pada "Panel Kontrol" pilih salah satu blog dengan melakukan klik link "Pengaturan"

3. Pada tab pengaturan pilih sub tab "ijin"

4. Klik Tombol "Menambah Penulis"

5. Masukan Alamat Account Gmail anda yang lain (Account -B), dalam hal ini account gmail yang kita undang merupakan account yang akan menerima transfer blog.

6. Jika sudah, kita harus login ke alamat gmail yang di undang (Account-B) dan akan menerima sebuah suran pengundanga untuk bergabung di Account-A.

7. Pada email yang kita terima disitu terdapat link, klik link tersebut bahwa kita setuju untuk berkontribusi ke blog pengundang, jangan lupa masukan kata sandi sebagai tanda persetujuan.

8. Pada halaman "Panel Kontrol" sudah terlihat ada blog baru yang berasal dari account-A

9. Selanjutnya kembali lagi ke Account-A atau kembali ke proses no 1,2 dan 3

10. Pada halaman ini terlihat Account-B yang telah di undang, jangan lupa mengklik link "Berikan hak istimewa setingkat admin" dan menekan tombol "Berikan hak istimewa setingkat admin" pada popup yang muncul.

11. Jika kita tidak ingin menggunakan Account-A dan hanya memberikan hak admin pada Account-B kita dapat menghapus hak akses Account-A dengan mengklik link "memindahkan".

12 Selesai..dan selamat kita sudah melakukan transfer blog dari Acount-A ke Acount-B, untuk transfer blog yang lain caranya sama dengan proses diatas.

Catatan : jika masih ragu bisa tanyakan saya dulu di kolom komentar agar bisa kita diskusikan bersama. thanks

MEMBUAT RANDOM PHOTO DI BLOGSPOT

Pertanyaan diatas pernah ditanyakan oleh salah satu sahabat blogger pada shoutbox, Random photo pada profile yaitu cara mengubah gambar secara bergantian ketika halaman tersebut di-Refresh atau di reload ulang. Jadi gambar tersebut tidak hanya itu-itu saja tapi bisa tampil gambar yang lain sesuai dengan keinginan kita. lebih jelasnya lihat gambar porfile saya yang selalu berubah-ubah.Untuk menjawab pertanyaan yang sama oom posting disini saja ya. codenya selengkapnya bisa dilihat dibawah ini.

Contoh Script :

Tuju ke halaman edit HTML kemudian beri tanda centang pada kotak Expand Widget Templates. kemudian cari kode di bawah ini:

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

Ganti kode yang tercetak tebal di atas dengan kode javascript di bawah ini:

<script>
var pic, alt;
pic = new Array;
pic[0] = "PHOTO-URL“;
pic[1] = “PHOTO-URL“;

alt = new Array;
alt[0] = “My Photo”;
alt[1] = “My Photo”;

var now = new Date();
var seed = now.getTime() % 0xffffffff;

function rand(n) {
seed = (0×015a4e35 * seed) % 0×7fffffff;
return ( seed >> 16 ) % n;
}

var num = rand(2);

document.write(”<a href=’http://www.blogger.com/profile/XXX‘><img alt=’” + alt[num] + “‘ border=’0′ class=’profile-img’ height=’80′ src=’” + pic[num] + “‘ width=’60′/></a>”);
</script>

Perhatikan pada kode yang ditandai dengan huruf tebal. Ganti PHOTO-URL dengan URL foto kamu sendiri, kemudian pada kode var num = rand(2);, angka 2 mewakili jumlah array yang kita buat. Pada contoh di atas berarti ada 2 array, 0 dan 1. Dan selanjutnya ganti kode XXX dengan 20 angka (untuk New Blogger) yang ada pada profil blogger kalian masing-masing.

Sedikit menambahkan jika kalian ingin memodifikasi 6 gambar yang berbeda codenya bisa dilihat di bawah ini

<script>
var pic, alt;
pic = new Array;
pic[0] = “PHOTO-URL”;
pic[1] = “PHOTO-URL”;
pic[2] = “PHOTO-URL”;
pic[3] = “PHOTO-URL”;
pic[4] = “PHOTO-URL”;
pic[5] = “PHOTO-URL”;

alt = new Array;
alt[0] = “My Photo”;
alt[1] = “My Photo”;
alt[2] = “My Photo”;
alt[3] = “My Photo”;
alt[4] = “My Photo”;
alt[5] = “My Photo”;

var now = new Date();
var seed = now.getTime() % 0xffffffff;

function rand(n) {
seed = (0×015a4e35 * seed) % 0×7fffffff;
return ( seed >> 16 ) % n;
}

var num = rand(6);

document.write(”<a href=’http://www.blogger.com/profile/XXX’><img alt=’” + alt[num] + “‘ border=’0′ class=’profile-img’ height=’80′ src=’” + pic[num] + “‘ width=’60′/></a>”);
</script>

Sebelumnya permintaan maaf atas penggandaan kode ini tanpa konfirmasi terlebih dahulu pada nara sumber, Terima kasih buat mas Anang’s Blog untuk sampel codenya.

Code Sumber : http://anangku.blogspot.com/search?q=random

Lupa password blogger?

Apa yang terjadi ketika login ke blogger namun lupa password blogger dan nama user? pasti kita akan panik setengah mati. padahal sudah berusaha mencoba berbagai katakunci namun hasilnya tetap saja nihil, ups sabar-sabar jangan panik pasti ada solusinya. pengen tau caranya lihat dibawah ini.

Cara mendapatkan kembali passoword dan user name di blogger:

1. Masuk aja ke http://www.blogger.com/forgot.g
2. Ada dua pilihan untuk mendapatkan kembali password dan username, disini saya hanya menjelaskan cara pertama yaitu menggunakan alamat url blogger/blogspot.
3. Langkah selanjutnya kita tinggal ikuti instruksi yang ada (karena menggunakan bahasa indonesia saya tidak menjelaskan caranya secara mendetail, saya yakin kalian semua pasti bisa)

Catatan: Informasi alamat url blog akan dikirim kealamat email (gmail), jika dalam beberapa waktu informasi tidak muncul dalam inbox, coba cek di folder spam. Nah pada email yang diterima kita akan melihat beberapa informasi penting, diantaranya jika kita lupa nama sandinya tinggal klik link dibawah kalimat “Apabila lupa sandi Anda, Anda dapat me-reset dengan meng-klik link ini:” kemudian akan muncul halaman bantuan password, masukan kode verifikasi sesuai dalam gambar, kemudian klik “dapatkan kembali password”. hal yang harus diperhatikan bahwa informasi password akan dikirim ke alamat email sekunder ketika pertama kali mendaftar.

Semoga bermanfaat, happy blogging :)

Original by oom

AWAN CAROUSEL

Trik Membuat Cloud Label (Label Awan)

Apaan tu...? Label awan merupakan salah satu bentuk kumpulan daftar label yang ditampilkan seakan-akan berada di atas awan. Trik blogger ini juga sangat menarik untuk di adopsi dalam blog kamu. Kalau biasanya kamu hanya menggunakan label default bawaan widget atau gadget blogger.com, sekarang kamu memiliki salah satu variasinya. By the way... dari pada ngomong melulu lebih baik kita mulai saja triknya.

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>
atau kode-kode yang sejenis dalam template blog kamu.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Tambahkan kode yang berwarna hijau, di bawah kode di atas

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Catatan :
Ganti kode yang berwarna merah secara berturut-turut dengan lebar area label ("240"), tinggi area label ("300"), dan warna area label (#ffffff) sesuai dengan ukuran elemen halaman (lokasi peletakkan label awan) di blog kamu.

Thursday, April 16, 2009

Making Animated GIFs with Free Software in Four Step

Note: apparently you do not need to use Linux to do this. There's a version of MPlayer that runs on Windows in the command line and The GIMP is also cross platform. Has anyone has success with this? I imagine all of the commands would be the same.

MPlayer is a pretty powerful tool for processing video files. It has a built-in command line option that will export specified movie frames to a GIF. Such a feature seems like it would make the guide I'm presenting here obsolete, but the problem with the feature is that the resultant GIF looks terrible: too few colors. As far as I've seen, the best way to get good quality animated GIFs using only free software involves using a combination of MPlayer's command line tools and a little bit of elbow grease in The GIMP. We will export the desired segment of video to a series of JPEG files, then use The GIMP to combine those files into a nicely animating GIF that should look nearly as good as the original video. I believe that it is possible to get MPlayer and The GIMP together in a script that will allow the end user to simply point the script to the desired movie file and the desired segment and the script will do all the "dirty work" and create the GIF. This is my end goal, but I have not taken the time necessary to learn any of GIMP's scripting language. If there is a pre-existing solution that allows one to do what I am trying to show here, I'd love to know about it, so please let me know.

Step 1 (for Debian or Ubuntu users):

sudo apt-get install gimp mplayer

Step 2:

mplayer -ao null -loop 0 -ss 0:11:22 -endpos 5 file.avi

This command will display the segment of file.avi on your screen that runs from 11:22 to five seconds later (11:27). It will loop infinitely until you close the window or send a ctrl+c to the terminal window. This command is useful for figuring out what your GIF will look like before you make it. The audio output will not be heard (is set to null)

Step 3:

mplayer -ao null -ss 0:11:22 -endpos 5 file.avi -vo jpeg:outdir=moviedirectory

This command actually creates the jpeg files you will need to make your animated gif. It is similar to the other command, but nothing is displayed on screen, and the command will not loop forever. The command will output the segment to a series of jpeg files in a directory called "moviedirectory".

Step 4:

Now that we have our directory full of jpegs, we should open the first of these files in The GIMP. Then, open the remainder of the images in the directory as layers (File -> Open As Layers). Every image in that directory should now be a layer. Now save the file as a .gif and choose to "save as animation" as opposed to "flatten image." Click export. Lastly, it is important to make sure "loop forever" is checked if you want a GIF that loops forever. The other options here can drastically change the effect of your gif because they change the speed that the gif is displayed at. A relatively fast gif will have a 15 millisecond delay between frames. The default delay of 100 ms is a bit slow in my opinion. Under frame disposal where unspecified I select "one frame per layer." I check "Use delay entered above for all frames" and "Use disposal entered above for all frames." Here are examples of the end result:





If you find that your image is too large, it is often helpful to resize it to be a bit smaller. This can help with the image's performance.

As Firefox is often the platform where people will be viewing your animated gif files, it is also a good tool to use to test them to see what the final product looks like.

If you found this post useful, share it. There are links to Digg, Reddit, del.icio.us, and other such sites at the bottom of the post.

If you liked this or thought it was cool, you should read my guide on using FFmpeg.

Thanks for reading!

Tuesday, April 14, 2009

Domain co.cc adalah free domain, ini domain loh, bukan subdomain atau redirect. Free domain co.cc sudah lama ada, anda bisa mendaftar secara gratis. Anda bisa menggunakan hosting gratisan yang support own domain. Hosting macam ini sudah banyak kok, anda tidak perlu mengeluarkan uang. Untuk mendaftar di co.cc anda membutuhkan email sebagai username. Satu account berarti satu email bisa digunakan untuk mendaftar maksimal 3 domain. Ada pilihan seting untuk menghubungkan domain co.cc dengan hosting anda yaitu menggunakan dns atau redirect. Saya sendiri biasanya menggunakan dns, belum pernah menggunakan redirect. Berikut ini cara untuk mensetting domain co.cc anda.

  • Masuk ke account anda di co.cc
  • Pilih menu "Get Free Domain"
  • Masukkan nama domain yang anda inginkan di co.cc. Jika anda memilih 'domainku' maka nanti alamat web anda adalah domainku.co.cc
  • Klik check, jika domain yang anda pilih belum digunakan orang lain, maka bisa dilanjutkan ke proses registrasi.
  • Proses registrasi sudah berhasil. Namun anda harus mensetting apakah akan menggunakan DNS atau redirect. Jika anda menggunakan free hosting, maka pilih DNS karena biasanya free hosting menyediakan name servernya. Jika menggunakan 000webhost.com maka DNSnya dns1.000webhost.com dan dns2.000webhost.com
  • Klik menu "My Domain" yang akan menampilkan domain co.cc anda. Klik "Please Setup"
  • Pilih DNS setting, dan masukkan Name Server (NS) hosting anda.
  • Kalau sudah, tunggu hingga 48 jam. Domain baru anda akan disebar di internet.

Domain co.cc adalah solusi hemat membangun situs, apalagi jika anda ingin menggunakan wordpress atau CMS lainnya. Segera daftar di co.cc gratis.

Beberapa hari ini ada yang bertanya baik melalui YM, SMS dan telp, pertanyaannya hampir sama, yaitu berkaitan dengan pembelian dan seting domain, khususnya seting DNS atau NS. Bagaimana sih cara mengeset domain dan hosting agar bisa bersatu. Pada artikel sebelumnya, saya sudah menyinggung pengertian tentang domain dan hosting. Nah, artikel kali ini mungkin hanya akan mengulangi penjelasan diatas dengan sedikit diperjelas. Untuk mempermudah, ada sebuah kasus misalkan saya membeli hosting (hosting saja lho, tanpa domain, yang berarti saya membeli web space saja) pada perusahaan A. Kemudian saya membeli sebuah domain pada perusahaan B. Ini perusahaan yang berbeda. Mana yang lebih dulu dibeli? hosting dulu atau domain?

Kalau menurut pengalaman saya, lebih mudah membeli domain dulu. Disini juga bisa diterapkan pada domain gratis, macam co.cc dan uni.cc. Yang penting domain, masalah gratis atau tidak urusan no 49, he he. Nah, kalau sudah mendapatkan domain, baru kita menuju ke perusahaan hosting. Waktu membeli hosting, pasti akan ditanya 3 hal berikut ini

  1. Apakah sekalian membeli domain ditempat mereka
  2. Apakah akan menggunakan domain milik sendiri (artinya domain yang sudah dibeli tadi)
  3. Apakah akan transfer domain. Waktu membeli domain tadi, registrar domain anda adalah perusahaan B, jika anda akan mentransfer domain, maka registrarnya akan menjadi perusahaan A. Saya belum pernah melakukan ini, jadi tidak ada pengalaman

Pilih yang mana? pada kasus ini, kita pilih yang no 2. Lanjutkan pendaftaran hosting sampai selesai. Setelah membayar untuk hosting, biasanya langsung diaktifkan. Begitu? tentu saja masih kurang, ini bagian yang paling krusial.

Setiap web hosting memiliki alamat NS (name server) atau DNS. Setelah hosting anda aktif, anda pasti akan diberi alamat NS (biasanya melalui email). Alamat NS biasanya seperti ini ns1.webhosting-anda.com dan ns2.webhosting-anda.com. Nah, yang perlu anda lakukan untuk menyatukan hosting dan domain yang beli terpisah tadi adalah memasukkan NS tadi ke dalam setingan domain. Caranya, masuk ke dalam control panel domain anda, bukan Cpanel lho, setiap domain pasti memiliki control panel. Caranya masuk biasanya melalui login di perusahaan tempat anda membeli domain. Kalau tidak tahu, bisa ditanyakan pada Customer Supportnya. Katakanlah anda sudah bisa masuk ke dalam domain control panel. Cari menu yang berhubungan dengan Manage Name Server atau DNS. Kemudian masukkan name server tadi (dalam kasus ini ns1.webhosting-anda.com dan ns2.webhosting-anda.com). Save dan tunggu sampai maximal 2 hari, maka domain dan hosting anda sudah bisa digunakan.

Semoga artikel ini bisa menjawab semuanya. Saya bukannya tidak mau menjawab, justru saya pikir artikel yang saya tulis kurang sakti, sehingga harus bertanya dulu pada saya. Ini pembelajaran bagi saya pribadi agar lebih fokus dalam menulis. Tapi kasusnya lain kalau malas membaca. he he.

Sebelum menggunakan free hosting dan free domain name, ada beberapa point yang perlu diperhatikan. Artikel ini menindaklanjuti pembahasan daftar free web hosting dan free domain name, baca disini dulu. Poin yang dibicarakan disini saya rasa cukup penting sebelum anda menggunakan layanan-layanan tersebut.Apa saja yang perlu diperhatikan ? simak terus bos!

Sebelum menggunakan layanan free web hosting tersebut anda harus tahu dulu tentang ns atau name server. Name server ini dimiliki oleh web hosting, baik yang free atau yang berbayar. Name server ini harus dihubungkan dengan domain name anda. Biasaya dalam Cpanel domain name anda terdapat option untuk mengubah name server ini. Isilah name server (ns) dengan name server web hosting anda. Sebagai contoh jika anda menggunakan 000webhost.com sebagai web hosting anda, maka name server mereka adalah dns1.000webhost.com dan dns2.000webhost.com. Baca disini selengkapnya. Setiap pengubahan seting ns diperlukan waktu sampai maksimal 48 jam agar perubahan tersebut bisa dirasakan. Artinya internet memerlukan waktu sampai 48 jam untuk mengupdate seting website anda. Jika anda mengubah pada saat ini, mungkin saja web anda masih bisa diakses, karena internet belum mengupdate seting anda. Jika tidak bisa diakses, ya ditunggu saja.

Untuk free web hosting, ada beberapa penyedia free web hosting yang memberikan name servernya, jika mereka memberikan informasi tentang name servernya, maka free webhosting tersebut bisa digunakan untuk domian anda sendiri, maksudnya anda bisa membeli domain name dan menggunakan free web hosting tersebut sebagai hosting anda. Jagoan saya kali ini adalah 000webhost.com yang memberikan hosting gratis dan profesional. Tetapi ada juga yang tidak memberikan informasi tentang name servernya.

Ada langkah-langkah (harus urut) yang harus dijalani untuk mendapatkan free domain name dan free web hosting. Pertama anda harus mendaftarkan domain name dulu, baik free domain name maupun yang berbayar, setelah mendapatkannya, baru cari web hosting. Gunakan domain anda tersebut untuk mendapatkan web hosting. Pihak web hosting akan men-seting agar hosting pesanan anda mengarah ke domain anda. Setelah itu biasanya pihak web hosting akan memberitahu alamat name server mereka. Jika tidak tanyakan langsung kepada supportnya. Setelah mendapatkan alamat name servernya, setting option (di Cpanel domain anda) name server domain anda dengan name server web hosting yang baru saja di berikan tadi.

Dengan free hosting dan free domain anda bisa berbuat banyak, misalkan menginstall wordpress, membangun situs iklan baris menggunkan wordpress dan membangun aplikasi web dengan AJAX. And more..

Free domain name dan free web hosting adalah layanan gratis, anda tidak mengeluarkan uang sepeserpun untuk mendapatkan semua itu. Anda harus mematuhi TOS (Term of Service) yang mereka berikan, sekali anda dinilai melanggar, maka anda akan di kenai sanksi, misalkan dibanned. Dan bisa saja anda akan kehilangan data.

Sekali lagi bagi yang pengen punya website dan domain, tapi dana mepet. Free domain dan free hosting. Dijamin dengan barang gretongan (sebutan untuk istilah gratisan, mohon dibiasakan ya :)) anda tidak perlu mengeluarkan uang untuk hosting dan domain. Domain adalah nama dari website anda, hanya nama loh, sedangkan hosting adalah tempat penyimpanan file-file website anda.
Untuk memiliki website anda harus memiliki kedua elemen tersebut, hosting dan domain. Biasanya setiap penyedia free hosting memberikan subdomain, misalkan http://freehosting.com, nantinya subdomain anda adalah http://anda.freehosting.com. Tapi kan tidak keren kalau subdomain ? simak daftar free webhosting dan free domain name berikut ini. Sebagai catatan, saya sudah melakukan riset selama ribuan tahun untuk ini

Berikut daftar free domain name dan free hosting.

Free Domain Name

Dua yang terakhir bisa digunakan untuk domain parking di Park4Money. Yang perlu diperhatikan ketika selelsai mendaftar free domain, anda harus mengeset name servernya agar mengarah ke hosting anda. baca disini selengkapnya.

Free Web Hosting

Ada yang mau menambahkan ?

Blogger Custom Domain pakai .Co.Cc cara seting

.co.cc

Tutorial ini akan menjelaskan cara mudah setting Blogger Custom Domain menggunakan domain gratisan .co.cc yang semakin populer saja. Mungkin sudah banyak yang tahu dan lebih tahu (terutama para suhu di sana) - jangan baca ya oom ntar ketawa. Buat yang baru pertama kali tahu .co.cc silahkan daftar dulu, bagi yang sudah punya account langsung saja login. Artikel tutorial singkat ini akan dimulai pada tahap setelah anda login. Siip dah. Saya anggap sudah pada login ya. Lanjuut deh kalo gitu.

Buat mas oom, eko kacrut, adit, kang rohman, mas Jerry, jangan baca ntar ngakak. ..(kabuur).

add new domain

Setelah login dengan sukses, saatnya membuat domain .co.cc baru dengan mengklik menu "Getting A new Domain".

type new domain name

Ketik nama domain sesuai selera dan yang dikehendaki, kalo bisa yang diridhoi semua orang dan berprospek cerah. Klik saja tombol yang gemesin pingin diklik itu (masa' sih..) - Check availability.

oke available..terus ngapain..?

Tuh kan available. Apa? gak available? cari nama yang lain lah. Kalo dah nemu satu (satu dulu ntar bisa nambah..) tinggal lanjutkan dengan mengklik tombol.. (titik titik - isi sendiri).

setup domain

Di sini anda akan diberi waktu 2 hari untuk menyeting domain baru anda. Sebaiknya langsung saja lakukan. Oke, klik Set up. Kemudian tinggalkan sejenak halaman tsb untuk login ke account Blogger.

Blogger dashboard

Nah, di Blogger buat blog baru [Create New Blog] atau kalo sudah punya blog langsung saja menuju ke setting page alias halaman tempat pengaturan menuju ke Settings > Publishing.

Publishing setting

Klik switch to Custom Domain. Lanjuut..

dah punya domain mas..

Berhubung kita bukan mau beli domain tapi mau pakai domain sendiri (meski gratisan), klik Switch to advanced settings.

advanced settings

Di halaman advanced settings masukkan nama domain yang ingin anda pakai. lalu Save Settings. Kemudian mari kita balik lagi ke halaman seting domain .co.cc tadi (Yuuk marii..).

dashboard setting domain .co.cc

Pada halaman domain setting di website .co.cc terdapat tiga pilihan utama seting domain anda. Seting NS, Zone recoreds, atau redirect. Untuk Blogger custom domain kita akan gunakan masukan/setingan di Zone Records. Pada kolom Add a record, kolom Host masukkan www dan secara otomatis akan berubah sendiri. Pada Type pilih CNAME record. Value isikan ghs.google.com oke.

Agar bisa mengarahkan domain yang kita miliki ke hosting, kita harus mensetting DNS dari domain tersebut agar terhubung dengan web hosting yang kita inginkan. Pada tulisan akan dijelaskan cara setting DNS pada domain gratisan CO.CC . Jika Anda belum punya account di CO.CC segera lakukan registrasi lewat link disini. Setelah itu masukan nama domain yang anda inginkan pada kotak registrasi yang telah disediakan, jika nama domain yang Anda inginkan masih tersedia, tekan tombol sign-up.. Setelah itu isi form yang telah disediakan dengan data anda dan jangan lupa untuk menyetujui TOS (Term of service) yang ada dibawah form.

Untuk melakukan setting DNS domainnya akan ada tampilan seperti dibawah ini:

 

Setting DNS CO.CC

Pada Nameserver1 dan Nameserver2 isilah dengan setting DNS yang biasanya disediakan oleh Hosting Anda, Jika Anda menggunakan 000webhost.com isikan dengan dns1.000webhost.com dan dns2.000webhost.com. Setelah itu tunggu sampai 2×24 jam, maka domain Anda akan sudah bisa aktif.