Bambang's Page

HTML Color Code Generator Widget

noreply@blogger.com (Bambang) — Mon, 07 Nov 2011 03:31:00 +0000

Bambang's Page HTML Color Code Generator Widget

Keterangan:
1. Gunakan slider di sebelah kanan untuk mengganti warna.
2. Klik dimanapun di bagian kotak besar sebelah kiri untuk mengambil warana.
3. Ketika anda telah mendapatkan warna yang sesuai dengan keinginan anda,Copy nilai hexsadesimal(Hex)dibagian bawah kotak paling kanan (6 angka /hurup hitam contoh:#000000). Provided by Bambang's Page

Selamat mencoba....

Feature Baru Dari Blogger “Follow by Email”

noreply@blogger.com (Bambang) — Sun, 06 Nov 2011 02:58:00 +0000

Baru-baru ini blogger meluncurkan satu gadget baru yang dapat di bilang cukup penting bagi para blogger yaitu “Follow by Email”,gadget ini memperkenankan para pembaca blog anda untuk berlangganan melalui email.

Ke istimewaan dari gadget ini adalah :

# Mudah di terapkan pada blog.

# Mengirimkan Postingan blog ke mail box para pembaca.

# Merinci statik jumlah pelanggan(subcriber).

Dan adapun cara mengaplikasikan feature ini adalah :

1. Log in ke Blogger klik disini

2. Pada Dasboard pilih Design

3. Pada halaman design pilih add gadget dan anda akan mememuakan “Follow by Email” gadget berada paling atas pada daftar halaman gadget.

4. Klik gadget “Follow by Email” pada halaman gadget tadi maka akan muncul winddow baru seperti di gambar di bawah ini.

*Isi kotak title dengan kata yang anda inginkan.
*Tinggalkan kotak Feedburner URL seperti adanya.
*Klik save untuk menyimpan.

Anda akan mendapati gadget tersebut pada side bar blog anda .

Selamat mencoba dan semoga bermanfaat...

Cara Membuat Forum Pada Blogger

noreply@blogger.com (Bambang) — Wed, 26 Oct 2011 23:50:00 +0000

Forum merupakan salah satu tempat yang bagus untuk berbagi ilmu pengetahuan,ide-ide dan membuat percakapan dengan para pengunjung atau blogger yang lain.Forum sangat berbeda sekali dengan blog,forum memperbolehkan para pembaca berinteraksi dengan yang lain, membuat topik baru dan bahkan beberapa dari mereka menjadi moderator bersama anda dalam forum-forum tersebut.

Dan adapun langkah-langkah membuat forum pada blogger tersebut adalah :

1. Buat statis page baru pada blog anda (baca disini).

2. Buat sebuah forum baru pada nabble dan copy html code setelah membikin forum pada nabble.

3. Buka Blogger Dashboard -> Design -> Edit HTML dan beri tanda centang pada "Expand Widget Tempaltes".

4. Cari kode dibawah ini pada HTML blog anda, tekan (CTRL+F) untuk mencarinya.

<div id='content-wrapper'>

jika anda tidak menemukan kode seperti di atas cari kode di bawah ini (Untuk templete baru dibuat untuk blogger templete designer).

<div class='columns fauxcolumns'>

5. Letakan kode di bawah ini tepat diatas kode yang anda cari pada no.4

<b:if cond='data:blog.url == &quothttp://cilimoes.blogspot.com/p/cilimoes-forum.html"'>
PASTE_CODE_FROM_NABBLE_HERE
</b:if>

ganti kode yang berwarna merah dengan link halaman forum (forum page) anda.

6. Simpan Templete anda.

7. Untuk menghilangkan (post content, sidebar widgets dan sebagainya)dan hanya forum yang akan tampil pada halaman forum(forum page).

Cari Kode di bawah ini (pada templete anda) tekan (CTRL+F) untuk mencarinya.

</head>

kemudian copy kode di bawah ini dan pastekan tepat di atas kode tadi.

<b:if cond='data:blog.url == "http://cilimoes.blogspot.com/p/cilimoes-forum.html"'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
.columns, .fauxcolumns {
display:none !important;
}
</style>
</b:if>

Ganti kode yang berwarna hijau diatas dengan link forum page anda .

Selamat mencoba dan semoga bermanfaat......

Membuat Statis Page Pada Blogger/Blogspot

noreply@blogger.com (Bambang) — Thu, 13 Oct 2011 01:24:00 +0000

Statis page merupakan salah satu feature blogspot yang dapat dibilang baru,dan kini dapat di nikmati pada blogspot/blogger.Adapun kegunaan dari statis page adalah kita dapat membuat halaman baru yang terpisah dari postingan yang dapat kita gunakan seperti untuk membuat About-Us/Contact-Us/Privacy-Policy/Forum form/Advertise dll,Halaman ini sama seperti postingan biasa pada blogger dimana anda dapat mengedit isi dari halaman , namuan yang berbeda dari halaman postingan biasa yaitu halaman statis ini tidak akan nampak pada blogs feed serta blogs follower reading list.Pengunjung blog anda dapat mengakses halaman statis ini hanya jika mereka mengetahui Url dari halaman tersebut,jadi anda harus membuat link kehalaman statis ini dari layout blog anda atau postingang anda sehingga mereka dapat membacanya.

Dan adapun langkah langkah membuat statis page ini adalah :

1. Login ke blogger account ( Saat ini anda tidak perlu lagi log in ke blogger in draft untuk membuat statis page).

2. Pada dasboard pilih Edit post Kemudian klik Edit page (lihat gambar dibawah ini yang di beri tanda merah).

3. Selanjutnya klik New Page dan akan membuaka page editor yang mirip dengan editor postingan yang biasa kita buat untuk membuat postingan.

4. Isi Page title dengan judul yang anda inginkan, tulis beberapa baris pada bagian konten dan klik publish Page pada bagian bawah sebelah kiri.

Catatan : Di bagian bawah setelah anda klik post option pada edit page standar (default) Reader Comment berada pada "Don't allow, hide existing" maka anda tidak akan mendapati form komentar di bawah halaman statis page,jika anda menginginkan form komentar muncul di bawah halaman tersebut pilih Alllow sebelum mempublishnya pertama kali.

5. Kemudian akan terbuka halaman dimana anda akan diminta untuk memilih link untuk menampilkan statis page ini(Blog Sidebar,Blog Tab Dan NO GADGET (link pages manually)).

Pilih No gadget (link pages manually)dan klik SAVE AND PUBLISH.

6.Klik View Page Untuk mendapatkan URL dari statis page yang anda telah buat (lihat gambar di bawah ini yang di beri tanda merah).

7.Copy URL pada Addres bar (url untuk membuat link ke statis page yang telah anda buat).

Keterangan :

1. Saat ini anda bisa menambahkan 20 statis page pada 1 blog (yang sebelumnya hanya bisa 10 statis page pada 1 blog).

2. Jika anda sudah menggunakan Blogger heck untuk menampilkan hanya title pada arhive/label pages dimana hanya title saja yang muncul pada halaman dan isi halaman tersebunyi,Hilangkan blogger trik tersebut jika anda ingin membuat statis page pada blog anda.

Selamat mencoba dan semoga bermanfaat.....

Menambahkan Youtube Channel Tab Ke Facebook Page

noreply@blogger.com (Bambang) — Mon, 10 Oct 2011 19:53:00 +0000

Ada sebuah Website yaitu involver yang menyediakan layanan untuk membuat tab baru (Tab youtube Channel Anda) pada facebook page ,selain itu juga invlover menyediakan feature-feature lain untuk tab pada facebook page anda seperti halnya rss feed blog,twitter feed,photo flicker dan lain-lain.

Sesuai judul postingan kali ini yaitu Menambahkan Youtube Channel Tab ke facebook Page ada beberapa persyaratan yang harus kita penuhi tentunya yaitu :

1. Anda di haruskan memiliki facebook page tentunya (jika anda belom memilikinya lihat disini Cara Membuat Facebook Fanpage ).

2. Anda juga harus memiliki youtube channel tentunya (jika anda belom memilikinya lihat disini Cara membuat Account Pada Youtube).

3. Kemudian Klik link http://www.involver.com/applications/maka akan muncul web invlover kemudian pilih applikasi YouTube Channel dan klik install (yang di beri tanda merah) lihat gambar di bawah ini .

4. Kemudian pilih facebook page yang ingin anda tambahkan tab youtube channel (lihat gambar di bawah ini).

5. Kemudian klik Add youtube for page (lihat gambar dibawah ini yang di beri tanda merah).

6. Isi form dengan youtube user/channel name anda , beri tanda centang pada kotak kotak kecil sesuai dengan yang anda ingin kan untuk tampil pada facebook page anda,pilih Feature video yang ingin anda tampilkan latest (terbaru) atu oldest (terlama),Dan klik save changes ( Lihat gambar di bawah ini yang di beri tanda merah ).

7. Selesai selamat mencoba dan semoga bermanfaat ....

Import Postingan Blog/Web Ke Facebook Fanpage

noreply@blogger.com (Bambang) — Sat, 26 Feb 2011 15:56:00 +0000

Jika anda ingin membuat fanpage (halaman penggemar) untuk website,blog atau perusahaan,fanpage anda akan lebih informative jika anda menambahkan isi postingan website/blog kedalam fanpage tersebut.Nah hal ini dapat anda lakukan dengan menambahkan rss feed ke facebook fanpage anda.Dengan menambahkan rss feed ke facebook fanpage juga dapat memberikan kesempatan kepada para penggemar fanpage anda untuk mengetahui lebih jauh tentang isi dari blog atau website anda, serta memberikan keuntungan bagi anda karna dengan demikian akan memberikan lebih banyak penggunjung ke blog atau website anda.

Dan adapun langkah-langkah import postingan blog tersebut adalah :

1. Log in Account Facebook anda .
2. Buka fanpage anda.
3. Pilih/klik edit page (lihat gambar di bawah ini yang di beri tanda merah).

4. Pilih/Klik Apps (lihat gambar di bawah ini yang di beri tanda merah).

5. Pada halaman Add Apps cari aplikasi notes dan klik Go to App (lihat gambar di bawah ini yang di beri tanda merah).

6. Pada halaman Apps notes ,pilih notes dari halaman fanpage anda (lihat gambar di bawah ini yang di beri tanda merah).

7. Setelah selesai langkah ke 6,pilih/klik edit import setting di bagian bawah halaman (lihat gambar di bawah ini yang di beri tanda merah).

8. Pada halaman import blog masukan feed url blog/website anda, beri tanda centang pada kotak kecil sebelum tulisan "By entering a URL",klik Start Importing (lihat gambar di bawah ini yang di beri tanda merah).

9. Setelah selesai langkah ke 8,klik confirm ,maka postingan blog/website anda secara otomatis masuk ke note tab anda .

Selesai dan semoga bermanfaat.....

Menambahkan Youtube Video Pada Static FBML

noreply@blogger.com (Bambang) — Thu, 17 Feb 2011 19:52:00 +0000

Pada Tutorial sebelumnya kita pernah membahas tentang cara Menambahkan Comment Box Di Facebook Fanpage FBML.Sebagai lanjutan dari tutorial sebelumnya kali ini kita akan membahas tentang menambahkan youtube video pada Static FBML.

Sebagai catatan tentang menambahkan youtube video pada static FBML, berikut ini keterangan yang harus kita pahami:

1. Static FBML hanya dapat digunakan pada fanpage (halaman penggemar),bukan profile pribadi (personal profile) atau halaman group (group page).

2. Anda diperkenankan menggunakan CSS,HTML dan FBML pada halaman ini.

3. Video tidak dapat langsung mulai (start) ketika loading halaman,facebook memerlukan user(pengguna) melakukan klik pada video untuk loading flash atau javascript.

4. Untuk menempatkan posisi video ,letakan kode fb:swf dalam sebuah div,atur lebar video dan posisi div dengan css.

Dibawah ini kode yang bisa anda gunakan untuk menambahkan youtube video tersebut.

<div style="margin:0 auto; width:492px;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='492' height='391'/>
</div>

Keterangan :

* Anda bisa merubah div syle sesuai dengan keinginan anda .
* Ganti nilai "swfbgcolor" dan "imgstyle" sesuai keinginan anda.
* Ganti "xxxxxxxxxx" dengan video youtube ID yang anda inginkan.
* Agar video anda berjalan hanya dengan satu kali klik pada image aktivasi,anda bisa menambahkan "&autoplay=1" ke swfsrc URL lihat contoh dibawah yang berwarna hijau.

swfsrc='http://www.youtube.com/v/NH7XTCdKeeY&autoplay=1'.

Selesai dan semoga bermanfaat.

Menambahkan Comment Box Di Facebook Fanpage FBML

noreply@blogger.com (Bambang) — Tue, 15 Feb 2011 20:25:00 +0000

Comment Box pada facebook fanpage merupakan cara terbaik untuk menggetahui apa yang ada dipikiran fan (penggemar) facebook page atau blog anda.pertama-tama kita harus menambahkan applikasi fbml ke facebook fanpage kita baca pada postingan (Cara Membuat Facebook Landing Page)dimana anda akan menemukan cara menambahkan static fbml pada facebook fan page anda.nah pada artikel kali ini,sesuai dengan judul postingan yaitu Menambahkan Comment Box Di Facebook Fanpage FBML ada beberapa langkah yang harus kita lakaukan.

Adapun langkah-langkahnya adalah:

1. Anda telah memiliki facebook fanpage tentunya.Bagi yang belum baca (Cara Membuat Facebook Fanpage).

2. Tambahkan Satatic FBML pada facebook fanpage kita, baca di sini.

3. Tambahkan kode di bawah ini pada pada FBML facebook fanpage anda

<fb:comments xid="bambangpage_comments" canpost="true" candelete="false" returnurl="http://www.facebook.com/bambangpage dot blogspot dot com">
<fb:title>Comments here...</fb:title>
</fb:comments>

Ganti tulisan yang berwarna hijau sesuai dengan page milik anda .

selesai dan semoga bermanfaat....

Static FBML Css Untuk Internet Explorer

noreply@blogger.com (Bambang) — Mon, 14 Feb 2011 14:58:00 +0000

Artikel kali ini akan menjelaskan bagaimana membuat CSS untuk static fbml agar bekerja pada internet explorer (IE 6, IE 7 atau IE 8).

Internet Explorer browser tidak membaca CSS style inline dengan menggunakan metode di bawah ini :

<style>
Code Css Anda
</style>

Agar bekerja pada internet explorer ,anda harus menggunakan external stylesheet dan memanggilnya dengan menggunakan metode di bawah ini :

<link ref="stylesheet" type="text/css" href="URL-TO-STYLESHEET" />

Buat anda yang belum pernah membuat code dan benar-benar tidak mengetahui cara membuat external stylesheet ikuti tip-tip dibawah ini:

1. Buka notpad anda.

2. Masukan Css kode anda tanpa tag <style> ... </style>.

3. Simpan stylesheet file yang anda buat pada notpad tadi sehingga menjadi css extension (Extension ".css" nama pada css extension tanpa spasi).

4. Upload stylesheet file yang anda buat tadi ke web server/hosting .

Menerapkan external stylesheet pada static FBML agar bekerja pada Internet Explorer.

Ketika mengedit FBML Box anda

Terapkan CSS styles seperti gambar dibawah ini :

Tidak seperti Gambar di bawah ini :

Selesai tutorial tentang facebook static fbml kali ini

semoga bermanfaat....

Cara Membuat Facebook Landing Page

noreply@blogger.com (Bambang) — Wed, 26 Jan 2011 22:49:00 +0000

jika anda adalah seorang admin dari sebuah facebook fanpage .Tidak ada banyak cara untuk menyesuaikan Halaman Penggemar (fan page)Hanya dengan aplikasi default yang ada pada facebook.Meskipun anda dapat memposting isi halaman dengan jenis konten yang berbeda,tapi design dan layout dari halaman anda sama seperti profile facebook pada umumnya.Dengan membuat sebuah facbook landing page,ini akan membantu fanpage (halaman penggemar) anda terlihat berbeda dengan yang lain.ada beberapa alplikasi facebook yang bisa anda install untuk facbook fanpage (Halaman Penggemar)untuk membuat landing page.Landing page ini berfungsi untuk mendorong para pengguna facebook untuk menjadi penggemar dari facebook fanpage anda.

Dibawah ini contoh dari halaman facebook yang menggunakan landingpage :

1. Nokia
2. Coca-Cola
3. Visa

Dan jika anda ingin membuat landing page sendiri di bawah ini andalah langkah-langkahnya:

1. Tambahkan aplikasi Static FBML ke facebook fan page anda

langkah-langkahnya :

* Buka halaman aplikaasi Static FBML klik di sini
* Klik Add to My page link yang berada di bawah image profile Static FBML.
* Selanjutnya akan muncul pop up yang berisi halaman facbook anda .Pilih halaman facebook fan page yang ingin anda tambahkan static fbml
* Klik tombol Add to Page.
* maka Aplikasi Fbml sudah ada pada facebook fan page anda .

2.Menambahkan konten ke facebook landing page anda

* Klik edit page di bawah image profile fan page anda
* Pilih Aplikasi (Apps).
* Cari Fbml aplikasi yang sudah anda tambahkan tadi dan klik link Go to Application.
* Pada halaman edit FBML ,Box title merupakan nama dari tab yang ingin anda gunakan pada facbook fan page anda dan Box Fbml merupakan tempat dimana anda dapat menambah kan isi serta standar kode html(image tidak lebih dari 520 pixels,jangan menambahkan HTML,Head,atau Body tag ).

3. Set up tab untuk landing page

* Klik edit page di bawah image profile fan page anda
* Pilih Aplikasi (Apps).
* Cari Fbml aplikasi yang sudah anda tambahkan tadi dan klik link edit setting.
* Maka akan muncul pop up "Edit Static Page Setting"
* Klik link add di bagian sebelah kanan tulisan tab pada pop up "Edit Static Page Setting" sehingga tulisan available menjadi added dan add menjadi remove.

4. Membuat FBML tab menjadi default landing page.

* Buka halaman wall fan page(halaman Penggemar) anda.
* Pilih setting (berada di sebelah kanan di bawah kotak dimana anda akan meberikan status pada wall fan page anda )
* Pada form View setting terdapat tulisan “Default Landing Page for Everyone Else”,pilih nama dari FBML tab yang telah anda buat Pada no 2 (Menambahkan konten ke facebook landing page anda) tadi.

Selesai dan semoga ber manfaat.

Cara Membuat Facebook Fanpage

noreply@blogger.com (Bambang) — Tue, 25 Jan 2011 17:52:00 +0000

Facebook Page adalah profile umum yang memungkinkan anda untuk berbagi bisnis atau produk dengan para pengguna facebook(users).Dengan fanpage anda dapat berbagi foto-foto,memungkinkan penggemar pada fanpage anda melihat acara mendatang yang telah anda jadwalkan dan banyak lagi.

Dan adapun langkah langkah membuat facebook fanpage adalah:

1. Buka halaman www.facebook.com pada browser anda.Kemudian log in ke account facebook anda.Pilih link Advertising yang berada di bawah halaman home facebook anda.

2. Pada Halaman Facebook Advertising pilih (klik) link Facebook Pages.

3. Kemudian pada halaman berikutnya pilih (klik) create a page button di sebelah kanan atas halaman .

4. Pada Halaman Create Page akan ada form isian, pilih (Brand, product and organization)pada form sebelah kanan. Kemudian pilih website. Sebenarnya ini terserah Anda mau pilih yang mana, namun karena saya mencontohkan untuk promosi blog, maka saya pilih website.Isi Page name dengan nama halaman yang anda inginkan,centang kotak kecil pada sebelah kiri "I'm the official representative of this person, business, band or product and have permission to create this Page.Review the Facebook Terms".

5. Pilih (klik)Create Official Page Button di bagian bawah halaman,maka fanpage anda akan langsung jadi .

6. Selanjutnya lengkapi informasi untuk facebook fanpage anda,Upload logo atau photo dan input informasi untuk Facebook Fan Page/Public Profile anda dan click publish.

Selesai dan semoga bermanfaat

Membuat Link Window PopUP Tampil Di Tengah Layar

noreply@blogger.com (Bambang) — Tue, 18 Jan 2011 15:44:00 +0000

Ketika anda membuat postingan adakalanya anda perlu menyisip kan sebuah link pada postingan anda.Dan saya yakin setiap blogger pastinya sudah tau bagai mana cara membuat link tersebut,karena membuat link merupakan bagian dari keharusan yang anda kuasai dalam dunia per blogan (Dunia Tukang blog).Tapi bagai manakah jika anda ingin menampilkan Window Popup ketika anda klik link tersebut tampil di tengah layar monitor? Jika anda ingin membuat nya ikuti langkah langkah di bawah ini :

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Design/rancang .

3. Pilih Edit HTML .

4. Backup terlebih dahulu templete anda , klik pada tulisan Download Full Template

5.Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

]]></b:skin>

