Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts

Sunday, June 26, 2011

Kamu Emang Lebih Beda

Setiap orang (user internet) mempunyai kesenangan sendiri. Mempunyai pilihan ketika menggunakan browser dalam aktivitas browsingnya entah itu Firefox, Google Chrome, Internet Explorer (IE), Opera, Safari maupun yang lain

internet explorer 9 logo Belum lama kemarin rilis IE9 (untuk fitur2nya bisa liat disini) atau disini. Walopun ada penambahan baru seperti support CSS3 (tidak semua) tetapi IE9 buat saya (sampe saat ini) adalah kemunduran.

Beberapa hari kemarin saya dikontak blogger yang pernah rekuest personal template untuk Online Store Blog. Dia mengatakan bahwa tampilan blog (template) tidak sempurna diliat pake IE9. Ada bagian yang turun, yang menjadikan tidak terliat. Hal tersebut tidak terjadi ketika dia masih pake IE8 (haduhh.. Madame. Ngapa juga updates ke IE9?? ^_^). Berhubung saya belum pake IE9, saya cuma bisa liat dari skrinshot yang dia kirim. Coba cari2 artikel tentang IE9 termasuk cara nge-hacknya mpe saat ini saya belum menemukan. Kalopun ada, itu juga tidak berhasil (hack kode IE9 berefek ke semua versi IE dan malah membuat lebih berantakan untuk tampilan versi IE7 dan IE8). Saya tanya ke temen sesama pembuat template juga sama. Dia mengalami masalah juga dengan IE9 dimana untuk IE versi laen normal (normal dengan sedikit "reparasi") Dari forum2 juga saya dapat, banyak postingan tentang problem IE9

Apakah Microsoft emang sengaja membuat IE9 "lebih berbeda"? Sedangkan IE sendiri bagi saya pribadi adalah "musuh" karena membuat pekerjaan jadi 2x.

Untuk statistik pengunjung blog2 saya terutama DheTemplate - Daily Updates Free Blogger Template, IE sejauh ini merupakan penyumbang no 3 setelah Firefox dan Chrome. Mungkin user mulai cerdas dalam memilih browser, hehehehe..

Berikut ini beberapa link cara hack IE9 dari blog dan juga forum :
1. IE9 Only CSS Hack
2. Is there any ie9 css-hacks? Already needed.
3. IE9 conditional CSS hack?
4. IE Hacks Galore

IE owh IE kamu emang beda tapi jangan persulit kami. Kalo gak, nti kamu di tinggal para fans2mu lho, qiqiqiqi...

Pic : thetechlabs.com

Monday, June 13, 2011

Cara Mudah Cari Backlink Berkualitas

Backlink yang berkualitas?? Sapa yang gak mau?? banyak cara untuk mendapatkan backlink berkualitas entah itu koment di blog berPR tinggi apalagi yang dofollow (Just a Blog ini dofollow dan sangat diizinkan meninggalkan link asal tidak T.E.R.L.A.L.U ^_^) submit ke sosial bookmark, submit ke artikel directories, tukeran link dll. List2 blog dengan backlink berkualitas juga sudah banyak yang posting. Ada cara mudah untuk mendapatkan backlink berkualitas tanpa bersusah2 brosing dengan keyword "backlink berkualitas" dan klik sana klik sini. Cara ini mungkin sobat2 sekalian udah tau yaitu lewat informasi Link di Alexa. Jika sobat mengecek blog sobat lewat Alexa, ada keterangan Sites Linking In dan itu merupakan informasi backlink yang masuk ke blog sobat.

cara mudah cari backlink berkualitas

Terus gimana cara mendapatkan informasi backlink yang bagus??


Sobat cukup masukkan aja alamat blog yang menurut sobat populer. Misalnya DheTemplate - Daily Free Blogger Templates, halah... Sobat masukkan alamat DheTemplate di Alexa dan akan terliat di informasi Sites Linking In untuk DheTemplate ada sebanyak 50 (sampe saat ini), lalu klik Sites Linking In tersebut
Dari informasi itu, nanti akan terliat backlink yang masuk ke DheTemplate dari mana saja. Ada 2 keterangan yang menyatakan backlink yang masuk, yaitu :
1. Nama blog, misalnya Technorati: Web Services For Bloggers
2. Alamat URL langsung, misalnya id.answers.yahoo.com/question/index?qid=20100824231509AACFGiH

Dari contoh diatas, emang bener, DheTemplate.com ada tapi ada juga tadi saia cek yang terdapat di Link Alexa tapi DheTempalte.com tidak ada.

So, kumpulin blog2 yang menurut sobat populer, cek di Alexa untuk liat backlinknya, copy dan paste url.nya lalu ikutlah berkoment ria jika itu sebuah blog. Tapi jika itu sebuah forum ato submit directory, gak ada alahnya untuk daftar untuk dapet backlink berkualitas


Pic : webtoolsandtips.com

Sunday, June 12, 2011

Tampilan Baru Dashboard Blogger

Setelah beberapa hari kemarin Blogger mengumumkan akan merubah tampilan dashboard, akhirnya sekarang bia dinikmati tapi hanya untuk blogger2 yang beruntung (sampe saat ini)

Barusan jalan2 ke blognya Anesh dan dia adalah salah 1 blogger yang beruntung dengan tampilan dashboard Blogger yang baru. Tampilan baru ini terliat lebih elegant dan bersih dengan navigasi yang memudahkan kita. Gak usah lama2. Berikut ini adalah skrinshot yang saia ambil langsung dari blognya Anesh

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

new dashboard blogger

kapan ya dashboard saia ganti?? hehehe... Apalagi sampe sekarang ini saia lebih suka pake versi lama, bukan Draft Blogger. apakah sobat termasuk blogger yang beruntung dengan tampilan dashboard yang baru?? Coba di cek

Sumber pic : Bloggerplugins.org

Thursday, June 9, 2011

Fitur Custom Favicon Blogger - Cara Mudah Mengganti Favicon

