TUTOR WAIS: Mei 2011

Rabu, 25 Mei 2011

Membuat Recent Bergambar

Memasang widget recent post pada blog hampir dilakukan oleh mayoritas blogger, tentu saja alasannya untuk mempermudah pengunjung blog mengetahui artikel terbaru di blog kita dan untuk memancing pengunjung agar membaca artikel lain di blog kita. Pada artikel kali ini saya akan sedikit berbagi mengenai cara membuat recent posts bergambar / recent posts menggunakan thumbnails seperti yang saya gunakan di blog ini. Mudah2an widget ini dapat lebih mempercantik blog teman-teman dan lebih menarik pengunjung untuk meng-klik link tersebut.

1. Login ke account blogger.
2. Pada dashboard klik: Layout � Add a getget � pilih "HTML/Javascript"
3. Copy paste code di bawah ini:

<script language="JavaScript">
imgr = new Array();
imgr[0] =  "http://i44.tinypic.com/2r72hjd.jpg";
imgr[1] =  "http://i44.tinypic.com/2r72hjd.jpg";
imgr[2] =  "http://i44.tinypic.com/2r72hjd.jpg";
imgr[3] =  "http://i44.tinypic.com/2r72hjd.jpg";
imgr[4] =  "http://i44.tinypic.com/2r72hjd.jpg";
showRandomImg = true;
boxwidth = 280;
cellspacing = 2;
borderColor = "#cccccc";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://komunitas-bantu-membantu.blogspot.com/";
</script>
<script src="http://viemonsta.googlecode.com/files/devrecentpost.js"  type="text/javascript"></script>

4. Save

Jangan lupa ganti URL yang berwarna biru di atas dengan alamat URL blog teman-teman, untuk membuat tampilan sesuai dengan template blog teman-teman silahkan edit code yang berwarna merah. Dibawah ini sedikit penjelasannya:

imgr[0] = Pic yang keluar  bila artikel tidak memiliki pic, silahkan ganti dengan URL pic  teman-teman
 boxwidth = Lebar widget
 cellspacing = Jarak antara  gambar
 borderColor = Warna border  (ganti dengan warna background template)
 thumbwidth & thumbheight =  Tinggi dan lebar gambar
 fntsize = Ukuran text
 acolor = Warna text
 aBold = Bold text, isi dengan  "true" bila menginginkan bold atau "false" bila tidak
 numposts = Jumlah post yang  ingin ditampilkan

Silahkan comment di bawah kalo ada yang mau ditanyakan. Selamat mencoba..

HTML Bergambar

ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).

Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau copy paste script yang sudah diedit tadi disini

Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :

Nama file: latihan5_1.html

<html>
<head>
<title>Latihan5-1</title>
</head>
<body><img width="160" height="160" src="image027.jpg">
</body>
</html>

Tugas tambahan:Letakkan gambar tersebut ke kanan, setelah itu ke kiri.

Latihan 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg

Nama file: latihan5_2.html

<html>
<head>
<title>Latihan5-1</title>
</head>
<body><img width="160" height="160" src="./images/image050.jpg">
</body>
</html>

Latihan 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di bawah ini:

Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto

Nama file: latihan5_3.html

<html>
<head>
<title>Latihan5-3</title>
</head>
<body><img width="80" height="80" src="image027.jpg" align="left" border="8">
Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto
</body>
</html>

Cara Menghilangkan Icon Quick Edit Berbentuk Tang dan Obeng

Bagi para Blogger, pasti pernah melihat icon berbentuk tang dan obeng pada template Anda. Yang tampilannya seperti ini:

Ini merupakan sebuah tool yang berfungsi untuk mengedit widget secara langsung pada halaman blog. Sehingga Anda tidak perlu lagi masuk ke menu Page Elements untuk melakukan pengeditan. Dengan demikian Anda bisa lebih mudah untuk memanage blog Anda

Sebenarnya tool ini, hanya akan muncul jika kita login ke akun blogger. Jadi jika kita masuk ke blog kita tanpa login ke blogger maka icon ini tidak akan muncul begitu juga pengunjung yang mengunjungi blog kita.

Tapi bagi Anda yang merasa kurang nyaman dengan tool ini anda bisa menghilangkannya dengan cara berikut:

1. Login ke Blogger. Klik Design -> Edit HTML.

