Cara Custom Domain di Blogger

Karena banyak permintaan yang masuk ke kang Rohman tentang bagaimana cara custom
domain di blogger atau blogspot, maka pada posting kali ini kang Rohman mencoba untuk
menuliskannya. Apa itu custom domain di blogger? yang di maksud custom domain di
blogger disini adalah mengganti alamat blog yang di blogger atau blogspot dengan nama
domain milik sendiri atau dengan Top Level Domain (TLD., misal http!"kolom#
tutorial.blogspot.com diganti alamatnya men$adi http!""%%%.kangrohman.com atau dengan
http!""rohman.in&o atau dengan alamat yang lainnya.
'engganti alamat sub domain blogger atau blogspot dengan Top Level Domain (TLD
tentu sa$a mempunyai kelebihan serta kekurangan dibanding dengan tetap memakai sub
domain blogspot, berikut beberapa kelebihan custom domain blogger yang mungkin bisa
anda pertimbangkan !
Tampil Lebih Professional
'emakai nama domain sendiri biasanya akan dianggap lebih pro&essional dibandingkan
dengan memakai sub domain blogger. Anggapan seperti ini sangat diperlukan apabila blog
anda adalah merupakan sebuah blog bisnis terlebih lagi untuk toko online atau blog untuk
men$ual barang atau $asa, ini akan mempengaruhi tingkat kepercayaan dari para pelanggan
atau customer.
(ama domain seringkali diperhatikan oleh para pengun$ung, apabila blog anda konten nya
berisi tentang tips berbisnis yang bisa mendatang uang dengan mudah, kadangkala
pengun$ung akan sedikit meragukan akan apa yang ditulis. Kadangkala ada ungkapan rasa
keraguan seperti ini !
(gomongnya a$a bisa dapet ratusan ampe ribuan dollar setiap bulannya, nama domain yang
cuma )* ribu rupiah tidak kebeli, bener ngga tuh apa yang ditulis?
(ah, untuk anda yang ingin lebih sukses dalam berbisnis online sebaiknya dari se$ak dini
bisa menghindari rasa keraguan para pembacanya.
Tingkat Kepercayaan Tinggi
+ni masih erat hubungannya dengan yang ditulis diatas. ,log dengan nama domain sendiri
akan lebih mendapatkan kepercayaan dibanding dengan blog yang masih memakai sub
domain blogspot. Terlebih $ika anda biasa bermain di bisnis $ualan link atau paid revie%,
top level domain akan lebih mudah mendapatkan $ob dibanding sub domain blogger
%alaupun memiliki page rank yang sama. +ni memang tidak mutlak, namun merupakan
salah satu &aktor yang menun$ang dalam keberhasilan bermain bisnis sale links.
Hosting Gratis Dari Blogger
-alah satu kendala yang dirasa berat untuk blog yang sudah mempunyai $umlah kun$ungan
yang banyak adalah hosting, semakin banyak pengun$ung maka biaya hosting yang harus
dikeluarkan semakin besar. Dengan .ustom domain diblogger anda tidak perlu memikirkan
biaya hosting karena blogger memberikannya secara gratis.
/erlu diketahui bah%a apabila anda mengganti sub domain blogger dengan domain yang
anda miliki, anda tetap berhubungan dengan blogger, segala sesuatunya akan tetap seperti
sebelumnya. 'esin blog yang anda pakai tetap menggunakan mesin blogger, untuk
mengatur anda tetap harus login ke blogger dsb.
Relatif Lebih man
'asih ingat dengan postingkan Kang Rohman tentang kasus penghapusan blog oleh
blogger. 0ika suatu saat kasus tersebut menimpa anda, tidak usah terlalu risau dan itu bukan
akhir dari segalanya, yang harus diingat adalah buatlah selalu backup data blog anda secara
berkala. Langkah selan$utnya adalah membuat blog baru di blogger, lalu upload backup
data yang telah dimiliki dan blog baru tersebut akan sama persis isi postingnya seperti blog
yang dihapus, dan anda tinggal mengarahkan blog tersebut dengan domain anda
sebelumnya. -emua akan kembali normal, anda tidak akan kehilangan pengun$ung setia
anda karena nama domainnya tetap sama.
Langkah yang lain adalah menghilangkan ketergantungan dari blogger dengan cara
membeli hosting sendiri, lalu memakai mesin blog yang lain yang anda sukai dan tinggal di
migrasi sa$a dari blogger ke mesin blog baru anda.
Diatas adalah beberapa keuntungan custom domain di blogger, tentunya masih banyak lagi
keuntungan yang lainnya, namun untuk sedikit membatasi agar posting ini tidak terlalu
pan$ang maka hanya itu sa$a yang ditulis.
(amun, kang Rohman menyarankan bah%a custom domain ini untuk blog baru sa$a dan
tidak untuk yang telah lama, alasannya? untuk yang custom domain, blog anda akan
men$adi sebuah blog baru lagi. segala sesuatu seperti $umlah -ubscriber, backlinks, /age
Rank serta lain sebagainya akan men$adi baru semua. (amun, $ika anda tidak
mempermasalahkan hal tersebut.tentu tidak ada masalah.
Apa yang diperlukan untuk melakukan custom domain? yang diperlukan hanyalah nama
domain serta layanan D(-. 1ntuk beberapa pen$ual domain, layanan D(- disediakan
secara gratis sehingga anda tidak perlu mengeluarkan biaya tambahan atau menggunakan
layanan &ree D(- pihak ketiga sehingga anda tidak terlalu repot.
,erapa harga domain? harga domain sangat bervariasi tergantung dari ke$elian anda dalam
memilih domain provider, namun sebagai gambaran sa$a bah%a harga domain berkisar
antara Rp.2*.*** hingga Rp.3**.*** untuk masa kontrak selama satu tahun, atau dengan
kata lain dengan modal sekitar 2*rb sampai 3**rb anda akan memiliki blog yang lebih
pro&esional dalam satu tahun kedepan dan tentunya anda bisa memperpan$ang untuk tahun
berikutnya.
/erlu anda ingat bah%a anda bisa membeli domain dimana sa$a, namun agar lebih mudah
dalam menulis tutorial ini, sebagai contoh kang Rohman menggunakan domain dari rumah
%eb.
1ntuk sedikit mempersingkat postingan ini, maka berikut cara#cara custom domain !
4 0ika anda telah mempunyai domain, silahkan login ke kontrol panel domain anda,
tentunya dengan username serta pass%ord yang telah di berikan.
4 -orot menu Domains kemudian pilih List ll !rders"
# Klik pada domain yang ingin anda setting untuk custom domain.
4 Klik tab menu D$%, lalu klik tombol cti&e D$%
4 Klik tombol uto'update nameser&ers
4 Akan ada keterangan bah%a nameserver yang baru bisa akti& dalam %aktu 56#25 $am.
(ameserver 'odi&ications completed success&ully. 7ou %ill need to allo% a 56#25 hour
propagation time &or the D(- service to begin %orking.
4 'asih dalam tab menu D(-, klik tombol (anage D$%) akan muncul halaman baru,
kemudian klik tab menu C$(* Records) lalu klik tombol dd C$(* Record
4 +si Host $ame dengan +++ , lalu isi 8alue dengan ghs"google"com ) untuk TTL biarkan
sa$a. Akhiri dengan klik tombol dd Record.
4 -etelah proses selesai, klik tab Records. kemudian klik tombol dd Record
4 1ntuk Host $ame biarkan kosong, isi Destination ,P&- ddress dengan ./0".12"1."./ )
untuk TTL biarkan apa adanya. Kemudian klik tombol dd Record
4 Lakukan langkah Add A record sebanyak 9 kali lagi, namun +/ yang di masukkan adalah
nomor 53:.59;.96.53 , 53:.59;.9:.53 , 53:.59;.9).53 . -ehingga nanti akan ada 6 records
yang dihasilkan
4 Langkah penambahan +/ diatas dimaksudkan agar blog anda tidak mengalami error
apabila diakses tanpa %%%.
4 1ntuk setting .(A'< pada domain telah selesai, langkah selan$utnya adalah setting
pada blog anda yang di blogger.
,erikut cara setting blog anda yang di blogger
4 -ilahkan login ke blogger dengan +D anda
4 Klik Pengaturan untuk yang mau di custom domain
4 Klik tab Publikasikan
4 Klik Domain 3bahsesuaian
4 Klik Beralihlah ke pengaturan lan4ut
4 +silah Domain nda dengan nama domain yang tadi disetting D(- nya, $angan lupa
sertakan %%% didepannya. &ormatnya adalah %%%.domainanda. .ontoh
%%%.indodesigner.net. +silah veri&ikasi kata yang ada dan akhiri dengan klik tombol
%,(P$ %*T*L$.
4 -elesai.
/roses .ustom domain blogger telah selesai, namun biasanya memerlukan %aktu agar blog
anda bisa diakses menggunakan domain baru. /roses ini biasanya memakai %aktu paling
lama 56 $am, namun banyak yang hanya dua atau tiga $am telah selesai, dan blog anda bisa
diakses dengan domain anda.
-elamat mencoba dan semoga blog anda semakin tampil lebih pro&essional.
Cara (engganti Template di blogspot
-ekilas tentang template blog, Template +ebsite atau blog adalah desain#desain halaman
%eb ataupun blog beserta seluruh komponennya (misal ! gambar, stylesheet, dsb baik
berupa &ile statis maupun &ile dinamis yang berupa program atau aplikasi yang ber$alan
sebagai aplikasi %eb. -eperti yang anda lihat saat ini, bah%a terlihat tatanan gambar serta
tulisan di layar monitor anda, itulah yang dinamakan template.
Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa
sesuai dengan selera dan keinginan masing#masing. 0ika anda telah mahir membuat
template sendiri, anda dapat menggunakan template tersebut untuk blog anda. (amun, $ika
anda masih a%am dalam membuat template, blogger atau blogspot sendiri telah
menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan. -elain itu,
anda dapat pula mengunduh atau mendo%nload template blogger gratis dari penyedia
template blogger, salah satu contoh %ebsite yang menyediakan template blogger tersebut
adalah beralamat di http!""blogtemplate6u.com, disana terdapat ratusan template blogger
yang bisa anda gunakan secara gratis. namun, $ika anda menggunakan template gratis,
syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari
pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu
adalah sebagai apresiasi atas ker$a keras mereka dalam menyediakan template secara gratis.
Langsung ke topik utama, .ara mengganti template di blogspot atau blogger ada dua cara,
yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti
template dengan template yang didapat dari penyedia template. kita. ,erikut ulasannya !
Mengganti Template dengan Template yang disediakan blogger
,erikut cara#cara untuk mengganti template dengan template yang telah disediakan
blogger!
3. -ilahkan login ke blogger dengan +D anda.
5. Klik Rancangan"
9. Klik menu Perancang Template. -elan$utnya akan muncul $endela perancang
template blogger.
6. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang
terdia ber$umlah : template. -elain itu, anda dapat pula memilih background atau
gambar latar belakang dari template tersebut. 0ika sudah cocok dengan salah satu
template, klik PPL5 T! BL!G.
=. -elesai.
Mengganti Template dengan template dari penyedia template
,erikut cara#cara untuk mengganti template dengan template dari penyedia template !
3. Do%nload terlebih dahulu template yang anda sukai pada %ebsite penyedia template
blog gratis. -alah satu contoh anda bisa do%nload di blogger templates.
5. >ile template yang dido%nload, biasanya masih dalam bentuk terkompresi (?ip atau
rar, oleh karenanya anda perlu mengekstrak atau menguraikan &ile tersebut dengan
so&t%are ekstraktor seperti 6in7ip atau 6inRar) (amun $ika anda tidak memiliki
so&t%are tersebut, anda bisa mengekstraknya secara online di @ob?ip.
9. 7ang nanti di upload atau di unggah ke blogger hanyalah &ile yang berekstensi .Aml.
6. -ilahkan login ke blogger dengan +D anda.
=. Klik Rancangan.
:. Klik menu *dit HT(L.
2. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Do+nload
Template Lengkap.
). Klik tombol Bro+se"") pilih &ile template yang tadi dido%nload dan telah diekstrak (
&ile ekstensi .Aml sa$a . Kemudian klik tombol 3nggah.
;. Apabila ada muncul peringatan tentang %idget, klik pada tombol
P*RTH$K$ 6,DG*T.
3*. -elesai.
Kini tampilan blog anda lebih terasa &resh dibanding sebelumnya
-elamat mencobaB
Cara (emposting rtikel
,agi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel
kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di
dalam menu posting ada beberapa toolbar yang bisa anda gunakan.0ika anda sudah terbiasa
menggunakan microso&t @ord ataupun microso&t <Acel tentu barangkali tidak akan
mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila
saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.
Toolbar yang ada ketika posting !
##C 1ntuk merubah $enis hurup yang di gunakan
##C 1ntuk merubah ukuran hurup (heading
##C 1ntuk 'enebalkan hurup
##C 1ntuk memiringkan hurup
##C 1ntuk merubah %arna hurup
##C 1ntuk membuat link
##C 1ntuk membuat artikel men$adi rata kiri
##C 1ntuk membuat tulisan men$adi di tengah
##C 1ntuk membuat artikel men$adi rata kanan
##C 1ntuk membuat artikel men$adi rata kiri dan rata kanan
##C 1ntuk membuat sub bahasan oleh angka
##C 1ntuk membuat sub bahasan oleh bullet
##C 1ntuk mengecek spelling
##C 1ntuk memasukan gambar(upload gambar
##C 1ntuk membuat artikel dalam kode DT'L
##C 1ntuk membuat artikel dalam mode .ompose (biasa
##C 1ntuk me revie% (melihat artikel
.ara penggunaan toolbar di atas adalah blok (beri tanda terlebih dahulu tulisan yang akan
di edit, kemudian tekan tombol toolbar yang di inginkan.
Langkah#langkah dalam memposting suatu artikel!
3. -ebaiknya klik terlebih dahulu E <dit DT'LF,$ika langsung di mode E.omposeF,
sering ter$adi hang pada komputer (pengalaman saya pribadi. .opy artikel yang
telah anda buat sebelumnya, kemudian paste di area posting. <dit sesuai dengan
kemauan anda.
5. Klik tombol E compose E untuk melakukan editing ($ika anda masih bingung dengan
kode DT'L.
9. Klik tombol tool yang berlambang E panoramaF ber%arna biru, $ika anda ingin
memasukan gambar ataupun photo untuk menghiasi posting#an anda.
6. Klik tombol E /revie% E untuk melihat hasil posting#an anda yang nantinya akan
tampil di dalam blog, barangkali masih ada yang perlu di edit.
=. Klik tombol E publish E. -elesai. Tulisan hasil karya anda akan bisa dilihat dan di
baca oleh seluruh dunia.
(embuat Read (ore untuk Template
klasik
Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika
anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read
more di sini!
@ah $udul yang aneh, Gmembuat Read (oreG maksudnya apa? ,egini sobat, sebenarnya
saya kurang setu$u dengan $udul tersebut, tadinya saya ingin memberi $udul G'embuat
menu -elengkapnyaG, tapi berhubung kata GRead 'oreG yang paling di kenal di $agad blog,
ya saya pun ikut#ikutan (dasar tukang ngekor. 7a sudahlah kepan$angan ngobrolnya. Kita
mulai pembahasannya. ,agi para sobat yang baru mulai membuat blog, mungkin belum
mengetahui in&ormasi ini dan mudah#mudahan dengan membaca artikel ini dapat
menambah pengetahuan kita tentang yang namanya nge#blog.
-obat mungkin melihat bah%a artikel#artikel saya terlihat hanya berupa $udul#$udul dengan
satu atau dua buah paragrap sa$a, dan untuk melihat keseluruhan artikel harus meng klik
link yang bertuliskan 88 %elengkapnya"""9, ini di sebut pengkaburan atau
pengkamu&lasean postingan (ribet banget nyebutnya. ,agi sobat yang baru posting artikel
hanya satu atau dua artikel sa$a mungkin menganggap tidak perlu menyingkat artikel sobat,
namun $ika nanti artikel sobat sudah banyak, maka mungkin sa$a ada terbersit ingin
membuat menu ini.
Hke... kelamaan nga%urnya, mending langsung sa$a. 1ntuk membuat menu Read more
kita harus menambahkan beberapa kode DT'L ke dalam template blog kita. Tapi untuk
postingan kali ini, saya khususkan untuk blogger yang memakai template klasik sa$a, untuk
yang memakai template baru silahkan tunggu pada postingan yang akan datang.
-ilahkan ikuti langkah#langkah berikut !
Login ke blogger.com dengan id sobat
Klik menu bertuliskan Template
Klik menu *dit HT(L
$angan lupa .opy seluruh kode template milik sobat lalu paste pada notepad dan
kemudian simpan, untuk membuat back up data. +ni dimaksudkan apabila ter$adi
kesalahan dalam template setelah kita otak#atik, kita masih punya cadangan data
untuk mengembalikannya.
.opy kode DT'L di ba%ah, kemudian paste persis di atas kode I"styleC !
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<te!Page>
div.fullpost {display:inline;}
</te!Page>
1ntuk mempercepat pencarian kode </style>, silahkan sobat klik menu *dit yang
ada pada bar menu bro%ser, kemudian klik :ind ;on this page<""", lalu tulis
</style> trus klik tombol find ne=t, maka secara otomatis akan di ba%a ke kode
tersebut.
langkah selan$utnya adalah, silahkan copy kode berikut lalu paste setelah kode
IJ,log+tem,odyJC !
<MainOrArchivePage><"r/>
<a href#$<%&logte!Per!alin'()*%>$>)ead !ore+</a>
</MainOrArchivePage>
Lagi#lagi 1ntuk mempercepat pencarian kode <%&logte!&ody%>, silahkan sobat
klik menu *dit yang ada pada bar menu bro%ser, kemudian klik :ind ;on this
page<""", lalu tulis <%&logte!&ody%> trus klik tombol find ne=t, maka secara
otomatis akan di ba%a ke kode tersebut.
Klik tombol yang bertuliskan %>* %*TT,$G%
Langkah selan$utnya adalah klik menu %etting
Klik menu :ormatting
Dibagian ba%ah menu tersebut ada kotak di samping tulisan Post Template, nah isi
kotak kosong tersebut dengan kode di ba%ah ini !
<div class#$fullpost$>
</div>
-ebenarnya langkah diatas tidak %a$ib dilakukan,akan tetapi ini di maksudkan agar
ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa
harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu
mengingat kode tersebut.
kemudian $angan lupa klik tombol %a&e %ettings
-elesai
Cara Posting rtikel
Hke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara
memposting suatu artikel agar ada menu Readmore nya.
Klik menu Posting
klik menu *dit HT(L, nah di sana secara otomatis akan tampak kode yang kita
simpan tadi, yakni !
<div class#$fullpost$>
</div>
simpan artikel sobat yang ingin di tampilkan sebelum kode <div
class#$fullpost$>, kemudian simpan sisa keseluruhan artikel setelah kode <div
class#$fullpost$> dan sebelum kode </div>
Agar lebih $elas, saya beri contoh, misal artikelnya begini !
+ni adalah contoh tulisan yang di simpan pada a%al artikel yang akan selalu muncul
pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class#$fullpost$>
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengun$ung meng
klik link yang bertuliskan Read more.
</div>
Dasilnya yang akan tampak pada blog kita adalah seperti ini !
+ni adalah contoh tulisan yang di simpan pada a%al artikel yang akan selalu muncul
pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
)ead !ore+
,agaimana sobat, sudah $elaskan. bila belum $elas silahkan di tanyakan kembali pada
komentar.
-edikit clue, kata )ead !ore+ sebenarnya bisa kita ganti sesuai dengan keinginan kita,
misalkan kita rubah men$adi Baca selengkapnya""", %elengkapnya"", Lan4utannya""" atau
apa sa$a yang penting kata tersebut bisa memberi tahu kepada para pengun$ung bah%a
artikel kita ada kelan$utannya.
Kode di atas sebenarnya ada alternati& lain, yakni memakai kode ,pan, $ika berminat, ganti
semua kode div men$adi ,pan. Dasilnya akan sama, cuma bagi para sobat yang suka
posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan
perintah lain yang memakai kode ,pan.
(embuat Read (ore untuk Template
klasik
Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika
anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read
more di sini!
@ah $udul yang aneh, Gmembuat Read (oreG maksudnya apa? ,egini sobat, sebenarnya
saya kurang setu$u dengan $udul tersebut, tadinya saya ingin memberi $udul G'embuat
menu -elengkapnyaG, tapi berhubung kata GRead 'oreG yang paling di kenal di $agad blog,
ya saya pun ikut#ikutan (dasar tukang ngekor. 7a sudahlah kepan$angan ngobrolnya. Kita
mulai pembahasannya. ,agi para sobat yang baru mulai membuat blog, mungkin belum
mengetahui in&ormasi ini dan mudah#mudahan dengan membaca artikel ini dapat
menambah pengetahuan kita tentang yang namanya nge#blog.
-obat mungkin melihat bah%a artikel#artikel saya terlihat hanya berupa $udul#$udul dengan
satu atau dua buah paragrap sa$a, dan untuk melihat keseluruhan artikel harus meng klik
link yang bertuliskan 88 %elengkapnya"""9, ini di sebut pengkaburan atau
pengkamu&lasean postingan (ribet banget nyebutnya. ,agi sobat yang baru posting artikel
hanya satu atau dua artikel sa$a mungkin menganggap tidak perlu menyingkat artikel sobat,
namun $ika nanti artikel sobat sudah banyak, maka mungkin sa$a ada terbersit ingin
membuat menu ini.
Hke... kelamaan nga%urnya, mending langsung sa$a. 1ntuk membuat menu Read more
kita harus menambahkan beberapa kode DT'L ke dalam template blog kita. Tapi untuk
postingan kali ini, saya khususkan untuk blogger yang memakai template klasik sa$a, untuk
yang memakai template baru silahkan tunggu pada postingan yang akan datang.
-ilahkan ikuti langkah#langkah berikut !
Login ke blogger.com dengan id sobat
Klik menu bertuliskan Template
Klik menu *dit HT(L
$angan lupa .opy seluruh kode template milik sobat lalu paste pada notepad dan
kemudian simpan, untuk membuat back up data. +ni dimaksudkan apabila ter$adi
kesalahan dalam template setelah kita otak#atik, kita masih punya cadangan data
untuk mengembalikannya.
.opy kode DT'L di ba%ah, kemudian paste persis di atas kode I"styleC !
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<te!Page>
div.fullpost {display:inline;}
</te!Page>
1ntuk mempercepat pencarian kode </style>, silahkan sobat klik menu *dit yang
ada pada bar menu bro%ser, kemudian klik :ind ;on this page<""", lalu tulis
</style> trus klik tombol find ne=t, maka secara otomatis akan di ba%a ke kode
tersebut.
langkah selan$utnya adalah, silahkan copy kode berikut lalu paste setelah kode
IJ,log+tem,odyJC !
<MainOrArchivePage><"r/>
<a href#$<%&logte!Per!alin'()*%>$>)ead !ore+</a>
</MainOrArchivePage>
Lagi#lagi 1ntuk mempercepat pencarian kode <%&logte!&ody%>, silahkan sobat
klik menu *dit yang ada pada bar menu bro%ser, kemudian klik :ind ;on this
page<""", lalu tulis <%&logte!&ody%> trus klik tombol find ne=t, maka secara
otomatis akan di ba%a ke kode tersebut.
Klik tombol yang bertuliskan %>* %*TT,$G%
Langkah selan$utnya adalah klik menu %etting
Klik menu :ormatting
Dibagian ba%ah menu tersebut ada kotak di samping tulisan Post Template, nah isi
kotak kosong tersebut dengan kode di ba%ah ini !
<div class#$fullpost$>
</div>
-ebenarnya langkah diatas tidak %a$ib dilakukan,akan tetapi ini di maksudkan agar
ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa
harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu
mengingat kode tersebut.
kemudian $angan lupa klik tombol %a&e %ettings
-elesai
Cara Posting rtikel
Hke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara
memposting suatu artikel agar ada menu Readmore nya.
Klik menu Posting
klik menu *dit HT(L, nah di sana secara otomatis akan tampak kode yang kita
simpan tadi, yakni !
<div class#$fullpost$>
</div>
simpan artikel sobat yang ingin di tampilkan sebelum kode <div
class#$fullpost$>, kemudian simpan sisa keseluruhan artikel setelah kode <div
class#$fullpost$> dan sebelum kode </div>
Agar lebih $elas, saya beri contoh, misal artikelnya begini !
+ni adalah contoh tulisan yang di simpan pada a%al artikel yang akan selalu muncul
pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class#$fullpost$>
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengun$ung meng
klik link yang bertuliskan Read more.
</div>
Dasilnya yang akan tampak pada blog kita adalah seperti ini !
+ni adalah contoh tulisan yang di simpan pada a%al artikel yang akan selalu muncul
pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
)ead !ore+
,agaimana sobat, sudah $elaskan. bila belum $elas silahkan di tanyakan kembali pada
komentar.
-edikit clue, kata )ead !ore+ sebenarnya bisa kita ganti sesuai dengan keinginan kita,
misalkan kita rubah men$adi Baca selengkapnya""", %elengkapnya"", Lan4utannya""" atau
apa sa$a yang penting kata tersebut bisa memberi tahu kepada para pengun$ung bah%a
artikel kita ada kelan$utannya.
Kode di atas sebenarnya ada alternati& lain, yakni memakai kode ,pan, $ika berminat, ganti
semua kode div men$adi ,pan. Dasilnya akan sama, cuma bagi para sobat yang suka
posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan
perintah lain yang memakai kode ,pan.
(embuat Te=t rea
Apa itu te=t area?. 1ntuk memudahkan anda memahami apa itu teAt area, silahkan alihkan
perhatian anda ke kolom sebelah kanan layar, di ba%ah tulisan 'au tuker link, ada sebuah
kotak yang di dalamnya berisi teAt kode#kode HT(L, itulah yang di sebut teAt area. (ah
dengan melihat contoh tadi, maka dapat kita katakan bah%a TeAt area adalah area atau
tempat untuk menyimpan teAt atau tulisan dengan membentuk area baru. ,iasanya teAt area
ini di gunakan untuk menyimpan kode#kode HT(L ataupun teAt lainnya agar bisa di copy
oleh para pengun$ung.
1ntuk membuat te=t area, silahkan anda .opy kode di ba%ah ini !
<p align#$center$><te-tarea na!e#$code$ ro.s#$/$ cols#$01$> 2ulis te-t
ataupun 'ode3'ode yang anda ingin'an di sini4 !a'a nanti tulisan anda
a'an ta!pil di dala! te-t area </te-tarea></p>
-ebagai contoh !
Keterangan ! ro%sKG:G, menun$ukan tinggi dari teAt area, $adi $ika anda menginginkan teAt
area yang tinggi maka silahkan ganti angka G : tadi dengan angka yang lebih tinggi
nilainya.
.olsKG5*G, menun$ukan lebar dari teAt area. 0ika anda menginginkan teAt area yang lebar
maka silahkan ganti angka G 5* G tadi dengan angka yang lebih tinggi nilainya.
Te=t rea dengan memakai HighLight
Ada variasi lain dari membuat teAt area ini, yakni teAt area dengan menggunakan tombol
highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengun$ung
untuk mengcopy seluruh teAt ataupun kode#kode yang di berikan, karena dengan hanya
sekali tekan sa$a pada tombol highlight tadi, maka seluruh teAt ataupun kode#kode yang
ada di dalamnya akan di highlight dan tinggal di copy sa$a. >asilitas ini sangat berguna
tatkala teAt ataupun kode#kode yang di berikan dalan $umlah yang sangat banyak dan ini
akan mengurangi resiko tertinggalnya suatu teAt ataupun kode#kode untuk di copy. 1ntuk
membuat teAt area dengan menggunakan highlight ini silahkan anda copy kode HT(L di
ba%ah !
<div><for! na!e#$copy$><div align#$center$><input
onclic'#$5avascript:this.for!.t-t.focus67;this.for!.t-t.select67;$
type#$"utton$ value#$8ighlight All$> </div><div align#$center$></div><p
align#$center$><te-tarea style#$9:28: ;11p-; 8<=82: >??p-$ na!e#$t-t$
ro.s#$>11$ .rap#$@)2(A*$ cols#$AA$>si!pan tulisan anda di sini4 !a'a
tulisan yang anda tulis a'an !uncul di sini dan siap di copy oleh para
pengun5ung</te-tarea></p></div></for!>
-ebagai contoh !
Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas
mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang
bertuliskan Highlight ll, dan yang kedua adalah elemen kode untuk membuat teAt area.
<lemen tombol highlight All !
3. Idiv alignKGcenterGC ##C kata center menun$ukan bah%a posisi tombol akan berada
di tengah, $adi $ika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti
dengan kata left. Dan $ika ingin berada di tepi sebelah kanan, tinggal ganti dengan
kata right.
5. Iinput onclickKG$avascript!this.&orm.tAt.&ocus(Lthis.&orm.tAt.selec(GC ##C kode ini
artinya ketika tombol highlight di klik, maka seluruh teAt yang ada di dalamnya
akan di highligt (di tandai atau di blok, $adi anda $angan merubah tulisan ini.
9. 8alueKGDighlight AllG ##C kata Highlight All adalah kata yang akan muncul di
dalam tombol, $adi $ika anda ingin merubah tulisan ini silahkan ganti dengan kata
yang anda inginkan.
<lement te=t area !
3. Ip alignKGcenterGC ##C ini menun$ukan bah%a teAt area akan berada di tengah, nah
$ika anda ingin teAt area anda berada di tepi kiri, ganti kata center dengan kata let,
bila ingin di tepi kanan, ganti dengan kata right.
5. IteAt styleKG@+DTD! 9**pAGC##Ckata G@+DTD!9**pAG menun$ukan lebar dari teAt
area tersebut sebanyak 9** piAel, $adi $ika anda ingin memperpendek atau
memperpan$ang lebar teAt area, anda tinggal menggantinya dengan angka yang anda
inginkan. misal! G@+DTD!2**pALG
9. D<+MDT! 366pA ##C angka G366pAG menun$ukan bah%a teAt area akan mempunyai
tinggi sebesar 366 pA, $adi $ika anda ingin merubahnya tinggal ganti angka tersebut
dengan angka yang anda inginkan. 'isal ! D<+MDT!3:*pA.
.ontoh teAt area yang memakai tombol highlight diatas, memuat skript untuk melindungi
dari right click para pengun$ung. skript ini di pakai apabila anda tidak ingin tulisan#tulisan
anda di copy paste oleh pengun$ung. bagi yang berminat silahkan copy lalu pasang pada
kode DT'L anda antara kode ID<ADC dan I"D<ADC selamat mencoba.
(embuat (enu Dropdo+n
Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan.
-etiap memasuki bulan baru, seperti 0anuari, maka arsip bulan Desember akan tampil di
sidebar. 'asalahnya, kalau kita sudah ngeblog setahun, maka arsip dari 0anuari sampai
Desember akan ber$e$er di sidebar kita. ,agaimana kalau dua dan tiga tahun lagi? Langkah
praktis mengatasi hal ini adalah dengan membuat pull#do%n menu seperti di ba%ah ini!
0adi, berapa bulan"tahun kita blogging di blogger"blogspot, menu bulan#bulan tsb tidak
akan memenuhi dan ber$e$er pan$ang di sidebar kita. 7g tampak hanya nama GArchivesG,
baru setelah di klik, akan muncul nama bulan arsip#arsip kita.
1ntuk membuat arsip pulldo%n ini ada dua yakni untuk blogger dengan template klasik,
dan template baru. 1ntuk template klasik langkahnya yaitu !
3. Login ke blogger.com dg id Anda
5. Klik Template
9. Di bagian sidebar blog Anda bagian archives, ada kode html sbb!
B<&loggerArchives>
<a href#$<%&logArchive()*%$%gt;C><%&logArchiveDa!e%></a>
</&loggerArchives>
6. (ah, ganti kode di atas dg kode html di ba%ah ini!
<select na!e#$archive!enu$
onchange#$docu!ent.location.href#this.optionsEthis.selectednde-F.value;$>
<option selected>3 Archives 3</option>
<&loggerArchives>
<option value#$<%&logArchive()*%>$><%&logArchiveDa!e%></option>
</&loggerArchives>
</select>
=. Apabila selesai, klik -A8< .DA(M<-. ,ila sudah DH(<, klik R</1,L+-D.
:. -elesai.
1ntuk anda yang memakai template baru, langkahnya lebih mudah yaitu !
3. login dulu, tentunya dengan id anda
5. klik LA7H1T
9. Klik /AM< <L<'<(T-, cari element (kotak yang bertuliskan ,log Archive
6. Klik <dit pada kotak ,log Archive tadi
=. Di samping tulisan -tyle ada beberapa radio button, pilih radio button yang
bertuliskan Dropdo%n 'enu dengan cara memberi tanda tik"cek
:. Klik -ave .hanges
2. -elesai
(ah keterangan di atas tadi merupakan langkah#langkah untuk membuat menu Dropdo%n
untuk Arsip, -ekarang bagai mana caranya membuat menu dropdo%n yang di dalam nya
ada linknya, saya ambil contoh untuk menu Dropdo%n milik saya pribadi yang berada di
sebelah kanan atas yang berisi tulisan E blog tutorial E. 1ntuk membuatnya silahkan anda
copy kode DT'L di ba%ah !
<for!><select na!e#$!enu$
onchange#$.indo..open6this.optionsEthis.selectednde-F.value4CG"lan'C7$si
He#> na!e#!enu><option value#1 selected>tulisan disini yang a'an !uncul
duluan</OP2OD>
<option value#$isi dengan addres yang ingin di tu5u$>tulisan di sini yang
a'an !uncul</option> </select></for!>
-ebagai contoh untuk menu Dropdo%n milik saya !
<for!><select na!e#$!enu$
onchange#$.indo..open6this.optionsEthis.selectednde-F.value4CG"lan'C7$si
He#> na!e#!enu>
<option>3 &log 2utorial 3</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/"i'in3
"log.ht!l$>Me!"uat &log</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/cara3setting3
"log.ht!l$>setting &log</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/!e!ilih3
te!plate.ht!l$>Me!ilih 2e!plate</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/!engatur3hurup3
dan3.arna.ht!l$>.arna B hurup</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/cara3
!e!posting3arti'el.ht!l$>Posting Arti'el</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/!e!"uat3read3
!ore3>.ht!l$>)ead !ore 6>7</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/!e!"uat3te-t3
area.ht!l$>2e-t area</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/"logger3
e!oticons.ht!l$>&logger <!oticons</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/yahoo3
!essenger3e!oticons.ht!l$>Jahoo+<!oticons</option>
<option value#$http://'olo!3tutorial."logspot.co!/011I/1?/do.nload3
gratis.ht!l$>:o.nload =ratis</option>
</select></for!> Dasilnya akan seperti ini !
'udah bukan? -elamat mencoba B