Monday, September 27, 2010

Kaget campur heran Blogger Tune-Up dibuatnya, karena beberapa hari ini tidak buka internet. Hari ini Senin, 27 September 2010 Blogger Tune-Up membuka blog dan ternyata seluruh script Blogger Tune-Up yang ada di Hosting Project Google Code tidak dapat di akses. Setelah di cek ke link http://hensblog.googlecode.com/ link tersebut tidak dapat di akses. Entah kenapa hal ini terjadi...

Access Not Allowed
What happened?
You are not allowed to access this service.
Please contact us if you believe that you should be able to access this service.
Your options:
  • Participate in the open source community through other websites.
  • Sign out and access this site as an anonymous user.
  • Contact us for further assistance.

Pihak Google tidak memberitahukan sebelumnya dan tidak pula menjelaskan secara rinci mengenai penutup Account Blogger Tune-Up pada Google Code. Mungkin ada diantara para teman Blogger yang pernah punya pengalaman seperti ini mohon di bantu. Dan bagi sahabat Blogger Tune-Up yang menggunakan script dari blog ini, saya Hendriono secara pribadi mohon ma'af yang sebesar-besarnya karena hal ini diluar kemampuan saya. Saya berharap bantuan teman-teman untuk mengembalikan account Blogger Tune-Up di Google Code dengan mengirimkan email ke admin Google Code:
google-code-hosting@googlegroups.com
Akhir kata, seandainya account Google Code dapat diaktifkan kembali maka sebagai ucapan terima kasih Blogger Tune-Up akan membuka semua script code yang Blogger Tune-Up tulis untuk seluruh teman-teman blogger yang sudah membantu. Terima kasih sebelumnya untuk seluruh sahabat blogger yang sudah ikut berpartisipasi untuk mengembalikan account Blogger Tune-Up pada Hosting Project Google Code.

Banjarsari, 28 September 2010
Admin Blogger Tune-Up,


Hendriono

Friday, September 24, 2010

Menambahkan Tombol Berbagi Jejaring Sosial

Posted by dav On 2:08 AM
Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia[1]. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari. Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka.
Share Button to Social Networking

Dua Cara Integrasi Tombol Berbagi Jejaring Sosial Pada Blog

1). Tombol Berbagi Terintegrasi pada Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan klik "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.sharesoc {
display:inline-block;
float:right;
height:125px;
margin:5px 0;
width:60px;
}
Langkah 5
Cari kode dibawah ini:
<data:post.body/>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
Langkah 7
Simpan template dan preview blog anda...

2). Tombol Berbagi Terapung pada Pinggir Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
#sharehal {position:fixed; bottom:20%; margin-left:185px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharehal .tblshare {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}
Langkah 5
Cari kode dibawah ini:
</body>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
Langkah 7
Simpan template dan preview blog anda...

3). Pekerjaan Rumah
Kedua cara di atas akan menampilkan tombol berbagi jejaring sosial pada berbagai halaman (baik halaman utama ataupun halaman artikel). Nah tugas anda adalah mengintegrasikan kedua cara menambahkan tombol jejaring sosial di atas kemudian mengatur tampilannya, jika kita buka halaman utama maka tombol jejaring sosial yang tampil adalah dari cara pertama (Tombol Berbagi Terintegrasi pada Artikel) dan jika kita buka halaman artikel maka tombol jejaring sosial yang tampil adalah dari cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel). Cara mengatur tampilan tombol berbagi adalah artikel sebelumnya yang membahas Conditonal Tag.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
</b:if>
Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :
  • bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
  • margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
  • float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
  • background-color:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan kaki:
[1] Top 1000 Sites - August 2010, Google AdPlanner. Diakses 20 September 2010

Monday, September 20, 2010

Memahami Conditional Tag

