Tampilkan postingan dengan label tutorial Blog. Tampilkan semua postingan

Selasa, 11 Desember 2012

Mengapa Lebih Banyak Yang Jadi Fotografer Ketimbang Blogger

Fotografer

Gue baru sadar belakangan ini pasalnya di facebook lebih banyak orang yang ngeshare foto hasil jepretan sendiri ketimbang link tulisan dari blognya.

Apa pesan yang disiratkan disana? Hobi orang cenderung ke Fotografer ketimbang jadi Blogger. Kenapa ya? mungkin ini alasannya :

1. Fotografer mencari objek bagus, Blogger lebih banyak di depan monitor.

Yah, gimana lagi ya. Seorang blogger lapangan bermainnya memang monitor dan dunia maya. Jangan samakan dengan fotografer yang hunting objek sana-sini. Blogger ngetik, Fotografer cuma ngeklik tombol shutter sekali, lebih capek Blogger..hehehe.

2. Bisa Foto Model-Model Cakep.

Ini sih bisa-bisanya gue aja. Fotografer kan bisa nyari model buat difoto. Sekali dayung bisa 2 pulau terlewati, sekalian ngefoto sekalian cuci mata. Blogger? kenalan saling komen di blog, ngakunya cewe seksi ternyata brewokan pas kopdar, hehehe.

3. Lebih Nyata Duitnya

Kalo udah mahir fotografi bisa jadi tukang foto pra-nikah alias pre-wed photographer, atau buka studio foto. Abis ngefoto dapet duit yang lumayan, maklum kamera dan skill juga mahal, wajar. Blogger? mesti bertahun-tahun nunggu biar mahir hasilin duit, itupun mesti terus belajar semua model menguangkan.

4. Foto lebih gampang dinilai ketimbang tulisan.

Foto bisa dinilai bagus atau enggaknya dengan cepat. Tulisan Blogger mesti dibaca sampe akhir baru tau bagus atau enggaknya. So? males deh udah nulis banyak, yang baca males.

5. Fotografer ada tool yang dibawa.

Fotografer bisa nenteng kamera, keliatan fotografer. Blogger? mau nenteng Blog kemana? hehehe. Orang baru tahu kita Blogger saat sudah baca blognya.

Wah gue kayak nakut-nakutin orang mulai ngeblog nih, hehehe. Semua hobi terserah masing-masing orang kok, post ini cuma iseng-isengan aja. Kalau kamu suka fotografer, gimana kalo bikin photoblog?

Tuh kan? gue malah kasi ide brilian.

Go Blog!

18.53 by Putu Hadi · 3

Sabtu, 06 Oktober 2012

Coming Soon! Ebook Gratis "New Blogger"

Blogger sudah banyak berubah, mulai dari tampilan sampai settingan yang jauh lebih baik dari Blogger sebelumnya. Nah, gue pernah mengeluarkan sebuah buku tentang Blogger yang tentunya beberapa tutorial sudah tidak relevan lagi untuk dipraktekkan di Blogger yang baru.

Karena itu gue berinisiatif membuat sebuah ebook dengan 2 format, yaitu pdf dan exe untuk kamu download. Gilanya lagi, ebook yang gue buat digratisin tetapi isinya bener-bener seriusan dan gak asal-asalan buatnya. Ebooknya gue beri judul Kupas Tuntas "New Blogger" . Ebook ini sudah dalam pengerjaan dan diperkirakan selesai bulan Nopember nanti. Plus istimewanya, cover buku ini dikerjakan oleh salah seorang temen gue yang bekerja di perusahaan IT sebagai desainer. Covernya kemungkinan besar adalah hasil cat warna, keren kan?

Apakah gue ngerasa rugi membuat ebook gratis "New Blogger" ini, pake desain keren pula? tidak sama sekali, prinsip gue sedari awal ngeblog memang mencari ilmu sebanyaknya dan membaginya sebanyaknya. Membuat 2 buku dan mendapatkan uang bukan tujuan awal gue, itu hanya reward dari kesungguhan gue membagi ilmu ke dunia maya.