6. Copy kode dibawah ini, lalu pastekan di bawah kode tadi.

<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>

7. Ketika membuat link pada postingan ,Tambah kan Kode yang berwarna merah pada kode link yang ingin anda buat lihat kode dibawah ini .

<a href="http://bambangpage.blogspot.com/?m=1" onclick="NewWindow(this.href,'name','500','500','yes');return false"><b>Bambang's Page</b>
</a>

Contoh link diatas hasilnya akan seperti link di bawah ini

Klik link >> Bambang's Page

Ubah angka 500 sesuai dengan ukuran window yang ingin anda tampilkan .

selesi semoga bermanfaat.....

Templete Persi Hand Phone (Mobile) Untuk Blogger

noreply@blogger.com (Bambang) — Mon, 17 Jan 2011 18:24:00 +0000

Saat ini Blogger telah merilis mobile templete,dengan menggunakan fiture ini templete blog anda akan terlihat keren pada Smartphone.Mobile templete ini akan memformat Blog anda untuk Hand phone (mobile phone).Fitur ini masih tersedia dalam Blogger Draft Dashboard belum pada Regular Dashboard.Jadi jika anda ingin mencoba fitur ini anda harus log in ke http://draft.blogger.com.

Dan adapun langkah - langkah untuk mengaktifkan fiture ini adalah:

