¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan...

32
Buat Account di Blogger Blogger.com merupakan situs yang menyediakan jasa pembuatan website tanpa anda harus membayar domain dan hosting alias gratis tetapi nama domain kita berakhiran blogspot.com seperti contoh www.tutorialbikinblog.blogspot.com Langkah pertama untuk membuat website atau blog di blogger.com adalah dengan membuat account diblogger.com, sebelum membuat account diblogger anda harus mempunyai account di www.google.com , supaya lebih jelas silahkan ikuti langkah-langkahnya sebagai berikut: Silakan kunjungi www.blogger.com Kemudian klik perintah create your blog now atau klik tombol Ciptakan Blog Anda Selanjutnya akan muncul window Google Account silakan daftar Account Google anda jika anda belum mempunyai account google dengan mengisi blank form secara lengkap dan jika anda sudah memiliki account google silakan langsung login ke account anda Selanjutnya akan muncul window “name your blog”, isikan nama blog dan blog address yang ingin anda daftarkan, ketika anda selesai mengisi blog address anda silakan klik check availability yang berada dibawahnya untuk mengetahui apakan address yang anda masukkan sudah terdaftar atau belum sampai muncul tulisan “This blog address is available “dan lanjutkan tombol Continue Akan muncul window choose a template kemudian pilih template yang anda inginkan kemudian continue 1

Transcript of ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan...

Page 1: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Buat Account di Blogger Blogger.com merupakan situs yang menyediakan jasa pembuatan website tanpa anda harus membayar domain dan hosting alias gratis tetapi nama domain kita berakhiran blogspot.com seperti contoh www.tutorialbikinblog.blogspot.com Langkah pertama untuk membuat website atau blog di blogger.com adalah dengan membuat account diblogger.com, sebelum membuat account diblogger anda harus mempunyai account di www.google.com, supaya lebih jelas silahkan ikuti langkah-langkahnya sebagai berikut:

Silakan kunjungi www.blogger.com

Kemudian klik perintah create your blog now atau klik tombol Ciptakan Blog Anda

Selanjutnya akan muncul window Google Account silakan daftar Account Google anda jika anda belum mempunyai account google dengan mengisi blank form secara lengkap dan jika anda sudah memiliki account google silakan langsung login ke account anda

Selanjutnya akan muncul window “name your blog”, isikan nama blog dan blog address yang ingin anda daftarkan, ketika anda selesai mengisi blog address anda silakan klik check availability yang berada dibawahnya untuk mengetahui apakan address yang anda masukkan sudah terdaftar atau belum sampai muncul tulisan “This blog address is available “dan lanjutkan tombol Continue

Akan muncul window choose a template kemudian pilih template yang anda inginkan kemudian continue

1

Page 2: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Muncul window Your blog has been created! Berarti anda sudah berhasil membuat blog anda dan bias memulai melakukan posting

Cara Posting Artikel Pada dasarnya website yang menggunakan blogger mempuyai tiga menu utama yaitu:

Posting Setting Layout

Untuk membuat postingan baru atau edit postingan kita menuju menu Posting yang berada di halaman dashboard anda yang akan muncul setelah kita sign in di blogger.com Untuk memulai posting artikel silahkan ikuti langkah-langkah dibawah ini:

Sign in di Blogger menggunakan user name dan password acoount google anda yang sebelumnya sudah anda buat

Akan muncul halaman Dasboard New Post kemudian akan muncul halaman seperti ini dibawah ini

2

Page 3: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Silakan masukkan judul artikel anda pada kotak yang ditunjukkan tanda panah warna merah, masukkan content artikel anda pada kotak yang ditunjukkan tanda panah berwarna biru dan isikan kategori postingan anda pada kotak yang ditunjukkan tanda panah warna hijau

klik Publish Post tidak perlu klik Save Now karena secara otomatis postingan anda sudah tersimpan

klik view blog untuk melihat hasil postingan anda.

