Struktur Template Blogger Blogspot

Tutorial ini adalah panduan cepat untuk mengajarkan bagaimana untuk mengubah atau mendesain template blogspot sendiri. Sangat mudah untuk dipahami dan diikuti, khususnya bagi mereka yang tidak memiliki pengetahuan dalam pemrograman HTML. Tutorial dibagi menjadi beberapa sub-modul tutorial yang menjelaskan bagian-bagian tertentu dari desain template blogspot secara rinci. Cara terbaik untuk belajar adalah dengan pergi melalui satu urutan modul satu per satu. Tetapi jika kita sudah familiar dengan dasar-dasar, bisa langsung menuju ke dalam modul yg lebih maju. Modul sebelumnya difokuskan pada menjelaskan struktur dasar dari desain template dan kode template sehingga kita mengerti lebih lanjut tentang template blogspot pada umumnya. Modul kemudian menjelaskan setiap bagian dari template blogger secara lebih rinci dan membantu kita pergi melalui proses pengkodean dan merancang template di sebuah langkah demi langkah pendekatan. Dalam tutorial, beberapa nama dan istilah didasarkan pada desain template bawaan (contoh), tapi disini akan dijelaskan secara umum, sehingga kita mendapatkan gambaran yang lebih besar dan dapat beradaptasi dengan desain template yang berbeda.

Struktur template Blogger

Sebelum merancang template, harus memiliki gagasan tentang apa struktur dasar template ini. Umumnya, struktur aktual dari setiap template tidak persis sama. Namun, dengan mengetahui struktur dasar, kita dapat dengan mudah mendapatkan ide-ide tentang bagaimana untuk men-tweak template tersebut, desain template, dan bagaimana mengubahnya menjadi struktur yang berbeda.

Beberapa bagian dari struktur template yang jelas dari apa yang dapat dilihat pada blog yaitu: header, footer, dan bagian posting. Tetapi ada beberapa bagian (biasanya ini dinamakan bagian blocks atau containers) yang tidak terlihat pada layar komputer, tetapi HTML ini penting untuk membangun template menjadi praktis dan tepat.

Untuk memulai, struktur template pada dasarnya mengandung blok dari kontainer yang terlihat seperti ini:

Susunan blok dari terbesar sampai terkecil:

1. Body: blok paling luar adalah body template (pada dasarnya semua yang tampak pada layar komputer).
2. Outer-wrapper: wadah ini mencakup seluruh template (body lebih luar pada template). Secara umum, kita membangun sebuah wrapper untuk menempatkan beberapa blok yang lebih kecil di dalamnya. Blok yang paling umum di dalam ini outer-wrapper adalah Header, Content, dan Footer.
3. Header: blok ini adalah bagian paling atas pada blog. Tapi di dalam Header kita akan memiliki sub-blok juga - Header Judul blok, blok Deskripsi Header, dan lain-lain seperti banner Adsense, menu bar, dll Jadi, untuk membungkus semua sub-blok di dalam satu wadah besar, wadah terbesar di bagian header biasanya Header-wrapper yang membungkus di dalam segalanya.
4. Content: Posisinya dibawah Header Content wrapper pada dasarnya yang paling penting wadah blok semua. Segera di dalam wrapper ini adalah wadah sidebar (1,2 atau jumlah sidebar) dan wadah utama (yang berisi posting, komentar, atau beberapa iklan).
5. Footer: merupakan wadah yang paling bawah dari template. Seperti pada bagian Header, kita juga akan memerlukan footer-wrapper mengandung sub-blok di bagian footer.
6. Main: Main-wrapper adalah wadah yang paling luar pada bagian utama yang masuk ke dalam wrapper-content. Di dalam main-wrapper ini adalah blok Post, blok Komentar, Tanggal Header, dan widget lain yang dibuat dari opsi Add Page Element.
7. Sidebar: merupakan blok yang berisi semua widget pada bagian sisi template. About me, Label, Arsip, Teks, HTML, Adsense, dll. Komposisi template blogger standar, biasanya akan menemukan hanya 1 sidebar, maka template 2-kolom (Main dan Sidebar). Tapi sebenarnya mudah untuk menambahkan beberapa nomor sidebars. Yang paling umum adalah 2 sidebar, atau template 3-kolom. Kita akan melihat dari seri tutorial yang berikutnya setelah kita memahami struktur template! Semua mudah untuk menambah dan memindahkan sidebar ke kiri atau kanan pada main container template.
8. Blog Post: blok ini berisi hal-hal penting. Judul Posting, isi pos, post author, label, dll

