Navigasi Linkbar pada Minima Template

Minima template yang tersedia disaat awal kita membuat sebuah blog di blogger biasanya tidak dilengkapi dengan navigasi menu. Navigasi menu disamping mempercantik tampilan blog kita, dapat berfungsi untuk memasang link penting atau link utama seperti Home, Service, Contact Us dan lain-lain.

Berdasarkan pengalaman saya saat memodifikasi template minima agar mirip sebuah majalah pribadi, maka saya mencoba sharing pengalaman ini dengan rekan-rekan.

Oke berikut langkah-langkahnya.

1. Login di Blogger, kemudian masuk pada "Tata letak" dan klik Edit HTML. Ingat jangan dicentang "Expand Template Widget"

2. Membuat Variable definitions untuk memudahkan pengaturan warna dengan mudah apabila kita ingin merubah warna di menu "Tata Letak" pada bagian "Font dan Warna"

Kita membuat variable seperti dibawah ini.

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#808080">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#333333">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#b3b3b3">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#f2984c">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#0D8F63">

kemudian sisipkan dibagian Variable definitions.

/* Variable definitions

...........dst hingga

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#f2984c">

(sisipkan kode variable yang telah kita buat disini )


<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 99% Arial, sans-serif">

3. Kemudian tambahkan variable definitions tentang besarnya huruf. Kodenya seperti ini

<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 67% Arial, sans-serif">

kode variable definitions diatas , pasang setelah kode dibawah ini :

<Variable name="descriptionfont" description="Blog Description Font"
type="font" default="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

4. Buat kode CSS seperti dibawah ini

/* ----- LINKBAR ----- Modify by nataludin */

#linkbar-wrapper {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
width: 940px;
position: relative;
background: $linkbarbgColor;
border: 0px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextColor;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

Catatan : width: 940px; sesuaikan dengan lebar dari " outer-wrapper "

Kode CSS diatas dipasang di atas kode ]]></b:skin>


5. Kemudian buat kode CSS dibawah ini :

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>
<div style='clear: both;'/>

Pasang kode diatas <div id='main-wrapper'>

Pemasangan ditempat ini bila kita menginginkan posisi Linkbar berada dibawah header.

Apabila anda ingin memasang diatas Header, maka kode CSS dipasang di atas kode : <div id='header-wrapper'>


Saya rasa demikian cara modifikasi Minima Template, bila ada kesalahan mohon diberi masukan. Karena ini berdasarkan pengalaman saya saat modifikasi template model majalah "Sharing Post".

Mohon ditambahkan kekurangannya pada komentar anda, sebagai sharing pengetahuan sesame blogger.

Modify Minima Template

Sudah beberapa hari ini, sejak saya memperoleh tutorial dari Amanda lewat email mencoba mempraktekkan modifikasi Minima Template bawaan Blogger.

Dalam modifikasi ini saya menambahkan tiga kolom pada bagian footer dan Linkbar diatas Header.

Namun modifikasi template ini masih belum sempurna. Mengapa demikian ?
Dari mulai Firefox, Google Chrome, Opera9 tampilannya bagus, tidak porak poranda. Tapi bila dilihat dari IE..... wik!!!! Amit-amit jabang bayi , bagian footernya berloncatan.

Karena 1 : 3, IE kalahlah. Jadi aku pertahankan terus template modifikasi hasil jerih payahku.

Silahkan dipantau lewat SINI untuk melihat hasilnya

Jangan lupa kasih masukan, ya? Thank's

Membuat Efek Butiran Air

Cara cepat membuat Efek Butiran Air

Tutorial kali ini adalah membuat efek air berada di atas objek. Disini saya mengambil permukaan daun sebagai obyeknya.

Yang dilakukan pertama kali adalah membuka file daun yang sudah kita simpan di hardisk kita. Anda juga bisa mendownloadnya di internet.

1. Setelah kita membuka gambar daun kemudian kita klik "Create a new Layer".

2. Kemudian klik " Elliptical Marquee Tool" dan buat lingkaran sesuai selera, Sekarang tekan huruf D pada keyboard Anda untuk membuat foreground warna hitam dan latar belakang warna putih.