So, posting ini adalah sebuah pengingat dan penyemangat gue dalam membuat ebook "New Blogger". Silahkan tunggu dan ebook ini bisa dijadikan bonus untuk pengunjung atau produk kamu asalkan tidak mengubah materi di dalamnya.

Agar gak kelewatan karena belum tentu bisa tiap hari ngecek ke blog ini, mendingan kamu subscribe blog lookj dengan mengklik tombol subscribe di bawah ini :

Atau jika kamu aktif di FB, silahkan like dulu deh fans page "Bukunya Lookj". Link download bukunya akan selalu gue share disana.

03.16 by Putu Hadi · 1

Jumat, 13 April 2012

Berkreasi dengan cover FB dan G+

Gue hari ini emang sedikit iseng. Kalau lagi mood ganti template blog ya gue ganti, seperti hari ini..gatau mood darimana gue punya keinginan ganti cover Google+ dan Facebook. Ya karena lagi pengen maka gue ganti aja jadi model gini nih :

Wew, ganteng ya gue, wkwkwk..oke, kalian juga pengen narsis to the max kayak gini? gapapalah asal gak Galau to the max.

Untuk Google+

Tinggal download templatenya di blog : http://nicolesyblog.com/2012/04/12/free-photoshop-template-google-cover-photo/ . Thanks deh buat designernya yang mau capek-capek bikinin templatenya segala. Selanjutnya buka pake photoshop dan lanjutkan dengan skill mu mengeditnya.

Untuk Facebook

Bahan yang dibutuhkan lumayan banyak yaitu

- Download fontnya di : http://www.urbanfonts.com/fonts/Sketch_Rockwell.htm
- Download iconnya di : http://www.icon-pack.com/download/SpoonGraphics-Doodle-Icons.zip
- Terakhir, nih gue kasi template PSDnya : http://dl.dropbox.com/u/4312331/cover.psd

udah gitu aja, edit-edit deh sendiri...

Selamat Berkreasi..

11.48 by Putu Hadi · 7

Selasa, 08 Maret 2011

Mengubah blogmu mode mobile

Kemarin lookj mendapatkan pertanyaan bagaimana agar blog di blogspot menjadi mobile. Walaupun banyak yang sudah tahu tetapi kan tidak ada salahnya lookj mengulang informasi "mengubah blog menjadi mode mobile". Siapa tahu banyak yang belum ngeh cara mengubahnya.

Seperti yang telah kamu ketahui, Blogger tidak seperti wordpress yang memiliki banyak plugin pembantu. Kamu hanya bisa mengubah HTML dan CSS di belakang Blogger dan tidak bisa menambahkan fungsi-fungsi tambahan selain yang disediakan oleh Blogger. Jika pada Wordpress tentu terdapat plugin pembantu yang bisa mengubah tampilan situs menjadi mode mobile. Lalu bagaimana dengan Blogger?

Dulu mungkin banyak blogger yang memakai cara me"mobile"kan blognya dengan sebuah situs converter. Jadi ketika situs tersebut sudah mengconvert blog maka kamu bisa mengaksesnya lewat alamat mobile namun tentu dengan embel-embel situs converter tersebut misalnya lookj.situsconverter.com .

Google Blogger menyadari pentingnya sebuah blog yang diakses dari perangkat mobile, maka dari itu Blogger mengeluarkan sebuah cara untuk mengakses blog dari perangkat mobile tentu dengan tampilan mobile. Caranya adalah dengan menambahkan ?m=1 di akhir alamat blog misalnya seperti ini:

http://www.thelookj.blogspot.com/?m=1

Jika diterjemahkan artinya adalah akses mobile sama dengan true (bahasa programming nih, hahaha). Bagaimana tampilannya? lihat sendiri di bawah ini:

Fitur tampilan mobile :