Mengatur Tata Letak (Layout) Apa yang dimaksud mengatur tata letak content blog, sebelumnya saya jelaskan terlebih dahulu apa yang dimaksud content sebuah blog, yang dimaksud content pada blog adalah isi halaman suatu blog yang biasanya berupa halaman postingan,kalender,jam,kolom buku tamu, kolom komentar,kolom iklan2 dan masih banyak yang lain, biasanya susunan dari content-content anda sesuai dengan template yang anda gunakan, kita hanya bisa mengatur dan menambah content nya saja Seperti contoh layout pada blog saya seperti dibawah ini

Untuk mengatur tata letaknya masuk ke menu Layout yang berada di halaman dasboard anda kemudian akan muncul halaman seperti diatas, tuju salah satu content yang ingin anda pindahkan dan drag menggunakan klik kiri mouse kemudian tahan dan pindahkan ke tempat yang anda inginkan.

3

Page 4: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Mengganti Template Ketika anda membuat blog, anda mendapat template yang disebut template klasik atau template dasar yang disediakan oleh blogger, kita juga bisa mengganti template kita dengan template baru yang bisa kita upload kode HTML nya di banyak situs-situs penyedia suatu template website Berikut ini ada 2 cara untuk mengganti template blog anda yaitu:

Template klasik Sign in di Blogger Layout Choose New Template Silahkan pilih template save Template

Template Baru Untuk mengganti template menggunakan template baru,saya akan memberikan salah satu website yang menyediakan template blog, silahkan kunjugi website dibawah ini dan klik menu Free Template yang ada pada bagian atas blog http://tutorialbikinblog.blogspot.com/

Setelah masuk ke website tersebut silahkan pilih template yang anda sukai kemudian download kode HTML nya dan simpan di hard drive komputer anda

Sign in ke Blogger Layout Edit HTML silahkan simpan dulu template anda dengan klik Download Full Template

Untuk menghindari error saat upload template yang baru silahkan upload template yang sudah anda download sebelumnya dengan klik tombol Upload yang berada si sebelah kanan tulisan “Upload a template from a file on your hard drive”

Setelah berhasil Save Template View Blog anda dan liat template baru anda

Catatan: Jika tidak berhasil silahkan gunakan browser internet dengan yang lain misalnya firefox jika tidak bisa coba gunakan internet explorer karena ada template yang bisa support menggunakan IE (internet Explorer)

4

Page 5: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Daftar Blog di Webmaster Blog Mengapa website atau blog anda harus didaftarkan di Webmaster Google karena setelah anda membuat blog tentunya anda ingin blog anda dikunjungi oleh banyak pengunjung, salah satu caranya adalah blog anda harus terindeks di mesin pencari terbesar ini yaitu salah satu nya www.google.com , supaya blog anda cepat terindeks di google silahkan anda ikuti langkah-langkah berikut:

Login di google kemudian masuk ke account anda klik tombol webmaster

jika blm punya account google silakan kunjungi link dibawah ini

https://www.google.com/accounts/Login?continue=http://www.google.co.id/&hl=id)

Setelah berada di halaman account anda, lihat halaman sebelah atas ! di sana terdapat kotak isian di samping tombol Add Site, isilah kotak tersebut dengan alamat blog anda contohnya http://tutorialbikinblog.blogspot.com/

Klik tombol Add Site

Klik link Verify your site

Klik menu dropdown yang ada, pilih metode yang di inginkan. Biar mudah pilih saja yang Add a meta tag

Copy meta tag yang di berikan, lalu paste diwindow yang lainnya agar mudah di gunakan nantinya.

Silahkan masuk ke account blogger dan tuju blog yang di daftarkan tadi

Copy paste meta tag yang di berikan tadi, sebaiknya dibawah kode berikut:

5

Page 6: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Untuk Template baru

<title><data:blog.pageTitle/></title>

untuk template klasik

<title><$BlogPageTitle$></title>

Bila sudah selesai, kembali ke Google site map, lalu klik tombol “Verify”

Jika tidak ada kesalahan, akan ada tulisan “You've successfully verified http://NamaBlogAnda.blogspot.com/”

Selesai, sekarang blog anda sudah terindex di google yang merupakan mesin pencari terkenal didunia dan bisa dilihat oleh seluruh dunia.