Fitur custom favicon Blogger sekarang sudah tersedia dan sudah ada widgetnya sendiri di menu page element. Secara tidak langsung, favicon merupakan identitas blog kita dan menggunakan favicon bawaan blogger mungkin kurang oke. Sobat cukup upload favicon sobat dan beres. Tidak perlu hack kode favicon untuk browser Chrome apalagi Internet Exlorer. Semuanya bisa muncul

Untuk mengganti favicon, sobat login dulu ke Draft Blogger. Kemudian klik pada Design. Nanti akan ada menu widget favicon seperti berikut :
custom favicon blogger
Lalu klik Edit dan akan muncul kotak dialog baru seperti ini :

custom favicon blogger
Sobat tinggal upload saja favicon untuk blog sobat. File favicon harus .ico dan ukuran file tidak boleh lebih dari 10kb. JIka sudah, save dan akan berubah menjadi seperti berikut :
custom favicon blogger
Menggunakan favicon WordPress, hehehee....

So, tentukan identitas blog sobat dengan favicon yang beda dan unik, halah...


** Jika sedah mempunyai favicon, lebih baek dihapus dulu kode faviconnya
** DheTemplae - Daily Free Blogger Templates malah belum punya favicon, hehehe...

Friday, June 3, 2011

Twitter Adsense Indonesia - Cara Mudah Berkomunikasi Tentang Adsense

google adsense logo Di kutip dari Inside Adsense Group, sekarang ini sudah ada akun Twitter Adsense untuk Indonesia. Sebuah berita bagus karena kita bisa dengan mudah tanya2 langsung soal Adsense ke Team Google Adsense, cara optimatsi Google Adsense, berita terbaru tentang Adsense, dll. Berikut ini kutipan dari Inside Adsense Groups.

Selamat datang publisher Indonesia di @IDAdSense!

We’re excited to let you know that our Indonesian Twitter account has
officially launched. Now you can get the latest updates on AdSense in
Bahasa Indonesia by following @IDAdSense on Twitter. You can also find
out our best practices and optimization tips to maximize the revenue of
your site.

Every month, we’ll have a special week where you can ask questions
about a certain topic that we’ll discuss. We'll have an AdSense expert
do their best to answer your questions. Find out more about the special
week by following @IDAdSense.

Indonesian joins our other global Twitter channels in English, Spanish,
French, Russian, Italian, Turkish, and Japanese. Sign in to your
twitter account now, and start following us in the language of your
choice!http://www.blogger.com/img/blank.gif

Posted by Niken Sasmaya - Inside AdSense team


Jangan lupa untuk follow akun Twitter Adsense Indonesia.

Jangan lupa juga untuk updates template terbaru di DheTemplate.com - Daily Updates Free Blogger Templates

Wednesday, June 1, 2011

Menambahkan Fitur Google +1 Pada Blogger

Gak mau kalah dengan Facebook Like, beberapa hari yang lalu, Google meluncurkan fitur +1 dan sekarang fitur tersebut sudah tersedia di Blogger, berdampingan erat bersama share buttons yang lain.

Tadi coba2 untuk pencet memencet +1 tapi gak tau juga hasil nyatanya seperti apa, hehehe.. Kalo Like pada facebook kan jelas. Dan jika diliat dari sumber di Google Buzz, kayae fitur +1 ini belum tersedia untuk Indonesia

Untuk menambahkan fitur +1 ini, sobat cukup centang aja Show Share Buttons tapi untuk template yang sudah custom, kadang post share buttonnya gak muncul

fitur tombol google +1

Dan berikut ini cara yang lebih efektif untuk menampilkan fitur +1
Masuk ke Design >> Edit HTML. Jangan lupa centang Expand Widget Templates. Cari kode berikut ]]></b:skin>

Lalu copy and dan paste kode ini
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Jika sudah, cari kode berikut <data:post.body/> dan tempatkan kode di bawah ini sebelum kode tadi

<div style='float:right; margin-right:10px;'>
<g:plusone></g:plusone>
</div>


Goole memberikan pilihan 4 ukuran untuk fitur +1 ini, yaitu :
Ukuran Tall (60px)
Ukuran Small (15px)
ukuran Medium (20px)
Ukuran Standard (24px)


Jika sobat ingin menampilkan ukuran "small" (tanpa tanda kutip), kodenya akan seperti ini

<g:plusone size="small"></g:plusone>

Jika sudah, save. Sobat bisa liat contoh fitur Google +1 di DheTemplate.com - Daily Updates Free Blogger Templates

Mpe lupa, jangan lupa untuk di download dulu templatenya

** kode css bisa sobat atur sendiri untuk float, margin, padding ataupun background
** penempatan kode +1 diatas <data:post.body/> hanyalah contoh dan untuk template yang masih asli bawaan Blogger. Soba bisa atur sendiri apakah itu di bawah judul post, di post footer atau yang lain

Pertanyaan yang ada. Misalnya kita pencet +1 untuk postingan kita dimana setiap hari kita postingan buanyakk, gak cuma 1 postingan, kira2 di anggap spam gak ya?? Terlebih lagi lagi "ribut" soal Google Panda maen tendang website/blog yang dianggap "nakal"

Untuk lebih lanjut soal +1 button ini, sobat bisa cek ke postingan +1 button di Google Buzz

Dan ini adalah keterangan apa itu fitur +1 button

Tuesday, May 17, 2011

Cek Lagi Blog Sobat di Blogger Directory

Banyak cara untuk mendapatkan backlink. Salah satunya submit blog ke blogger directories ato submit RSS feed. Sudah pasti donk cari yang gratisan, sukur2 gak pake syarat reciprocal link :D. Tetapi apakah bener blog kita dicantumin?? Kayae perlu di cek lagi.

backlink from free blogger directoriy and free rss directory Untuk mencari backlink, aku juga submit DheTemplate - Daily Updates Free Blogger Template ke free blogger directories dan juga submit ke free RSS feed directories. Ada yang minta reciprocal tapi ada juga yang gak.