1. Header tidak hilang
2. Readmore
3. Gambar muncul seluruhnya
4. Lebih ringan (tentunya)

Widget-widget yang kamu pasang pada sidebar dan iklan-iklan tidak akan muncul karena namanya aja tampilan mobile tentu dibuat agar loading time nya cepat. Kalau lama bisa-bisa pengakses dari perangkat mobile keburu kabur.

Oke deh, umumkan segera ke pengunjung blogmu agar mereka tidak perlu di depan komputer untuk membaca blog kesayangannya.

06.42 by Putu Hadi · 3

Senin, 26 April 2010

Official Google Buzz buttom

"Tampaknya Google mulai menyadari bahwa user yang memakai Buzz sudah mulai bertambah banyak dan tentu dengan pertimbangan banyak artikel yang ingin dishare user maka Google akhirnya mengeluarkan juga tombol share untuk Google Buzz"

Aduh maaf banget updatenya sangat-sangat jauh jaraknya, mungkin juga setelah posting ini lookj ga akan posting selama sebulan karena mesti ditugaskan ke NTT untuk menjadi pemonitor Sensus, oiya sekalian mengingatkan para sahabat bahwa bulan Mei adalah bulan Sensus dan saatnya kamu dihitung untuk membantu Negara membuat keputusan, iklan dikit dulu ya:

Oke deh kita masuk ke berita utama, seperti yang sudah saya jelaskan di awal bahwa akhirnya Google membuat tombol share untuk Buzz. Kamu pasti sudah tidak sabar untuk memasangnya di blog kan? ikuti aja deh langsung di bawah ini:

1. Kunjungi http://www.google.com/buzz/stuff lalu klik "Poskan ke Buzz"

2. Disana kamu bisa memilih suka-suka model mana yang kamu kehendaki, kamu akan dapat generate codenya di bagian bawah. Jangan tutup dulu jendela ini ya.

3. Masuk ke Blogger lalu cari Tata-Letak lalu Edit HTML. Temukan kode di bawah ini:

<div class='post-header-line-1'/>

4. Paste kode di bawah ini di bawah kode tadi.

<div style='border:0px !important;text-align:right;margin-top:-42px;'>
PASTE_CODE_FROM_GOOGLE-STUFF-PAGE_(Step #1)_HERE
</div>

Ganti kode warna merah dengan kode yang kamu dapatkan di Buzz

5. Nah kalau kamu tidak ketemu kode pada poin (3) maka cari kode di bawah ini dan lakukan hal yang sama:

<div class='post-body entry-content'>
<data:post.body/>

6. Simpan Template dan jadi deh...

source : http://bloggerstop.net

12.00 by Putu Hadi · 12

Selasa, 09 Maret 2010

Penerbitan blog lewat FTP

"Beberapa hari yang lalu lookj dikirimi pertanyaan bagaimana memindahkan blog yang semula diterbitkan lewat FTP, hoalah sebenernya lookj agak bingung apa yang dimaksud tetapi beberapa blogger mungkin blognya di Blogger memiliki masalah yang sama, mari kita pindahkan"

Sebenarnya lookj kurang tau juga apa maksudnya tetapi kemungkinan besar sebagian blog di blogspot dipublish via FTP, untuk masalah teknisnya silahkan deh langsung sahabat baca disini. Nah, sekarang Blogger ingin user yang blognya dipublish lewat FTP agar segera dipindahkan karena Blogger kemungkinan tidak akan memakai penerbitan via FTP lagi. Namun bagaimana mengetahui apakah blog sahabat diterbitkan lewat FTP atau bukan? Cek di Pengaturan - Publikasi, lihat gambar di bawah ini:

Jika terlihat seperti itu maka blogmu memang terpublikasikan via FTP dan harus segera dipindahkan. Nah untuk lebih jelasnya silahkan liat video di bawah ini:

Kalau belum jelas juga, yaudah lookj singkat langkah-langkahnya di bawah ini sesuai dengan videonya yak:

1. Klik Start Migration, akan dibawa ke halaman lain lalu klik Start

2. Klik download blog backup, setelah di save backupan blognya (berupa file berekstensi XML), klik Continue.

3. Isi domain dari Blogger yang kamu inginkan, atau isi domain yang sudah kamu punyai)