Posted by dav On 1:18 AM
Terinspirasi dari sahabat Blogger yang mengingatkan Blogger TuneUp tentang conditional tag tidak ada salahnya sekalian dibuat artikelnya supaya semua teman-teman bisa memahami berbagai conditional tag dalam template Blogger. Sebelum mempelajari conditional tag mari kita sepakati dulu bahwa semua bagian dalam sebuah halaman blog terdiri dari kumpulan gadget/widget termasuk halaman artikel, sidebar, header, footer dan lain sebagainya. Conditional Tag atau tag kondisional adalah tag yang digunakan untuk mengatur suatu gadget/widget atau suatu elemen tertentu untuk ditampilkan atau tidak ditampilkan dalam halaman spesifik. Misal; pada halaman utama kita ingin menampilkan sidebar tetapi ketika pengunjung membuka halaman demi halaman artikel maka sidebar tersebut tidak ditampilkan. Nah, untuk mengatur sidebar tersebut tampil dan tidak tampil maka digunakanlah Conditional Tag.

Syntax Conditional Tag

Secara umum conditional tag dituliskan seperti dibawah ini:
<b:if cond='[KONDISI]'>
...
</b:if>
Conditional tag selalu diawali dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian tag <b:if diikuti dengan atribut cond. Atribut cond diartikan sebagai condition atau kondisi yang digunakan sebagai subjek suatu kondisi, dan [KONDISI] adalah atribut objek atau yang menjelaskan maksud dari kondisi/condition.

Kumpulan Conditional Tag

Dibawah ini kumpulan kondisional tag yang umum digunakan untuk menyesuaikan halaman spesifik.
1. Halaman Index
<b:if cond='data:blog.pageType == &quot;index&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman index. Halaman index (index page) didalamnya termasuk halaman depan (homepage), halaman label/kategori dan halaman arsip. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan index' maka kode yang ada diantara conditional tag akan ditampilkan".

2. Halaman Artikel (item)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman item. Halaman item (item page)adalah halaman artikel per artikel dan bukan keseluruhan kumpulan artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman artikel (item)' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman artikel (item) menggunakan URL yang terkandung hurup bulan, tahun, dan judul artikel diantaranya, misal; http://namablog.blogspot.com/2010/09/judul_artikel.html.

3. Halaman Statis (static)
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis. Halaman statis (static page) adalah halaman lain artikel atau halaman yang berdiri sendiri dan isinya tidak mengambil dari database artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman statis' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman statis menggunakan URL yang terkandung hurup "p" diantaranya, misal; http://namablog.blogspot.com/p/halaman_statis.html.

4. Halaman Arsip (archive)
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip. Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan artikel yang diambil database blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman arsip' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman arsip menggunakan URL yang terkandung bulan dan tahun diantaranya, misal; http://namablog.blogspot.com/2010_01_01_archive.html.