1. Login Ke http://draft.blogger.com

2.Pilih Settings > Email & Mobile dan pilih Yes Option.

3. Klik Mobile Preview untuk melihat contoh hasilnya.

4. Klik Save Settings Button untuk menyimpan.

Sekarang jika Seseorang mengunjungi blog anda melalaui hand phone (mobile phone),dia akan diarah kan secara otomatis pada blog anda dalam persi mobile.

Jika anda mengaktifkan adsense ads pada blog anda ,maka Adsense mobile ads akan tampak dalam persi mobile.Ini masih dalam draft,mari kita tunggu kelanjutan templete dalam persi mobile ini.

Di bawah ini contoh preview dari persi mobile (hand phone).

1. Bambang's Page

2. Cilimoes

Selesai sealamat mencoba.....

Tambahan Font Pada Blogger Templete Designer

noreply@blogger.com (Bambang) — Mon, 17 Jan 2011 09:15:00 +0000

Sebelumnya jika kita ingin menambahkan Custom font pada blogger kita harus menggunakan Google Font Api.Nah saat ini blogger telah mengintegrasikan custom font tersebut pada blogger templete designer.Ini artinya kita tidak perlu lagi mengedit templete kita jika ingin menggunakan custom font.

Sayangnya Fiture ini belum tersedia pada regular dashboard.Jadi jika anda ingin menggunakan Custom font ini anda harus log in Ke Blogger Draft Dashboard.Fiture ini dapat anda gunakan untuk semua templete yang disediakan Blogger templete designer dan Templete dari pihak ke tiga (third party).

