Page Layout Default Blogger

Pingin bikin template default blogger??? Nah kalau memang tertarik bagi para sobat yang mau membuat template default blogspot, ada baiknya mengetahui beberapa kode-kode yg berperan didalamnya ;)) Secara khusus penjelasan ini dititikberatkan pada Page Layout in Blogger Beta. Pada dasarnya bentuk Layout dari template beta ini ada 4 bagian (section). Pada masing-masing section terdapat variabel yg saling berkaitan :-/ Secara garis besar strukturnya dapat diterangkan seperti berikut :

1. Bagian Header berisi title (judul blog) dan deskripsi blog.
2. Bagian utama (main section) berisi postingan blog.
3. Bagian (section) sidebar yg berisi sidebar stuff seperti profile, links, label, blogroll, dan gadgets.
4. Section Footer terdapat (contains) isi, yg keberadaannya dibawah blog.

Mari kita lihat penjelasan singkat dari masing² struktur diatas. Kalau mau tahu struktur dari sebuah website ada baiknya para sobat membaca artikel The Anatomy of a Website.

Bagian Header

Pada bagian ini kita akan menemukan syntax seperti...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Arti dari syntax tersebut yaitu, pada bagian header kita hanya dapat memasukkan 1 halaman element (widgets) dan tidak akan bisa memasukkan lebih. Apabila kita masuk ke Page Elements dan melakukan Add a Gadget, maka hal ini tidak akan berlaku :p

Kalau kita bermain dengan syntax ini menjadi...
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Maka syntax ini akan memiliki arti, kita dapat meng-add (memasukkan) 3 halaman element pada bagian header blog kita :D

Bagian Sidebar

Masuk pada bagian sidebar blog kita akan dihadapkan pada...
<b:section class='sidebar' id='sidebar' preferred='yes'>
Pada syntax default ini memiliki arti, bahwa sobat dapat memasukkan page elemetns sesuai keinginan sobat :D Bagaimana kalau kita mau membatasi pemakaian halaman element pada bagian sisi blog kita :-?
<b:section class='sidebar' id='sidebar' maxwidgets='5' preferred='yes'>
Pasti sudah paham dong :-" yesss, sobat dapat meng-add page elements ini sebanyak 5 biji :)

Bagian Utama

Pada bagian ini yaitu bagian dari postingan. Pada sesi ini bisa saja memasukkan widgets, dan biasanya hanya satu. Itupun biasanya kita tempatkan dibawah/diatas. Masuk Layout ► Page Elements ► Drag pada bagian kolom postingan diatas/dibawah.
<b:section class='main' id='main' showaddelement='no'>
menjadi...
<section class='main' id='main' maxwidgets='1' showaddelement='no'>

Bagian Footer

Bagian dari sebuah template paling bawah keberadaannya. Syntax pada footer ini biasanya bertuliskan...
<b:section class='footer' id='footer'/>
Apabila mau memasukkan sebuah widget, tentu bisa :D

Demikian segelumit tentang bagian-bagian dari template default blogger beserta syntaxnya. Selamat bertemu kembali pada sesi penjelasan berikutnya :-h Source by : http://beautifulbeta.blogspot.com

Blog Bulk

Tradisi membagi blog tutorial. Blogger satu ini datang dari negara Croatia. Rasa ketertarikan terhadap blogger membuat sobat satu ini memberikan informasi khususnya mengenai seputar tutorial blog. Walau bahasa inggris yang disampaikannya tapi tetap jelas dan mudah untuk dipahami.

Dua artikel mengenai template yg gaya dan keren punya ;) Sambut dan datangilah blognya Blog Bulk. Bye bye :-h ;))

Add Your Album to Blogger

Add your album on the blog. Kalau setelah melakukan upload sebuah gambar/photo, lama-lama akan semakin banyak. Kalau sudah banyak dibikin album deh tuh gambar dan photonya :D Bagaimana cara memasukkan album-album yang telah dibuat itu ke weblog. Sembari melihat-lihat photo/gambar juga bisa melihat blog. GAYA!!! b-) BW kesana kemari cuma dapat sedikit referensi caranya nih sob tentang memunculkan album kita di blog. Hans sesepuh tutorial blog dari luar angkasa eh luar negeri :D ada membahas trik ini. Untuk melihat caranya Picasa Album Widget article.

Thanks Hans for trick :)

Tak kalah keren dan gaya sobat kita juga mengeluarkan versi memasukkan album via Flickr kedalam blog. Untuk mendapatkan artikelnya silahkan meluncur How To Add Flickr Photostream to Blogger. Hehehe...;)) Lanjut sob masih mengenai masukin album Picasa kedalam blog. Add picasa gallery to your blog or website from Tutorials for web developers.
Happy blogging with BeBeN si bloglang nu ganteng kalem tea :P

Related Posts Integration Blogger Widget

