Magazine template for bloggers

Beberapa hari ini saya mencoba untuk memodifikasi template minima agar berpenampilan seperti sebuah majalah. Dari beberapa tutorial yang ada maka lahirlah model template yang saya beri nama "MAJALAH MINIMA".

Sudah saya coba untuk ditampilkan lewat Firefox, Opera, Google Chrome dan terutama IE yang tidak pernah support dengan CSS... nampaknya semuanya support terhadap model template ini.


Template ini :

1. Terdapat Readmore model Yahoo. ( Tutorial Kang Jaloe )
2. Tampilan posting berada pada kolom yang berbeda ( Tutorial Amanda Fazani )
3. Tambahan Kolom pada footer ala Ourblogtemplates.com
4. Tambahan menu horizontal dalam bentuk Link.

Untuk memposting artikel anda, usahakan pemenggalan kalimat secara singkat. Demikian juga dalam menampilkan gambar, agar dibuat ukuran kecil. Mengingat kolom untuk posting ukuran tingginya dibatasi.

Silahkan anda kunjungi "Demo" template ini.

Saya berharap anda memberikan koreksi dan masukkan kritik maupun saran guna sempurnanya template ini.

Sukses buat komuniatas Blogger.

Link Download : Ziddu dan Easy Share.

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