Blogger Magazine Template

Sebelumnya saya mengucapkan "Selamat Tahun Baru Hijriah 1430 H, semoga kita semua mampu mengisinya dengan kegiatan yang positif".
Selama Liburan, saya mencoba memodifikasi template bidikCOM secara Offline. Maklum di rumah tidak ada internet.

Jadi disamping harus teliti dalam memperhitungkan lebar, margin dan padding saya pun hanya bisa membayangkan loading themesnya kira-kira begini atau begitu bahkan hancur....he..he..

Namun pada pagi ini, setelah saya coba upload hasil dari Offline Blogger Magazine template..... Alhamdulillah, tampilan bidikCOM sekarang ternyata sesuai dengan "Loading Hayalan saya".

Dan posting kali ini, saya mengajak rekan-rekan blogger yang sempat membaca posting ini untuk sharing dengan tujuan mempercantik tampilan Blogger Magazine ini.


Untuk itu saya sertakan link downloadnya, agar rekan-rekan Blogger sudi kiranya melanjutkan usaha saya dalam mencoba design blog yang mirip-mirip majalah, meski tidak sebagus template Wordpress. Harap dimaklumi, si bidikCOM tamatan "TK besar" jadi ndak mudeng dengan PHP, CSS dan segala sesuatu yang terkait dalam mendesign sebuah Situs/ Blog.

Setelah anda mengunduh (download), silahkan simpan dalam bentuk .XML
Download disini.
Demo: anda sudah membukanya.

Template Majalah Blogger

Berdasarkan tutorial yang saya adopsi dari OurBloggerTemplates.com, saya mencoba membuat sebuah template.

Kalau yang sebelumnya saya memodifikasi minima dengan judul blognya adalah Majalah Minima 1 s/d 3, kali ini saya memberi judul MAJALAH BLOGGER.

Dibawah ini model daripada template tersebut.


Rencananya, template ini akan saya gunakan untuk mengganti template bidikCOM.
Silahkan kunjungi link DEMO dari template ini.

Untuk sementara link downloadnya belum ada, mengingat masih tahap experimen dan masih banyak revisi.

Namun tidak menutup kemungkinan, bila sudah menthok betul. Maka apabila rekan blogger menginginkan template ini, saya akan segera menambahkan link downloadnya.

Demi sempurnanya template ini, mohon kiranya rekan-rekan membarikan masukan. Kira-kira perlu direvisi bagian yang mana.

Majalah Minima 3

Nampaknya Minggu ini saya lebih suka iseng otak-atik minima.
Kali ini saya mencoba modifikasi minima dan aku beri judul MAJALAH MINIMA 3

Demo bisa dilihat disini.

Template Majalah MInima 2

Ini merupakan modifikasi template MINIMA yang merupakan kelanjutan experimen dari modifikasi MINIMA (Majalah Minima). Pada posting yang lalu, saya telah menerbitkan sebuah template dengan nama Majalah Minima, untuk posting kali ini saya mencoba menerbitkan sebuah template modifikasi yang saya beri judul "MAJALAH MINIMA 2"



Coba sempatkan waktu sebentar untuk melihat DEMO LIVE yang sekaligus penerapan pada blog.

Yang perlu diperhatikan dalam penggunaan template ini :

1. Untuk pemenggalan ( pasang readmore ) artikel usahakan tidak terlalu panjang, mengingat tinggi dari kolom untuk posting dibatasi.

2. Apabila anda menggunakan gambar, usahakan diletakkan setelah pemenggalan ( untuk readmore ) artikel, sehingga gambar nantinya akan muncul penuh bila halaman posting terbuka pada sub halaman.

3. Bila anda memasang Bloglist, maka untuk menampilkan readmore pada bagian Bloglist, langkah-langkahnya adalah sebagai berikut :

Setelah anda masuk pada "layout", kemudian masuk pada "Edit HTML".
Jangan lupa beri tanda centang pada "Expand Template Widget", kemudian cari kode dibawah ini ( pencarian gunakan kontrol F ) :

<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>

Setelah ketemu copy kode tersebut, paste dulu di Notepad. Kemudian cari kode dibawah ini :

<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
........ paste kode diatas .......
</div>
</div>

Letakkan kode yang sudah anda paste di Notepad tadi pada .... paste kode diatas ....

Bila sudah digabung maka, hasilnya seperti ini :
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</div>
</div>

Langkah selanjutnya, ganti kode berwarna merah dengan kode dibawah ini :

<p class="more">Read More.... </p>

4. Jangan lupa pada pengaturan ( Setting -> Formatting -> Post Template ), isikan kode pada kotak :

<span id="fullpost">

</span>


Untuk hal lain, bila dalam penggunaan template ini masih belum jelas, silahkan tanyakan lewat kotak komentar. Insya Allah saya akan menjawab semampu saya, mengingat dalam hal ini posting bersifat sharing.

Terima kasih saya ucapakan kepada :

1. Amanda Fanani, Bloggerbuster.
2. Kang Jaloe, Catalog Blog.

Download Code : Ziddu

Setelah anda mendownload filenya, silahkan simpan dengan format .XML agar bisa diupload
pada blogger.

Demi sempurnanya template ini, mohon dapatnya rekan-rekan memberikan koreksi pada bagian-bagian yang sekiranya perlu dirubah. Terima kasih

Importance of insurance

Insurance is mandatory we follow, as it is absolutely necessary, especially when we have a motor vehicle through debt. When we buy a motor vehicle on several stages. From the start to complete our personal data, manage license to drive, and also the number plate from the police. From the start managing the motorcycle dealers to the police we are not necessarily separated from what is called insurance.

If we want to know about the insurance of motor vehicles and services that offer to manage the insurance, try to take time to see the site insurance1.com.

Motor vehicle insurance is important to protect ourselves and our vehicles, other than the vehicle or other person. If you are involved in the accident, no matter who is wrong, the lack of insurance will automatically bring about a large fine and possible threats will get some time in prison.

Auto insurance to protect us against financial loss if we have an accident. This is a contract between us and the insurance company. We agree to pay the insurance premium and the company agreed to pay for our losses, as defined in the policy. Auto insurance provides property, liability and medical coverage:

* Property damage, or coverage to pay our car theft.

* Liability Coverage for our pay legal responsibility to others for bodily injury or property

Now, more and more insurance products offered by car. Therefore, the principles carefully before purchase, need to be applied, so do not regret later in the day. Before deciding to choose one car insurance product offered, this may tip can help:

1. Specify the type of insurance desired, to provide the best protection and comprehensive, but you must consider the economic side.

2. Do not focus on the size of the premium paid. See the company's credibility, especially in services, claims handling and financial capacity.

3. Find the insurance companies that provide additional benefits, such as 24-hour claims service, free crane, insurance claims processing 24 hours, etc.?

4. The existence of a network of partner companies that workshop. How many, the location of where and how the quality of the workshop.

5. You really understand what rights and obligations. What you can do and what not. Are there exceptions in the contract policy?


I recommend to learn about car insurance in insurance1.com, will get a guaranteed satisfaction and you will not fritter away with it.

In addition to car insurance, this site can also help you in terms of "life insurance". "Life insurance" is absolutely necessary to anticipate when an accident occurs causing death.

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