4. Klik Continue

5. Sekali lagi klik Continue.

6. Centang aja yang menerima berita lewat email, lalu klik Start Update.

7. Klik Finish.

8. Complete

Untuk lebih lengkapnya silahkan baca-baca keterangan pemindahan ini dari Blogger di http://blogger-ftp.blogspot.com

13.42 by Putu Hadi · 1

Sabtu, 27 Februari 2010

Pasang emoticon KASKUS di Blogger

Sebelumnya lookj minta ijin dulu lewat blog ini pada KASKUSer yang buat ni smiley soalnya lookj berusaha menghubungi tetapi inbox di account KASKUS nya katanya penuh (piye tho kok bisa bulk?). Mungkin dari kemarin para sahabat liat smiley-smiley buat komentar di blog lookj keyen-keyen (halah). Sebenernya cara buat gampang banget cuman biar ga panjang lebar silahkan ikuti saja tutorial di bawah ini.

Sebelumnya lagi (lho kok belum mulai?), gimana kalau kita liat dulu emoticon-emoticon KASKUS yang lutchu-lutchu (cuih). Nih dia lihat semuanya di bawah ini:

pengen kan? mari ikuti langkah di bawah ini:

1. Masuk ke Blogger lalu cari di Tata Letak - Edit HTML

2. Centang expand widget template.

3. Cari </body> lalu copy paste kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://img51.imageshack.us/img51/7007/emokaskusalaysmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")