Membuat Simbol Icon YM Untuk membuat simbol Yahoo Messenger di blogger yang menunjukkan status anda dan pengunjung bisa langsung online dgn anda, langkah-langkahnya adalah sebagai berikut:

Login di blogger anda pada halaman Dashboard Layout Klik edit HTML Kemudian add widget Pilih edit HTML menu Silahkan copy salah satu kode dibawah ini dan ganti kode yang berwarna merah dengan ID anda

Contoh 1 <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 350px; HEIGHT: 60px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><a href="ymsgr:sendIM?eni_12may"><img src="http://opi.yahoo.com/online?u=yono_pati&m=g&t=0 b order="0 /> </a></textarea></p></div></form>

6

Page 7: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Contoh 2 <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 350px; HEIGHT: 60px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><a href="ymsgr:sendIM?eni_12may"><img border="0" src="http://opi.yahoo.com/online?u=eni_12may&m=g&t=2"/></a></textarea></p></div></form> Contoh 3 <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 350px; HEIGHT: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><a href="ymsgr:sendIM?eni_12may"><img src="http://opi.yahoo.com/online?u=yono_pati&m=g&t=2 border="0 /> </a> </textarea></p></div></form>

Cara Pasang dan Daftar Sitemeter Sitemeter berfungsi untuk mengetahui jumlah pengunjung dan asal pengunjung yang telah mengunjungi blog anda karna semakin banyak pengunjung yang mengunjungi blog anda maka semakin tinggi traffic blog dan akan mendukung popularitas suatu blog anda, berikut cara daftar dan pasang sitemeter:

Silakan daftar dengan mengunjungi situs ini www.sitemeter.com pilih sitemeter basic Free

Isikan data-data blog / web anda kemudian next sampai semua data terisi lengkap

Setelah semua data terisi lengkap akan muncul pesan Success! Thank You.

7

Page 8: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Pilih menu Manager Pilih jenis sitemeter di meter style

Untuk mendapatkan kode HTMLnya klik HTML pilih Site Meter JavaScript HTML untuk yg menggunakan new blogger/XML/Java Script

atau Site Meter Regular HTML untuk yg menggunakan

blogger klasik

Kemudian copy di blogger anda di layout add gadget edit HTML/Javascript copy kode tersebut

langkah terakhir save setting

Fungsi menu-menu di Site meter General Sumary Jumlah semua pengunjung dari awal kita pasang sitemeter. Who's On Jumlah pengunjung pada saat ini. Traffic Prediction prediksi Traffic untuk blog/website kita Recent Visitor By Details detail pengunjung sepeti alamat domain/IP, jumlah halaman yang dilihat, waktu kunjungan, dan lama kunjungan. By Referrals asal pengunjung. By World Map menampilkan asal kota atau negara asal pengunjung dalam bentuk peta. By Location menampilkan data kota atau negara asal pengunjung. By Out Clicks link yang diklik pengunjung pada saat meninggalkan blog. By Entry Pages halaman yang dituju pada saat pengunjung datang. By Exit Pages halaman yang terakhir dilihat oleh pengunjung. Visits menampilkan data pengunjung dalam bentuk diagram Current Day per hari Previous 7 Days per minggu Previous 30 Days per bulan Previous 12 Month per tahun

8

Page 9: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Visits and page views menampilkan data kunjungan dan jumlah halaman yang dilihat oleh pengunjung Current Day per hari Previous 7 Days per minggu Previous 30 Days per bulan Previous 12 Month per tahun Page ranking rangking halaman berdasarkan halaman pada saat masuk (Entry page) atau keluar (Exit Pages)

Cara Memasukkan Link di Postingan Ketika anda posting sebuah artikel dan ingin memasukkan sebuah link kepostingan tersebut,biasanya anda sering lihat dengan tulisan klik disini yang jika di klik langsung masuk ke halaman website yang ingin kita tampilkan,nah untuk membuat link tersebut ikuti langkah-langkah sebagai berikut:

Login ke Blogger New Post