Salah satu cara lain untuk melihat struktur ini adalah dari sudut pandang hierarchical. Mulai dari kontainer terbesar ke wadah sub, struktur akan tampak seperti Hierarchical Structure Blogspot.

Setelah kita memahami struktur dasar, maka akan lebih mudah untuk mulai belajar tentang struktur dari kode template Blogger. Belajar struktur kode tidak belajar HTML atau CSS, tapi lebih tentang bagaimana kode template terorganisir, yang cukup banyak seperti bagaimana mengatur struktur kontainer. Ini mengejutkan bahwa bahkan dengan sedikit pengetahuan tentang pemrograman web, kita dapat menyesuaikan template cukup banyak hanya dengan memahami struktur dasar dan beberapa bahasa CSS.

Untuk langkah-langkah selanjutnya sobat dapat mengikuti dari sini :D

• Struktur Kode Template Blogger
• Struktur Bagian CSS
• Setting Properties dari sebuah Container
• Common Containers and Elements in a Blogger Template
• Menggunakan Generic Blogger Template
• Menentukan Ukuran Template
• Bagian Body Template
• Penjelasan Lebih Lanjut dari Bagian Body
• Membuat 3 Kolom atau Lebih di Template
• Mulai Mencoba Membuat Template Sendiri
• Menggunakan Embed untuk Background

Tambahan dari google help mengenai artikel ini!

Learning and knowing about the body tags

• Fonts and Colors Tags for Layouts
• Layouts Data Tags
• Page Elements Tags for Layouts
• Widget Tags for Layouts

Semoga dengan artikel ini kita tidak akan kebelinger lagi dengan kode-kode yang ada di blogspot :) Terima kasih semoga bermanfaat.

Resource by: Our Blogger Templates.

Stat Widgets

Dengan munculnya Web 2.0 dan peningkatan jumlah blog pribadi atau komersial, AuriQ systems hadir dengan mengidentifikasi kebutuhan yang berkembang untuk pemilik situs dan blog agar dapat melacak dan menganalisis statistik situs mereka dengan cara yang baru, gaya, keren dan unik. Menggunakan teknik sederhana dengan mengadopsi widget, mendapatkan statistik situs tidak lagi diperlukan sign up untuk membuat account. Hanya memotong dan menyisipkan kode widget ke situs kita dan dalam satu jam akan mulai melihat data mengenai dari mana pengunjung berasal, bagaimana mereka sampai di sana dan apa konten yang mereka lihat.

AuriQ systems adalah penyedia terkemuka dari situs web dan alat analisis blog. Sebuah perusahaan terpercaya dimana kita tidak dapat menganalisa, maka kita tidak bisa mengelolanya. Maka terciptalah sistem ini dan dalam bentuk widget gaya punya sobat-sobat :D

Widget ini menampilkan kepada pengunjung meliputi popular pages, top visiting countries, top search keywords, top referring sites, dan top search engines di situs kita untuk hari ini dan 7 hari ke belakang. Pengunjung dapat melihat halaman blog/web kita dengan mendapatkan pemandangan dalam widget dimana setiap URL dapat diklik dan pergi ke halaman yang dituju. Keren bin full stylish 1 buah widget dapat 5 biji fungsi ;))

Karena tidak usah melakukan signup, maka sobat hanya tinggal memasukan saja rentetan coded script berikut lalu dimasukan kedalam Add a Gadget ► HTML/Javascript