Reciprocal Link
Beberapa hari submit, aku cek apakah DheTemplate.com sudah di list. Ternyata.. mpe itungan mingguan gak juga ada. Coba search pake keyword DheTemplate.com juga tetep gak ketemu. Mau gimana lagi?? Apakah masih harus sabar lagi?? hehehehe... Langsung aja di cut hubungan ma free blogger directories free RSS feed directories tersebut daripada malah bikin berat blog karena http rekuest

So, untuk sobat2 yang submit blognya ke free blogger directories dan juga free RSS feed directories, coba cek kembali apakah blog sobat ada di directories2 tersebut. Jika tidak, langsung cut aja link mereka. Gak perlu juga nunggu lebih lama. Egois?? Gak juga. Bukankah hubungan seperti itu adalah mutualisme dimana sama2 membutuhkan backlink?? Tetapi jika cuma 1 pihak aja yang diuntungkan, apa perlu hubungan cinta itu dilanjutkan?? hehehehe..

Pic : webseoglobe.com

Monday, July 19, 2010

Auto Submit Artikel Blog Ke New Digg.com

Banyak cara untuk mendapatkan backlink yang berkualitas. Salah satunya adalah dari social blog seperti Digg.com. Jika sebelumnya kita melakukan submit ke digg.com secara manual, sekarang, dengan hadirnya New Digg.com, postingan terbaru kita akan akan scara otomatis tersubmit ke Digg.com.

Apa yang harus dilakukan untuk bisa submit otomatis ke New Digg.com??
1. Sobat sudah punya akun Digg.com
2. Silahkan sobat klik link ini
3. Untuk bisa mengakses New Digg.com, sobat akan mendapatkan semacam undangan dengan dari Digg.com. Masukkan alamat email dan password ketika sobat mendaftar digg.com. (saya gak tahu apakah harus sudah mendaftar digg.com atau belum karena saya sendiri mempunyai akun digg.com). Sobat akan mendapatkan notifiksi email dari digg.com
4. Tunggu beberapa hari untuk bisa mengaktifkannya (kemarin punya saya sekitar 3 hari)
5. Setelah sobat mendapatkan undangan dari New Digg.com yang sobat terima lewat email, kemudian sobat masuk ke sini dan masukkan alamat blog sobat. Sobat akan mendapatkan kode yang harus sobat verifikasi di blog yang sobat daftarkan tersebut. (lihat gambar untuk lebih jelas)

auto submit to new digg.com

6. Untuk verifikasi blog, buat postingan baru dan masukkan kode tersebut ke dalam postingan tersebut
7. Publish blog dan klik Verify Now pada digg.com tersebut dan akan seperti berikut (lihat gambar yang saya garis bawah)

auto submit to new digg.com

Selesai

Jika sudah selesai, maka sobat gak perlu repot lagi untuk submit secara manual postingan sobat ke Digg.com dan yang paling utama, mendapatkan backlink yang berkualitas !!


Note :
- Kode verifikasi blog ini adalah 91b5951789a24a5fa21a04691a8ed558

Friday, July 2, 2010

Fitur Baru Blogger : Blogger Statistik

Setelah belum lama kemarin meluncurkan fitur Share Button, kemudian widget yang harus diberi judul kini ada fitur baru yaitu futur Statistik Analitik Blog. Fitur ini seperti Google Analitik, Sitemeter atau yang lain dimana akan memunculkan statistik blog kita mulai dari PageViews, Sumber Trafik, Postingan blog, dan juga Audience (Geografis sumber yang masuk ke blog kita).

Berikut ini skrinshot Statistik untuk Just a Blog pada hari ini

statistik wdiget blog
Klik gambar untuk memperbesar.

Jika pada Google Analitik mempunyai filter yang berfungsi sebagai filter trafik yang masuk ke blog kita seperti filter IP maupun domain, apakah fitur Statistik yang tertanam langsung pada Blogger ini juga mempunyai filter seperti itu??

Kan tentunya gak mau statistik blog bagus baik itu dari trafik maupun pageview tapi semua itu dari kita sendiri. Sama halnya kita buka warung makan dan habis tetapi yang makan kita dan keluarga sendiri, halah...

Fitur ini dapat diakses dari Dashboard tetapi harus login Blogger Draft dulu.

Monday, June 21, 2010

Menyembunyikan Judul Widget Pada Blog

Tadi saya coba utak-utik template tapi ada yang "sedikit aneh" yang saya temui dan itu tidak seperti biasanya. Ketika saya mau menambahkan element HTML/Javascript, selalu diminta untuk memberikan judul pada widget tersebut (lihat gambar untuk lebih jelas). Hal ini tidak saya temui sebelumnya kemarin2 ketika mau menabahkan elemen baru HTML/JavaScript, tidak "diharuskan" ada judul. Awalnya saya merasa ada yang salah dengan hal tersebut karena yang saya utak-utikadalah template baru yang saya buat. Saya merasa ada yang salah dengan kode pada template saya.

menambahkan widget blog

Kemudian saya coba dengan template yang sudah saya buat sebelumnya yaitu Layer Blue template untuk mengecek apakah hal diats juga terjadi pada template lama (sebelum saya tau soal ini) dan ternyata hal tersebut juga berlaku. Dan akhirnya terjawab sudah kebingungan saya akan Judul widget yang harus ada.

Lha terus bagaimana apabila widget yang kita tambahkan tidak harus ada judulnya??

Untuk membuat judul tidak muncul pada widget yang kita tambahkan, sobat cukup menambahkan kode sederhana seperti berikut :

1. Beri judul widget yang akan sobat tambahkan. aya misalkan widget yang ditambahkan adalah HTML/JavaScript dengan judul New Template
2. Masuk ke Design, Edit HTML dan cari widet baru yang sobat tambahkan tadi maka kode widget tersebut akan seperti ini :

<b:widget id='HTML10' locked='false' title='New Templates' type='HTML'/>

Perhatikan yang saya beri warna merah.

3. Lalu tambahkan kode berikut

#HTML10 h2 {
display:none;
}

diatas kode ]]></b:skin>