Ketik artikel yang akan anda masukkan beserta tulisan yang akan anda masukkan linknya, misalnya “untuk informasi selengkapnya silakan kunjungi disini” link yang akan dikunjungi akan kita masukkan di kata “disini”

highlight tulisan tersebut(disini)kemudian klik icon

insert link yang berada ditoolbar halaman posting

Akan tampil “Explorer User Trompt box” dgn tulisan http://

Masukkan alamat situs yang anda inginkan misalnya

http://tutorialbikinblog.blogspot.com

Terakhir klik Ok dan selesai

9

Page 10: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Membuat Readmore Read more pada postingan digunakan untuk mempersingkat tampilan postingan di blog atau website anda seperti contoh salah satu website yang menggunakan fasilitas readmore yang ditunjukkan pada screenshoot dibawah ini:

Sign in di blogger Setting Formatting

Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini

<div class="fullpost"> </div>

10

Page 11: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Sehinggan hasilnya seperti screenshoot dibawah ini

Klik tombol yang bertuliskan Save Settings

Pemasangan kode ini supaya pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu ditext area saat posting

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :

Klik menu Dasboard Layout Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editing pada template, kita masih punya back up data untuk mengembalikannya seperti semula dgn upload kembali data tersebut

Jangan lupa beri tanda centang pada kotak di samping

tulisan Expand Widget Template

11

Page 12: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Silahkan anda cari kode berikut pada kode template milik anda, untuk memudahkan menemukan kodenya menggunakan Ctrl+F di keyboard anda

<div class='post-header-line-1'/> <div class='post-body'> Atau <div class='post-header-line-1'/> <div class='post-body entry-content'>

Copy kode HTML di bawah ini kemudian paste di bawah kode diatas

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

<p><data:post.body/></p>

Copy kode HTML di bawah ini kemudian paste di bawah kode diatas

<a expr:href='data:post.url'>Read More......</a> </b:if> Silakan ganti tulisan Read More sesuai keinginan anda

12

Page 13: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Jika ingin menampilkan Read More beserta judul postingan seperti contoh screenshoot website dibawah ini:

silahkan ganti kode diatas dengan kode dibawah ini: <strong> <aexpr:href='data:post.url'>Lanjut baca di &#8220;<data:post.title/>&#8221; &#160;&#187;&#187; </a></strong>

klik tombol bertuliskan Save Template Cara Posting Artikel nya

Klik menu Posting->Edit HTML Secara otomatis akan timbul kode seperti ini: <div class="fullpost"> </div>

Tuliskan artikel yang ingin tampak pada blog anda sebelum kode dibawah ini

<div class="fullpost">

13

Page 14: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Tulis keseluruhan sisa artikel sesudah kode di atas dan sebelum kode dibawah ini :

</div>

Klik tombol PUBLISH POST Silakan lihat blog anda,,

Menghilangkan tanda obeng dan Tang (Quick Edit)

Dimana kita menemukan tanda Obeng dan Tang? mungkin ini pertanyaan pertama anda saat baca halaman ini,tanda obeng dan tang kita temukan saat kita mengedit blog kita dan melihatnya maka akan muncul tanda-tanda ini di setiap halaman gadget kita maksudnya supaya kita bisa langsung edit gadget kita,,untuk menghilangkan tanda tersebut silakan ikuti langkah-langkah dibawah ini:

Login ke blogger Layout Edit HTML klik Expand Widget Template

Silakan temukan kode dibawah ini

]]> &lt;/b:skin>

Copy paste kode berikut persis di atas kode yang tadi : .quickedit{ display:none; }

Klik tombol Simpan template Selesai!!

14

Page 15: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Memasukan kode HTML dipostingan Apabila kita akan poting sebuah artikel dimana artikel tersebut terdapat kode-kode HTML nya maka cara postingan tidak bisa langsung memasukkan kode-kode tersebut karena tidak akan muncul kode yang sama dengan kode yang kita posting,maka diperlukan kode-kode pengganti yang kita gunakan saat posting kode-kode HTMLnya. Dibawah ini merupakan tabel kode-kode penggantinya

Karakter Notasi Keterangan < &lt; Kurung runcing

terbuka > &gt; Kurung runcing