Dan ada pun cara menggunakan Font tersebut adalah:

1. Login Ke http://draft.blogger.com dan pilih Design > Template Designer

Pada tab advanced,anda bisa mengganti font text yang berbeda pada blog anda.pilih jenis teks yang ingin anda ubah dan di kotak sebelah kanan merupakan daftar font (termasuk beberapa style font terbaru dari Google Font repository)disini.Anda tinggan memilih font yang anda sukai dan meninjaunya pada Designer dibagian bawah,dan jika anda puas dengan font pilihan anda,Anda dapat menerapkan perubahan pada blog anda dengan meng klik Apply to Blog Button dibagian pojok kanan atas pada Blogger Templete Desiner.

Selamat mencoba dan semoga bermanfaat...

Cara Membuat Random Post Dengan Image Thumbnail Di Blogger

noreply@blogger.com (Bambang) — Sun, 16 Jan 2011 10:41:00 +0000

Random post gadget merupakan sebuah gadget yang akan menampilkan daftar postingan pada blog anda secara acak di bagian sidebar blog.Sebelumnya saya pernah memposting tentang Cara Membuat Postingan Terbaru ( Recent Post) Dengan Image Thumbnail Di blogger,nah perbedaan dari random post dan recent post ini adalah pada random post daftar postingan akan ditampilkan secara acak sedangkan pada recent post daftar postingan tampil secara berurutan dari postingan terbaru sapai postingan terlama dan tidak acak.