5. Halaman Depan (Homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
atau :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan URL halaman depan. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan URL halaman depan' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman depan merupakan halaman utama dari blog kita dan URL yang digunakan adalah URL utama blog kita, misal; http://namablog.blogspot.com/.

6. Halaman URL Tertentu
<b:if cond='data:blog.url == "[URL]"'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog sama dengan URL halaman blog (yang kita maksud atau kita masukan dalam [URL]' maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini digunakan jika kita ingin mengatur suatu gadget/widget atau elemen yang hanya akan ditampilkan atau tidak ditampilkan pada halaman yang lebih spesifik (artikel tertentu). misal; kita akan menampilkan banner iklan di-sidebar hanya pada halaman blogroll (kumpulan link teman). Maka penggunaan conditional tag-nya seperti dibawah ini:
<b:if cond='data:blog.url == "http://namablog.blogspot.com/2010/09/blogroll.html"'>
[disini kode gadget atau elemen yang akan ditampilkan]
</b:if>

7. Halaman 404 Not Found
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
...
</b:if>
Conditional tag ini digunakan untuk mengecek/membandingkan kondisi URL 404 Not Found atau tidak tersedianya suatu halaman. Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog tidak tersedia (error_page), maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini biasanya digunakan saat menjaga kemungkinan halaman yang dihapus namun masih terindex oleh mesin pencari. Ketika pengunjung membuka halaman tersebut maka pemberitahuan ketidaktersediaan halaman (404 Not Found) akan ditampilkan. Biasanya halaman ini disertai dengan link yang menuju ke halaman utama, halaman arsip atau about.

8. Meta Description
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
...
</b:if>
Conditional tag ini sebenarnya tidak tampak pada broswer tapi sangat bermanfaat seiring perubahan kebijakan mesin pencari yang menghapuskan meta keyword. Conditional tag ini digunakan untuk mengecek/membandingkan kondisi data blog, jika deskripsi meta blog tidak kosong (artinya memiliki meta description) maka yang ada diantara tag akan ditampilkan.

Penggunaan Conditional Tag

Dibawah ini adalah penjelasan sederhana untuk menggunakan conditional tag didalam template blogger dan penempatan kode gadget atau elemen, lebih lanjutnya silahkan implementasikan sendiri. sederhananya untuk menempatkan kode gadget atau elemen dalam conditional tag seperti contoh dibawah ini:

1). Penggunaan Conditional Tag Satu Gadget atau Elemen
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
</b:if>
Gadget atau Elemen yang terletak diantara conditional tag akan ditampilkan jika hasil pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType == "item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu item (misal; http://namablog.blogspot.com/2010/09/artikelku.html) maka Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan jika tidak maka Gadget atau Elemen tidak akan ditampilkan.

2). Penggunaan Conditional Tag Dua Gadget atau Elemen
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...
Misal; saya memiliki dua buah "laptop" yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi pesanan editing gambar yang mengharuskan saya menggunakan software "digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun menggunakan laptop merk B dalam mengerjakan pesanan editing gambar tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:
<b:if cond='Laptop == &quot;Digital Imaging&quot;'>
Merk A
<b:else/>
Merk B
</b:if>
Laptop merk A tidak digunakan karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan laptop merk A (tidak ada software digital imaging) atau hasil pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan karena hasil perbandingan/pengecekan cond bernilai salah (false). (Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung memberikan contoh, ada ide?)
Peranan tag <b:else/> digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan bernilai salah (false) dan kita ingin menampilkan suatu gadget atau elemen jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil perbandingan bernilai benar (true) maka gadget atau elemen setelah tag <b:else> tidak akan ditampikan.

3). Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget atau Elemen
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
</b:if>
Waduh makin rumit saja... Ini sih bukan hanya putar otak tapi sampai tekan tombol power... hehehe... Mau mencoba menjelaskan? Silahkan tinggalkan pada kotak komentar....

Operator Conditional Tag

Operator conditional tag merupakan alat khusus untuk membandingkan dua buah nilai. Operator conditional tag terdiri dari 2 jenis yaitu:
1. Operator "sama dengan"
==
atau dalam bahasa script-nya dibaca "is equal to"

Contoh Kasus 1
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:
<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
</b:if>
Jawabannya : maka saya diberi uang Rp. 10.000,-

Contoh Kasus 2
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai berikut:
<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
<b:else/>
Saya membayar Rp. 10.000,-
</b:if>
Jawabannya : maka saya membayar Rp. 10.000,-

2. Operator "tidak sama dengan"
!=
atau dalam bahasa script-nya dibaca "is not equal to"
Ini adalah operator kebalikan dari "sama dengan" dan sepertinya tidak harus dijelaskan lagi. (Atau mau ikut menjelaskan? Silahkan tinggalkan pada kotak komentar)

Akhirnya selesai... Selamat berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, rokok [bagi yang suka rokok], kopi dan obat sakit kepala). Happy Blogging :)

Saturday, September 18, 2010

Informasi penulis/author sangat bermanfaat bagi para pengunjung blog kita, karena mereka dengan mudah dapat mengenali siapa penulis artikel pada blog tersebut. Walaupun bagi sebagian blogger hal ini tidaklah penting tetapi tidak ada salahnya kita menambahkan gadget info penulis ini sebagai bentuk keseriusan kita dalam mengelola blog tersebut. Mungkin jika mewakili kata-kata maka gadget informasi penulis/author ini berbicara "Hai dunia! Inilah blog saya, aku buat, aku tulis, aku pelihara, silahkan baca, silahkan ambil tapi ingat aturan mainnya karena blog juga karya cipta".
Menambahkan Informasi Penulis/Author pada Artikel