Related posts integration. Selamat datang kembali para pengunjung setia BeBeN si bloglang anu ganteng kalem tea \m/ Seperti biasa mau berbagi informasi pilihan dan tentunya penuh GAYA b-) :)) Penampilan blog tanpa adanya related posts atau artikel terkait pada akhiran postingan bagai anang tanpa syahrani ;)) Bila kalian sobat perhatikan banyak trik yang satu ini menampilkannya per label. Tidak ada yg salah dengan trik itu, tapi kalau diperhatikan secara detil lagi :-B ada label yang tampil double (ganda) :-q pada setiap artikel terkaitnya :(|) Sebelum masuk ke caranya, ada baiknya lihat kelebihan related posted yg akan BeBeN sharing ini :

1. Mengidentifikasi semua label yang ada pada posting blog.
2. Mengumpulkan semua label dan kemudian menghilangkan duplikasi label pada postingan.
3. Untuk setiap label yang berkualitas, dengan menggunakan Google Feed API maka label yang relevan akan ditampilkan.
4. Mengidentifikasi duplikat link dari semua URL yang dihasilkan, untuk menjaga duplikasi label.
5. Dengan metode "document.write" menampilkannya pada setiap akhir postingan.

Proyek jebolan sobat blogger kita ThinkTibits ini patut diacungin jempol :-bd Kinerja related posts dipadukan dg Google Feed API mungkin bisa menguatkan link-link postingan yg ada pada blog kita ;)) Untuk versi inggris silahkan masuk Related Posts Blogger Integration Widget. Kalau versi bloglang silahkan diperhatikan langkah-langkahnya :D

1. Log-in terlebih dahulu pada account blog sobat.
2. Expand Widget Templates, itu artinya dicentang.
3. Letakkan script berikut tepat diatas/sebelum tag </head>...
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load("gdata", "1.x", { packages : ["blogger"] });</script>
4. Pada langkah ini, pada artikel aslinya
   Step2:- Create a post widget in blogger and add the required Javascript code)
   ada script panjang tuh :-/ Disini BeBeN cuma memasukkan script related postednya saja sob :p
<div class='widget-content'>
<h3>Related Articles</h3>
<div id='123' style='padding:10px;'/><br/>
<h6>Widget customized by <a href='http://thinktibits.blogspot.com'>Yellowrose</a></h6>
<script type='text/javascript'>
function init2() {
var finalurlarray = new Array();
function eliminateDuplicates(arr) {
var i,
len=arr.length,
out=[],
obj={};
for (i=0;i<len;i++) {
obj[arr[i]]=0;
}
for (i in obj) {
out.push(i);
}
return out;
}
var finalurlarray1 = new Array();
var funcvar1=0;
var bloggerService = new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var handleQueryResults = function(resultsFeedRoot) {
var blogFeed = resultsFeedRoot.feed;
var html,postTitle,entryUri;
var postEntries = blogFeed.getEntries();
for (var i = 0; postEntry = postEntries[i]; i++) {
postTitle = postEntry.getTitle().getText();
entryUri = postEntry.getHtmlLink().getHref();
html = '<a href= '+entryUri+'>'+ postTitle + '</a>' + '<br>';
finalurlarray1.push(html);
}
funcvar1++;
if (funcvar1 == filtArray.length) {
var urlarrayfinal=eliminateDuplicates(finalurlarray1);
for (var i = 0; i < urlarrayfinal.length; i++){
document.getElementById("123").innerHTML += urlarrayfinal[i];
}
}
};
var handleError = function(error) {
document.write("unable to load the related posts now");
};
var labelArray = new Array();
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
labelArray.push(textLabel);
</b:loop>
</b:loop>
var filtArray=eliminateDuplicates(labelArray);
var feedUri,query;
for (var i = 0; i < filtArray.length; i++){
feedUri = 'http://thinktibits.blogspot.com/feeds/posts/default/-/' + filtArray [i];
query = new google.gdata.blogger.BlogPostQuery(feedUri);
bloggerService.getBlogPostFeed(query, handleQueryResults, handleError);
}
}
google.setOnLoadCallback(init2);
</script>
</div>
Ganti tulisan yg BG kuning dg URL Link blog sobat.

Kalau sobat pusing, masih dalam keadaan dicentang Expand Widget Templates cari tulisan (judul) diatas artikel postingan sobat masing²! Nah setelah itu perhatikan pada tag...

<div class='widget-content'>

ISI-SCRIPT-ARTIKEL-TERKAIT

</div>

Masukkan/ganti isinya dg script yg dari sobat kita :) (yg diatas itu tuh, yg aku suruh ganti urlnya sama url sobat masing²) Langkah terakhir ucapkan Alhamdulillah dan lihat hasilnya ;))Thanks a lot for http://thinktibits.blogspot.com

Optimize Blog with FeedBurner Feature

Optimize your blog with feedburner. Feedburner bisa dikatakan salah satu layanan yang bisa dipakai oleh para blogger untuk optimasi/optimize. Layanan yg didalamnya sudah tersedia analisis traffic, subscribe, dan lain-lain.

FeedBurner

URL	feedburner.google.com
Type of site	Web feed management
Owner	Google (bought on June 3, 2007)
Launched	2004