Keterangan tentang berbagai pilihan (option) dalam menapilkan gadget ini:

Maximum Length of Post Title-Gunakan parameter ini untuk membatasi title postingan dengan jumlah X dari karakter.

Snippet Style-Anda Bisa menampilkan snippet dengan ringkasan postingan (post summery),image postingan (Post Thumbnail),atau kedua-duanya bahkan tidak sama sekali.

Feed-Ada dua pilihan atau option di bagian ini yaitu “Summary Feed” dan “Full Feed”.“Summary Feed” ini merupakan pilihan (option) yang lebih cepat dan efisien dalam menampilkan feed ringkasan postingan(disarankan anda memilih optin “Summary Feed”ini).“Full Feed” dan jika anda memilih full feed option,ini akan menampilkan YouTube Thumbnails(image thumbnail youtube)juga tapi gadget akan lebih lambat.

Thumbnail Dimensions-Sesuai kan ukuran thumbnail (image) dengan menggunakan option ini.

Summary Length-Jika anda telah memilih post Summary (ringkasan postingan) Anda dapat menyesuaikan panjang ringkasan dalam karakter dengan optin ini.

Post Meta Style-Anda dapat menampilkan Tanggal Postingan (Post Date),Jumlah Komentar yang masuk (Comment Count) and sebuah Link Read More .and bisa memilih dari ketiga kombinasi tersebut.

Font dan Font Size-Default,kontainer font(container’s font) dan ukuran font (font size)"inherit from blog" jika anda memilih option ini maka font dan fon size akan tampil sesuai dengan font dan fon size dari blog anda .Tapi jika anda menggunakan 3rd party template anda bisa menggunakan option ini untuk menyesuaikannya.

Extra Styling-Anda bisa memilih dimana anda akan menampilkan image thumbnail (dikiri/dikanan),dan atau anda ingin menggunakan garis bawah (underline) pada link atau tidak.

Border Color-Anda bisa menggunakan optin ini utuk memilh menggunakan warna border yang sesuai dengan blog anda atau bahkan tanpa border.

Link Color dan Text Color-Default,"inherit from blog"ini akan menampilkan warna link (link color) dan warna text (text color) sesuai dengan warna link dan warna text pada blog anda .Tapi jika anda ingin menggunakan warna yang berbeda anda biasa memilih satu dari 140 wanrna yang berbeda.

(Pilihan warna disediakan pada dropdown )

Read More Text -Pada bagian ini anda bisa menuliskan tulisan untuk membaca lebih lanjut dari isi postingan.

contoh :Read More,More,Baca Selengkapnya atau Baca Lebih lanjut.

Nah adapun cara pembuatan Random Post dengan Image Thumbnail tersebut adalah :

Klik link image di bawah ini

Selamat mencoba dan semoga bermanfaat.....

Cara Menampilkan Widget Pada Halaman Statis-Postingan Tertentu

noreply@blogger.com (Bambang) — Sat, 15 Jan 2011 04:15:00 +0000

Sebagai lanjutan tutorial sebelumnya (Cara Menampilkan Widget Hanya Pada Homepage - Postpage -Arsippage).Pada postingan kali ini kita akan membahas tentang bagai mana menampilkan widget pada halaman statis dan Postingan tertentu pada blogger.

Dan adapun langkah langkahnya sebagai berikut:

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Design/rancang .

3. Pilih Edit HTML .

4. Backup terlebih dahulu templete anda , klik pada tulisan Download Full Template

5. Beri tanda centang pada "Expand Widget Templates".

6. Kode yang akan kita gunakan (yang berwarna merah)

menampilkan widget hanya pada halaman statis lihat kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'>
Halaman Statis
</b:if>

Menampilkan widget pada sebuah halaman tertentu (postingan tertentu)

<b:if cond='data:blog.url == "Halaman_Postingan_tertentu_Url"'>

ini akan muncul pada halaman postingan tertentu

</b:if>

Ganti Halaman_Postingan_tertentu_Url dengan url postingan yang ingin anda tampilkan bersama postingan tersebut.

Selesai

Selamat mencoba dan semoga bermanfaat....

Cara Menampilkan Widget Hanya Pada Homepage - Postpage -Arsippage

noreply@blogger.com (Bambang) — Sat, 08 Jan 2011 17:15:00 +0000