Integrasi Gadget Informasi Penulis/Author pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Copy paste kode CSS dibawah ini diatas kode pada langkah 4:
/************************************************
* Author Information *
************************************************/
#authorinfo{margin:0 0 5px;padding: 4px;background: #eee;background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));border: 1px solid #fff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-webkit-box-shadow: #600 0 2px 12px;-moz-box-shadow: #600 0 2px 7px;width:auto;text-shadow:0 1px 0 #FFFFFF;}
#authorinfo .informasi{line-height: 16px;margin:0;padding:2px;height:80px;}
#authorinfo .informasi a {text-decoration:none !important;}
#authorinfo img {float:left;margin: 2px 8px 2px 2px;padding:0;width:72px;height:72px;border:2px solid #999;}
#authorinfo .informasi ul, #authorinfo .informasi ul li {margin:0;padding:0;list-style-type:none;}
Langkah 6
Cari kode dibawah ini:
<data:post.body/>
Langkah 7
Copy paste kode (X)HTML dibawah ini diatas kode (jika info ingin diatas artikel) pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='authorinfo'>
<div class='informasi'>
<a href='[link profil]'><img src='[gambar profil]'/></a>
<ul>
<li>Artikel ini ditulis oleh <a href='[link profil]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Diterbitkan pada hari : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></li>
<li>Telah dibaca sebanyak <a expr:href='data:blog.homepageUrl'><script src='http://abu-farhan.co.cc/counter/counter.php' type='text/javascript'/></a> kali, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> meninggalkan komentar</li>
<li>Berlangganan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='[link feed rss]' target='_blank' title='Berlangganan Artikel via RSS Feed'>RSS Feed</a> atau <a href='[link feed email]' target='_blank' title='Berlangganan Artikel via Email'>Email</a></li>
</ul>
</div>
</div>
</b:if>
Langkah 8
Ubah link (baca keterangan) dan simpan template kemudian preview blog anda...

Keterangan :
1). Ubahlah link [link profil] sesuai dengan link profil anda (temukan pada bagian dashboard)
2). Ubahlah link [gambar profil] sesuai dengan link gambar profile anda (temukan pada halaman profil)
3). Ubahlah link [link feed rss] sesuai dengan link Feed RSS anda
4). Ubahlah link [link feed email] sesuai dengan link Feed Email anda
5). Jika ingin menempatkan Gadget Informasi Penulis/Author pada bagian akhir artikel:
A. (Menggantikan langkah 6) cari kode dibawah ini:
<div class='post-footer-line post-footer-line-3'>
<!-- Disini kode gadget informasi penulis/author -->
</div>
B. Masukan (copy paste) kode (pada langkah 7) diantara kode pada langkah A
6) Terima kasih kepada Abu Farhan untuk script counter jumlah pembaca
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Sunday, September 12, 2010

Beberapa pertanyaan masuk ke inbox dan komentar yang menanyakan tentang plugin Facebox. (Ma'af untuk yang belum mendapat tanggapan bukan berarti tidak ditanggapi tapi belum tertanggapi atau belum ditemukan jalan keluarnya. Mohon bersabar ya?). Plugin Facebox selain digunakan sebagai container/wadah gambar sebenarnya bisa digunakan sebagai container hal lain, seperti ajax, html, dan hal lainnya.
jQuery Facebox AutoLoad - Facebox Otomatis Tampil
Dapat pula difungsikan sebagai alert (pemberitahuan)/warning (perhatian)/ads popup (iklan popup) yang tampil secara otomatis ketika pengunjung masuk kedalam halaman blog kita. Sebenarnya teknik penggunaan plugin Facebox hampir sama saja dengan artikel yang pernah di bahas disini. Sedangkan sekarang kita akan mencoba melakukan modifikasi pada script Facebox agar mampu autoload/autoshow tanpa klik ketika pengunjung membuka halaman blog kita.

Integrasi Plugin Facebox pada template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
#facebox .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#facebox .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#facebox .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#facebox .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#facebox .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#facebox {position: absolute;top: 0;left: 0;z-index: 99999999;text-align: left;}
#facebox .popup {position: relative;}
#facebox table {border-collapse: collapse;}
#facebox td {border-bottom: 0;padding: 0;text-align:justify;}
#facebox .body {padding: 10px;background: #fff;width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;margin: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px;margin-top: 10px;text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px;width: 10px;overflow: hidden;padding: 0;}
#facebox_overlay {position: fixed;top: 0px;left: 0px;height:100%;width:100%;}
.facebox_hide {z-index:-100;}
.facebox_overlayBG {background-color: #000;z-index: 99;}
* html #facebox_overlay { /* ie6 hack */position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
$.facebox('#informasi','facebox',true);
});
</script>
Bagi yang sudah memasang framework jQuery maka tidak perlu memasangnya lagi
Langkah 7
Simpan template...