4. Save

Judul widget HTML10 (dengan judul New Template) tidak akan muncul pada blog sobat.


Contoh diatas adalah contoh untuk widget HTML/JavaScript. Jika sobat menambahkan widget Label, profil atau yang lain, tinggal sesuaikan saja.

Thursday, June 17, 2010

DheTemplate.com : New Free Blogger Template Everyday

DheTemplate.com : New Free Blogger Template Everyday !!


Akhirnya rilis juga. Blog yang 1 ini adalah blog directory untuk download free blogger template. Dan dengan blog baru saya yang ini, akhirnya saya bisa memiliki domain sendiri, hehehehe...

galleries free download blogger template with magazine style blogger template, seo friendly, and features added for your blog template - New free blogger template everyday

Dunia blog yang semakin tumbuh, para blogger yang suka gonta-ganti template, hehehe.. dan juga para pembuat blogger template baik itu dari platform Blogger itu sendiri maupun dari blogger template Convert Wordpress to Blogger yang semakin banyak dalam menampilkan ide desain template untuk blog menjadikan alesan saya membuat blog ini.

Seperti blog directory free blogger template yang lain, blog ini merupakan galeri blogger template dan dengan tagline New Free Blogger Template Everyday !! saya berusaha untuk selalu update new blogger template terbaru setiap hari dari para pembuat template termasuk template buatan saya sendiri, halah... minimal 1 template baru setiap hari (kenyataan yang ada lebih dari 1 template baru setap hari yang saya posting, hehehehe...)

Harapan saya, dengan blog ini, DheTemplate.com, dapat mengakomodir kebutuhan blogger dalam mencari template blog yang sesuai dengan yang diinginkan, baik itu sesuai dengan tema blog, kolom template, warna template maupun dari feature yang ada di template tersebut dan juga mewakili pribadi blogger itu sendiri.

Selamat datang di DheTemplate.com - New Free Blogger Template Everyday

Sunday, June 13, 2010

Fitur Blogger Baru : Share Button

Setelah fitur Designer, Static Page, sekarang, Blogger menambah lagi fitur baru yaitu fitur Share Button. Firut ini seperti fitur social bookmark dimana kita bisa share artikel ke akun social kita tetapi fitur ini hanya terbatas pada 5 akun yaitu share lewat email, blog, twitter, facebook dan buzz.

Beriut ini skrinshot fitur Share Button

fitur share button pada blogger
Klik gambar untuk memperbesar

Untuk bisa menggunakan fitur ini, sobat harus login Draft Blogger.

Fitur Blogger selanjutnya apa ya??


Note :
- Fitur ini tidak berlaku untuk template yang sudah dimodifikasi. Tutorialnya cari sendiri ya.. ^_^

Friday, June 4, 2010

Hati-Hati Compress CSS Template

css compressor onlineUntuk meningkatkan loading blog, salah satunya dengan compress CSS. Compress CSS adalah hal yang sudah umum dalam dunia blog dan hampir semua blogger melakukannya. Dan dari sekian banyak CSS compressor online, hati2 dengan online CSS compressor dari CSSCompressor.com. Kenapa?? Ini adalah sedikit pengalaman saya ketika compress CSS.

Seperti yang kita tau, tidak semua kode CSS berjalan baik dan mulus di semua browser terutama untuk Internet Explorer. Disini saya menggunakan perbandingan antara Mozilla Firefox dan Internet Explorer 7 karena saya membuat template blog menggunakan Firefox dan hanya pada IE7 tampilan template tersebut "sedikit aneh". Untuk mengakali supaya tampilan template made in ireng_ajah di IE bisa lebih sempurna dan hampir sama dengan tampilan pada Firefox 3.6, saya menggunakan tambahan kode khusus untuk IE7. Contoh :

Misalkan kode CSS untuk bagian sidebar-wrapper seperti ini :

#sidebar-wrapper {
width: 320px;
float: right;
margin: 10px 0 0;
.margin-top:20px; /* IE7 */
}

Ketika template tersebut dibuka dengan Firefox, hasilnya sempurna seperti yang kita inginkan tetapi ketika dibuka dengan IE7, tampilan tersbut tidak sempurna karena ternyata jarak (margin) terlalu dekat dan untuk mengakalinya, ditambahkan kode khusus untuk IE7 yaitu kode yang berwarna merah tersebut.

Kode tersebut berfungsi supaya ketika blog dengan kode template seperti itu dibuka dengan IE7, besarnya margin pada bagian sidebar adalah 20px dan bukan 10px.

Lalu apa hubungannya dengan CSSCompressor.com??

Berikut ini adalah hasil dari compress CSS kode template bagian sidebar diatas menggunakan online CSS compressor dari CSS Compressor dibandingakan dengan dari YaHoo Yui dan CSSDrive

1. CSSCompressor didapat :
#sidebar-wrapper{width:320px;float:right;margin:20px 0 0}

2. YaHoo Yui didapat :
#sidebar-wrapper{width:320px;float:right;margin:10px 0 0;.margin-top:20px;}

3. CSSDrive didapat :
#sidebar-wrapper{ width:320px; float:right; margin:10px 0 0; .margin-top:20px; /* IE7 */}

Tampak untuk hasil dari CSSCompressor.com pada bagian margin menjadi margin:20px 0 0 dimana kode margin 20px 0 0 adalah kode margin bagian atas untuk IE dan jika hasil compress tersebut diaplikasikan pada template, maka tampilan blog pada Firefox akan berubah karena kode asli untuk margin: 10px 0 0;

Untuk hasil dari YaHoo Yui dan CSSDrive sendiri tidak masalah. Kode untuk Firefox dan IE masih utuh. Yang membedakan adalah ratio compress saja.

Selama ini saya sering compress CSS menggunakan CSSCompressor karena ratio hasil compress-nya paling besar, hehehehehe.. Dan untuk mengakalinya, saya edit pada bagian kode yang terdapat kode untuk IE.