2. Lalu backup template dengan cara klik pada Download Full Template
3. Jika sudah, beri centang pada "Expand Widgets Templates"

4. Tekan Ctrl+F untuk membuka kotak Find

5. Ketikkan kode <b:include name='quickedit'/> kedalam kotak lalu klik Next

6. Jika sudah ketemu, hapus kode tersebut. Setiap kode <b:include name='quickedit'/> mewakili satu icon tang dan obeng jadi jika template Anda terdapat lebih dari satu icon tang dan obeng. Gunakan Ctrl+F untuk mencarinya.

7. Kalau sudah menghapus semuanya. Klik Save Template lalu klik View Blog untuk melihat hasilnya. Sekarang semua icon quick edit yang berbentuk tang dan obeng sudah tudak ada lagi. Jika masih ada, mungkin masih ada kode <b:include name='quickedit'/> yang belum terhapus. Coba cari kembali dengan cara diatas.

Catatan:

Nah, jika anda kesusahan dengan semua itu ada cara sangat praktis yakni hanya dengan cara menyisipkan kode di bawah ini di atas kode ]]></b:skin>

    .quickedit{
    display:none;
    }

Simpan, dan selesai...

Cara Membackup Template Blog

Template adalah sebuah pola dari website yang didesain sedemikian rupa untuk menampilkan artikel, berita, informasi, dan lain-lainnya. Jadi semua aktivitas blog/ website disimpan dalam template.

Oleh karena itu, kita harus merawat template kita dengan baik supaya tidak terjadi hal-hal yang tidak kita inginkan seperti kesalahan coding, blog terhapus atau kena banned oleh mas Google. Salah satu cara untuk mengatasinya yaitu Backup template.

Ada 2 cara untuk membackup template:

Cara pertama:

1. Login ke Blogger. Klik Design -> Edit HTML
2. Klik pada Download Full Template. Pilih Save File lalu tekan OK
3. Selesai. Sekarang template Anda sudah tersimpan di komputer Anda

Untuk merestore kembali. Pada menu Edit HTML, klik browse lalu cari template yang mau di restore. Klik Upload. Jika ada muncul konfirmasi "Widgets are about to be deleted". Klik Confirm & Save lalu klik View Blog untuk melihat hasilnya.

Cara Kedua:

1. Pada menu Edit HTML. Klik "Expand Widget Templates"
2. Copy semua kode template dengan cara tekan Ctrl+A lalu tekan Ctrl+C
3. Buka program Notepad lalu paste semua kode ke notepad dengan cara tekan Ctrl+V
4. Selesai. Jangan lupa untuk save notepadnya

Catatan: Kedua cara diatas hanya untuk membackup template. Untuk membackup artikel dan widget seperti shoutbox, jam dinding, kamus dan lain-lain. Silahkan ikuti langkah-langkah dibawah ini.

Cara membackup widgets:

1. Klik Layout -> Page Elements
2. Klik Edit pada widget yang Anda pasang
3. Copy semua kode lalu paste ke notepad
4. Selesai

Cara membackup postingan/ artikel:

Cara Manual:
1. Login ke Blogger. Klik menu Posting -> Edit Posts
2. Klik Edit pada artikel yang mau dibackup
3. Pada mode Compose, copy semua artikel lalu paste ke Ms Office atau Open Office
4. Selesai

Cara Otomatis:

1. Klik menu Setting -> Email
2. Isi alamat email Anda dalam kotak "BlogSend Address" seperti contoh dibawah ini:

Sebaiknya isi alamat email Anda lebih dari satu. Supaya alamat email yang satu kena banned atau kena hack masih ada yang lain.

3. Setelah itu klik Save Settings.
4. Selesai. Sekarang setiap kali Anda memposting artikel baru maka artikelnya akan otomatis terkirim ke alamat email Anda. Contohnya bisa Anda lihat pada gambar dibawah ini:

Artikel yang terkirim ke alamat email yahoo.

Artikel yang terkirim ke alamat email Google.

Artikel yang dikirim ke email Google tidak akan menampilkan gambar postingan. Untuk menampilkannya, Anda harus klik pada link Display image below atau Always display image from... jika Anda ingin postingan berikut tetap menampilkan gambar.

"Saran saya backuplah selalu isi blog Anda setiap kali ada penambahan atau pengurangan kode supaya jika terjadi sesuatu pada blog Anda, anda dapat mengembalikannya seperti semula".

