@aditoy: Tutorial Blogger

Showing posts with label Tutorial Blogger. Show all posts

Sunday, December 27, 2009

Membuat Buku Tamu di Blogger

Ada teman sekelas saya yang bernama Fier menanyakan kepada saya mengenai Buku Tamu yang terdapat di blog saya ini. Maka dari itu, saya mencoba untuk membuat artikel mengenai pembuatan buku tamu ini. Sebenarnya saya mendapat inspirasi untuk membuat buku tamu ini dari blog milik kang Eri. Di blog milik kang Eri ini terdapat sebuah bacaan buku tamu yang letaknya di pojok kanan atas blognya. Jika kita klik tulisan buku tamu tersebut, dengan otomatis akan keluar kotak ShoutMix untuk memberikan komentar-komentar pada blog tersebut. Jika di blog anda belum terdapat ShoutMix, silahkan daftar terlebih dahulu. Silahkan anda klik disini untuk mendaftar dan mendapatkan kode HTML ShoutMix untuk blog anda. Untuk lebih jelasnya, lihat gambar di bawah ini.

Labels: Tutorial Blogger

Membuat Menu DropDown

Waktu saya lagi berkunjung di blog milik O-om, saya menemukan sebuah artikel mengenai menu DropDown. Dari situ saya mencoba untuk memposting artikel ini supaya dapat dibaca oleh anda semua yang saya kutip dari blog milik O-om. Dimulai dari pengertian terlebih dahulu, menu DropDown atau menu Pull-Down merupakan kumpulan dari beberapa kategori, link, dan berbagai macam tulisan yang dimasukkan kedalam sebuah menu. Jika menu tersebut di klik, maka akan muncul kategori-kategori yang dikelompokkan tersebut. Menu ini juga dapat kita gunakan sesuai dengan kebutuhan kita. Misalnya untuk membuat Blogroll Alternatif dan memasukkan banyak alamat link ke situs yang akan kita tuju.

Bingung yah..?!
Yauda kalo gitu langsung aja ke prakteknya...
=D

Labels: Tutorial Blogger

Membuat Text Area pada Postingan

Lagi baca-baca di blog Kang Rohman, saya menemukan sebuah artikel mengenai cara membuat Text Area. Lalu saya mencoba untuk memposting artikel ini supaya dapat dibaca oleh anda semua yang saya kutip dari blog Kang Rohman. Text Area merupakan suatu tempat untuk menyimpan kode-kode HTML atau berbagai macam text lainnya supaya dapat di copy semua atau beberapa bagian text oleh anda. Maka dari itu, untuk meletakkan kode HTML selain dengan menggunakan blockquote, kita juga bisa menggunakan Text Area untuk menempatkan kode-kode HTML yang ingin anda postingkan pada artikel anda. Yang saya baca dari artikel blog Kang Rohman mengenai Text Area, terdapat 2 jenis Text Area yang dapat kita gunakan. Berikut ini penjelasan selanjutnya.

Text Area biasa

Untuk membuat Text Area seperti ini, copy kode di bawah ini.

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Labels: Tutorial Blogger

Friday, December 25, 2009

Google Translate

Google Translate adalah suatu aplikasi penerjemah yang dapat membantu kita untuk menerjemahkan kalimat, paragraf, atau satu kata. Proses penerjemahannya cepat, dan bahasa yang mampu diterjemahkan juga cukup banyak.

Jika ingin menambahkan Google Translate kedalam blog anda, berikut ini langkah-langkahnya :

Login pada Blogger anda
Pilih Layout ==> kemudian Tambah Gadget
Pilih HTML / Java Script
Copy kode HTML jenis-jenis Google Translate di bawah ini sesuai dengan keinginan anda

Labels: Tutorial Blogger

Friday, December 18, 2009

Cara Membuat Readmore Terbaru pada Blogger

Sebenarnya sudah lama sekali saya ingin posting mengenai artikel ini. Akan tetapi, untuk memposting artikel ini, saya harus mengerti terlebih dahulu mengenai kode HTML-nya. Takutnya, saat anda mempraktekan postingan ini, terdapat kesalahan dan anda tidak mengerti untuk memperbaikinya. Saya mendapatkan inspirasi untuk memposting artikel ini saat saya mengunjungi blog teman sekelas saya, yaitu kang Irvan Setiawan. Di blog tersebut terdapat tulisan [+/-] keep reading... dan [+/-] stay short... yang jika kita klik akan memunculkan lanjutan dari postingan sebelumnya dan dapat menyingkat kembali postingan tersebut tanpa harus me-reloading untuk memunculkan lanjutan dari postingan tersebut. Kita ambil contoh saat kita mengunjungi situs jejaring sosial Facebook. Disitu juga terdapat tulisan See More pada bagian comment yang berfungsi untuk menampilkan lanjutan dari comment tersebut.