<script language="javascript" type="text/javascript" src="//t7.auriq.com/asp/aq_tag.js"></script>
<script language="javascript" type="text/javascript">
var myrtw_display = "ON";
var myrtw_url = "AUTO";
var myrtw_width = 200;
var myrtw_height = 307;
var myrtw_toppagecount = 3;
var myrtw_toppagescroll = "ON";
var myrtw_defaultview = "7DAY";
var myrtw_defaulttab = "rppv";
var myrtw_tabs = "rppv-sekey-seref-allref-co";
var myrtw_extra = "";
var myrtw_name = "tabs";
var myrtw_key = "";
var aqid = "MFU39GC4URSZJEWA7CNA";
aq_tag();
</script>
<script language="javascript" type="text/javascript" src="http://myrt.auriq.com/widget/widget.php?a=tabs"></script>

Keterangan:

• Script warna merah.
Ubahlah tinggi dan lebar sesuai dengan kebutuhan, tanpa embel-embel px,% atau apapun! Angka saja yah :)
• Script warna biru.
Maximal menampilkan list sampai 10 biji.

Tampilan widget tersebut akan tampak seperti berikut

Ternyata mengindeksnya tidak memakan waktu 1 jam murni loh sob. Itu screenshot diatas baru aku tempelin di blog dummies dengan widget ini, kira-kira baru 15 menitan sudah ada laporannya ;))
Script diatas itu all in one mode sob, atau jika sobat mau mengeteng (satu biji fungsi widget) bisa kok langsung disatroni saja ke web resminya Stat Widgets for your Web Site or Blog. Tinggal pilih saja mana yg dibutuhkan :D See you :-h
Beben si bloglang anu ganteng kalem tea \m/

Magic Web Solutions

Seperti janji pada artikel sebelumnya, Beben si bloglang anu ganteng kalem tea akan memaparkan satu lagi jasa web gaya punya sob. Dilihat dari about us dan history Web development company UK - Database applications - Java, PHP, MySQL... ini mungkin jasa untuk membuat web lebih baik dari segala aspeknya sob. Tuh lihat titlenya saja sudah cool gitu b-)
Karena Beben tidak paham mengenai hal ini, maka disini saya hanya mau berbagi demo jasa dari Magic Web Solutions :D Walau demo tapi bisa kita gunakan sob! Biasalah dengan sentuhan kreatifitas tangan dingin dari seorang bloglang :)) Please read it first Terms and Conditions!!!

Online Text Editor

Text editor ini tersedia fitur view, edit, insert/edit image, insert custom character, edit HTML source dsb macam editor blogspot kala kita membuat postingan baru ;))

Sortboards

Drag'n'Drop Sortboards memberikan kesempatan untuk mengatur dan mengedit catatan kita dalam dua berbasis web dan interaktif "memo pads" yang dapat disimpan dan kemudian diambil ke komputer kita :)

Ya sudah lihat saja sendiri disana semua demonya yak, mari kita fokus saja dengan PDF generatornya sob, keren dah :D Jika membutuhkan macam generator oke punya bisa lihat di generator etc...

PDF Generator

Setelah dipraktekan ni PDF generator oke punya sob. Semua kode bawaan ketika kita melakukan posting di editor blogspot dihajar bablas. Image otomatis langsung ada, kode CSS inline dari template kita diconvert langsung jadi text (script juga). Spasi, paragraf, div, br dan lain-lainnya langsung terlihat efeknya langsung kala itu juga. Bisa diedit ditempat dengan menggunakan editor text yg sudah tersedia pula :D Pokoknya mah kalau ingin mebuat format PDF langsung kopi paste dari mana saja bisa dilakuin disini sob ;)

Buka link ini Example kalau isinya tidak berubah, maka postingan ini bisa diconvert menjadi PDF setelah sobat menekan tombol yang berada dibawah text editornya :) Kalau memang penasaran silahkan di download PDF this Post. Di ekstrak terlebih dahulu yak, terus open with adobe reader :)
Happy blogging with Beben si bloglang anu ganteng kalem tea \m/

Karedok Info