Axioo HNM, Low Price High Class

Dengan desain hitam elegan dan anggun, telah terlahir keluarga Notebook AXIOO baru bernama AXIOO NEON HNM. Inilah notebook pertama di dunia yang menggunakan Processor Intel Core i7 generasi kedua. Masalah kecepatan, jangan ditanya, AXIOO NEON HNM ini lahir dengan 4 core yang masing-masing terdiri dari 2 thread hyperthreading, masih ditambah dengan teknologi Turbo Boost jelas tidak hanya menawarkan kecepatan semata tapi juga lebih hemat daya.Jangan kaget jika melihat berapa kapasitas harddisknya. Tidak tanggung-tanggung 750 GB storage bertipe 2,5? SATA dibenamkan ke dalam tubuh elegan notebook ini. Untuk mendukung aktivitas multitasking, telah didukung RAM tipe DDR3 sebesar 4 GB. Jika hal itu masih kurang, masih bisa dimungkinkan ditambah hingga menjadi 8 GB melalui slot memori SODIMM. Dengan spec semacam ini mau menyimpan data sebanyak apapun, sampai kapanpun, mau bekerja dengan beragam aplikasi apapun dijamin tetap stabil, tetap lancar tidak terganggu dengan kasus �hank� atau program �not responding�. Kerja anda dengan notebook ini akan menjadi lebih nyaman lagi karena adanya monitor LCD 14 inch dengan resolusi maksimal 1366�768 wide screen LED backlight, keyboard dengan tipe Winkey Isolated Keyboard yang lembut serta touch pad dengan multi-gesture function. Waktu stand by Axioo tipe ini 417 Min & Work Time : 70 Min.

Masalah slot atau I/O begitu komplit, 2 port untuk USB 2.0, 1 port untuk HDMI serta 1 port eSATA/USB2.0 combo. Tentu saja masih ada port-port standar seperti Headphone Jack, Microphone Jack, RJ-45 Jack for LAN, DC-In Jack untuk charger dan VGA Port yang biasa dipakai untuk LCD proyektor. Selain itu 6-in-1 slot card reader dan DVD burner super multi telah ada Axioo HNM ini.

img src : www.axiooworld.com

Yang merasa saya terkagum-kagum akan notebook ini adalah adanya tombol pintas SoCoNet, yaitu dengan sekali klik tombol tersebut kita akan langsung terhubung dengan jejaring sosial semacam Facebook dan Twitter. Tentunya dengan tambahan perangkat wifi 802.11 b/g/n untuk kebutuhan akses internet nirkabel yang saat ini begitu mudah dijumpai. Komunikasi nirkabel lewat bluetooth juga tersedia, malah bluetooth tipe 3.0. Video Camera 1, 3 MP saya rasa cukup bagi kita untuk video conference, chatting dan aktivitas lainnya. Untuk memutar DVD, film, musik dan multimedia lain cukuplah High Definition Audio Support SRS memanjakan indera pendengaran anda.

Tak ada gading yang tak retak, begitu juga dengan Notebook Axioo ini, dengan VGA HD Graphic family saya rasa kurang nyaman untuk para gamer dan desainer, berbeda ketika menggunakan VGA kelas nVIDIA atau ATI. Kemudian untuk mengikuti perkembangan teknologi sudah seharusnya menyertakan bluetooth ver. 4.0 serta port USB 3.0. Oya, notebook ini juga tidak ada pre-install OS.

Notebook dengan fasilitas yang wah dan luar biasa ini dibanderol dengan harga sekitar 6.990.000 rupiah. Hal ini tentu saja harga yang sangat murah bila dibandingkan dengan produk yang sama dengan merek lain. Recommended bagi anda mahasiswa, pekerja kantoran atau siapapun yang menginginkan produk notebook yang murah tapi berkualitas kelas dunia. Percayalah, inilah produk kebanggaan Indonesia yang Low price High Class

Spesifikasi komplit dan resmi bisa dicek di laman ini.

ANIMASI LABEL TAG CLOUD

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut tepat dibawah kode yang diatas

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

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka 333333 menunjukkan warna teks dan angka 12 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

Selamat mencoba.

Widgetbox, Surganya pecinta Aksesoris Blog