Membuat Alert/Warning/Ads Popup dengan Facebox

Setelah integrasi plugin Facebox pada template Blogger selesai, lanjutkan membuat alert/warning/ads popup seperti dibawah ini:
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<div id="informasi" style="display:none;">
<!-- Masukan isi pemberitahuan/pengumuman/perhatian/kode iklan disini -->
</div>
Langkah 10
Simpan template dan preview blog anda...
Sedangkan untuk settingan Facebox pada gambar silahkan baca artikel "Pratinjau Gambar dengan Efek jQuery Facebox" pada bagian "Setting Efek jQuery Facebox pada Artikel". Selamat mencoba dan semoga berhasil. Happy Blogging :)

Friday, September 10, 2010

Sudah mencoba artikel "Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)"? Nah, artikel ini merupakan update dari artikel sebelumnya yang tentunya dengan tampilan baru dan lebih segar. Walaupun masih menggunakan script yang sama tapi sekarang Blogger TuneUp menggunakan sentuhan yang lebih bagus pada kode CSS versi 3. Penasaran?
Ads Popup - Iklan Yang Muncul Tiba-tiba

Menambahkan Ads Popup - Iklan Yang Muncul Tiba-tiba pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih type "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten
<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan-->
</div>
<a style="text-decoration: none; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/2010/09/ads-popup-iklan-yang-muncul-tiba-tiba.html" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>
</div>
Langkah 5
Klik tombol simpan dan preview blog anda... (Hmm... Baguskan?)
Keterangan:
Untuk setting JavaScript silahkan baca pada artikel sebelumnya disini
Sedangkan untuk mengatur kode CSS yang baru, baca penjelasan dibawah ini.
Perhatikan kode dibawah ini (lihat langkah 4):
#topbar .isi_iklan {
background-color:#FFFFFF; Untuk mengubah warna latar (background)
margin:0;
padding:4px;
width: 468px; Untuk mengatur lebar wadah iklan, ini disesuaikan dengan lebar iklan yang akan digunakan
border: 1px solid #999; untuk untuk mengatur garis tepi wadah iklan
}
Kode pada artikel ini berbeda dengan artikel sebelumnya tetapi masih tetap menggunakan JavaScript yang sama.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Saturday, September 4, 2010

Membuat jQuery BreadCrumb

Posted by dav On 5:41 AM
Bismillah... Pada artikel sebelumnya Blogger TuneUp pernah membahas "Membuat Breadcrumbs - Navigasi Blogger". Sekarang kita akan memberikannya sentuhan efek jQuery yang dibantu plugin jQuery UI yang membuat BreadCrumb kali ini menjadi lebih indah dengan efek slidelong (slide memanjang) dan slideshort (slide memendek). Ketika link-link yang tampil pada breadcrumb terlalu panjang maka jQuery akan mengatur panjang total breadcrumb dengan memendekan beberapa link. Dan ketika kita mengarahkan pointer mouse pada salah satu link BreadCrumb maka jQuery akan menampilkan link tersebut. jQuery BreadCrumb ini akan membuat navigasi menjadi lebih rapi dan indah dari pada harus membuat BreadCrumb menjadi dua baris.
jQuery BreadCrumb