Ketika anda menambahkan widget pada blogger,widget tersebut akan tampil pada homepage dan semua halaman postingan .Dengan menambahkan sedikit scrip pada bagian kode html widget tertentu saat ini anda akan dapat menampilkannya hanya pada homepage,postpage atau arship page tertentu saja.

Dan adapun langkah-langkahnya sebagai berikut :

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Design/rancang .

3. Pilih Edit HTML .

4. Backup terlebih dahulu templete anda , klik pada tulisan Download Full Template

5. Beri tanda centang pada "Expand Widget Templates".

6. Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

<b:widget id='HTML1

Nomer 1 yang berwarna biru tersebut bisa 2345..dst sesuai dengan keinginan anda (widget mana yang ingin anda tampilkan atau sembunyikan pada halaman yang berbeda).

7. Tambah kan kode yang ber warna merah seperti pada kode-kode di bawah ini pad "I.II.III" Pada widget yang ingin anda tampilkan atau sembunyikan.

I. Untuk menampilkan widget hanya pada hompage atau halaman utama lihat kode di bawah ini .

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

II. Untuk menampilkan widget pada semua halaman postingan (tidak pada homepage) lihat kode di bawah ini.

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

III. Untuk menampilkan widget pada arsippage (halaman arsip) lihat kode di bawah ini.

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Selesai semoga bermanfaat.....

Cara Membuat Page Navigation ( Navigasi Halaman) Dengan Nomor Pada Blogger

noreply@blogger.com (Bambang) — Thu, 06 Jan 2011 16:13:00 +0000

Navigasi halaman (Page Navigation) adalah sebuah navigasi yang menawarkan pembaca blog/web untuk dapat dengan mudah menjelajahi arsip blog /web lebih dalam lagi.Nah pada blogger navigasi halaman ini menggantikan default blog pager (link ke newer, older dan home halaman) dengan nomor halaman navigasi.Selain itu, navigasi halaman ini menawarkan anda untuk dapat menyesuai kan Jumlah link-link halaman dan jumlah postingan-postingan yang di tampilkan pada setiap halaman.

Dan adapun cara pembuatanya adalah:

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Design/rancang .

3. Pilih Edit HTML .

4. Backup terlebih dahulu templete anda , klik pada tulisan Download Full Template

5. Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

]]></b:skin>

6. Copy kode dibawah ini, lalu paste di atas kode tadi

/* Start Page Navigation Css */
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
/* End Page Navigation Css */

7. setelah langkah ke 6 selesai Cari kode dibawah ini (Gunakan Ctrl+F untuk mencari kode).

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

8. Selanjutnya copy kode di bawah ini dan pastekan tepat di bawah kode diatas tadi

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

9. kemudian klik save untuk menyimpan templete.

Keterangan :

Pada kode di atas Anda hanya dapat mengedit untuk menyesuaikan bar navigasi Anda.

var pageCount=10;Dalam kode ini Nomor 10 megatur jumlah pesan per halaman, Anda bisa mengubahnya untuk memilih berapa banyak postingan per halaman yang ingin ditampilkan.

Catatan: Nilai Nomor harus sama Dengan pengaturan account di blogger Anda
Pengaturan dapat ditemukan dengan masuk ke Dashboard>> Pengaturan>> Format>> Tampilkan>> 10 posting

Kode di bawah ini

var displayPageNum=6pada kode ini nomor 6 mengatur jumlah halaman yang akan di tampilkan pada bar navigasi.

Sedangkan kode di bawah ini.

var upPageWord ='Previous';
var downPageWord ='Next';

Anda bisa mengganti tulisan Previous atau Next dengan tulisan yang anda inginkan .

selesai dan semoga bermanfaat....

Cara Menampilkan Postingan Hanya Judul Postingan Saja Di Blogger

noreply@blogger.com (Bambang) — Tue, 04 Jan 2011 16:33:00 +0000

Mungkin anda pernah berkunjung kesebuah blog dan anda mendapati blog yang hanya menampilkan judul postingan saja pada halaman depan atau home, mengapa bisa demikian?bagaimanakah caranya?.Beberapa Blogger memilih hanya menampilkann Judul postingan saja pada halaman depan atau homepage mungkin dikarnakan mereka ingin menghemat ruang pada halaman depan sehingga mereka bisa menampilkan lebih banyak lagi postingan atau mungkin mereka berfikir bahwa hanya menampilkan judul postingan saja di halaman depan sudah mewakili isi dari postingan tersebut.

Dan adapun cara-cara menampilkan judul postingan saja pada halaman depan adalah:

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Design/rancang .

3. Pilih Edit HTML .

4. Backup terlebih dahulu templete anda , klik pada tulisan Download Full Template

5. Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

]]></b:skin>

6. Copy kode dibawah ini, lalu paste di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

7. Klik tombol SIMPAN TEMPLATE.
8. Selesai. Silahkan lihat hasilnya.

Semoga Bermanfaat....

Cara Memasang Jadwal Sholat Pada Blogger

noreply@blogger.com (Bambang) — Mon, 03 Jan 2011 17:51:00 +0000

Bagi anda para blogger yang beragama muslim , dan ingin selalu mengingat dan mengingat kan jadwal sholat pada para pengunjung blog anda agar tidak terlalu terlena dengan artikel-artikel yang sedang di baca,ada aksesoris blog yang disediakan oleh http://www.islamicfinder.org,untuk kita gunakan pada blog kita.Dan adapun cara memasangnya adalah sebagai berikut :

1. kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !

2. Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah

3. Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan Select a Country

4. Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia

5. Klik nama kota yang sobat inginkan. Contoh : Kuningan 1

6. KLik tombol Generated Code

7. Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di simpan ke blok kita

8. Silahkan tutup window situs tersebut

9. Selesai.

Langkah diatas adalah cara mendapatkan kode jadwal sholatnya, untuk memasukan kode tersebut ke dalam blog, silahkan ikuti langkah berikut :

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Elemen Halaman

4. Klik tulisan Tambahkan sebuah Elemen Halaman

5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

6. Paste kode Jadwal sholat tadi ke kolom yang di sediakan

7. Klik tombol Simpan Perubahan