Blog, selain berisikan tulisan-tulisan ataupun artikel takkan terlepas dari yang namanya widget atau aksesories dari blog, seperti tulisan terdahulu saya di sini, ternyata telah ada situs penyedia Aksesories-aksesories dari Blog. Salah satunya beralamatkan di Widgetbox.com� Bisa dikatakan situs ini adalah surganya widget2 blog baik wordpress maupun blogspot, sudah dibuatkan kodenya sendiri-sendiri� .

screenshot Widgetbox

Langkah pertama sign in dulu biar mendapat fasilitas penuh dari Layanan ini dengan klik sign in di pojok kanan atas, formulirnya kurang lebih :

formulir pendaftaran widgetbox

Untuk mencari widget apapun yang kamu hendaki dapat dicari melalui kolom BROWSE BY TAG yang berada di sebelah kanan, screenshotnya :

Singkat saja, caranya hanya dengan memilih ( bisa dengan dengan search atau browse by tag ) setelah ketemu langsung saja GET WIDGET, contohnya akan keluar menu sebagai berikut :

Cari tipe-tipe blog yang kamu pakai ( ada My Space, Facebook, Blogger, TypePad, Wordpress, dan sebagainya ), tiap type/jenis blog akan berbeda kodenya, makanya cari yang support dengan blog kamu.

Selasa, 24 Mei 2011

Cara Pasang Banner di Blog

Browse � Home � Gambar � Tutorial Blogspot � Cara Pasang Banner di Blog

Agar blog kita kelihatan lebih bagus dan dinamis, ada baiknya kita pasang banner di beberapa sidebar atau header blog kita. Banyak pengunjung blog yang langsung tertuju ke arah banner, apalagi jika kita punya banner yang interaktif dengan pengunjung.

Misalnya jika sobat terdaftar di suatu situs bisnis online, pastinya sobat akan mendapatkan banner untuk mempromosikan link url sobat di tempat sobat mendaftar. Banner yang diberikan berupa kode HTML yang bentuknya agak sedikit ribet, tapi jika setelah kita copy paste ke blog kita, jadinya akan berupa gambar atau banner yang kita maksud.
Seperti ini contohnya, gambar berikut saya dapat setelah mengikuti program bisnis online yang dikenal dengan nama paid to click atau PTC.

dan biasanya akan diberikan kode html yang nantinya akan kita pasang di blog kita, seperti ini contoh kode html-nya :
<a href="http://www.buxp.net/?r=miskahiper"><img src="http://buxp.net/banner1.gif" alt="" /></a>
dan bagaimana cara memasangnya di blog kita? silahkan ikuti panduannya berikut ini :

Login ke Blogger dengan ID sobat.
Klik Tata Letak.
Klik Elemen Halaman.
Kemudian klik yang bertuliskan Tambah Gadget, bisa di sidebar, header atau bagian bawah template.
Kemudian pilih yang HTML/Java Script
Copy paste kode HTML sobat kedalamnya, sobat bisa menambahkan judul diatasnya jika mau.
Lalu klik Simpan.
Selesai.

Membuat Iklan banner sendiri

Bagaimana jika sobat ingin memasang banner atau gambar sendiri ke dalam blog sobat dan jika di klik akan menuju ke situs atau blog sobat yang lain? saya akan berikan contohnya berikut ini.

Saya punya gambar kecil dengan bentuk seperti ini :

Bagaimana membuatnya menjadi banner yang mempunyai link didalamnya?

Upload gambar tersebut kedalam situs penyimpanan online, sobat bisa upload ke Photobucket atau Google Sites
Anggap saja sobat ingin menggunakan jasa Photobucket, pada halaman depan silahkan sobat klik Join Now It�s Free! untuk menjadi anggota
Ikuti saja langkah-langkah pendaftarannya sampai selesai.
JIka sudah selesai register, klik login untuk masuk ke halaman utama Photobucket
Bagaimana cara upload gambarnya? pada bagian atas coba cari tulisan Upload images & videos, klik dan upload gambar yang sudah sobat siapkan.
Setelah selesai upload gambar, kemudian sorot pada gambar tersebut dan klik yang HTML Code
Sekarang copy paste saja dulu kedalam notepad, misalnya kode html untuk gambar yang saya upload ke Photobucket seperti ini :
<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=BANNER2.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
Hapus kode yang berwarna merah dan ganti dengan kode url blog sobat atau situs yang ingin sobat beri link, sehingga jadinya seperti dibawah ini :
<a href=http://miscah.blogspot.com" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
Kode tersebutlah yang sekarang bisa sobat copy paste ke blog sobat.