3. Dengan posisi lingkaran masih aktif, select "Gradient Tool" dan select "Linear Gradient di bar pilihan di atas.

4. Tarik garis lurus dari tanda "merah" ke "biru". Setelah selesai, hapus seleksi dengan menekan Ctrl + D (perintah + D pada Mac) pada keyboard



5. Atur transparansi (Opacity) dengan menggeser Scroll Navigasi hingga mencapai 40%.

6. Pada pilihan Layer, klik Layer Style dan berikan efek "Drop shadow " dan "Inner shadow".



7. Kemudian tekan X pada keyboard membuat foreground warna putih, lalu pada toolbar klik "Brush Tool" dan buat sebuah titik seperti pada gambar.



Anda bisa membuat beberapa butiran air dengan cara klik kanan pada mouse (posisi pointer mouse berada pada layer butiran air ) untuk membuat duplicate layer butiran air tersebut. Anda juga bisa menggunakan Ctrl- T untuk merubah besar kecilnya ukuran butiran air. Anda dapat membuat variasi bentuk butiran dengan cara Pilih Filter kemudian pilih Liquity. Dalam jendela Liquity anda bisa berexperimen untuk membentuk duplicate-duplicate dari layer butiran air tersebut.

Selamat mencoba.

Fitur Baru Paypal

Menjelang musim Liburan di akhir tahun, Paypal telah bekerja keras membuat sejumlah perbaikan agar Anda dapat menikmati pengalaman yang lebih menyenangkan sewaktu berbelanja atau menjual barang online menggunakan PayPal.

Coba lihat situs web PayPal yang telah disempurnakan, mencakup penavigasian yang lebih mudah dan cepat, penampilan baru dan yang terutama - kini Paypal berbicara dalam bahasa Anda.

Sekarang Anda dapat merasa lebih nyaman karena Paypal telah menerjemahkan sebagian besar situs webnya dan menyesuaikan kontennya agar lebih mudah bagi Anda menavigasi dan menemukan semua yang diperlukan untuk mengetahui tentang PayPal secara cepat dan mudah dalam bahasa Anda.

Sebagian besar situs Paypal telah diterjemahkan, khususnya halaman yang sering dikunjungi dan dilihat oleh para pengguna Paypal. Namun demikian, ada sejumlah halaman yang masih dalam bahasa Inggris. Selain itu, layanan telepon dan email melalui dukungan pelanggan Paypal masih tetap tersedia dalam bahasa Inggris saja.

Dalam waktu dekat, Paypal berharap dapat memperluas penerjemahan dan dukungan Paypal lebih jauh lagi.


Inilah beberapa fitur baru yang akan Anda lihat:

1. Ragam bahasa lebih banyak.

Untuk pengguna di Thailand, Taiwan, Indonesia dan Malaysia, Anda dapat memilih antara bahasa lokal Anda dan bahasa Inggris.

2. Pengaturan bahasa baru.

Anda akan menemukan tab bahasa baru di sudut kanan atas di hampir semua halaman supaya dapat menentukan bahasa pilihan Anda.

3. Kontent yang lebih baik.

Paypal telah menyesuaikan halaman konten dan bantuan di situs webnya agar Anda dapat lebih cepat dan mudah mengakses produk, fitur dan layanan paling relevan yang tersedia di negara Anda.

4. Navigasi yang lebih baik.

Konten baru dan bahasa dirancang untuk menyediakan informasi yang lebih intuitif dan jelas sehingga memudahkan penavigasian situs.

5. Halaman muka yang baru.

Paypal telah mengembangkan sejumlah desain halaman muka yang berbeda, masing-masing berisi informasi yang lebih disesuaikan dengan kebutuhan pengguna di 190 negara dan wilayah.

Jaminan Pembelian di eBay terlindungi sepenuhnya.