tutup & &amp; Tanda Dan " &quot; Tanda petik ganda ± &plusmn; Tanda plus minus Spasi &nbsp; Tanda Spasi © &copy; Tanda hak cipta

(copyright) ® &reg; Tanda terdaftar

(Registered)

Contoh cara posting artikel yang terdapat kode-kode HTML

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini : <meta http-equiv="refresh" content="10"> </meta>

Maka saat posting artikel berubah menjadi seperti dibawah ini

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini : &ltbr/><br/> <code> &lt;meta http-equiv="refresh" content="10"&gt; <br/> &lt;/meta&gt; </code>

15

Page 16: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Cara Membuat Kotak Blogroll Dalam Suatu blog atau website terdapat halaman-halaman postingan yang ingin kita tampilkan sebagai fungsi scrool ataupun bisa juga untuk memasang link-link blogger atau link friend, untuk membuatnya anda hanya menambahkan kode HTML nya.

untuk membuat kotak blogroll ada 2 macam yaitu:

Kotak Blogroll Text Area Kotak Blogroll Marquee

Contoh kotak Blogroll Text Area

Kotak Blogroll Text area biasanya digunakan untuk pasang link frind anda atau link postingan anda Kotak Blogroll Marquee biasanya dipasang untuk link2 iklan, related link

Untuk lebih jelas silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger Layout Add Gadget

2. Silakan masukkan kode dibawah ini

16

Page 17: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

<li><a href="#">..</a></li> <div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> <a href="Link 1">Judul Link 1</a> <br /> <a href="Link 2">Judul Link 2</a> <a href="Link dst">Judul Link dst</a> </div> Silakan ganti kode yang berwarna merah dengan URL link anda dan kode yang berwarna hijau dengan judul link anda dan seterusnya sedangkan untuk membuat Blogroll marquee silakan copy kode

bawah ini di <div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 200px; height: 200px; text-align: center; "> #link1 <br /> #link2 <br /> #link3 <br /> #link... </div> Silakan ganti Link dengan URL yang akan anda masukkan

17

Page 18: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Cara Mengganti Blog Adress Dalam suatu blog terkadang kita ingin mengganti alamat blog kita dengan alamat yang lebih kita sukai, anda tidak perlu membuat blog baru nah untuk menggantinya ikuti langkah dibawah ini:

Login ke blog anda dan masuk halaman Dashboard anda

Klik Setting

Klik tombol Publishing

Disebelah Blog*Spot Address ada alamat blog anda

Silakan ganti dgn alamat baru

Masukkan kode di word Verification form

Kemudian Save setting

jika alamat blog anda sudah ada yang menggunakan akan ada tulisan muncul “Sorry,this blog address is not available”

silakan isi kembali alamat blog anda yang dgn yang lain

sampai muncul tulisan “Subject to availability”.

10.Kemudian klik kembali tombol Save Setting

11.Selesai

18

Page 19: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Membuat Link Exchange (Banner Blog) Link Exchange adalah media untuk tukaran link website atau blog anda dengan memasang banner yang kita design sendiri dan meletakkan pada blog kita beserta kode scriptnya supaya bisa dicopy oleh pengunjung yang ingin tukeran link dgn anda sebagai contoh banner blog seperti ini

Cara untuk membuat link exchange sebagai berikut:

Silakan buat banner anda secara free dengan mengunjungi http://cooltext.com

Silakan pilih logo anda atau banner anda dan silakan

edit logo anda sesuai keinginan anda kemudian klik

render logo Get HTML code

Silakan register jika anda belum mempunyai account dan

login jika anda sudah mempunyai account

Silakan copy kode anda ke halaman lain dahulu

Sign ini ke blog anda Layout->Add

Gadged HTML/Javascript-->Copy kode dibawah ini

<textarea name="textarea" cols="30"><a href="http://tutorialbikinblog.blogspot.com"><img src="http://images.cooltext.com/329956.jpg" width="110" height="25" alt="Tutorial Blogger" /></a></textarea>

Silakan ganti angka yang berwarna merah yaitu ukuran

lebar dari kolom text exchange anda

