TENTANG DAN SEPUTAR TEMPLATE BLOG/WEBSITE

Template Blog/Website merupakan salah satu bahan dokumen atau file yang sangat di butuhkan dalam hal pembuatan atau disain blog/website. Pada dasarnya, seorang webmaster perlu mengetahui serta memahami pengertian template blog/website itu sendiri sebelum membangun sebuah blog/website.

Template atau Theme merupakan dokumen atau file yang berisikan model-model tambahan yang akan muncul pada saat proses pembuatan dokumen lain. Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan informasi dan tertanam pada World Wide Web (www). Dari pengertian 2 kata diatas, Template Blog/Website itu adalah sebuah desain tampilan halaman  dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.

Template blog/website merupakan salah satu identitas blog anda. Kita tidak dapat memilih Template yang mengikuti taste kita sendiri, apabila web yang anda tujukan untuk visitor dengan kalangan tertentu. Akan tetapi pemilihan template bebas dapat anda lakukan secara sepihak apabila itu tidak diperuntukan untuk moneytise bahkan mungkin dikhususkan untuk anda sendiri.

Berikut beberapa Tips dalam memilih Template untuk website ataupun Blog anda.

Tujuan atau arah website,

Sebelum merancang sebuah web alangkah baiknya anda memikirkan untuk mencari template yang sesuai dengan isi dari tujuan web anda.

Contohnya Anda membuat web tentang pembelajaran tetapi anda memilih template yang berwarna pink dan background dihiasi bunga, hal ini tidak singkron. Dan apabila anda merniat untuk bisnis online atau iklan seperti google adsense maka persiapkanlah template yang tersedia kolom letak untuk menempatkan iklan tersebut.

Pilih Template yang menarik

Carilah template yang di rasa menarik bagi anda maupun pengunjung. Di situs banyak sekali tersedia contoh template yang menarik baik berbayar maupun yang gratis. Luangkan waktu beberapa hari untuk mencari template yang memang yakin bagi anda itu bagus. Jangan sampai di suatu ketika anda menyesal anda menemukan template yang lebih  baik dari yang anda gunakan sekarang yang pada akhirnya memilih untuk mengganti template yang telah anda pasang sebelumnya.

Template yang ringan

Salah satu faktor yang penting lainnya adalah besarnya file template  tersebut. Anda harus memperhatikan berat tidaknya proses loading web anda. Visitor akan enggan berkunjung ke web anda apabila proses loadingnya terlalu lama. Maka hindarilah hal seperti ini. Banyak faktor faktor yang membuat web itu menjadi berat diantaranya:

• Terlalu banyak gambar ukuran besar
• Terlalu banyak script atau variasi yang terpasang
• Ukuran template yang besar
• Faktor server hosting yang terlalu sibuk atau memang lambat

Dari hal tersebut kita bisa kita bisa memilih template yang bagus dan cepat proses loadingnya. Untuk mengukur kecepatan web beserta komponen yang paling lengkap bisa anda coba di websiteoptimization

SEO Friendly

Jenis template yang friendly terhadap search engine atau tidak. Tetapi anda bisa melihat atau mencari di situs penyedia dengan memakai keyword seo template. Pada umumnya untuk blogspot atau wordpress untuk seo friendly boleh di katakan banyak tersedia baik yang gratis mapun yang berbayar, akan  tetapi untuk cms joomla masih terdapat banyak kendala, hal ini juga di dukung oleh server anda, yang artinya tidak semua server mendukung atau support dengan SEO Friendly.

Untuk mencari template gratis yang siap pakai silahkan mengunjungi situs-situs sbb :

http://www.freewpthemes.net/

http://btemplates.com/

http://www.eblogtemplates.com

http://www.yvoschaap.com/wpthemegen/

http://wordpress.org/extend/themes/

http://www.wpthemesfree.com/

http://www.idwebtemplate.com

http://www.template-godown.com/

http://www.isnaini.com/category/blogger-templates/

http://freetemplates.vietnam-blogger.com/

http://www.dstudiobali.com/free-blogger-template/
http://charmskins.com/blogger-themes

http://www.finalsense.com/services/blog_templates

http://freeskins.blogspot.com

http://www.finalsense.com

http://free-blogger-templates.zeventina.com

http://www.blogskins.com

http://www.jackbook.com 
http://www.pyzam.com/bloggertemplates
http://www.geckoandfly.com/blogspot-templates/

Free Template WordPress

1. WordPress Themes

2. Free WP Themes

3. Free WordPress Theme

4. SkinPress

5. Theme Viewer

6. Free WordPress Templates

7. Template Monster

8. Templates Browser

9. WP Skins

10. Top WP Themes

Free Template Blogspot

1. Free Blogger Templates

2. Final Sense

3. Blogger Templates

4. Planet Blog Template

5. E-blog Templates

6. Blogspot Templates

7. Blogger Free Templates

8. Blogger Buster

9. Blogger Templates

10. Jackbook.com

Premium Template Wordpress (Berbayar)

1. Premium News Theme

2. WP Remix

3. Revolution Theme

4. WordPress Themes Market

5. WP Candy

Demikianlah sedikit informasi yang dapat saya sampaikan berkaitan dengan template blog/website, semoga dapat bermanfaat.

Read More...

KOMPRESS CSS TEMPLATE BLOGGER