8. Pindahkan elemen yang baru di buat pada tempat yang sobat sukai

9. Klik tombol Simpan

10. Selesai

Contoh Jadwal solat :

1. Vertical Table

2. Horizontal Table

Selesai selamat mencoba dan semoga bermanfaat...

Cara Menampilkan Profile Avatar Pada Kotak Komentar Di Blogger

noreply@blogger.com (Bambang) — Fri, 31 Dec 2010 13:27:00 +0000

Bagi anda yang menggunakan templete default dari blogger mungkin anda tidak usah menambahkan lagi kode pada templete anda untuk menampilkan avatar pada kotak komentar anda melainkan anda hanya diminta melakukan beberapa klik pada settingan blog anda.Bagi anda yang menggunakan Standar Blogger Templete anda dapat menampilkan komen avatar tersebut dengan cara :

Cara Pertama I

1. Log in ke blogger dengan ID anda.

2. Pada Blogger dasboard anda Klik setting.

3. Kemudian Pilih comments .

4. Pada Bagian comments pastikan anda memilih memilih yes "Show profile images on comments" .

Kemudian lihat halaman postingan yang memiliki komentar untuk memastikan apakah avatar yang anda harapkan telah muncul ?Jika belum anda bisa melakukan cara kedua ikuti lankah-langkah di bawah ini :

Cara Kedua II

(PERINGATAN: langkah Kedua ini hanya bagi anda yang menggunakan Standard Blogger Template/Uncustomized Blogger Template Saja.)

1. Log in ke blogger dengan ID anda.
2. Pada Blogger dasboard anda Klik Design.
3. Pilih edit HTML.
4. Pada Edit HTML klik Revert widget templates to default.

Setelah anda melakukan kedua langkah diatas tadi saya yakin avatar akan muncul disebelah kiri postingan komentar anda .

Sedangkan Bagi anda yang menggunakan Templete Bukan Standar/customized templete,Dibawah ini akan saya terangkan bagai mana cara menampilkan avatar pada komentar blog anda.

Dan adapun langkah-langkahnya adalah :

1. Log in ke blogger dengan ID anda.
2. Pada Blogger dasboard anda Klik Design.
3. Pilih edit HTML.
4. Click Download full template. silahkan back up template templete (untuk mengamankan templete anda jika terjadi kesalan).
5. Beri tanda centang (check) pada Expand Template Widget.
6. Tunggu beberapa saat sampai proses selesai.
7. Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

<dl id='comments-block'> Atau <div id='comments-block'>

8. Ganti kode di atas dengan kode di bawah ini.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Atau Kode dibawah ini jika menggunakan div kode

<div expr:class='data:post.avatarIndentClass' id='comments-block'>

9. Selanjutnya Cari Kode seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

<a expr:name='data:comment.anchorName'/>

10. Ganti Kode diatas ( step 9) dengan Kode di bawah ini.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

11. Dan untuk kode css pastekan kode di bawah ini di atas kode ]]></b:skin>