Integrasi jQuery BreadCrumb pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
.module:after{clear:both;content:".";display:block;height:0;visibility:hidden}
* html .module{height:1%;overflow:visible}
* + html .module{min-height:1%}
.breadCrumbHolder{font-size:12px;line-height:21px;color:#444;font-family:Arial, Helvetica, sans-serif;font-style:normal;font-variant:normal;font-weight:400;margin:15px 0 5px}
.breadCrumbHolder a{color:#0E82C7;font-size:inherit;font-weight:inherit;text-decoration:none}
.breadCrumb{float:left;display:block;height:21px;overflow:hidden;width:508px;border:solid 1px #dedede;background:#fff;margin:0;padding:5px}
.breadCrumb ul{height:21px;display:block;margin:0;padding:0}
.breadCrumb ul li{display:block;float:left;position:relative;height:21px;overflow:hidden;line-height:21px;font-size:.9167em;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OE19eRfI/AAAAAAAAEeI/oQSb_A5WIGY/s800/Chevron.gif) no-repeat 100% 0;margin:0 6px 0 0;padding:0 10px 0 0}
.breadCrumb ul li div.chevronOverlay{position:absolute;right:0;top:0;z-index:2}
.breadCrumb ul li span{display:block;overflow:hidden}
.breadCrumb ul li a{display:block;position:relative;height:21px;line-height:21px;overflow:hidden;float:left}
.breadCrumb ul li.first a{height:16px!important;text-indent:-1000em;width:16px;margin-top:2px;overflow:hidden;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OFFVF1kI/AAAAAAAAEeQ/Dr3dADHxd6M/s800/IconHome.gif) no-repeat 0 0;padding:0}
.breadCrumb ul li.first a:hover{background-position:0 -16px}
.breadCrumb ul li.last{background:none;margin-right:0;padding-right:0}
.chevronOverlay{display:none;background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/TH5OFOpTroI/AAAAAAAAEeM/GxOgEVpiMPY/s800/ChevronOverlay.png) no-repeat 100% 0;width:13px;height:20px}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://plugins.jquery.com/files/jquery.easing.1.2.js.txt' type='text/javascript'/>
<script src='URL_ANDA/jquery.jBreadCrumb.1.1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery("#breadCrumb").jBreadCrumb();
});
//]]>
</script>
Langkah 8
Cari kode dibawah ini:
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<li><data:post.title/></li>
</b:if>
</b:loop>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Arsip untuk <data:blog.pageName/></li>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Seluruh Artikel</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Artikel Pada Kategori <data:blog.pageName/></li>
</b:if>
</ul>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Langkah 10
Sisipkan kode dibawah ini pada kode langkah 8:
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
sehingga kode menjadi seperti dibawah ini:
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
Langkah 11
Simpan template dan preview blog anda...
Keterangan:
Untuk mengatur BreadCrumb perhatikan kode dibawah ini (lihat langkah 5):
.breadCrumb{ float:left; display:block; height:21px; overflow:hidden; width:508px; border:solid 1px #dedede; background:#fff; margin:0; padding:5px; }
1. width:508px; ubah nilai 508 untuk mengatur lebar BreadCrumb
2. background:#fff; ubah nilai #fff untuk mengatur warna latar
3. border:solid 1px #dedede; ubah nilai #dedede untuk mengatur warna border

Update 16 September 2010

Untuk menampilkan semua kategori/label pada jQuery Breadcrumb, cari kode dibawah ini (lihat langkah 9 baris 11, 12 dan 13):
Buanglah kode pada baris 1 dan 3 (sisakan yang di blok):
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
Sehingga yang tersisa hanya kode dibawah ini:
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
Secara total kode yang digunakan seperti dibawah ini (sebagai pengganti kode pada langkah 9):
<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:loop>
<li><data:post.title/></li>
</b:if>
</b:loop>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Arsip untuk <data:blog.pageName/></li>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Seluruh Artikel</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Artikel Pada Kategori <data:blog.pageName/></li>
</b:if>
</ul>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Selamat mencoba dan semoga berhasil. Happy Blogging :)
Special thanks to CompareNetworks.com