a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:nangis/gi, "<img src='http://img686.imageshack.us/img686/2561/mewekkaskuspaktosmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:rate/gi, "<img src='http://img686.imageshack.us/img686/9302/emokaskus3.gif'' class='smiley'/>");
_str = _str.replace(/:lebay/gi, "<img src='http://img51.imageshack.us/img51/7007/emokaskusalaysmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:hoax/gi, "<img src='http://img163.imageshack.us/img163/3455/emokaskushoaxsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:nyimak/gi, "<img src='http://img248.imageshack.us/img248/1461/emokaskusnerdsmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:hotnews/gi, "<img src='http://img521.imageshack.us/img521/3116/emokaskushottritsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:gotkp/gi, "<img src='http://img690.imageshack.us/img690/4295/emokaskusmenujutkpsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:wow/gi, "<img src='http://img27.imageshack.us/img27/5623/emokaskusrayusmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:pertamax/gi, "<img src='http://img256.imageshack.us/img256/7218/emokaskus1stsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:lapar/gi, "<img src='http://img18.imageshack.us/img18/1404/emokaskuslaparsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:santai/gi, "<img src='http://i48.tinypic.com/24needd.jpg' alt='' class='smiley'/>");
_str = _str.replace(/:malu/gi, "<img src='http://img17.imageshack.us/img17/8236/malu2smallu.gif' alt='' class='smiley'/>");
_str = _str.replace(/:ngintip/gi, "<img src='http://img46.imageshack.us/img46/7496/emokaskusmahosmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:newyear/gi, "<img src='http://img682.imageshack.us/img682/2443/newyearsmall.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:nangis/gi, "<img src='http://img686.imageshack.us/img686/2561/mewekkaskuspaktosmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:rate/gi, "<img src='http://img686.imageshack.us/img686/9302/emokaskus3.gif'' class='smiley'/>");
_str = _str.replace(/:lebay/gi, "<img src='http://img51.imageshack.us/img51/7007/emokaskusalaysmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:hoax/gi, "<img src='http://img163.imageshack.us/img163/3455/emokaskushoaxsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:nyimak/gi, "<img src='http://img248.imageshack.us/img248/1461/emokaskusnerdsmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:hotnews/gi, "<img src='http://img521.imageshack.us/img521/3116/emokaskushottritsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:gotkp/gi, "<img src='http://img690.imageshack.us/img690/4295/emokaskusmenujutkpsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:wow/gi, "<img src='http://img27.imageshack.us/img27/5623/emokaskusrayusmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:pertamax/gi, "<img src='http://img256.imageshack.us/img256/7218/emokaskus1stsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:lapar/gi, "<img src='http://img18.imageshack.us/img18/1404/emokaskuslaparsmall.gif' alt='' class='smiley'/>");
_str = _str.replace(/:santai/gi, "<img src='http://i48.tinypic.com/24needd.jpg' alt='' class='smiley'/>");
_str = _str.replace(/:malu/gi, "<img src='http://img17.imageshack.us/img17/8236/malu2smallu.gif' alt='' class='smiley'/>");
_str = _str.replace(/:ngintip/gi, "<img src='http://img46.imageshack.us/img46/7496/emokaskusmahosmall2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:newyear/gi, "<img src='http://img682.imageshack.us/img682/2443/newyearsmall.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Then(sok Inggris) cari kode di bawah ini lagi ya:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>

tuh lihat kode berwarna biru, tempatkan kode ini di bawah kode biru tadi:

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
<b>
<img border='0' height='30' src='http://img686.imageshack.us/img686/2561/mewekkaskuspaktosmall2.gif' width='30'/> :nangis
<img border='0' height='30' src='http://img686.imageshack.us/img686/9302/emokaskus3.gif' width='30'/> :rate
<img border='0' height='30' src='http://img51.imageshack.us/img51/7007/emokaskusalaysmall.gif' width='30'/> :lebay
<img border='0' height='30' src='http://img163.imageshack.us/img163/3455/emokaskushoaxsmall.gif' width='30'/> :hoax
<img border='0' height='30' src='http://img248.imageshack.us/img248/1461/emokaskusnerdsmall2.gif' width='30'/> :nyimak
<img border='0' height='30' src='http://img521.imageshack.us/img521/3116/emokaskushottritsmall.gif' width='30'/> :hotnews
<img border='0' height='30' src='http://img690.imageshack.us/img690/4295/emokaskusmenujutkpsmall.gif' width='30'/> :gotkp
<img border='0' height='30' src='http://img27.imageshack.us/img27/5623/emokaskusrayusmall.gif' width='30'/> :wow
<img border='0' height='30' src='http://img256.imageshack.us/img256/7218/emokaskus1stsmall.gif' width='30'/> :pertamax
<img border='0' height='30' src='http://img18.imageshack.us/img18/1404/emokaskuslaparsmall.gif' width='30'/> :lapar
<img border='0' height='30' src='http://i48.tinypic.com/24needd.jpg' width='30'/> :santai
<img border='0' height='30' src='http://img17.imageshack.us/img17/8236/malu2smallu.gif' width='30'/> :malu
<img border='0' height='30' src='http://img46.imageshack.us/img46/7496/emokaskusmahosmall2.gif' width='30'/> :ngintip
<img border='0' height='30' src='http://img682.imageshack.us/img682/2443/newyearsmall.gif' width='30'/> :newyear
</b>
</div>

Habis tu simpen deh dan sekarang lihat form komentar di blogmu sudah ada smiley KASKUS yang lutchu lutchu.

Buat anak KASKUS, lookj minta ijin make smileynya ya..

13.13 by Putu Hadi · 85

Senin, 14 Desember 2009

Widget Multi Tab gaya baru untuk Blogger

Ini cocok buanget(halah bahasa alay) buat blogger yang blognya punya template yang lumayan agak sempit (halah lagi dah). Jadi dengan multi tab ini para sahabat blogger bisa memasukkan 3 widget dalam 1 widget, kek kantong ajaib yah. Mungkin blogger-blogger lama sudah pada tau widget ini di masa lalu karena dulu banyak yang menggunakan. Langsung saja lookj kasih dah caranya dan cara ini lookj kutip dari bloggerstop.net.

1. Masuk Ke Blogger lalu cari Edit HTML

2. Centang expand template widget dan temukan </head>

3. Masukkan kode ini di atas kode tadi:

<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>

.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
#fragment-1 {
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}
</style>

Keterangan : Oprek-oprek warna merah untuk mengubah settingan Tab dan oprek-oprek warna biru untuk mengubah settingan content.

3. Klik Simpan dan sekarang menuju Tata Letak

4. Tambahkan Gadget, pilih HTML/Javascript dan copy paste kode di bawah ini ke dalam form yang disediakan.

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">
<span style="text-align:left;">
<p>First tab is active by default:</p>
</span>
</div>
<div id="fragment-2">
<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center>
</div>
<div id="fragment-3">
Content of Tab #3
<span ><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a></span>
</div>
</div>

Keterangan : oprek-oprek warna merah untuk mengubah judul dan oprek-oprek warna biru untuk mengubah kontennya.

Gampang kan? oiya postingan ini lookj ambil aslinya dari http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html

09.41 by Putu Hadi · 12

Senin, 05 Januari 2009

Membuat link agar tampak rapi

Modar modar modar, kuliah sibuk banget, ditambah seringnya rapat English club, tugas numpuk, kecele banget nih lookj. Bisa-bisa 2 atau 3 minggu ke depan blog ga update dan gak keurus. Mana pikiran udah sumpek mampet kaya got-got di Jakarta, kehabisan ide buat mosting tutorial. Tapi lookj akan berjuang mempertahankan eksistensi blog ini di jagat perbloggeran, cayo!!. Belakangan ini banyak yang nanya, udah sampai lebih dari 3 kali ada pertanyaan yang sama, pertanyaannya intinya begini "Lookj, gimana sih buat link yang rapi seperti link di atas shoutmix blog ini?". Bloggers teman-teman seperjuangan atau yang baru punya blog, itu sebenarnya pake HTML sederhana yang bikinnya super duper manual. Lookj bukannya gak ngasi tahu tetapi emang itu dasarnya dibuat dari HTML yang culun punya dan mungkin tidak lebih susah dari membuat email domain sendiri ataupun tidak lebih terkenal dari forum friendster prostitusi. Tetapi gak apa-apalah, lookj jelasin aja deh daripada ngebahas pertarungan blogger yang gak henti karena adanya blogger nyeleneh.

Mengapa lookj sebut HTML dasar? ya memang dasar banget ni HTMLnya, sebenarnya di blog Kang Rohman udah dijelasin kok cuman mungkin sobat blogger belum nyoba ngemodif dikit-dikit. Untuk membuat deretan link posting rekomendasi seperti punya lookj itu dibuat manual. Link tersebut juga bukan hanya dipakai untuk posting rekomendasi melainkan juga dipakai link-link tertentu yaitu link teman-teman blogger misalnya. Inilah script sederhana yang dipakai, hanya ditambahin garis minus ( - ) yang diketik berulang kali

hasilnya adalah seperti ini:

1. Nama link
-----------------------------------------------------------------------
2. Nama link2
-----------------------------------------------------------------------
3. Nama link3
-----------------------------------------------------------------------
4. Nama link4
-----------------------------------------------------------------------
5. Nama link5
-----------------------------------------------------------------------
6. Nama link6
-----------------------------------------------------------------------
7. Nama link7
-----------------------------------------------------------------------
8. Nama link8
-----------------------------------------------------------------------
9. Nama link9
-----------------------------------------------------------------------
10. Nama link10
-----------------------------------------------------------------------
11. Nama link11
-----------------------------------------------------------------------
12. Nama link12
-----------------------------------------------------------------------
13. Nama link13
-----------------------------------------------------------------------

Untuk script ini perhatikan jumlah tanda ( - ) yang jumlahnya harus sama dan cocok dengan lebar box. Untuk mengubah lebar box dan tingginya maka anda bisa mengubah angka yang saya tandai warna merah pada script di atas. Terkadang juga saat mempaste di blogger jaraknya menjadi agak jauh tapi itu gak masalah, tinggal hilangin aja jarak antar linknya.

atau kalau pembatasnya ingin dipakai garis tegas yang gak putus putus bisa pakai yang ini:

Hasilnya jadi gini:

1. Nama link

2. Nama link2

3. Nama link3

4. Nama link4

5. Nama link5

6. Nama link6

7. Nama link7

8. Nama link8

9. Nama link9

10. Nama link10

11. Nama link11

12. Nama link12

13. Nama link13

Kalau memakai garis yang tegas tadi maka anda tidak perlu memperhitungkan lebar box.

Bagaimana? sederhana banget kan tutorialnya? bagi yang udah expert jangan marah nih...kan belum tentu semua blogger udah bisa buat link yang rapi.

21.12 by Putu Hadi · 19

Kamis, 11 Desember 2008

Membuat gambar/widget tampil di pojok blog

Waduh, makin banyak pengunjung malah jadi gak pede nih, mau posting apaan yak? takut dibilang basi dan udah gak level ma pengunjung karena sepertinya yang kunjung udah pada pro-pro semua, nah masalahnya yang buat posting yang newbie...hu3..nangis dulu. Ya udah, kali ini adalah posting untuk teman blogger ( yang non blogger juga boleh mbaca, monggo aja ). Sebelumnya maaf ya kang Rohman karena saya posting duluan tentang tutorial ini, pengunjungnya gak bakalan berkurang kok gara-gara saya, iya tah? Ini tentang cara membuat gambar/widget dinamis di pojok blog entah itu di pojok bawah kiri, pojok bawah kanan, atas kanan, bawah kanan, mundur jurang, apaan sih? yaudah lets go dan monggo aja dibaca lagi lanjutannya.

Anak-anak, kali ini kita akan membahas membuat iklan/gambar/sesuka kamu yang penting tampil di pojokan blog kita, mengerti? gak ngerti? seperti biasanya apa yang saya katakan? LIHAT GAMBAR!!!

Nah..maknyus kan? misalnya kita mau naruh apa-apa di pojokan, maka gambar/widget yang anda pasang tidak akan ikut terscroll saat para pengunjung melihat ke bagian bawah blog karena gambar di pojok ini dinamis lho...Mau tahu cara buatnya, ikuti ini, gampang buanget kok:

1. Syarat pertama, puasalah sehari, gak kok bercanda, anda masuk ke account blogger anda. Setelah masuk ke account maka cari Layout/Tata Letak lalu Edit HTML. Setelah masuk di edit HTML silahkan centang expand template widget.

2. Cari kode ini yak ]]></b:skin>, nyarinya di kotak kodenya aja ya jangan di bawah kasur, gak akan ketemu. Kalau udah ketemu taruh kode di bawah ini di atas kode tadi:

#Lookj_keren {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Nah buat memodifikasi letaknya, ubah saja yang saya warnai biru juga warnai merah. Misalnya mau di kanan bawah kamu ubah yang left jadi right, begitujuga kalau mau di atas ya tinggal ganti bottom ma top, ngerti kan?

4. Cari lagi kode </body> dan letakkan script di bawah ini sebelum kode tersebut.

5. Ganti kode tersebut dengan ketentuan yang saya warnai merah ganti dengan alamat link yang anda inginkan dan kode biru adalah alamat link gambar yang anda ingin tampilkan.

Jengjeng..jadi deh, terserah mau masukin iklan, gambar,script widget jam, kalender blablabla... suka-suka anda aja. Oiya, gak keberatan kan kalau gabung di lookfriends? gabung aja disana, komunitas seru-seruan para netter dan blogger. Bye-bye, i'm blogging to share.

14.13 by Putu Hadi · 26