Ganti alamat yang berwarna biru dengan alamat blog anda

Ganti kode yang berwarna hijau dgn kode2 yang ada di

kode yang anda dapat dari cooltext.com tadi

Save setting

19

Page 20: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Hasilnya akan seperti kotak dan jika anda ingin

menambahkan gambarnya silakan copy kode2 yang ada dalam

kotak tersebut dan letakkan di tempat yang anda inginkan

atau bisa juga dicopy diatas kotak text areanya.

Membuat Text Berjalan Fungsi text berjalan untuk membuat pengunjung blog atau website lebih fokus pada apa yang ingin kita sampaikan, penggunaan text berjalan biasanya berisikan informasi-informasi terbaru atau sejenis pengumuman-pengumuman Cara membuat text berjalan adalah sebagai berikut:

Login ke Blogger anda Layout Add gadget silakan masukkan kode dibawah ini

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate"> marquee menurut perilaku </MARQUEE> Kode yang berwarna merah adalah text yang akan anda pasang

Save Setting

20

Page 21: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Text Box Area Text box area biasanya digunakan untuk memasang kode-kode HTML yang dimaksudkan supaya bisa dicopy oleh pengunjung. Untuk membuat text box area anda hanya membuat kode dibawah ini lalu silahkan pasang di gadget yang anda ingin kan <p align="center"><textarea name="code" rows="6" cols="20"> Isi text anda atau kode2 HTML</textarea></p> Sedangkan untuk membuat text box area dengan menampilkan kotak highlight nya silakan copy kode dibawah ini <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Membuat window baru di link postingan Apabila kita memasukkan sebuah link di postingan kita maka halaman blog kita akan tertutup dan akan digantikan dengan halaman link yang anda buka, untuk menghindari halaman posting kita tertutup makan perlu window baru sehinggan halaman website kita tetap muncul, untuk membuatnya silakan tambahkan kode ini setelah alamat url link

target="new"

jika link yang anda masukkan sebelumnya seperti ini

http://tutorialbikinblog.blogspot.com/

21

Page 22: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

maka setelah ditambah kode akan menjadi seperti ini

http://tutorialbikinblog.blogspot.com/ target="new"

Membuat Dropdown Menu Untuk membuat menu dropdown silakan ikuti langkah-langkah dibawah ini:

Login di blogger->Layout Add gadget Silakan copy kode dibawah ini:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

<option value="0" selected>FRIEND’S LINK</option> <option value="http://dewamira.blogspot.com/" target="new"> Computer Center</option> </select> Kode FRIEND’S LINK akan muncul di kotak Dropdown dan silakan ganti kode warna merah dengan link yang akan anda tampilkan dan code yang berwarna biru dengan judul link yang akan tampil di menu DropDown Dibawah ini silahkan lihat contoh screenshoot menu DropDown yang ditunjukkan dengan anak panah warna merah

22

Page 23: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Highlight pada Script/Kode di Postingan Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain.

Cara membuat Higlight Script / Kode pada postingan:

Login ke blogger lalu pilih Layout-->Edit HTML

Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

23

Page 24: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