.avatar-image-container {
background:url(http://www.blogger.com/img/blank.gif);
width:16px;
height:16px;
float:left;
margin:0px 10px 5px 5px;
}
.avatar-image-container img {
border: 1px solid white;
width:16px;
height:16px;
}

12. Anda bisa mengedit kode css diatas sesuai dengan templete anda

13. Klik save untuk menyimpan templete

Selesai dan semoga bermanfaat.....

Cara Mengganti Form Komentar Pada Blogger

noreply@blogger.com (Bambang) — Fri, 31 Dec 2010 05:01:00 +0000

Banyak alasan mengapa kebanyakan blogger ingin merubah form komentar default blogger pada umumnya,ini dikarnakan mereka ingin menambah atau mengurangi bahkan mempercantik tampilan blog itu sendiri pada bagian box komentar sehingga menarik perhatian para pengunjung blog untuk meninggalkan komentarnya.

Adapun langkah-langkah untuk merubah form komentar pada blogger tersebut adalah:

1. Log in ke blogger dengan ID anda

2. Click Layout

3. Click Edit HTML

4. Click Download full template. silahkan back up template templete (untuk mengamankan templete anda jika terjadi kesalan).

5. Beri tanda centang (check) pada Expand Template Widget.

6. Tunggu beberapa saat sampai proses selesai.

7. Cari Kode Css seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

8. Hapus kode diatas dan ganti dengan kode Css dibawah ini

#comments h4{margin:0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em;color:#000;padding-left:0px;font-size:13px}
#commentblock {
width: 530px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol{list-style-type:square;margin:0 0 10px 10px;padding:0 0 10px 0}.commentdate{font-size:12px;padding-left:0}
#commentlist li p{margin-bottom:8px;line-height:20px;padding:0}
.commentname{color:#333;margin:10px 0;padding:5px 5px 5px 0}.commentinfo{clear:both}
.commenttext{background: #fff url(http://bambang-file.googlecode.com/files/visitor_thumb[2].png) no-repeat bottom left;clear: both;margin:15px 0 0 0;padding:10px 10px 40px 9px;width: 495px;color:#000;}
.commenttext-admin{background: #aaa9a9 url(http://bambang-file.googlecode.com/files/admin_thumb%5B2%5D.png) no-repeat bottom left;clear:both;margin:20px 0 0 0;padding:10px 10px 35px 10px;width:495px;color:#000;}
div.comment-form-block{width:700px;margin:0 auto}

9. Cari kode dibawah ini.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

10. Ganti kode di atas dengan kode di bawah ini.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
Comment :
</h4>
<div id='commentblock'>
<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1

<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> ke “<data:post.title/>”</strong>
</b:if>
<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>

<dd class='commenttext'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>

</b:if>
</dd>

<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>

<data:comment.author/>
</b:if>
mengatakan....
</dt>pada  <dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>

</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>
</a>

 
<data:post.commentRangeText/>
 

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>

</b:if>
</p>
</div>
</div>
</b:if>

10. Simpan templete.

11. Selesai dan lihat hasilnya .

Keterangan : Kode di atas terutama pada kode css anda dapat merubahnya dan menyesuaikan dengan templete anda terutama pada bagian :

lebar=width: 548px ganti dan sesuaikan lebarnya.

Semoga bermanfaat....

Cara Membuat Twitter (Retweet) Button Pada Postingan Blogger

noreply@blogger.com (Bambang) — Sat, 25 Dec 2010 04:16:00 +0000

Ada banyak cara untuk mempromosikan blog yang kita miliki untuk mendapatkan lebih banyak lagi traffic,Tapi yang terpenting dalam mempromosikan blog tersebut adalah dari postingan itu sendiri.Salah satu cara mempromosikan blog tersebut adalah dengan menambahkan tombol-tombol socialbooomarks pada artikel yang kita posting dimana pengunjung dapat menyebar luaskan dan mendapatkan info tentang artikel yang kita posting dari web service yang lain.Tombol-tombol yang bisa kita gunakan diantaranya Digg, Yahoo! Buzz, StumbleUpon, Mixx, Twitter etc.Nah kali ini sesuai dengan judul postingan yaitu Cara Membuat Twitter (Retweet) Button Pada Postingan Blogger, dimana dengan menambahkan Twitter (Retweet) Button pada postingan blog kita merupakan salah satu cara mempromosikan blog melalui twitter,dan anda tidak hanya mempromosikan blog anda melainkan anda pun bisa medapatkan follower ke twiiter anda.

Dan adapun langkah-langkahnya adalah:

1. Log in ke blogger dashboard pilih layout kemudian pilih edit HTML dan check the "Expand Widget Templates" check box

2. Backup dulu templete anda untuk menghindari jika terjadi kesalahan.

3. Kemudian cari kode dibawah ini (Gunakan Ctrl+F untuk mencari kode).

<data:post.body/>

4. Setelah anda menemukan kode diatas copy kode dibawah ini dan pastekan diatas kode tadi .

Kode di bawah ini akan menampilkan twiiter (retweet button) berada diatas sebelah kiri postingan.

<div style="float: left; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = ' lastlongtrip';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>

Kode dibawah ini akan menampilkan twiiter (retweet button) berada diatas sebelah kanan postingan.

<div style="float: right; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = ' lastlongtrip';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>

Keterangan : ganti tulisan laslongtrip dengan twiiter user name anda .

Selesai selamat mencoba dan semoga bermanfaat....

Cara Mendapatkan Video Url Pada Youtube Terbaru

noreply@blogger.com (Bambang) — Fri, 24 Dec 2010 19:13:00 +0000

Di tahun 2010 youtube telah mengganti tampilan webnya dengan layout terbaru, dengan tampilan tebarunya ini banyak sekali perubahan yang bisa kita lihat ,salah satu dari perubahan tersebut diantaranya posisi video url yang pada layout sebelumnya berada di sebelah kanan Video yang kita pilih sekarang menghilang alias raib .Nah sesuai dengan judul postingan kali ini yaitu cara mendapatkan video url pada youtube Terbaru ada beberapa langkah yang harus kita ikuti yaitu :

1. Buka Youtube klik disini.

2. Cari Video yang anda inginkan.

3. Scroll halaman kebawah (lihat gambar dibawah ini yang diberi tanda merah).

4. Tepat di bawah Video yang anda sedang lihat terdapat tombol share dan klik tombol tersebut dan akan muncul form share tepat di bawahnya (lihat gambar dibawah ini yang diberi tanda merah).

5. Pada form share anda akan mendapatkan video url yang sedang anda lihat tepat diatas tulisan Short URL ,dan itulah video url yang anda cari (lihat gambar dibawah ini yang diberi tanda merah).

Selesai sudah tutorial youtube kali ini selamat mencoba...

Cara Upload Video Pada Youtube

noreply@blogger.com (Bambang) — Fri, 17 Dec 2010 23:32:00 +0000

Tutorial youtube kali ini kita akan membahas tentang bagai mana sih upload video pada youtube channel kita ? dan ini merupakan lanjutan dari tutorial youtube sebelumnya yaitu Cara Membuat Account Pada Youtube,dan Cara Mengganti Image Background Pada Youtube.Agar tidak terlalu bertele-tele dan membuang banyak waktu,mari kita ikuti langkah-langkahnya dibawah ini:

1. Pastikan Video yang akan anda upload berukuran tidak lebih dari 2 GB,dan lamanya video tidak lebih dari 10 Menit.

2. Sign in ke youtube account kita .

3. Klik upload button dibagian atas kanan tepat search bar,setelah browse (lihat gambar dibawah ini yang diberi warna kuning)dan anda akan dibawa pada halaman Video File Upload.

4. Setelah selesai langkah ke 3 ,pada halaman Video File Upload Klik Upload Video button Yang berwarna kuning (lihat gambar di bawah ini yang di beri tanda merah).

5. Setelah selesai langkah Ke 4 ,pilih satu video file dari komputer anda dan pastikan file video anda berformat : .AVI (Audio Video Interleaved) .3GP (cell phones) .MOV (Mac) .MP4 (iPod/PSP) .MPEG or .MPG (Motion Picture Experts Group) .FLV (Adobe Flash) .SWF (Shockwave Flash) .M4V (h.264) .WMV (Windows Media Video) Keterangan: jika video yang ingin anda upload tidak berformat dari salah satu format video diatas anda harus merubahnya terlebih dahulu menjadi file video format yang disaratkan diatas dengan menggunakan video converter.

6. Setelah selesai langkah ke 5 ,dan sementara upload video berlangsung , isikan Title dari video yang anda upload, description ( gambaran atau keterangan dari video yang anda upload),Tags (keyword yang ingin anda masukan agar memudah kan orang dalam mencari video yang anda sharing ),category (pilih kategori yang sesuai dengan video yang anda upload).Privacy ( pilih share video atau private ).

7. Setelah langkah ke 6 selesai ,klik save changes (Title video,desciption,tags,category,privacy, akan di simpan setelah upload proses selesai).

Selesai sudah tutorial youtube kali ini dan selamat mencoba ...