Kompres CSS Template Blogger pada postingan kali ini sebenarnya bertujuan untuk optimasi kecepatan loading blog yang pernah saya bahas sebelumnya. Untuk membentuk dan menciptkan sebuah template blogger yang seo friendly tidaklah mudah, seperti yang telah kita ketahui bagaimana template yang seo friendly menurut google yang dapat anda baca di webmaster guidelines. Walaupun demikian kita dapat mengupayakan dengan salah satu cara yaitu mengkompres CSS template blogger yang kita miliki.

Sebenarnya banyak cara untuk mengkompres CSS, namun cara-cara tersebut tidak lain memiliki tujuan yang relatif sama, yaitu agar loading blog lebih cepat. Agar lebih mudah dalam proses pengkompresan Anda juga harus tahu struktur dan bagian template blogger, karena tidak semua template blogger memiliki kode css yang sama. 

Sebelum melakukan pengkompresan terlebih dahulu saya himbau kepada Anda untuk mendownload template Anda terlebih dahulu, hal ini dilakukan untuk menghindarkan hal-hal yang tidak diinginkan pada template Anda. Adapun cara mengkompres CSS template blogger dapat Anda baca penjelasan berikut ini :

1. Lihat terlebih dahulu ukuran template Anda di http://www.iwebtool.com/speed_test

2. Jika sudah, kunjungi link berikut csscompressor

3. Masuk ke akun blogger Anda dengan window/tab baru

4. Pilih rancagan kemudian klik Edit HTML

5. Berikan centang atau ceklis pada kotak Expand Template Widget

6. Lakukan sedikit settingan pada web csscompressor tadi dengan merubah :

• Compression mode = pilih 'Super Compact'
• Comments handling = pilih 'Strip ALL comments'

7. Jika sudah, kembali ke halaman Edit template blogger Anda

Sedikit penjelasan : kode CSS template blogger berada diantara kode <b:skin><![CDATA[  hingga ]]></b:skin> (cari dengan menggunakan ctrl + f) . Agar template Anda tidak error, lakukan pengompresan secara bertahap, artinya lakukan dengan bagian-perbagian hingga akhir kode CSS, jika Anda melakukan pengompresan CSS secara sekaligus maka template nantinya akan error.

8. Copy dan paste CSS template pada halaman csscompressor tadi lalu klik  Compress-it! 

9. Tunggu sebentar sampai proses pengompressan selesai, lalu copy dan paste css yang telah dikompres pada template blogger Anda (sebelumnya hapus CSS yang lama dan ganti dengan CSS yang telah dikompres tadi).

10. Lakukan dengan cara yang sama pada kode CSS berikutnya hingga selesai.

11. Jika sudah selesai. klik pratinjau untuk melihat hasil sementara sebelum disave.

12. Jika tidak ada perubahan dalam template blog Anda, maka pengompresan CSS template blogger telah berhasil dilakukan kemudian save, dan lihat perbandingan ukuran template sebelumnya dengan yang baru dikompres (poin 1).

Mungkin sudah cukup jelas penjelasan dari saya mengenai cara kompres CSS template blogger ini, untuk itu saya ucapkan kepada Anda selamat mencoba.

Semoga artikel ini dapat bermanfaat.

Read More...

MEMBUAT FOOTER MULTI KOLOM

Blog SEKOCI MAJAPAHIT kali ini ingin berbagi tutorial template blog yang berkaitan dengan membuat footer blog menjadi multi kolom. Pembuatannya tidak terlalu sulit, yang penting perlu sedikit ketelitian saat melaksanakannya. Tanpa basa-basi, langsung ke TKP :

Ok, bagi anda yang ingin memperbanyak ruang kolom pada bagian footer template anda. Langsung aja kita mulai:

1. Login ke Blogger. Klik Design -> Edit HTML

2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.

3. Kalau sudah, cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

5. Jika sudah cari kode dibawah ini.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>

Jika ingin membuat footer 2 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer 3 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer menjadi 4 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

7. Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

Footer 2 kolom

Footer 3 kolom

Footer 4 kolom

Selamat mencoba...

Sumber : http://www.hermanblog.com/2009/03/cara-membuat-footer-multi-kolom.html

Read More...

MEMBUAT TAB VIEW MENU DI BLOG

SEKOCI MAJAPAHIT kali ini akan berbagi tips-trik memperbaiki template dengan membuat Tab View Menu. TabView Menu ini bermanfaat untuk menghemat tempat pada tampilan blog/website dan dapat memuat 3 widget sekaligus dengan formula yang berbeda. Bentuknya silahkan anda lihat pada sidebar blog SEKOCI MAJAPAHIT ini.

Saya sendiri kadang bingung, banyak widget yang harus di tampilkan di sidebar blog saya tapi karena tempat tidak mencukupi akhirnya tidak saya pasang. Untuk mengatasi semua itu kita bisa memakai cara dengan cara membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.

Berikut cara membuat menu tab view di blog:

Masuk blogger >> rancangan >> edit html >> centang expand template widget
cari kode ]]></b:skin>
copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>

Kode Script :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}  

Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).

selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>

Kode Script :

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian Simpan / Save Template.
Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript
copy kode di bawah ini di dalam box atau kotak HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya..

Sampai disini selesai tidaklah begitu sulit cara membuat menu tab view di blog, hanya membutuhkan kesabaran sedikit saja.

Silahkan di coba semoga berhasil.

Sumber: http://www.antigaptek.com/2011/07/cara-membuat-menu-tab-view.html

Read More...