Sejak saat itu, saya sangat ingin sekali membuat Readmore seperti itu di blog saya. Saya mencoba mempelajari kode HTML-nya dan mencari-cari artikel yang membahas tentang Readmore di Google. Saat itu, teman sekelas saya yang bernama Yusrizal memberi tahukan suatu link yang membahas mengenai Tutorial Blogger. Saya mencoba mengunjungi situs tersebut dan akhirnya saya menemukannya. Saya langsung saja mencoba tutorial tersebut, akan tetapi selalu gagal dan tidak menemukan kode HTML yang pas dengan template pada blog saya. Lalu saya mencoba membaca lagi tutorial tersebut, ternyata untuk kode HTML Readmore yang seperti ini tidak dapat digunakan pada template lama, hanya bisa digunakan dengan menggunakan template yang baru. Setelah saya membaca itu, saya sangat kecewa karena tidak dapat membuat Readmore pada blog saya. Tapi tidak apa-apa, saya akan mempostingkan artikel ini sebagai tutorial untuk anda semua yang mengunjungi blog saya.

Untuk membuat Readmore terbaru, ikutilah langkah-langkah dibawah ini :

Labels: Tutorial Blogger

Wednesday, December 16, 2009

Cara Memasang Tag Clouds di Blogger

Waktu saya lagi iseng-iseng mencari data di Google untuk dijadikan bahan artikel di blog saya, tanpa sengaja saya mampir ke blog orang lain. Disitu terdapat widget label yang dapat bergerak-gerak saat mouse kita mengarah kepada label yang kita ingin tuju karena label itu berbentuk flash atau animasi. Saat itu, saya mulai penasaran dengan widget tersebut. Saya mencoba mencari tahu mengenai widget tersebut dengan mencari-cari di Google. Setelah sekian lama mencari, akhirnya saya menemukan juga artikel yang membahas widget tersebut. Ternyata widget tersebut bernama Tag Clouds.

Untuk membuat label bergerak / Tag Clouds seperti ini, pertama pastikan anda sudah melakukan login pada Blogger anda. Setelah masuk pada bagian Dashboard, kita pilih Layout ==> Edit HTML. Beri tanda checklist pada bagian Expand Widget Template supaya kita mendapatkan back up template yang sebelumnya jika ada kesalahan. Selanjutnya, kita cari kode seperti ini :

Labels: Tutorial Blogger

Tuesday, December 15, 2009

Cara Memasang Template Pada Blogger

Berawal dari pertanyaan salah seorang teman sekelas saya di kampus, saya mencoba untuk menuliskan artikel ini. Dia bertanya kepada saya, "Toy, gimana sih cara memasukkan template pada blog?". Sekarang saya mencoba menjelaskan yang saya tahu di artikel ini. Sebenarnya ada berbagai macam cara untuk memasukkan template pada blog. Cuma intinya hanya ada di Edit HTML. Di dalam kolom Edit HTML terdapat kode-kode HTML yang dapat kita rubah sesuai dengan yang kita inginkan. Untuk memasukkan template, kita bisa menggunakan template yang sudah disediakan oleh blogger. Caranya adalah sebagai berikut :

Login blogger anda
Pilih Tata Letak
Lalu kita klik pada Pilih Template Baru
Pilih template sesuai keinginan kita yang telah tersedia
Setelah selesai, kita klik Simpan Template

Langkah yang berikut ini merupakan cara memasukkan template dengan cara merubah tampilan template yang kita dapatkan dari web penyedia template blog. Caranya adalah sebagai berikut :

Labels: Tutorial Blogger

Monday, December 14, 2009

Web Template

Web Template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system.

Web templates can be used to set up any type of website. In its simplest sense, a web template operates similarly to a form letter for use in setting up a website.

Template Uses

Web templates can be used by any individual or organization to set up their website. Once a template is purchased or downloaded, the user will replace all generic information included in the web template with their own personal, organizational or product information. Templates can be used to :

Display personal information or daily activities as in a blog
Sell products on-line
Display information about a company or organization
Display family history
Display a gallery of photos
Place music files such as mp3 on line for play through a web browser
Place videos on-line for public viewing
To setup a private login area on-line

Effective separation

A common goal among experienced web developers is to develop and deploy applications that are flexible and easily maintainable. An important consideration in reaching this goal is the separation of business logic from presentation logic. Developers use web template systems (with varying degrees of success) to maintain this separation.

One difficulty in evaluating this separation is the lack of well-defined formalisms to measure when and how well it is actually met. There are, however, fairly standard heuristics that have been borrowed from the domain of software engineering. These include 'inheritance' (based on principles of object-oriented programming); and the 'Templating and Generative programming', (consistent with the principles of MVC separation). The precise difference between the various guidelines is subject to some debate, and some aspects of the different guidelines share a degree of similarity.

Flexible presentation

One major rationale behind "effective separation" is the need for maximum flexibility in the code and resources dedicated to the presentation logic. Client demands, changing customer preferences and desire to present a "fresh face" for pre-existing content often result in the need to dramatically modify the public appearance of web content while disrupting the underlying infrastructure as little as possible.

The distinction between "presentation" (front end) and "business logic" (infrastructure) is usually an important one, because :

the presentation source code language may differ from other code assets
the production process for the application may require the work to be done at separate times and locations
different workers have different skill sets, and presentation skills do not always coincide with skills for coding business logic
code assets are easier to maintain and more readable when disparate components are kept separate and loosely coupled