Oke disini BeBeN si bloglang seperti biasa mau berbagi informasi sedikit mengenai feature yg ada di Feedburner ini ;) Ooopppsss...kalau belum daftar, daftar dulu :D soalnya artikel ini berguna bagi yg sdh punya account disana :-"

Dari sobat kita Ihsan pemilik http://myfundoo-blog.blogspot.com pernah memosting tentang salah satu kegunaan dari si feed ini :"> "Menampilkan backlinks di blog dalam bentuk widget" Bagaimana untuk mendapatkannya :-/ Silahkan klik Widget to display backlinks to your blog. Thanks for usefully information my bro :-bd.

Oke bagi yg sudah log-in didalam blognya silahkan masuk Settings ► Site Feed ► Scroll ke bawah dikit ► Cari tulisan Post Feed Footer ► Tuliskan kata-kata berguna, dan nanti kata² ini akan berada dibagian bawah pada postingan via feed. Untuk lebih jelasnya silahkan sobat masuk My Feed Post. Lihat pada akhir postingan disana. Saya menuliskan...
Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Masih bertahan disana, perhatikan kembali dibawah tulisan yg tadi ada share/berbagi via beberapa web :-? Log-in ke account Feed sobat ► Optimize ► Lihat pada bagian sisi kiri ► Klik FeedFlare ► Centang-centangin deh yg mau dimasukinnya ;))See you :-h :)

Informasi is Information

Just share usefully information. Tidak terasa bulan sudah berganti Mei lagi :) Ada baiknya kita mengevaluasi diri khususnya, dan blog pada umumnya :)) Lumayan sudah bisa ngeblog sekarang mah :"> Menengok bulan April kemarin biasa BW ke web-web development dapat informasi yg mungkin berguna bagi para followers BeBeN khususnya dan para blogger diseluruh alam jagat raya :-" Point pertama BeBeN si bloglang mau memberi berita mengenai browsingan yg terpopuler versi Web Directions. Silahkan klik link tersebut guna mengetahui detailnya ^{bisa didownload} ;;) Screenshot.

Setelah tau browsingan apa yg terpopuler maka saatnya mengetahui web-web apa saja terbaik pada bulan April kemaren :-bd versi Designrfix.com. Kagak rugi masuk kesana bro!!! Mengenai sekelumit dunia perweban ada disana. Gaya lah pokoknya maknyus... Top Articles On The Web Design Billboard In April’10 Top artikel versi web InstantShift. Mau lagi informasinya gak nih??? Kalau mau siap-siaplah yg suka bermain dengan hostingan. Ada satu informasi mengenai Free 4GB Web Hosting (Ad free)!!! Free itu bebas, bebas itu GRATIS :"> Ini rinciannya :

• GB’s of Disk Space: 4GB
• GB’s of Transfer (Bandwidth): 8GB
• POP3 Email Accounts: Unlimited
• Add-on Domains: Unlimited
• MySQL Databases: Unlimited

Bagi sobat yg tertarik silahkan kunjungi dan lihat pada sisi kanan untuk mendaftarkan diri Alex Whinfield. Kalau ada yg lebih bagi-bagi yak ;)) Browsing terpopuler sudah, web jg sdh yg free-free jg ada, apa lagi yaaa :-/ Bagi sobat yg gemar mengikuti PTC ada baiknya menjadi member web berikut. Web penyedia layanan perekam segala klik-klik yg dilakukan terhadap program PTC sobat b-) Jadi ada catatannya gitu sob, juga mendukung banyak web penyedia PTC. Sebuah alat analisis yang membantu publisher memaksimalkan pendapatan dari Iklan Pay-Per-Klik.

SUPPORTED SYSTEMS :

Demo dan signupnya sob...

Segitu saja ah, Happy blogging with BeBeN si bloglang ganteng kalem :D bye bye :-h

Bookmark Widgets for Blogger

Dedengkot blog nih...xixixi ^.^' Hehehe ;)) mungkin weblog ini angkatan sama Master O-Om. Pas melirik ke bagian headernya ada bendera Indonesia ;)) Sayang baru ketemu sekarang :-s banyak link yang broken mengenai template²nya sob :( Tapi artikelnya bahasa inggris b-) Dari artikel template, tutorial, trik dan tips, dsb Tapi diliat dari arsipnya tahun 2007 :D Masih sepuh DOYOK nih kayaknya =)) Si yokdoyok kan dari tahun 5 SM (kabur.!!!) Satu tutorial yg akan BeBeN beberkan disini, mengenai Bookmark. Ambil yg ini soalnya gampang dan tentunya gaya :"> Hasilnya nanti seperti tampak pada gambar yg diatas kiri itu sob ;) Pertama-tama tekan tombol readmore dolo ya :-"

1. Download terlebih dahulu script BlogSocializer.
2. Masuk ke halaman Layout ► Page Elements ► Add a Gadget ► HTML/Javascript.
3. Grab/tarik ke bagian tepat dibawah Posting Blog look!!!.
4. Save.
5. Original posted.

Kalau mau baca-baca mengenai blog dari yg klasik format bisa pergi ke Blog Template 2.0 Salam Blogger \m/