Mudah kan, selamat berkreasi !

Memasukan gambar via Photobucket

Photobucket mungkin tidak terlalu aneh didengar oleh para blogger sekalian, hosting gambar adalah fitur utama website ini. cukup populer karena menyediakan fitur yang cukup lengkap untuk website yang menyediakan hosting gambar gratis, kegunaannya selain bisa dipakai untuk menyisipkan gambar pada forum, website, email anda bisa juga dipergunakan untuk di blog, berbicara tentang blog saya akan menjelaskan tentang bagaimana cara memasukan image langsung dari photobucket ke blogger anda dengan lengkap dan bergambar, berikut caranya:

1. Daftarkan diri anda ke Photobucket

2.Upload gambar yang akan di sisipkan

3.Digambar yang anda Upload carilah layar seperti disamping lalu copy alamat yang ada pada bagian direct link

3.Login diblog anda www.blogger.com

4.Masuk ke bagian Edit Tata Letak
5.Klik Tambah Gadget

6.Pilih Gadget gambar, dan otomatis akan ditambahkan ke blogger anda

7.Akan muncul layar seperti ini,pilih upload gambar dari web dan masukan link yang sudah kita copy tadi di kolom yang disediakan.

8.Simpan

Merubah Template pada Blog

Blogger baru saja mengeluarkan fitur terbaru yaitu Template Designer. Template Designer merupakan fitur yang memudahkan bagi para blogger untuk mendesign template sendiri dengan Online. Tools ini terintegrasi langsung dengan Dashboard Blogger, yang dapat diakses pada menu Tata Letak. Dengan template designer ini maka kita dapat membuat template kita sendiri sesuai dengan keinginan kita. Jadi buat blogger pemula sekalipun bisa membuat design blognya sendiri, karena toola ini sangat mudah digunakan.
Untuk mencoba fitur terbaru ini kita masuk ke blogger melalui halaman draft blogger : http://draft.blogger.com.

Setelah kita klik Template Designer/Perancang Template maka kita akan menuju halaman baru, yang menampilkan preview dari blog kita serta tools template designer. Banyak sekali fitur dari Blogger Template Designer ini, yang dibagi menjadi 4 tab.

1. Templates
Disini kita bisa memilih jenis template yang kita inginkan.
2. Background
Setelah memilih template, kita dapat memilih background untuk blog kita. Terdapat banyak sekali background yang disediakan oleh blogger, kita tinggal pilih sesuai dengan kategori.
3. Layout
Disini kita bisa menentukan bagaimana layout blog kita, apakah dengan 1 colom saja, atau 2 colom, atau juga 3 colom serta dengan variasinya.
4. Advanced
Pada tab ini kita bisa mengatur lebih rinci dari setiap element pada blog kita.

Berkaryalah Truuss..>!!!

Editor Posting di Blog (Posting)

Sesuai dengan janji saya pada postingan sebelumnya, kali ini saya ingin membahas tentang fitur baru di blogger yaitu Editor posting baru. Selain itu ada juga yang request tentang bagaimana caranya membuat readmore atau �baca selengkapnya...� di blog kita. Nah dengan dikeluarkannya fitur baru pada editor posting ini kita dapat lebih mudah untuk memotong postingan, kemudian menampilkan �readmore� tersebut.
Ok lah....., Mari kita bahas satu-satu tentang fitur baru pada editor posting tersebut biar lebih jelas :
Insert Jump Break
Jika sebelumnya kita kesulitan untuk membuat sendiri fitur ini melalui editing HTML, kini sudah disediakan oleh blogger melalui editor posting barunya. Fitur ini berguna untuk memotong postingan kita dan memberikan tautan �readmore� untuk membaca artikel selengkapnya.
Nah untuk lebih jelasnya liat daftar menu berikut ini :

Yang diberi kotak merah merupakan fitur Insert Jump Break
Untuk melakukan pemotongan posting dan menampilkan readmore (baca selengkapnya) caranya seperti ilustrasi dibawah ini :

