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...

SEKOCI : MEMASANG NAVIGASI BREADCRUMB

SEKOCI. Dalam artikel ini akan dibahas dua cara memasang Navigasi Breadcrumb yang masing-masing berbeda saat terindeks-nya oleh Google search engines, untuk cara pertama membutuhkan waktu yang cukup lama untuk dapat terindeks, sedangkan cara kedua dapat langsung terindeks oleh Google saat kita selesai menuliskan satu artikel baru dalam blog kita. Jadi tidak membutuhkan waktu lama dan bertele-tele.

Berikut ini akan dibahas masing-masing cara pembuatannya, yaitu : 

CARA PERTAMA :

Pertama,pastikan anda sudah membuat label pada blog.

Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.

Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<div class='post hentry

Nah nanti sobat akan temukan barisan kode seperti:

<div class='post hentry uncustomized-post-template'>

Nah,tepat dibawah kode tersebut,sobat letakkan kode ini:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Setelah itu simpan templates sobat.
  

CARA KEDUA :

Cara pemasangannya pun seperti ini kawan :


1. Login ke Blogger kawan.

2. klik Rancangan klik Edit HTML.

3. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.

4. Lalu sobat cari kode ini. Agar lebih mudah dengan menggunakan Ctrl F atau F3.

 
]]></b:skin>

5. Kalau sudah ketemu copy kode dibawah ini dan paste diatasnya.

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu cari kode  <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut,

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

Save template anda dan  untuk mengecek kinerja Navigasi Breadcrumb ini, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google). setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

Read More...

SEKOCI : MEMASANG PERMALINK SEO

Pada post kali ini saya akan sharing tutorial blogspot, yaitu tentang "Cara memasang permalink di blogspot". Sedikit penjelasan dari saya, permalink atau yang biasa juga disebut permanen link adalah sebuah kotak kecil yang berisi pesan dan alamat url atau link postingan yang permanen. Atau dengan kata lain seo permanen link atau sering disingkat dengan seo permalink adalah merupakan salah satu cara optimasi On-Page yang berguna untuk memasang permanen link serta bertujuan untuk menambah internal link pada posting blog, untuk itu memasang permalink seo di blogspot sangat bermanfaat dalam rangka optimasi blog kita.

Pemasangan Permalink di blog sangat penting untuk menambah link internal di artikel postingan kita. Karena permalink yang satu ini dapat membuat template kita lebih seo friendly sehingga mudah dibaca oleh Google. 

Untuk lebih jelas, lihat pada screen shoot :

 

Untuk memasangnya cukup ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Edit HTML

4. Expand template widget

5. Cari kode ]]></b:skin>

6. Copy kode di bawah ini dan paste di atas kode pada no 5

.permalink {border: 1px dotted #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

7. Setelah itu cari kode <div class='post-footer'>

8. Copy kode di bawah ini dan paste di atas kode pada no 7

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Sobat sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan sobat bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

9. Simpan Template dan lihat hasilnya

Selamat Mencoba, semoga sukses !!

Sumber tulisan : http://semangat888.blogspot.com/2012/02/cara-memasang-permalink-seo-di-blogspot.html

Read More...

SEKOCI : MEMBUAT NAVIGASI HALAMAN BLOG

SEKOCI. Membuat atau memasang navigasi halaman blog setidaknya bertujuan untuk lebih me-modernisir penampilan blog yang kita miliki. Karena apa ? Standar blog yang disediakan oleh blogspot rata-rata hanya memberikan navigasi minimal yang berupa older-post, newer-post dan beranda. Pemasangan navigasi halaman blog ini paling tidak dapat sedikit menampilkan kesan "pro" pada blog (gratisan) yang kita miliki. Selanjutnya akan menutupi kesan standart-blog dan akan terlihat lebih dinamis serta sistematis.

Berikut ini adalah contoh navigasi halaman yang dapat kita buat untuk tujuan di atas.

Langkah awal dan pertama yang harus kita lakukan adalah menghapus terlebih dahulu <data:newer-post/>, <data:older-post/> serta <data:home-msg/>. Selanjutnya ikuti langkah-langkah berikut ini  :

Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
 

    Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #cccccc;
    background-color:#cccccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #cccccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333333;
    }

Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

    <!--Page Navigasi-->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
    var pageCount=6;
    var displayPageNum=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>
    </b:if>
    <!--Page Navigasi -->

Simpan template dan lihat hasilnya :).

Keterangan :

Anda bebas mengubah tulisan yang saya kasih warna merah, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi halaman yang tampil. Next adalah text untuk ke halaman selanjutnya, sebaliknya Previous untuk kembali kehalaman sebelumnya.

Demikianlah cara membuat navigasi halaman blog yang bersumber dari : http://www.bamz.us/2012/01/membuat-navigasi-nomer-halaman-blog.html, semoga dapat membawa manfaat.

Read More...