.alert { background: #DDE4FF; text-align: left; padding: 5px 5px 5px 5px; border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu. Untuk kode-kode warna bisa kunjungi link dibawah ini http://trik-tips.blogspot.com/2008/05/kode-kode-warna.html

Simpan

Cara Posting Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Cara Daftar feedburner Feedburner adalah jasa layanan publikasi suatu web dengan cara menyebarluaskan suatu content dan rss feed suatu blog / web,sehingga layanan feedburner ini membantu mempromosikan isi suatu blog atau web sehingga bisa traffic suatu blog atau website

Untuk mendaftar di feedburner silakan kunjungi www.feedburner.com

Setelah anda mengunjungi akan muncul halaman seperti dibawah ini

24

Page 25: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Silakan isi kotak yang dilingkari merah dengan alamat blog atau web anda kemudian langsung klik next dan tidak perlu klik kotak I am podcaster

setelah itu akan muncul halaman berikut:

25

Page 26: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Isi kolom tersebut sesuai data blog anda kemudian klik Active Feed, jika ada kesalahan biasanya karena feed address silakan isi dengan nama yang lain sampai muncul window dibawah ini

Setelah alamat feed blog anda jadi, anda langsung saja menuju ke blogger untuk mengubah settingan feed blogger. Caranya masuk ke menu pengaturan feed situs. Lalu masukan alamat feed anda yang tadi di buat ke kotak isian posting URL pengubahan arah feed save.

Kembali ke feedburner. Langsung klik aja skip directly to feed management tidak perlu klik next, Selanjutnya anda setting feedburner anda

26

Page 27: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Cara Setting Feedburner

Setting feedburner ini dimaksudkan untuk mengoptimalkan feed blog kita yang udah di daftarin di feedburner

Untuk cara setting feedburner, langkah pertama yang harus di lakukan adalah login dulu di feedburner. Silakan kunjungi http://www.feedburner.com/ kemudian sign in

Kemudian akan muncul suatu halaman. Disana silahkan masukan username dan password anda, yang di buat sewaktu pertama kali daftar di feedburner. Selanjutnya klik sign in.

Setelah itu anda akan dibawa ke suatu halaman feed anda di feedburner. Silahkan klik pada feed blog yang mau di setting. Pada halaman tersebut, terdapat 5 menu yang ada di feedburner (Analyze, Optimize, Publicize, Monetize, dan Troubleshootize).

klik menu optimize smartfeed kemudian klik dan aktifkan.

klik menu publicize kemudian aktifkan service email subscription, Ping shot dan Feedcount. Fungsi service email subsciption tersebut adalah untuk mengaktifkan form berlangganan yang bisa anda pasang di blog anda. Untuk ping shot, berfungsi untuk memberitahu feedburner secara langsung jika blog kita sudah di update. Sehingga jika anda melakukan ping dari situs ping service, dapat langsung terdetek dengan cepat oleh feedburner.

27

Page 28: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Cara pasang form berlangganan Email Feedburner

Salah satu layanan yang disediakan oleh feedburner yaitu form berlangganan email Layanan feedburner ini akan memudahkan para pengunjung blog untuk mendapatkan posting terbaru dari suatu blog melalui email sehingga pengunjung langsung dapat artikel diemail mereka setiap ada postingan terbaru t dari suatu blog caranya cukup dengan mendaftarkan email-nya di form berlangganan email yang dipasang pada suatu blog yang mereka ingin langganan

cara membuat form berlangganan email di feedburner.

Sign ini di http://www.feedburner.com lalu masukan username dan password anda.

Klik pada blog yang akan di pasang layanan berlangganan email.

Di bagian menu atas, klik publicize.

28

Page 29: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Selanjutnya, pada halaman publicize klik email subscription

Jika email subscription anda belum active, silahkan klik dulu activate untuk menggunakan layanan ini.

Setelah itu, akan muncul suatu halaman seperti dibawah ini. Untuk memasang form berlangganan email di blog ada 2 cara pertama Copy seluruh kode html nya lalu paste di sidebar blog anda dan cara kedua langusung dengan memanfaatkan import elemen blogger.

29

Page 30: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Untuk cara pasangnya seperti biasa login ke blogger Layout Add Gadget Copy HTML diatas

Selesai

30

Page 31: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Edit Tampilan Form Berlanggana Email Feedburner

Jika sebelumnya form berlangganan email feedburner anda seperti ini kode HTML dibawah ini

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2835894', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=2835894" name="url"/><input type="hidden" value="bikinblog" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form> Akan dimodifikasi maka kode yang berwarna merah diganti dengan kode dibawah ini: <p><input type="text" style="width:140px" name="email"/> <input type="hidden" value="kursus-blog" name="uri"/> <input type="hidden" name="loc" value="en_US"/><input type="submit" value="Enter" /></p>

31

Page 32: ¾ Buat Account di Blogger · PDF filewebsite tanpa anda harus membayar domain dan hosting alias ... langsung login ke account anda ... untuk mengembalikannya seperti semula dgn upload

Maka hasilnya menjadi seperti ini:

32