Berapapun jumlahnya, bila Anda membayar dengan PayPal, dapatkan cakupan perlindungan gratis untuk barang yang memenuhi syarat yang dibeli di eBay.com dan eBay.co.uk – seandainya terjadi hal yang tidak diinginkan. Cakupan perlindungan pembeli PayPal beragam menurut situs eBay dan berdasarkan situs pembelian.

Cek bagian ‘Beli Cara Aman’ di eBay sewaktu melihat barang, dan mulailah berbelanja pada musim liburan ini dengan pikiran tenteram di ebay.com dan ebay.co.uk!

Create Box style links with mouseover effect

CSS berikut ini dapat digunakan untuk menampilkan link dalam blok persegi dengan efek berubah warna bila pointer mouse berada di atasnya.

Link yang dipasang bisa berupa angka atau judul yang mewakili link tersebut.

1. Setelah anda Login di Blooger, silahkan anda menuju ke " Layout" lalu klik EDIT HTML

2. Backup dulu template anda, kemudian copi kode dibawah ini lalu tambahkan dibagian/ di atas kode </head>

<title>CSS used in Pagination</title>
<style>

#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}

#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}

#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>

3. Setelah itu simpan template.

4. Untuk kode dibawah ini anda bisa memasangnya dibagian <body>....</body>, namun bisa juga lewat Page Elemen dengan menekan Add a Gadget dibagian yang anda suka.

<div id="pagin">
<a class="sel">1</a><a href="...">2</a>
<a href="...">3</a>
</div>

Isikan alamat URL dari link yang anda kehendaki pada ".....", apabila anda ingin menambah jumlah link maka tinggal copi kode <a href="...">3</a> dan rubah angka 3 dengan angka selanjutnya atau judul dari link tersebut.

Contoh hasilnya bisa anda klik di kotak 1 s/d 4 pada bagian bawah.

Selamat mencoba

Refresh Blog

Sebenarnya "eman" , saya merubah tampilan bidikCOM. Namun setelah mempertimbangkan beberapa alasan akhirnya aku rubah pula tampilan bidikCOM.

Nampaknya hanya gambar serem saja yang aku pasang dalam headernya.

Template ini diberi nama "The Professional Template" oleh sang pembuatnya. Template ini saya dapatkan di www.ourblogtemplates.com. Di situs ini banyak sekali kita jumpai template untuk blogger.

Jadi bila anda ingin mendapatkan template bagus silahkan berkunjung di situs tersebut, saya jamin anda akan mendapatkan kepuasan.

Thank's for Ourblogtemplates.com

Mahkluk Aneh Gemparkan Warga

Rabu sore ( 05 Nop 2008 ), saat saya sedang mencari makan untuk lembur malam dikejutkan dengan kerumunan masyarakat di Polsek Gedangan. Karena penasaran, saya mencoba menanyakan kepada salah satu warga.

"Ada Jenglot, mas" jawabnya.
" Jenglot..? " saya jadi heran, benarkah makhluk halus itu bisa muncul dan ditangkap manusia.

Lagi-lagi karena penasaran akhirnya saya mencoba untuk menyelinap di kerumunan massa hingga mendekati mahkluk tersebut.

Saya sempat merinding saat menatap makluh aneh itu. Separuh badan berbentuk badan ular dan separuhnya berbentuk manusia yang sepintas bila diamati seperti orang bersendekap atau mirip orang bertapa.


Mahkluk aneh ini sebenarnya ditemukan Hasanudin secara tidak sengaja 3 minggu lalu. Saat itu dia merasa gerah dan tidak bisa tidur, lalu dia putuskan untuk tidur di luar rumah. sekitar pukul 03.00 WIB, tiba-tiba Hasanudin terbangun dan makhluk ini sudah ada di depannya.

Saya mencoba mengabadikan mahkluk tersebut dalam handphone saya.

Pertanda apakah gerangan ? Yang jelas itu adalah kebesaran Allah SWT, dan semoga masyarakat Gedangan tidak mengkait-kaitkan dengan kejadian alam Sidoarjo saat ini.
Dan semoga iman mereka semakin tebal dan semakin yakin bahwa Allah SWT maha segalanya dan maha berkehendak.