Ingat dengan web w3school, dimana Beben si bloglang anu ganteng kalem tea pernah memberikan search customizenya seacrh customize w3school! Ternyata web tersebut memiliki Intervention webnya (short explanation kali yak) :D bisa dilihat di w3fools.
jQuery teranyar mengenai isotope merupakan satu jQuery plugin dengan macam ragam gaya punya Isotope. Bagi para sobat yang menggilai dengan google maps, mungkin ini salah satu web dengan jasa geo plugin yg patut sobat coba geoPlugin to geolocate your visitors! Dengan jasa geoplugin sobat dimudahkan dalam menentukan posisi geolocation dan geocoding termasuk segalanya yg berbau-bau dengan map.

Berdasarkan IP lokasi menambah akurasi geolocation kita lebih terukur bro b-) Convert currency berdasarkan ajax, memberitahukan cuaca tempat kita berada dll. Example maps from google uncle :D

View My Address in a larger map.

Demikian saja artikel acak kadut kali ini sob, soalnya mau membeberkan banyak nanti malah kebelinger sobat-sobatnya :"> Sampai jumpa pada postingan berikutnya pada sesi magic solution for to be better web (cocok untuk web/blog yg sudah berdomain sendiri nih) \m/

Instant Previews Screenshot, Browsershot, Snapshot...

Trik ringan dari Beben si bloglang anu ganteng kalem tea nih sob. Bagaimana cara untuk mengambil sebuah screenshot dari satu web/blog. Cara termudah dan terpraktis yaitu dengan memencet tombol keyboard Print Screen SysRq ;D Lalu dipastekan ke aplikasi gambar yang sobat punya di komputer, atau ke dalam photoshop juga bisa :)
Kalau secara online, jasa populer untuk melakukan ini mungkin ada pada web Browsershots! Pada web tersebut kita akan diberi option pilihan pada mode apa blog/web yg ingin dilihat (shot) Hasil jepretan dari browsershots bisa sampai ke bagian paling bawah yaitu footer b-)

Bagaimana jika kita ingin mengambil snapshot, screenshot atau print screen ala Google Instant.
Berikut adalah beberapa fitur inti dari Google Instant:

1. Dynamic Result - dinamis Google menampilkan hasil pencarian yang relevan saat kita mengetik sehingga dapat dengan cepat berinteraksi dan mengklik ke konten web yang dibutuhkan.
2. Predictions - Salah satu teknologi kunci di Google Instan adalah bahwa kita memprediksi sisa permintaan (dalam teks abu-abu terang) sebelum selesai mengetik. Melihat apa yang kita butuhkan? Berhenti mengetik, melihat ke bawah dan menemukan apa yang kita cari.
3. Scroll to search - Scroll melalui prediksi dan melihat hasilnya langsung untuk setiap yang sobat scroll ke bawah.

Here's video showing Instant Previews in action Expand here

 Result view in blogspot posted 
Walau tidak 100% gambar terambil, format link gambar dari uncle google ini berbentuk kode Base64 :-" Yang konon lebih ringan walau dipakai langsung dari satu server. Artikel alakadarnya mengenai Base64 Image ;) Cara mengambil gambar tinggal klik kanan pada Mouse ► View Image Info (mozilla browse) setelah mengklik area kosong ;) Silahkan dicoba :-h
Sudah tidak berlaku trik ini, google telah menghilangkan fitur thumbnail dari layanan search enginenya.
Salam si bloglang \m/

Google Analytics Linking to Webmaster Tools

Beben si bloglang anu ganteng kalem tea sudah sering mengingatkan, agar menjadi kreatif, kreatif dan lebih kreatif! Do you remembered with my article with Blogger Reading List Ready to Use title? Jika sobat telah membacanya maka postingan kali ini bisa jadi hasil Beben mempraktekan kekreatifitasan aku dalam melihat apa-apa saja yang sedang update dengan meng-add link-link web/blog (kebanyakan emang dari blogspot sih) kan bloglang namanya juga :)) kedalam deretan list favorite ;) Mungkin sobat-sobat bisa lebih kreatif dari Beben malahan :-/

Setiap kali saya melakukan login ke account blog, eh otomatis sudah terlihat berita/post teranyar. Ternyata postingan tersebut memang berguna, dan langsung menuju sasaran (ke tkp) wusss...wusss...wusss!!!
Linking Google Analytics to Webmaster Tools salah satu kabar gembira bagi kita dari Official Google Webmaster Central Blog bagi pemakai jasa Analytics dari si embah google :D Secara blogspot, picasa, orkut, gmail dll kepunyaan om google :-" Mengapa kabar ini begitu menggembirakan bagi kita blogger mania :-? Sedikit basa basi inti dari berita ini