Reusability

Not all potential users of web templates have the willingness and ability to hire developers to design a system for their needs. Additionally, some may wish to use the web but have limited or no technical proficiency. For these reasons, a number of developers and vendors have released web templates specifically for reuse by non-technical people. Although web template reusability is also important for even highly-skilled and technically experienced developers, it is especially critical to those who rely on simplicity and "ready-made" web solutions.

Such "ready-made" web templates are sometimes free, and easily made by an individual domestically. However, specialized web templates are sometimes sold online. Although there are numerous commercial sites that offer web templates for a licensing fee, there are also free and "open-source" sources as well.

Open source templates

The rise of the open source design movement has seen a slow but steady rise in the community of open source designers. Some sites offer open source templates in addition to other content.

Labels: Tutorial Blogger

Saturday, December 5, 2009

Lihat Urutan Blog Menggunakan Alexa Rank

Alexa Rank adalah suatu situs jasa web tracker yang berfungsi untuk memonitor suatu blog, dimulai dengan menganalisis traffic, keyword, dan juga dapat menganalisis rank dari blog tersebut. Jika semakin kecil angka yang ditunjukkan rank pada widget ini, maka blog tersebut akan menjadi semakin baik jika kita menggunakan search engine (mesin pencari) dan akan tertampil pada link teratas.

Berikut ini adalah langkah-langkah untuk menambahkan widget ini ke dalam blog kita.

Buka link ini http://www.alexa.com/siteowners/
Terdapat 4 kategori, namun yang saya anjurkan pilihlah pada kategori yang ke-2 dan klik learn more
Selanjutnya akan muncul 3 jenis widget. Pilihlah yang sesuai dengan keinginan anda
Cantumkan link blog anda sebelum menekan build widget. (gunakan http:// sebelum mencantumkan link blog anda)
Lalu akan muncul 3 jenis URL. Pilih dan copy-lah URL yang anda inginkan sesuai dengan gambar yang tercetak di sampingnya
Setelah URL telah di copy, masuklah ke dalam blog anda
Pilih menu Tata Letak
Pilih Tambah Gadget
Pilih kategori HTML/JavaScript
Paste URL yang telah kita copy
Klik Simpan

Jika anda telah melakukan langkah diatas, selanjutnya lihatlah pada blog anda. Akan terdapat widget Alexa Rank pada tempat yang telah anda tentukan.

Selamat Mencoba

= AdiT a.k.a ToY =

Labels: Tutorial Blogger

Friday, December 4, 2009

Hiasi Blog Kalian Dengan Glitter Text

Wah,,

Saking lagi serunya menghias blog, saya mencoba mencari cara supaya blog saya kelihatan lebih bagus lagi supaya semakin banyak yang tertarik untuk mengunjungi blog saya. Disini saya juga berbagi ilmu supaya yang membaca postingan saya kali ini dapat mencontoh langkah-langkah untuk menghiasi blog-nya masing-masing.

Dimulai dari pengertiannya terlebih dahulu. Menurut saya, Glitter Text adalah sebuah gambaran text yang telah kita tuliskan dan dapat memunculkan efek-efek seperti Bevel Effect,

Shadow Effect, Glow Effect, Blur Effect, Blink Effect, Fade Effect, dll. Kita dapat memilih jenis font yang akan kita tuliskan dan kita juga dapat memilih jenis efek kerlap-kerlip (Glitter) sesuai dengan keinginan kita. Sebagai contoh, bisa kita lihat gambar di bawah ini.

Di blogger, kita bisa menambahkan HTML / JAVA Script untuk menambahkan widget yang bermacam-macam yang telah disediakan dan beredar banyak di internet. Saya jadi teringat saat waktu zaman-zamannya Friendster berjaya, semua orang berlomba-lomba menghias Friendster-nya masing-masing supaya jadi terlihat menarik dan siapa tahu orang ingin mengunjungi link kita.

Langsung di mulai aja deh cara membuat Glitter Text. Berikut ini adalah langkah-langkahnya :

Labels: Tutorial Blogger

Thursday, December 3, 2009

Cara Membuat Link Dengan Icon

Berhubung saya baru dapet ilmu baru dari teman saya mengenai cara membuat suatu Link dengan menggunakan Icon sesuai dengan Icon alamat yang akan kita tuju, sebagai contoh kita akan membuat suatu link untuk membuka facebook dengan menggunakan logo facebook. Kali ini saya akan mencoba untuk menjelaskan sejelas-jelasnya supaya mudah di pahami oleh orang lain juga. Jadi mohon maaf aja kalau masih ada kekurangan dari penjelasan yang saya jelaskan ini. Maklum aja kan masih "NEWBIE" dalam membuat suatu tulisan di dalam blog. Jadi sama-sama belajar aja ya. =)

Langkah awalnya adalah dengan menambahkan gadget pada blog kita. Pilih gadget HTML/JavaScript. Setelah itu muncul kotak dialog, kita isi Judul sesuai dengan yang kita inginkan untuk penjelasan di blog kita. Lalu isikan bagian Konten dengan Script seperti di bawah ini :

Labels: Tutorial Blogger

@aditoy