Image Upload yang baru
Pada editor posting baru ini blogger telah menggantikan fitur image upload yang lama yaitu dengan memunculkan window popup, dengan Image upload yang lebih cepat dan praktis. Image upload ini akan muncul pada tab yang sama pada editor posting tersebut.
Selain itu saat gambar sudah dimasukkan pada editor posting, terdapat pengaturan lanjutan yang dapat kita jumpai saat mengklik gambar tersebut, yaitu ukuran dari gambar dan posisi dari gambar tersebut.

Kemudian fitur selanjutnya kita dapat mengetahui dari gambar menu di atas yaitu ada fungsi Undo dan redo, pasti tahu dong fungsi ini untuk apa.
Memasukkan Text Background color, untuk menhighlight text dengan warna-warna.
Pada Post options, terdapat opsi untuk Edit ganti baris HTML, dan juga Setelan tulis. Yang dapat kita fungsikan untuk menampilkan tag HTML pada postingan.
Fitur Laman, merupakan fitur yang dapat kita gunakan untuk membuat static page seperti Home, About Me dan lain-lain seperti menu punya saya di atas, tapi tergantung juga dengan template yang kita gunakan. Jika template yang kita gunakan sudah disediakan menu navigasi dari pembuatnya, kita bisa memilih yang mana yang akan kita gunakan

Selamat mencoba

Cara membuat text neon light (efek teks yang menyala secara periodik)