Bagaimana dengan sobat sendiri?? Tiap blogger punya favorit tool sendiri untuk compress CSS templatenya tetapi jika sobat mengalami kasus seperti diatas dimana yang tadinya sebelum di compress tampilan blog sempurna baik itu di Firefox dan IE tetapi malah "jepat" setelah kode CSS di compress, bisa jadi penyebabnya seperti diatas.


Note : Setingan compress standar dan bawaan langsung dari css compressor online

Pic : http://www.anythingleft-handed.co.uk/media.html

Sunday, March 28, 2010

Mengatur Kode CSS Dan JavaScript Untuk Mempercepat Loading Blog

mempercepat loading blog dengan cara mengatur tampilan kode css dan kode javascriptBanyak cara untuk mempercepat loading blog. Pada postingan saya sebelumnya tentang mempercepat loading blog dengan menggunakan eksternal link kode CSS, sekarang bagaimana mempercepat loading blog dengan mengatur tampilan kode CSS dan JavaScript. Sebelumnya, saya berharap sobat membaca postingan jenis dan fungsi kode untuk mengatur tampilan widget blog karena berkaitan dengan postingan ini.

Secara umum, susunan kode template blog seperti berikut :

<b:skin><![CDATA[/*

CSS code

]]></b:skin>

</head>

Kode HTML

</body>
</html>



Untuk mempercantik blog, kemudian ditambahkan widget baru. Saya contohkan misalnya sobat ingin menambahkan widget Feature Content image slideshow.

Biasanya kode Feature Content tersebut terdiri dari 2 kode yaitu kode CSS dan kode JavaScript.
Untuk kode CSS, penempatan kodenya diatas kode

]]></b:skin>

dan untuk kode JavaScript biasanya ditempatkan di bawah kode

]]></b:skin> alias diatas kode

</head>


Struktur kode HTML untuk Feature Content biasanya seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='feature-content'>
<b:section class='feature' id='feature' preferred='yes'>
<b:widget id='HTML30' locked='false' title='Feature Content='HTML'/>
</b:section>
</div>
</b:if>

* Perhatikan yang berwarna merah
* Saya menggunakan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> sebagai contoh salah satu kode untuk menampilkan widget blog hanya pada main post dan label post saja. Beberapa widget Feature Content yang saya temui di template2 modifikasi menggunakan kode <b:if cond='data:blog.pageType == &quot;index&quot;'>. Untuk jenis dan fungsi kode yang lain bisa diliat pada postingan saya yang ini


Widget Feature Content sendiri biasanya hanya muncul pada main post dan label post saja dan akan hilang pada single post tetapi jika sobat melihat dari View Page Source (pada single post) kode CSS dan JavaScript Feature Content tersebut masih akan terlihat dan ini akan dianggap sebagai kode yang tetap ada didalam template blog. Bukankah itu akan mempengaruhi berat dan loading blog?? Terlebih lagi jika kode CSS dan JavaScript (terutama kode JavaScript) Feature Content tersebut besar.

Untuk mengakalinya, sobat bisa menggunakan trik sederhana ini.

1. Kode CSS.
Seperti yang saya tulis diatas, kode CSS Feature Content biasanya diletakkan diatas kode

]]></b:skin>

Sekarang, pindahkan kode tersebut menjadi dibawah kode

]]></b:skin>

dengan susunan kode seperti berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode CSS Feature Content disini

</b:if>
</style>

2. Kode JavaScript
Untuk kode JavaScript, tambahkan kode yang berwarna merah pada kode JavaScript tersebut sehingga susunannya akan seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='URL-JAVASCRIPT-CODE' type='text/javascript'/>
</b:if>

Save.

Sekarang sobat baca salah satu postingan sobat (single post) dan liat dari View Page Source. Kode CSS dan JavaScript untuk Feature Content tidak akan terbaca dan itu berarti mengurangi berat blog yang tentunya juga berpengaruh pada loading blog sobat.


Note :
- Perhatikan yang berwarna merah.
- Penggunaan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> antara kode CSS, kode JavaScript dan untuk kode HTML harus sama.


Cara ini juga bisa digunakan untuk kode Auto Readmore. Auto Readmore biasanya juga hanya tampil pada main post dan label post saja. Jadi, tinggal tambahkan kode yang berwarna merah dibawah ini sehingga menjadi menjadi

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode Auto Readmore

</b:if>


Untuk widget yang lain pun juga bisa. Yang penting dalam penggunaan cara ini adalah tau jenis dan fungsi kode untuk mengatur tampilan widget blog. Disamping itu juga, ada kode ato widget blog yang tadinya muncul tapi kemudian menghilang atau dari menghilang, kemudian baru muncul.

Semoga bermanfaat.

Monday, March 22, 2010

Jenis dan Fungsi Kode Untuk Mengatur Tampilan Widget Blog

mengatur tampilan widget blogJika sobat melihat template Face Off Magajah, tampak ada beberapa widget yang muncul dan menghilang. Template tersebut menggunakan kode untuk mengatur tampilan widget blog supaya bisa muncul dan menghilang baik itu pada main post, label post maupun pada single post. Berikut ini beberapa jenis kode dan fungsinya untuk mengatur tampilan widget blog muncul dan menghilang.

1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
Kode ini berfungsi untuk menampilkan widget blog hanya pada main post saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Untuk contoh penggunaan kode ini, klik disini. Header pada contoh blog tersebut akan menghilang dan berganti header lain ketika sobat mengklik label post atau membaca postingan secara keseluruhan (single post)

2. <b:if cond='data:blog.url != data:blog.homepageUrl'>
Kode ini berfungsi untuk menampilkan widget blog pada label post dan single post (membaca postingan secara keseluruhan).
Untuk contoh klik disini pada tampilan label post dan disini untuk tampilan single post

3. <b:if cond='data:blog.pageType != &quot;item&quot;'>
Kode ini berfungsi untuk menampilkan widget blog pada main post dan label post dan akan menghilang ketika membaca postingan secara keseluruhan (single post).
Untuk contoh penggunaan kode ini bisa diliat disini untuk tampilan main post dan disini untuk tampilan label post.

4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja alias ketika sobat membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau label post.
Penggunaan kode ini dapat sobat liat pada blog ini dibagian Footer. Kolom footer di blog ini baru muncul apabila sobat membaca seluruh postingan.

5. <b:if cond='data:blog.pageType == &quot;index&quot;'>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.

Perbedaan fungsi kode nomer 1 dan nomer 5 (= nomer 3) pernah saya posting dipostingan ini.

Penerapan kode2 diatas bisa dilakukan dengan 2 cara.
1. Langsung pada widget tersebut.
Cara ini langsung pada widget masing2 yang hendak diatur tampilannya. Misalkan sobat mau menambahkan widget HTML/Javascript dibagian sidebar. Jika sudah, jangan lupa untuk centang Expand Widget Templates.

Kode widget HTML/Javascript aslinya akan tampak seperti ini.

<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

* Perhatikan yang saya kasih warna merah

Kemudian, sobat ingin menambahkan kode nomer 4. Sobat harus mengedit kodenya menjadi seperti berikut ini.

<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='title'><data:title/></h2>

<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

* Perhatikan yang saya kasih warna merah.

Kelebihan cara ini adalah tampilan widget tersebut akan tetep muncul di layout (page element) sehingga memudahkan ketika kita mau menambahkan widget yang lain dibagian sidebar tersebut tetapi cara ini terbilang susah untuk widget selain HTML/Javascript seperti Profil karena kode tambahan tersebut gak tau (saya belum tau) harus diletakkan/disisipkan dimana.

2. Semua widget/kelompok
Untuk lebih jelasnya, perhatikan contoh berikut ini. Saya misalkan pada bagian Sidebar.

Kode2 widget pada sidebar tanpa klik Expand Widget Templates akan tampak seperti ini (saya menggunakan kode nomer 4 sebagai contoh) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML81' locked='false' title='' type='HTML'/>
<b:widget id='HTML33' locked='false' title='Search This Blog' type='HTML'/>
<b:widget id='HTML63' locked='false' title='My Service' type='HTML'/>
</b:section>
</div>
</b:if>

* Perhatikan warna merah. Komposisi cara 2 ini harus dimulai dengan kode diatas dan diakhiri dengan kode </b:if>.

Umumnya cara yang ini sering dipakai untuk kode nomer 1, 3, dan 5 karena tampilan sidebar masih akan nampak pada layout (Page ELement). Jika sobat menggunakan cara ini untuk kode nomer 2 dan 4, maka tampilan sidebar sobat tidak akan muncul di Page Element seperti pada template Face Off Magajah. Tapi cara ini mempunyai kelebihan karena widget yang bisa diatur tampilannya tidak terbatas pada widget HTML/Javascript saja yang sudah umum. Untuk widget2 lainpun seperti Label, Profil, termasuk juga header dan main-wrap (widget postingan) dll bisa langsung diterapkan tanpa perlu pusing2 harus ditaruh dimana kode2 diatas didalam widget tersebut.

Wednesday, March 10, 2010

Blogger Template : Simple Magajah Template

Browsing2 dan melihat template blog yang seperti v-card, membuat saya pengen membuatnya dan, lahirnya blogger template Simple Magajah template Face Off Magajah ini, halah... Simple Magajah Face Off Magajah template ini saya khususkan hanya berupa link postingan pada tampilan utama (home). Pengaturan tampilan widget blog seperti header blog, sidebar blog dan footer blog menggunakan kode menghilangkan dan memunculkan widget blog alias menggunakan kode

<b:if cond='...'>

</b:if>

(untuk fungsi dari masing2 kode tersebut, InsyaAllah dipostingan berikutnya)

Berikut ini skrinshot dari template Simple Magajah Face Off Magajah.

free blogger template magazine style
Skrinshot tersebut adalah tampilan halaman HOME. Untuk tampilan tiap postingan, berbeda lagi. Untuk lebih jelasnya, berikut ini contoh untuk tampilan HOME dan untuk tampilan postingan.

Dan berikut ini tampilan layout blogger template Simple Magajah Face Off Magajah secara keseluruhan tanpa kode

<b:if cond='...'>

</b:if>


free blogger template with magazine styleKlik gambar untuk memperbesar



Update :
- Nama templatenya saya ganti menjadi Template Face Off Magajah, hehehehe..

- Untuk download template ini, klik disini

Friday, February 5, 2010

Mati Ide Untuk Buat Template Baru

blogger templateMembuat template blog itu bagi saya, mudah dan cepet. Disamping saya sudah punya master template yang siap diutak-utik baik itu warna, layout, ukuran, tambahan widget dll. Toh template blog itu hanya seperti itu2 juga. 1 kolom, 2 kolom, 3 kolom, sidebar dikanan, sidebar dikiri. Kolom pada footer. Header yang mempunyai 2 kolom atao bahkan lebih ditambah feature widget kalo perlu. Edit ukuran sana sini. Ya.. template blog itu cuma itu2 aja.

Permasalah bukan pada yang saya ungkap diatas tetapi lebih pada desain template itu. Dasarnya adalah sama. Misal 2 kolom tetapi tapi yang membedakan antara template yang satu dengan template yang lain (termasuk juga para pembuat template blog) adalah desain. Gimana menciptakan suatu desain template dengan 2 kolom tapi bisa menjadi menarik hasilnya dilihat dari segi warna dan background. Itu yang membuat lama dan kadang mpe berhari2, seperti saya, hehehehe..

Warna : warna disini mewakili template itu sendiri. Apakah warnanya sama semua atau beda ditiap komponen template, entah itu di header, main post, sidebar maupun footer

Background : background yang saya maksud adalah gambar. Baik itu gambar template secara keseluruhan atau pada bagian tertentu seperti pada judul post, judul sidebar, background header, background footer.

Penggunaan background sendiri bisa dikatakan penting karena fungsi dari background bagi saya sebagai pemanis tampilan. Berbeda dengan hanya memakai warna saja. Template 2 kolom dengan warna dasar putih polos akan berbeda hasil dan penilaian jika ditambah dengan background baik itu sebagai background utama blog atau hanya pada bagian tertentu. Hal ini sama seperti makanan. Jika makanan tersebut disajikan dengan tampilan yang menarik, dihias, tentunya orang2 mempunyai hasrat untuk mencicipi walopun rasanya bisa jadi asin ato malah pait dan mungkin bahan dasar dari makanan itu hanya tempe dan tahu saja. Itulah pentingnya background buat saya.

Disinilah kelemahan saya dalam membuat template. Saya tidak bisa menggambar. Tidak bisa menciptakan suatu imajinasi bagaimana membuat background yang bagus untuk template2 buatan saya. Bahkan, untuk bakcground pada judul sidebar saja, saya sulit menemukannya. Jika sobat perhatikan template2 buatan saya. Hampir semuanya cuma maen warna.

Kalo untuk desain template sendiri, alhamdulillah, saya masih punya banyak stok. Apakah templatenya nanti akan saya kasih feature widget. Template 3 kolom pada halaman utama ato yang lain. Semua sudah tergambar jelas dikepala. Tinggal realisasinya. Masalahnya, gimana menciptakan template yang enak diliat mata dengan perpaduan warna yang pas (dan tambahan background kalo perlu) itu yang sulit buat saya dan itu pula yang menjadikan membuat template blog itu lama bagi saya. Termasuk sebelum postingan ini. Saya lagi buat template blog baru tetapi saya mati ide dalam hal warna dan background kalo perlu. !! dan akhirnya tidak saya lanjutkan buat template barunya dan malah tercipta postingan ini, hehehehe..

Masukkan dari sobat sangat saya harapkan. Terimaksih


Note :
- Download free blogger template made in ireng_ajah

Thursday, January 28, 2010

Validasi CSS?? Gak Penting

Yang valid itu yang sah, haiah... Dan untuk memudahkan segala sesuatu, apalagi itu menyangkut dokumen2 penting, tentunya pengen yang valid biar aman, wehh..?? Sebuah informasi belum bisa disebut data apabila informasi tersebut belum valid. Sebuah blog juga belum bisa di sebut blog yang valid apabila tidak ada postingannya (emang gitu ya reng?? hehehehhe..).

Blog (baca : template) juga perlu pemvalidan (ada gitu kata pemvalidan??). Bisa tampil "sempurna" di browser, tidak eror apabila dijadikan sebuah template blog. Untuk kode2 yang tertanam di template itu sendiri juga ada tool untuk mengecek apakah kode tersebut valid ato tidak. Misalnya kode html dan kode css. Pentingkah memvalidkan kode html dan kode css??

Saya tidak membahas validasi kode html tapi validasi kode css melihat pada diri saya (blog2 saya) dan blog2 yang lain yang masih dalam bentuk Blogspot dan hanya custom domain saja.

Validasi CSS itu tidak penting dan hanya membuang2 waktu, pikiran, tenaga dan validasi CSS itu sebuah tindakan bodoh dan konyol !!

Kenapa saya bisa mengatakan seperti itu?? Ada beberapa alesan kenapa validasi CSS itu gak penting menurut saya

1. Ada kode css siluman
Jika sobat lihat pada template yang sobat pake, sobat tidak akan bisa melihatnya secara langsung pada template karena kode css itu seperti siluman tetapi jika sobat menggunakan tool seperti validasi css ato tool untuk mengetahui loading blog seperti YSlow ato yang dari Google, kode css itu akan terlihat. Kode css siluman itu adalah kode css bawaan Blogger yaitu :

http://www.blogger.com/static/v1/widgets/1576120009-widget_css_bundle.css

Disini saya menggunakan template Resensi Post yang belum lama kemarin loncing (haiah, promosi template neh reng..?? hehehehe...). Kode pada template itu tidak saya kompres. Berikut ini hasil validasi template Resensi Post menggunakan validator ini

Tampak ada keterangan 51 error dan pada alamat http://www.blogger.com/static/v1/widgets/1576120009-widget_css_bundle.css ada yang salah. Misalnya :

1 .v2 body : Property _height doesn't exist : 100% 100%
1 .columns-inner : Property _height doesn't exist : 1% 1%
1 .column-center-outer, .column-left-outer, .column-right-outer : Property _display doesn't exist : inline inlin, dll

Apakah kita bisa membetulkannya dan menjadikannya menjadi valid sedangkan komponen css pada keterangan yang eror itu tidak bisa kita temukan di template kita??


2. Kompres file css
Banyak cara untuk mempercepat loading blog dan salah satunya yaitu dengan mengkompres file css. Mengkompres file css adalah umum dan hampir semua blogger melakukan kompres file css. Jika sobat mencoba memvalidasi file css blog sobat, hasilnya akan seperti berikut :

Menurut mereka, itulah file css yang valid untuk blog sobat dan apabila sobat memasukkan file css yang valid itu ke blog sobat dengan tatanan seperti pada hasil, semua itu akan percuma apabila setelah itu sobat mengkompress file css blog sobat.
Kecuali template2 buatan saya, saya mengkompres file css di semua blog saya karena loading blog yang cepet (termasuk dengan menggunakan link eksternal) buat saya lebih penting daripada kode css yang valid tetapi malah membuat loading blog menjadi lola dan lelet.

3. Yang ke 3 apa ya..??


Seringkali suatu keinginan terbentur dengan hal lain. Happy blogging ><>

Wednesday, January 27, 2010

Internet Explorer ohh.. Internet Explorer

Kalo saya ditanya, Apa browser favorit saya untuk menjelajahi dunia maya?? Saya akan jawab Mozilla Firefox. Setelah itu?? Setelah itu Google Chrome, terus Opera (seringnya dipake untuk download file torrent, hehehehe..) terus Safari dan yang terkahir adalah Internet Explorer alias IE.

(kok IE malah pilihan terakhir reng??)

Walopun (setahu saya) IE sampai saat ini masih menduduki peringkat atas di seluruh dunia dalam hal browser yang sering digunakan dalam menjelajahi dunia maya tapi buat saya, IE itu..
- IE itu adalah "penyakit" ; penyakit untuk template2 buatanku
- IE itu adalah kerja keras ; kerja keras lagi supaya template2 saya bisa tampil "sedikit lebih sempurna" di IE
- IE itu adalah ekstra pikiran ; harus saya tambahi kode apa lagi supaya template bisa tampil "sedikit lebih sempurna" di mata IE??
- IE itu adalah ekstra kode ; tambahan kode lagi pada template
- IE itu nafsu dan kemarahan ; nafsu kalo tampilannya belum sempurna dan kode untuk ngehack IE gak ketemu, hiks...
- IE itu adalah kesabaran ekstra ; harus lebih sabar lagi ketika tampilan temlate tidak sempurna dan itu hanya di mata IE
- IE itu adalah..

Saya menggunakan browser Firefox 3.5 untuk membuat template blog. Dan ketika template blog tersebut sudah jadi dan lulus tes dimata Firefox, saya kemudian mencobanya di browser lain seperti Google Chrome, Opera, Safari dan juga di IE. Dan apa?? Sejauh ini yang saya temui dari template2 buatan saya, tampilan templatenya bisa saya katakan sempurna di semua browser kecuali 1 browser, yaitu di Internet Explorer alias IE. Ada saja yang membuat tidak sempurna. So, mau gak mau harus lebih ekstra lagi. Gak terlalu menjadi masalah apabila saya bisa mengatasinya dan membuat template tersebut menjadi sempurna di mata IE karena banyak cara untuk menghack IE (padahal sih gak terlalu paham, hehehehehe..) tetapi apabila tidak berhasil, huhh... IE adalah penyakit dan nafsu, hahahahhaha..

Salah satunya template yang baru saya rilis, Resensi Post template


Yang saya garis bawah adalah jumlah komentar. Di semua browser (kecuali IE) tampilan jumlah komentar tersebut sempurna alias berada di sebelah kanan judul post (segaris) tetapi pada IE, tampilannya berasa diatas judul post. Saya sudah coba mengakalinya tetapi gak ketemu2, hiks.. Apa mau dikata. Akhirnya saya rubah posisinya menjadi dibawah ringkasan post dan segaris dngan fungsi Read More.

Sobat blogger sendiri, seringnya menggunakan browser apa??


Note :
- saya menggunakan IE 7
- Postingan tentang cara hack IE, bisa sobat temui di postingan blognya mas Choen

Saturday, January 23, 2010

Oprek Variable Definitions Blog

Postingan ini masih berhubungan dengan mempercepat loading blog dengan cara mudah pada postingan sebelumnya. Cara tersebut bisa saya katakan mudah tetapi cukup signifikan untuk meningkatkan loading blog tetapi cara tersebut tidak akan berfungsi apabila komponen file css masih menggunakan komponen Variable Definitions sebagai definisi2 dari file css tersebut. Hal ini baru saya ketahui saya coba aplikasikan cara mempercepat loading blog tersebut ke blog saya yang juga menggunakan Variable Definitions sebagai definisi file css. Apa hasilnya?? Blog saya menjadi berantakan alias trik tersebut tidak berfungsi. Hal ini tidak saya temukan pada blog saya yang lain yang tidak menggunakan Variable Definitions sebagai definisi file css seperti pada blog Just a Blog ini dan blog Blogger Template by ireng_ajah. Trik tersebut berjalan normal dan cukup signifikan dalam mengurangi ukuran blog.

Bagaimana jika mau menggunakan trik itu tetapi Variable Definitions masih ada??

Variable definitions menurut saya adalah nilai untuk mendefinisikan file css yang ada baik itu untuk warna, font, ukuran font, dll.

Penulisan Variable Definitions pada file css menggunakan awalan "$" (tanpa tanda petik). Misalnya untuk warna link blog:

<variable name="linkcolor" description="Link Color" type="color" default="#384" value="#000000">

Untuk penulisan file css menjadi

a:link {
color:$linkcolor;
text-decoration:none;
}

linkcolor (value="#000000") pada Variable Definitions tersebut sebagai definisi warna untuk Link Blog. Penulisan pada css untuk link menjadi color:$linkcolor;

Apabila Variable definitions tersebut mau diterjemahkan langsung ke file css-nya, maka penulisan pada file css menjadi :

a:link {
color:#000000; (sama dengan value pada Variable definitions)
text-decoration:none;
}

* perhatikan warna biru dan merah


Untuk menterjemahkan Variable definitions yang lain langsung ke file css, tinggal samakan saja pada variabel name-nya dan valuenya. Melihat penterjemahan langsung Variable definitions ke file css yang saya lakukan pada blog saya, ada beberapa file css yang perlu ditambahkan kode baru. Yang sering saya temui yaitu pada font.

Jika masih menggunakan Variable definitions, penulisan font pada css akan seperti ini :

font: $bodyfont;

Tetapi jika langsung pada file css-nya, biasanya saya menuliskannya menjadi :

font: 14px arial; atau menjadi

font-size:14px;
font-weight:bold;
font-family:arial;

Untuk manfaat dan kerugian menggunakan Variable definitions atau menterjemahkan langsung ke css, saya sendiri aslinya gak terlalu paham, hehehehehe... Tetapi jika ingin menggunakan trik mempercepat loading blog dengan cara mudah, Variable definitions tersebut harus diterjemahkan dulu ke file css-nya.

Selain itu juga, trik mempercepat loading blog ini juga tidak akan berfungsi untuk template yang menggunakan tambahan file css dibawah kode ]]></b:skin> seperti pada blog saya free blogger template ajah

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<---- file css ada disini ---->

</b:if>
</style>

File css pada bagian tersebut cukup di kompres saja dan tidak perlu menggunakan link eksternal. Links eksternal file css hanya untuk file css yang berasa diatas kode ]]></b:skin>


Terimakasih unuk sobat Blogging sehingga saya jadi tau soal ini.