Jika kita menggunakan Google Analytics untuk melacak data situs, kini kita dapat melakukan link situs Webmaster Tools diverifikasi ke profil Analytics, bila menggunakan Google Account yang sama. Tidak hanya akan Analytics profil saja, kita dapat semua akses di Webmaster Tools, tapi kita juga akan dapat lebih mudah mengakses beberapa fitur dari Google Analytics:
   >>Lihat Google Analytics sobat...
Mengacu laporan halaman yang langsung dari link ke halaman situs di Webmaster Tools. Laporan ini akan membantu kita memahami tren keseluruhan volume lalu lintas dari arahan, serta situs mengemudi yang tren.
   >>Akses Google Analytics Dashboard langsung dari link Analytics di bar kiri atas ketika kita direkomendasikan pada halaman situs terkait.Official Google Webmaster Central Blog Translate by si Bloglang

Tertarik melakukan hijrah ke analytics paman google? Setelah Beben melakukan cek ke Google Analytics kepunyaan saya, jreeeng...ketika mengklik View report, semakin terlihat jelas keyword mana yg terindeks dan terkuat. Utamanya link dari album photo dari Picasa ternyata ikut mendongkrak keyword pada web/blog.
Apa masih berguna kita melakukan pengambilan gambar dari hostingan/web lain??? Rugi kita, orang lain yg untung malah dapet lalu lintas link :)) Masih mau menggunakan sembarang syntax image yg notabene ternyata atribut ALT pada image sekarang bisa membantu mendongkrak keyword!
Itu baru dari picasa saja, enggak tauk juga tuh yg lainnya mah sob :D

Be smart, be astute, for to be the PRODIGY b-) :-h

OnWebDev Blogspot

Masih ingat tidak sobat dengan pesan Beben si bloglang anu ganteng kalem tea yang selalu tertera sesudah berbagi web/blog keren punya! Dimana Beben menyuruh sobat untuk mengacak-ngacak blog/web tersebut guna mengasah, menambah, melatih, semua ilmu, skill, kabisa dan sajabana nu sanes yg kita miliki ;)
Blog satu ini mungkin bisa Beben bilang blog berbasis blogspot artikelnya/postingannya, lugas, tertuju langsung pada tema, disertai demo untuk mempermudah pemahaman dan hasil kerja, pokoknya top markotop. Dimana jati diri si-empunya sbb

Gabriele Romanato.
Web developer with Ajax, CSS, DOM, JavaScript, XHTML, XML, XSLT, SVG, PHP, Python. Contributor of the W3C CSS Test suite. IWA member.
Twitter: @gabromanato

Sepertinya di blog sobat satu kita ini sudah terwakilkan semua tema yg memang kebanyakan diusung bagi perkembangan web :) Intinya Beben bisa mendapatkan pengetahuan lebih dari blog ini, karena kefokusannya dalam membahas perkembangan web dengan trik, tips, hack, script dsb yg dia miliki. Kalau boleh jujur orang ini kayaknya bisa memilah dan memilih tema yang lagi ngetrend :-bd Hasil ngebloglang (BW) nih sob :D
Jquery, Javscript, CSS, CSS3, HTML, HTML5, atau apapun bisa sobat acak-acak dah, pokokna mah...good..good...good b-)
Introduce bro [..]

Maaf screenshot blogx digepengin, soalnya resolusi tinggi snapshot blog tsb 6000px lebih :D

Kalau mau apa-apa yg pengen dimasukin ke blog sobat tinggal kolling ajah yak ;)) Soalnya menurut Beben mah kreativitas itu harus kita latih dan asah agar bisa menunjang kegiatan blog kita ke depannya :) Coba tengok ini jQuery Facebook Social Plugin? Selamat mengacak-ngacak OnWebDev Blogspot :))
Beben si bloglang anu ganteng kalem tea \m/