Dengan menggunakan javascript kita bisa membuat sebuah efek teks yang menarik yaitu efek neon light (teks yang menyala dari awal karakter hingga karakter akhir. Teks tersebut akan menyala dari awal karakter hingga akhir. Untuk membuat efek neon pada teks cukup copy script di bawah ini, kemudian masukkan ke dalam gadget html/javascript.

Script codenya bisa dilihat dibawah ini :

<h2>

Neon Lights Text

By JavaScript Kit (http://javascriptkit.com)

For this script, TOS, and 100s more DHTML scripts,

Visit http://www.dynamicdrive.com

var message="Selamat datang di blog belajar seo!"

var neonbasecolor="gray"

var neontextcolor="blue"

var flashspeed=100 //in milliseconds

///No need to edit below this line/////

var n=0

if (document.all||document.getElementById){

document.write('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonbasecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

</h2>

Untuk mengatur efek dan warna sesuai keinginan, lakukan perubahan pada teks yang berwarna hijau di bawah ini:
var message="Selamat datang di blog belajar seo!"
var neonbasecolor="gray"
var neontextcolor="blue"
var flashspeed=100 //in milliseconds

Hasilnya bisa dilihat di bawah ini

Selamat datang di blog belajar seo!

Selamat berkreasi...!!

Membuat teks animasi dengan efek neon light (Neon Lights Text II)

Jika sebelumnya pernah memposting panduan blog tentang efek neon pada teks dimana teks menyala dari kiri ke kanan hingga semua teks akan terlihat menyala. Maka dengan script berikut akan terlihat efek menyala tetap dari kiri ke kanan namun hanya satu karakter saja yang menyala.

Jika tertarik mencoba efek neon pada text ini , silahkan copy script di bawah ini kemudian masukkan ke dalam gadget html/javascript atau ke dalam postingan,
Scriptnya bisa dilihat di bawah ini :

<h2><script language="JavaScript1.2">
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de
//Visit http://www.dynamicdrive.com for this script

var message="Selamat datang di blog pemula ini!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles in milliseconds

///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h2>

Keterangan :
Ganti teks Selamat datang di blog pemula ini dengan teks yang ingin ditampilkan
Pada var neonbasecolor="gray" bisa ganti gray dengan warna lain
Pada var neontextcolor="yellow" bisa ganti yellow dengan warna lain
Pada var neontextcolor2="#FFFFA8" bisa ganti #FFFFA8 dengan warna lain
Pada var flashspeed=100 bisa ganti 100 dengan speed yang diinginkan

Contoh hasilnya bisa dilihat di bawah ini :

Selamat datang di blog pemula ini!

selamat mecobanya...!!!

Memasang widget google translator ke blog (translator gambar bendera)

Selain google translator standar, anda juga bisa memasang widget google traslator dengan icon bendera. Jika anda mengklik ikon bendera, maka secara otomatis akan terbuka sebuah halaman hasil terjemahan dari halaman aslinya.

Widget ini hanya berfungsi jika halaman web anda berbahasa Indonesia, dalam widget ini anda bisa mengubah atau menerjemahkan isi web anda ke 16 negara (bahasa) lain. Widget ini hanyalah hasil kustomise dari google translate standar. Contohnya bisa dilihat di bawah ini:

Untuk membuat (gadget) widget google translator ke blog anda silahkan ikuti prosedur berikut:

1. Login ke Dashboard, pilih Tata Letak => Elemen Halaman
Pilih Tambah Gadget

2. pada halaman List gadget, pilih Html/Javascript

3. Pada kotak dialog berikut, merupakan tempat memasukkan kode (script) html/javascript

berikut ini adalah script untuk 8 bendera per baris.

Catatan:
Sebaiknya script di bawah ini anda copy ke notepad/wordpad, kemudian scrip dari wordpad tersebut dicopy ke gadget html blog anda, karena jika dicopy langsung dari halaman ini ke gadget html anda, biasanya ada script dari adsense infolinks yang ikut, bisa menyebabkan script tidak berfungsi dengan sempurna.

<div style="border: 1px solid rgb(204, 204, 204); margin: 5px 0pt; padding: 10px 0px 3px; text-align: center; background-color: rgb(255, 255, 255); min-width: 235px;">


<div style="width: auto;" align="center">



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="English" width="24" src="http://i46.tinypic.com/k3wthh.jpg" height="24" title="Google-Translate-Indonesian-to-English"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=ied&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="French " width="24" src="http://i50.tinypic.com/2ic7cxh.jpg" height="24" title="Google-Translate-Indonesian-to-French "/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="German" width="24" src="http://i49.tinypic.com/2uh8xhi.jpg" height="24" title="Google-Translate-Indonesian-to-German"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Japanese" width="24" src="http://i48.tinypic.com/25klr8n.jpg" height="24" title="Google-Translate-Indonesian-to-Japanese "/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Korean " width="24" src="http://i47.tinypic.com/2ivk5ud.jpg" height="24" title="Google-Translate-Indonesian-to-Korean"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Chinese" width="24" src="http://i46.tinypic.com/2hyfj3p.jpg" height="24" title="Google-Translate-Indonesian-to-Chinese"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Russian" width="24" src="http://i48.tinypic.com/9r4u11.jpg" height="24" title="Google-Translate-Indonesian-to-Russian "/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Spanish" width="24" src="http://i45.tinypic.com/2l8i49c.jpg" height="24" title="Google-Translate-Indonesian-to-Spanish "/></a>

<br/>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ciw&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="India " width="24" src="http://i47.tinypic.com/2h35rfd.jpg" height="24" title="Google-Translate-Indonesian-to-India "/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Saudi Arabia" width="24" src="http://i45.tinypic.com/24nqufd.jpg" height="24" title="Google-Translate-Indonesian-to-Saudi Arabia"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Netherland" width="24" src="http://i45.tinypic.com/2a7ik5t.jpg" height="24" title="Google-Translate-Indonesian-to-Netherland"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Portugal" width="24" src="http://i47.tinypic.com/2vlv60m.jpg" height="24" title="Google-Translate-Indonesian-to-Portugal"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Italian" width="24" src="http://i45.tinypic.com/8ygifd.jpg" height="24" title="Google-Translate-Indonesian-to-Italian"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ctl&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Philippines" width="24" src="http://i47.tinypic.com/2r7pkdu.jpg" height="24" title="Google-Translate-Indonesian-to-Philippines"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cuk&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Ukraina" width="24" src="http://i50.tinypic.com/bij5s4.jpg" height="24" title="Google-Translate-Indonesian-to-Ukraina"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cno&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Norwegia" width="24" src="http://i45.tinypic.com/2u61agg.jpg" height="24" title="Google-Translate-Indonesian-to-Norwegia"/></a>

</div>

<small>Powered by</small> <img src="http://www.google.com/ig/modules/translatemypage_content/logo.gif" align="absbottom"/><br/>
<small><a href="http://mycomputerdummies.blogspot.com/" target="_blank">Widget translator</a></small><br/>

</div>

Selamat mencoba.

Cara promosi blog di blogupp untuk meningkatkan trafik (pengunjung)

Salah satu cara promosi blog secara gratis adalah dengan menggunakan layanan blogupp. Blogupp menyediakan widget yang bisa dipasang di blog kemudian akan menampilkan isi postingan blog di dalam widget tersebut. Blogupp akan menampilkan blog secara acak di dalam widget tersebut. karena blog anda akan ditampilkan di blog orang lain yang telah terdaftar di jaringan blogupp, maka blog anda berpeluang untuk mendapatkan trafik lebih banyak. Dengan semakin banyaknya trafik akan memudahkan optimasi seo.

Untuk mendaftar di blogupp bisa klik disini promosi blog

Selanjutnya isi url blog , misalnya ; http://Tri-diklat.blogspot.com/
Klik "Get widget"

Copy kode yang disediakan oleh blogupp

Hasilnya akan tampil seperti di bawah ini

Atau jika ingin melihat blog yang sudah saya pasang widget blogupp bisa computer blog
Selamat berkreasi dengan bogup.

cara membuat banner pasang iklan di blog

Terkadang kita ingin memasang banner pasang iklan di blog, sebenarnya bisa kita lakukan dengan mengupload file gambar atau dalam animasi file gif. Setelah diupload maka kita cukup mengambil url-nya kemudian dipasang dalam script :

Contoh:
1. File yang saya upload di blogspot, atau bisa juga di situs hosting image/share image lainnya seperti photobucket, tinypic, dll

2. Selanjutnya kita perlu mencatat link /url gambar:
a. Space Iklan 125x125 pixel :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg
b. Space Iklan 268x60 pixel
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5spZvCfyyVS-oaz0DNiywDhC90DIykQhqQTEu_3FVxJQjWtinhEpktJepwNq46zVeJBJG-kubmdPyj-0dz7BU0UpLXUfrgQzk68n8vt13DkcOD0sktfjJP0HVukZ3crOl15KNJmiMp6A/s1600/FastStoneEditor+3b.jpg

3. Selanjutnya memasukkan url ke dalam script image:

<a href="#"" target="_blank"><img src="?" border="0"></a>

Tanda # diganti dengan url target, halaman yang akan dibuka saat gambar di klik, misalnya: http://www.komputerseo.com/
Tanda ? diganti dengan url gambar, misalnya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5spZvCfyyVS-oaz0DNiywDhC90DIykQhqQTEu_3FVxJQjWtinhEpktJepwNq46zVeJBJG-kubmdPyj-0dz7BU0UpLXUfrgQzk68n8vt13DkcOD0sktfjJP0HVukZ3crOl15KNJmiMp6A/s1600/FastStoneEditor+3b.jpg

Contoh 1:

<a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a></br><a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a>

Contoh script lengkapnya setelah tanda # diganti dengan url target dan tanda ? diganti dengan url gambar

<a href="http://www.komputerseo.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a><a href="http://artikelkomputerku.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a><a href="http://mycomputerdummies.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a></br><a href="http://www.komputerseo.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a><a href="http://www.komputerseo.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a><a href="http://www.komputerseo.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRlcEE81hULa0iVmLFp3Vb9D7E5ZzIGw-vs8-VbSBvIQM_dRHiVjSlRWcLecELVu1EO1_t-TbwqLIycQGNvUQ7XqjVWOW4bmsz99IAxGaYJTsxIxoMQDo0vBolKcsf_VYI47yjmOXWKPY/s1600/FastStoneEditor+2b.jpg" /></a>

Setelah urlnya diganti, hasilnya seperti di bawah ini

Catatan: Tanpa menggunaan tag </br> juga bisa dilakukan, karena jika baris pertama sudah penuh maka otomatis gambar berpindah ke baris kedua

Contoh 2
Scriptnya seperti di bawah ini

<a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a></br><a href="#" target="_blank"><img border="0" src="?" /></a><a href="#" target="_blank"><img border="0" src="?" /></a>

hasilnya seperti berikut:

Contoh 3 : menggunakan space gambar 468X60, scriptnya sama seperti di atas hanya url gambarnya yang diganti

Contoh scriptnya:

<a href="#"" target="_blank"><img src="?" border="0"></a>
<a href="#"" target="_blank"><img src="?" border="0"></a>
<a href="#"" target="_blank"><img src="?" border="0"></a>
<a href="#"" target="_blank"><img src="?" border="0"></a>

Hasilnya seperti di bawah ini:

Catatan: jangan lupa ganti tanda # dan ? dengan url target dan url gambar
Script di atas bisa dipasang di gadget html pada posisi sidebar, atau di atas dan bawah postingan.
Selamat berkreasi..

Pages