welcome blog: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Sabtu, 27 Februari 2010

Memasang dan Mengecek Canonical Link Element di Blogger Template

21.37 syarif abdur rohman No comments

Mesin pencari telah mendukung "Canonical Link Element" untuk mencegah terjadinya duplikat dokumen atau konten. Secara default kini mesin blogger (XML) telah menyisipkan elemen tersebut. Tapi untuk pengguna template yang telah di modifikasi, dan juga "template classic" yang sudah tidak diperhatikan blogger.com, perlu memasang "Canonical Link Element" tersebut secara manual.

Sebelum beranjak lebih lanjut anda dapat mempejari pengertian dan maksud dari "Canonical Link Element" di Canonical Link Element: presentation from SMX West, yang disajikan dalam bentuk video dan slide.

Memasang "Canonical Link Element" di Blogger

Garis besar "Canonical Link Element" seperti berikut, disimpan dibawah <head>:

<link href='url' rel='canonical'/>

Untuk Template Classic, modifikasinya seperti ini:

<MainPage><link href='http://deconstructioncode.blogspot.com/' rel='canonical'/> </MainPage>
<Blogger><ItemPage><link href='<$BlogItemPermalinkURL$>' rel='canonical'/> </ItemPage></Blogger>

catatan: MainPage berarti halaman index, sedangkan ItemPage untuk halaman postingan. Untuk halaman arsip saya tidak menemukan caranya, kalau ada yang dapat caranya share yah :). Atau mungkin ada yang lebih simpel dan maksimal hasilnya seperti "Template XML" dibawah ini.

Untuk Template XML , tinggal pasang ini:

<link expr:href='data:blog.url' rel='canonical'/>

(trik untuk Template XML diperoleh di: Penggunaan rel=”canonical” di Platform Blogger / Blogspot)

Mengecek "Canonical Link Element" dengan Firefox

Mengecek "Canonical Link Element" selain dengan "view page source" juga dapat menggunakan browser Mozila Firefox pada bagian atas di alamat url ada lambang "C" dengan lingkaran berwarna abu-abu, seperti berikut:

berarti "Canonical Link Element" telah terpasang di blog anda. Jika belum ada berarti element tersebut belum terpasang. Tapi ada juga lambang "C" dengan lingkaran berwarna biru, seperti gambar berikut:

itu berarti bukan bagian dari "Canonical", dalam artian itu adalah bagian dari duplikatnya. Dan apabila kita klik lambang "C" dengan lingkar biru tersebut akan ditujukan ke link "Canonical" nya.

Contoh, alamat permalink komen di blog ini:

http://deconstructioncode.blogspot.com/2010/02/free-blogger-template-classic.html?showComment=1266922514423#c3650566618501861005

Alamat permalink komen diatas tersebut berwarna biru pada lingkaran "huruf C" nya, berarti alamat permalink komen adalah link duplikatnya. Dan apabila kita klik lingkaran "C" yang berwarna biru tersebut, maka akan diarahkan ke alamat postingannya seperti berikut:

http://deconstructioncode.blogspot.com/2010/02/free-blogger-template-classic.html

dan alamat link postingan tersebut yang lingkaran "C" nya berwarna abu-abu atau "link Canonical" nya.

Kurang lebih seperti itu, kalau salah tolong di koreksi.

Halaman Static Frontpage untuk Mesin Blogger

02.29 syarif abdur rohman No comments

Selayaknya mesin berbasis CMS, mesin Blogger bisa 'diakali' juga sehingga memiliki halaman 'Static Frontpage" (tapi jangan berharap sebaik mesin CMS). Halaman 'static frontpage' ini berada di 'halaman index', dan nanti halaman ini anda dapat modifikasi sendiri layoutnya sesuai kreatifitas anda sehingga berbeda dengan halaman blognya.

Trik ini saya gunakan di Test Gaya Blogazine di Mesin Blogger, di halaman index kalau mau melihat hasilnya.

Hal Penting yang Perlu di Perhatikan

Sebelum mempraktekan trik ini sebaiknya anda 'backup template' anda, atau uji coba dulu di blog 'dummy' anda. Sebab trik ini akan mempengaruhi 'page element' pada 'dashboard'. Jadi pada 'page element' nanti hanya menampilkan halaman frontpage.

Untuk itu sebelum mempraktekannya, yakinkan page element anda sebelumnya sudah sesuai dengan keinginan anda terutama dalam hal widget. Tapi apabila anda sudah mempraktekan trik ini dan kemudian anda ingin menambah widget di halaman blognya, anda harus menghapus trik ini, sehingga page element nya kembali menampilkan halaman blognya.

Prinsip dari Trik ini

Prinsip dari trik ini menggunakan:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

 <!-- (untuk halaman frontpage) -->

<b:else/>

 <!-- (untuk halaman blog) -->

</b:if>

Tahapan

Masuk kehalaman Edit HTML di dashboard.

1. Kode HTML

Masukan kode berikut dibawah <body> :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

 <!-- (kode HTML untuk halaman frontpage) -->

<b:else/>

kemudian masukan pula ini diatas </body> :

</b:if>

Apabila anda sudah memasukan kode tersebut, jika anda preview atau anda save maka halaman blog anda akan kosong atau blank. Untuk itu anda perlu mengisi halaman frontpage nya, misal dengan judul blog, navigasi (untuk mengaitkan kehalaman blog anda) dan juga menambahkan widget yang diinginkan, atau juga kalau mau pasang 'Slide Show'.

Untuk menambahkan widget, masukan kode berikut (diatas <b:else/>) :

 <div id='frontpage-wrapper'>
 <b:section class='frontpage' id='frontpage'/>
</div>

Setelah anda masukan kode tersebut maka di page elemen akan muncul add gadget baru, yang sebelumnya kosong karena trik diatas.

2. Kode CSS

Untuk kode CSS nya anda buat style baru seperti berikut simpan diatas </head>:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

/* isi CSS nya disini  */

</b:if>
</style>

Contoh kode Frontpage di Blogger Bergaya Blogazine

1. Kode HTML:

<div id='frontpage'>
<h1><a href='/'><data:blog.title/></a></h1>
<ul class='nav'>
<li><a href='/'>Home</a><span class='special-character'>/</span></li>
<li><a href='/'>Contact</a><span class='special-character'>/</span></li>
<li><a href='/atom.xml'>RSS</a><span class='special-character'>/</span></li>
</ul><!-- end nav -->
<div class='clear'>&#160;</div>

<div id='terbaru'>
<b:section class='terbaru' id='terbaru1'>
<b:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>

<p>&#167;</p>
</div>

2. Kode CSS:

body{background:#900;font-size:22px;text-align:center;text-shadow:1px 2px 2px #600}frontpage{position:relative}h1{font-size:94px;line-height:120px}h2{font-size:24px;line-height:70px}.widget-content{line-height:30px;text-align:center}.nav li{list-style:none;margin:0 50px;text-align:left}.nav li a{font-size:32px;line-height:70px}a{color:#222;text-shadow:1px 2px 2px #b00}a:hover{color:#111}a:focus{color:#000}#terbaru{-moz-border-radius:12px;-webkit-border-radius:12px;bottom:0;color:#eee;margin:20px;padding:20px;position:absolute;right:0;width:450px}#terbaru:hover{-moz-box-shadow:0 0 8px #580000;box-shadow:0 0 8px #580000}p{color:#222;font-size:140px;text-shadow:1px 2px 2px #c00}.special-character{color:#333;text-shadow:1px 2px 2px #c00;font-weight:700;font-size:28px}

Penutup

Trik ini sebaiknya jangan digunakan untuk blog, sebab blog mungkin lebih enak dilihat langsung ke konten tanpa frontpage. Tapi untuk gaya web mungkin bisa digunakan, sehingga anda dapat memanfaatkan halaman frontpagenya untuk memberikan kesan.

Test Gaya Blogazine di Mesin Blogger

06.04 syarif abdur rohman No comments

Memang menggunakan gaya blogazine di mesin Blogger terkesan terlalu memaksakan, tapi ini sedikit menggambarkan bahwa mesin ini dengan beberapa sentuhan dapat pula dimaksimalkan :).

Demo (klik gambar):

Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Postingan: Kasus Blogger

18.20 syarif abdur rohman No comments

Disini saya mencoba memberikan trik bagaimana membuat berbeda antara 'tag heading' judul postingan di halaman index dengan halaman ketika berada di dalam postingan, untuk mesin Blogger. Tapi trik penggunaan 'tag heading' untuk judul postingan ini saya tidak menyorotinya terkait dengan SEO, sebab ini masih menjadi perdebatan yang belum pernah selesai, bahkan dianggap sebagai mitos.

Secara default di Template Blogger, misal minima, heading judul postingan baik di halaman index dan di halaman postingan menggunakan heading yang sama yaitu h3. Pada trik berikut ini, judul postingan pada halaman index adalah h2 dan pada halaman postingan adalah h1.

Penjelasan

Kenapa pada heading judul postingan di halaman index menggunakan h2, tidak langsung saja menjadi h1? Sebab untuk heading h1 digunakan untuk judul blog. Apabila kita langsung mengganti judul postingan dengan h1, maka akan ada beberapa h1 dalam satu halamam index. Jika kita tampilkan 5 artikel dalam halaman index, maka jumlah tag h1 adalah 6 buah. Sedangkan berdasarkan penggunaannya, tag h1 ini untuk setiap halaman hanya diwajibkan satu, berdasarkan struktur semantik .

Kemudian bagaimana dengan 'tag heading' pada halaman postingan yang menggunakan judul postingan dengan h1, sedangkan judul blog juga menggunakan tag h1. Nah judul blog ini yang akan kita rubah menjadi hanya sekedar tag p atau bisa juga dengan tag div.

Jika tag h1 tersebut dianggap sebagai headline. Maka pada halaman index headlinenya adalah judul blog, sedangkan pada halaman postingan headlinenya adalah judul postingan.

Tahapan

Tahapan disini saya menerapkan pada template minima bawaan blogger, jadi kemungkinan ada perbedaan dengan template hasil modifikasi, tapi anda dapat mempelajari kode dibawah ini. Prinsip dari trik ini menggunakan:

<b:if cond='data:blog.pageType != &quot;item&quot;'>        
      
..........................(untuk halaman index)

 <b:else/> 

..........................(untuk halaman postingan)

</b:if>

Ok. Langsung masuk kedalam Edit HTML di dalam dashbord dan aktifkan Expand Widget Templates.

1. Trik merubah Tag Heading Judul Postingan

Cari kode dibawah ini:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</b:if>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

2. Trik merubah Tag Heading Judul Blog

Cari kode dibawah ini:

<h1 class='title' style='background: transparent; border-width: 0px'>
   <b:include name='title'/>
</h1>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
<b:else/>
          <p class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </p>
</b:if>

kemudian satu lagi,

Cari kode dibawah ini:

<h1 class='title'>
  <b:include name='title'/>
</h1>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if>

3. Penyesuaian CSS
Untuk CSSnya mesti disesuaikan dengan style template anda. Berikut ini sebagai contoh perubahan kode CSS dari template minima.

Cari kode dibawah ini:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

Ubah kode tersebut menjadi:

.post h1, .post h2 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong{
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
  color:$textcolor;
}

Kemudian, cari kode dibawah ini:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Ubah kode tersebut menjadi:

#header h1, #header p {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Tambahan

Pada template minima bawaan blogger 'date' atau tanggal mengggunaan heading h2. Sebaiknya heading tersebut diganti dengan tag p atau sekedar tag div. Lihat Reset Blogger Template, untuk lebih lengkapnya.

Bacaan lebih lanjut:

Penutup

Disini saya sekedar menyajikan Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Halaman Postingan. Perlu diingat, trik ini bukan trik SEO, karena saya belum menguji cobanya. Bahkan tag heading yang baik pada postingan masih berupa perdebatan, belum ada kesepakatan. Saya sendiri pada blog ini tidak menggunakan trik tersebut. Jadi dengan trik ini tidak menjamin blog atau tulisan anda berada di posisi yang baik di 'search engine'.

Sip thanks.

Update

Seperti ungkapan Dani, gunakan tag <p> dibanding menggunakan <div> agar lebih semantik, untuk judul blog ketika dihalaman postingan. Kemudian penggunaan kata wajib diatas tidak tepat seperti ungkapan fanari. Satu lagi, Pandu, memberikan tambahan menarik dilihat secara SEO dan Usability, serta mengenai title tag. Dani melengkapi lagi dari sisi aksesibilitas

Membuat Postingan Blogger Lebih Friendly

15.21 syarif abdur rohman No comments

'Post Editor' mesin Blogger belum bisa secara otomatis untuk membuat paragraf, tidak seperti halnya pada mesin lain. Biasanya karena malas menggunakan tag paragraf <p>, maka mengaktifkan 'Conver line breaks' <br /> pada mesin Blogger, sebagai penggantinya. Jadi setiap melakukan enter pada postingan akan digantikan dengan <br/> (bukan <p>).

Postingan yang Friendly

Idealnya postingan yang baik atau 'friendly' berdasarkan struktur X/HTML itu menggunakan paragraf dengan tag <p> bukan <br />. Demikian contoh penggunaan paragraf:

Contoh yang baik:

<p>Nunc euismod, tellus id eleifend lobortis, lorem ligula volutpat dui, vel consequat quam diam in tellus. Quisque sed erat nibh; id venenatis arcu? Aliquam facilisis magna id ligula pellentesque fringilla? </p>
<p>Aenean pulvinar suscipit adipiscing. Suspendisse nisl elit, elementum ac commodo a; cursus in erat! Fusce venenatis faucibus risus; eget blandit dolor hendrerit vel.</p>

Contoh yang kurang baik atau salah:

Nunc euismod, tellus id eleifend lobortis, lorem ligula volutpat dui, vel consequat quam diam in tellus. Quisque sed erat nibh; id venenatis arcu? Aliquam facilisis magna id ligula pellentesque fringilla? 
<br />
Aenean pulvinar suscipit adipiscing. Suspendisse nisl elit, elementum ac commodo a; cursus in erat! Fusce venenatis faucibus risus; eget blandit dolor hendrerit vel.

Muncul Masalah akibat Line Breaks

Akibat mengaktifkan Conver line breaks ini muncul masalah di validasi pada postingan. Contoh pada kasus penggunaan tag <ul> 'unordered list'.

Jika kita menulis seperti ini:

<ul>
<li>Nam feugiat felis tellus; rutrum elementum odio.</li>
<li>Phasellus tempus tellus id odio pulvinar dictum.</li>
<li>Fusce euismod dignissim lorem, at porttitor augue dignissim cursus?</li>
</ul>

hasilnya atau terbacanya menjadi seperti ini:

<ul>
<br/>
<li>Nam feugiat felis tellus; rutrum elementum odio.</li>
<br/>
<li>Phasellus tempus tellus id odio pulvinar dictum.</li>
<br/>
<li>Fusce euismod dignissim lorem, at porttitor augue dignissim cursus?</li>
<br/>
</ul>

Muncul <br /> disana, karena pengaruh enter tadi. Nah ini menjadi masalah dalam validasi, sebab tag ul tidak boleh didalamnya ada <br/>.

document type does not allow element "br" here; assuming missing "li" start-tag

Catatan: ternyata 'Updated editor' lebih baik digunakan karena tidak muncul line breaks seperti hal diatas apabila kita menggunakan list. Tapi 'Updated editor' ini masih belum bisa secara otomatis membuat tag paragraf.

Kesimpulan

Mengganti fungsi paragraf dengan line breaks sebenarnya tidak baik dan itu tidak friendy berdasarkan sturuktur X/HTML. Ada alat bantu agar kita tidak repot menggunakan tag paragraf secara manual, yaitu Markdown Dingus. Dengan alat bantu ini secara otomatis akan merubah text menjadi menjadi HTML, dan akan menambahkan tag paragraf, sehingga postingan kita lebih friendly.

Page Navigation di Classic Template Blogger

02.45 syarif abdur rohman No comments

'Classic Template' tidak memiliki navigasi halaman bawaan seperti halnya template baru Blogger. Tapi kini 'classic template' yang saya gunakan telah memiliki halaman navigasi atau 'Page Navigation' yang dikembangkan oleh Abu Farhan...thanks Abu Farhan. Jadi betah sama 'classic template'.

Halaman navigasi ini juga tidak menimbulkan error pada validasi HTML, tidak seperti halaman navigasi bawaan Blogger pada template baru (XML). Mungkin ini alternatif pengganti navigasi bawaan Blogger tersebut.

Bagi para pengguna mesin Blogger, kini Abu Farhan juga mengembangan model baru 'Page Navigation' dengan 'Scroll', yang berjalan dengan mulus. Dengan adanya model baru PageNav ini semakin memperkaya tampilan template blogger.

Sip.. Terima kasih banget untuk para pengembangan Blogger.

Reset Blogger Template

10.53 syarif abdur rohman No comments

Hal pertama yang saya lakukan ketika membuat template blogger, dengan acuan template minima, saya melakukan reset, katakanlah seperti itu. Reset Blogger Template yang saya maksud disini adalah untuk memperbaiki tampilan dan struktur dasar template, agar lebih baik.

Reset CSS

Reset CSS yang saya gunakan, yang simpel, jadi tidak terlalu banyak dan tidak membebani, yaitu:

*{margin:0; padding:0;}
.post-body ol,.post-body ul {margin:5px 20px;}

Reset Bawaan Blogger

Reset ini lebih berfungsi untuk menyembunyikan (hack) bawaan blogger yang menurut saya menggangu, seperti: Navbar, Quick Edit, Status Massage, dan Feed Link. Reset Bawaan Blogger keseluruhannya seperti ini:

#navbar-iframe, .status-msg-wrap, .icon-action, .quickedit, .feed-links {display: none;}

Tapi juga bisa dilakukan dengan cara yang ekstrim seperti:

1. Menambah kode berikut diantara </head> dan <body> untuk menghilangkan Navbar

<!-- <body><div></div> -->

2. Menghapus Semua Kode Quick Edit (aktifkan Expand Widget Templates)

<b:include name='quickedit'/>

3. Menghapus Feed Link (aktifkan Expand Widget Templates)

CSS nya:

.feed-links {
clear: both;
line-height: 2.5em;
}

HTML nya:

<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>

4. Menghapus Status Massage (aktifkan Expand Widget Templates)

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

Reset Heading

Idealnya Hirarki Heading (h1-h6) sebagai berikut:
h1 = Judul Blog
h2 = Judul Post
h3 = Judul pada Sidebar/Footer (widgate)
h4 = Judul Komentar

Jadi di Blogger Template perlu ada pembenahan pada Judul Post (h3), Judul pada Sidebar dan Date (h2).

1. Pembenahan pada Judul Post

Pada Kode CSS:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Pada Kode HTML:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
     <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
       <b:else/>
       <data:post.title/>
    </b:if>
</b:if>
</h3>

Ubah heading h3 menjadi h2

2. Pembenahan pada Judul pada Sidebar/Footer (widgate)

Pada Kode CSS:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Pada Kode HTML:

<h2 class='title'><data:title/></h2>

Ubah heading h2 menjadi h3

3. Pembenahan pada Date

Menurut saya 'date' tidak perlu menggunakan tag heading, karena kurang memiliki nilai. Jadi tag heading pada 'date' saya hapus.

Pada Kode CSS:

h2.date-header {
margin:1.5em 0 .5em;
}

Hilangkan h2 nya sehingga menjadi:

.date-header {
margin:1.5em 0 .5em;
}

Pada Kode HTML:

<h2 class='date-header'><data:post.dateHeader/></h2>

Ganti h2 menjadi div seperti:

<div class='date-header'><data:post.dateHeader/></div>

Penutup

Demikian keseluruhan reset Blogger Template yang saya lakukan dalam mengedit template. Tapi reset ini jangan digunakan untuk Free Blogger Template, terutama untuk Reset Heading. Mungkin anda punya cara lain juga. Kalau mau silahkan berbagi dikomentar.

---
Lihat juga: Mengoreksi Blogger Template Ku

Edit Template Minima Blogger dengan Grid System : Video Tutorial

10.10 syarif abdur rohman No comments

Video Tutorial Edit Template Minima dengan Grid

Video Tutorial Edit Template Minima Blogger ke Tiga ini lebih khusus menjelaskan bagaimana menerapkan Grid System di Template Minima.

Grid System yang Digunakan

Pada template saya yang berjudul Blogger Template dengan Grid System tersebut menggunakan 960 Grid System. Tapi pada video tutorial ini tidak menggunakan 960 Grid System, tetapi menggunakan 'CSS Grid Framework' The 1KB CSS Grid.

Apa beda diantara keduanya? Bedanya, "The 1KB CSS Grid", seperti namanya, menggunakan source yang lebih kecil, yaitu sebesar 1KB. Lebih kecil dibanding 960 Grid System dan Blue Print.

Jadi menurut saya 'Blogger Template' lebih tepat menggunakan 'Grid System' dengan The 1KB CSS Grid.

Materi Video Tutorial Edit Template Minima dengan Grid

Penjelasan tentang tool 'The 1KB CSS Grid'
Penjelasan file 'The 1KB CSS Grid' dan penggunaanya
Penerapan 'The 1KB CSS Grid' di 'Template Minima Blogger'
Mambuat 2 Kolom di Sidebar dan 4 Kolom di Footer dengan Grid.

Demo dan Download: "Template Minima Blogger dengan Grid System" setelah hasil pengembangan.

---
Video Sebelumnya:

Sitemap Ku di Blogger

22.48 syarif abdur rohman No comments

'Sitemap' atau daftar isi merupakan bagian penting dalam hal navigasi, agar pengunjung dapat menjelah dengan baik di blog kita. Blog ini yang menggunakan 'template classic' sangat membutuhkan 'Sitemap' tersebut. Karena tidak memiliki 'widget' arsip, seperti halnya 'template XML' di Blogger.

Kini telah banyak jenis 'Sitemap' yang dikembangkan untuk Blogger. Salah satunya 'Sitemap' yang dibuat Abu Farhan yang berjudul 'Table of Contents Categorized by Dates (by Archived) for Blogger'. 'Sitemap' tersebut yang kemudian digunakan untuk blog ini dengan sedikit modifikasi tampilannya.

Karena ingin membuat tampilan 'Sitemap' kearah samping (horizontal), maka diputuskan menggunakan alamat baru, khusus untuk 'sitemap' ini. Alamat 'sitemap' tersebut: http://deconstructioncode-sitemap.blogspot.com/.

Pada template 'Sitemap' ini pun menggunakan 'template classic', dan difungsikan secara statis. Jadi seluruh source aslinya dihapus dan digantikan dengan source baru yang hanya berupa CSS dan HTML, serta Javascript 'Sitemap'.

Keseluruhan 'source' yang digunakan di 'Sitemap' ini adalah:

<!DOCTYPE html>
<html lang="en-ID">
    
<head>
    
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Daftar Isi Code-code-an</title>
<link href="http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif" rel="icon" type="image/x-icon"/>
<link href='http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif' rel='icon' type='image/vnd.microsoft.icon'/>

<style type="text/css">
 *{margin:0; padding:0;}
body { background:#333; color:#fff; font-family: Verdana, "Bitstream Vera Sans", sans-serif;font-size: 75%; border-top:8px solid #222}
a:link { color:#fff; text-decoration:none;}              
#daftarisi {float:left; width:8000px; margin-left:20px}
#daftarisi h1 { font-family:georgia,serif; font-size:72px; font-weight:normal; letter-spacing:5px; color:#111; text-shadow:1px 1px 1px #444; padding-top:20px}
#daftarisi h2 { font-family:georgia,serif; font-size:42px; margin:0 40px 30px}
#daftarisi h2 a {color:#ddd !important; font-weight:normal; letter-spacing:6px}
#daftarisi h2 a:hover {color:#999 !important}
#daftarisi h3 {font-family:"Adobe Caslon Pro","Hoefler Text",Georgia,Garamond,Times,serif; font-size:18px; letter-spacing:4px; padding-bottom:10px}
#daftarisi h3 a {color:#CF2626 !important;}
#daftarisi li { text-indent: -20px; list-style:none; padding-bottom:8px; margin-left:20px}
#daftarisi li a {line-height:18px; }
#daftarisi li a:hover { background:brown}
#Wtoc {padding-bottom:20px; font-size:10px; color:#CF2626 !important;}
.toc {float:left; width:300px; margin:0 20px 20px 0; padding-right:10px; border-right:1px solid #444}
</style>
        
</head>
<!-- <body><div></div> -->
<body>
<div id='daftarisi'>
<h1>Daftar Isi</h1>
<h2><a title="Home Page" href="http://deconstructioncode.blogspot.com/">Code-code-an</a></h2>
<p><small>Catatan: Gunakan "Control F" (pada keyboard) untuk mempercepat pencarian.</small></p>
<br/>
<script type="text/javascript" src="http://blogspotcode.googlecode.com/files/di.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>
</body>
</html>

@font-face CSS di Blogger Template

10.13 syarif abdur rohman No comments

Akhirnya dapat juga cara alternatif menggunakan '@font-face CSS' ('Font Embedding') di 'blogger template' melalui jasa gratis yang disediakan oleh kernest.com. Dengan menggunakan jasa gratis ini, tidak perlu lagi pusing menyimpan file 'Font' yang akan kita gunakan. Untuk masalah jenis font, disediakan cukup beragam (cukup pusing memilihnya) baik itu yang gratis/free maupun yang berbayar/commercial.

@font-face, tidak seperti sIFR dan Cufon yang menggunakan javascript, @font-face ini hanya berupa 'Embed Code CSS', jadi katakan selamat tinggal untuk javascript :). Anda dapat melihat demo diblog ini dan di Blogger Display pada judul blog (h1).

Selain itu kelebihan penggunaan @font-face ini, karena bukan berupa image seperti cufon, maka text font tersebut dapat di translate.

Penerapan @font-face di 'blogger template'

Untuk penerapan @font-face ini sangat mudah:

1. Registrasi,

2. Mencari font yang anda ingin gunakan (- Find More Fonts...), anda klik font tersebut,

3. Masukkan alamat blog/web anda di kolom sebelah kanan (anda bisa memasukkan beberapa alamat), setelah anda klik add, kemudian anda diminta klik alamat blog/web anda dibagian atas.

4. Selanjutnya anda akan masuk ke halaman berikut:

Pada tahapan pertama di gambar, copy 'Embed Code' tersebut kemudian paste di atas </head> pada template anda, seperti berikut:

<link href="http://kernest.com/http-bloggerdisplay-blogspot-com.css" media="screen" rel="stylesheet" type="text/css" />

</head>

Setelah itu pada tahapan kedua digambar tersebut, lihat font-family yang anda dapat, gunakan font-family tersebut, seperti contoh yang ada, sebagai contoh saya menerapakan pada bagian heading, maka perintah CSS nya adalah:

h1,h2,h3,h4 {font-family:'Days';}

Anda juga dapat menggunakan beberapa jenis font.

5. Save tamplate anda (jika anda preview, anda tidak akan melihat perubahan jenis font tersebut).

Sip demikian tahapan penggunaan @font-face CSS tersebut di Blogger Template. Sedikit tambahan bahwa penggunaan @font-face CSS masih belum didukung untuk 'browser Google Chrome'.

---
Lebih lengkap mengenai penyedia jasa gratis 'Font Embedding':
Web Typography: Font Embedding Services

Video Tutorial -2: Edit Template Minima Blogger

23.23 syarif abdur rohman No comments

Video tutorial ke dua ini masih seputar 'edit template minima blogger', dan video yang berdurasi 11:57 menit ini untuk melengkapi "Main Simpel - Free Blogger Template", yaitu: bagaimana membuat tampilan pada 'index' atau 'fontpage' hanya sekedar menampilkan judul, post footer dan tanggal, serta penggunaan float: left dan float:right.

lihat juga: video tutorial-1: edit template minima blogger

Optimasi Title Tag pada Classic Template

20.48 syarif abdur rohman No comments

Optimasi "Title Tag" pada "Classic Template" mungkin sudah tidak diperlukan lagi, sebab sebagai besar pengguna platform Blogger menggunakan Template baru XML. Tapi bagi saya pengguna Template Classic perubahan Tag tersebut masih saya butuhkan, dan saya mau berbagi bagaimana melakukan optimasi "Title Tag" pada "Classic Template" yang katanya sangat berkaitan dengan SEO (search engine optimasi), "SEO Friendly".

Tahapan Optimasi "Title Tag" pada Classic Template

Tahapan optimasi title tag agar seo friendly sangat mudah.
Pertama, cari "Title Tag" yang pada umumnya adalah sebagai berikut:

<title><$BlogPageTitle$></title>

Kedua, ganti "Title Tag" tersebut dengan:

<title> 
<MainPage> <$BlogTitle$> : <$BlogDescription$> </MainPage>
<Blogger> <ItemPage> <$BlogItemTitle$> : <$BlogTitle$> </ItemPage> </Blogger>
<ArchivePage><$BlogPageTitle$></ArchivePage>
</title>

Contoh:
Jika sebelum dirubah "Title Tag" pada artikel-nya terbaca pada browser:

Code-code-an : Optimasi "Title Tag" Classic Template 
atau:
judul blog : judul artikel

Maka setelah dirubah "Title Tag" nya akan menjadi :

Optimasi "Title Tag" Classic Template : Code-code-an
atau:
judul artikel : judul blog

Sip... demikian tahapan optimasi "Title Tag" pada "Blogger Template Classic", yang saya gunakan, mungkin ada cara lain yang lebih dasyat, terima kasih.

---
lihat juga: Title dan URL Blogger yang SEO Friendly (Template XML)

Edit Template Minima Blogger : Video Tutorial

09.53 syarif abdur rohman No comments

video tutorial, edit template minima blogger

Kali ini saya mencoba membuat video tutorial untuk kali pertamanya, dan video tutorial ini sangat dasar sekali, yaitu bagaimana mengedit template minima bawaan blogger.

Pada video tutorial ini saya mencoba mengedit 'template minima' bawaan 'blogger', pada:

- lebar template,
- warna,
- membuat 3 kolom dibagian bawah,
- dan terakhir menu navigasi.

Yup ini dasar sekali, tetapi disini saya juga mencoba menggunakan firefox add-ons, yaitu 'firebug', sebagai alat bantu untuk mengedit template minima ini, jadi anda dapat melihat peran 'firebug' yang sangat membantu dalam mengedit template.

Syarat menonton video tutorial 'edit template minima blogger' ini:

1. Keraskan volume speaker anda, sekeras-kerasnya, soalnya suara saya kecil, karena ngomongnya berbisik.
2. Nontonnya mesti 'fullscreen', biar terlihat jelas tulisannya.
3. Ketika memencet play, sebaiknya di pause dulu beberapa menit, baru di play kembali, supaya lancar jalannnya.
4. Sabar, soalnya durasinya 48:52 menit :)

Silahkan menonton video tutorial ini, semoga tidak jenuh.

sip terima kasih... semoga video tutorial ini dapat membantu anda untuk membuat atau mengedit template sendiri.

---
lihat juga:

Rotasi Background tiap Reload dan Penerapannya

19.02 syarif abdur rohman No comments

Ada beragam teknik untuk mengubah background pada template tiap melakukan reload (F5) atau tiap pindah halaman, baik itu dengan permainan php maupun javascript. Rotasi Background tiap Reload atau bahasa lainnya "Random Background Rotation" sekedar memberi sedikit sentuhan variasi pada template agar penggunjung dapat memperoleh kesan yang berbeda, sama seperti halnya dengan "Switch Stylesheets".

Ragam "Random Background Rotation"

1. Cut & Paste Random background color (javascript)
2. Random Content Colors script (javascript)
3. Random Image Rotation (php)

Sebenarnya masih banyak cara lain, tapi saya baru mencoba di 3 alamat tersebut, dan akhirnya saya memutuskan untuk blog dokumentasi ini adalah "Random Image Rotation" dengan script php, dibanding dengan javascript, karena di dua tempat tersebut javascriptnya ada error ketika saya cek di validasi html.

Penerapan "Random Image Rotation"

Karena blog ini ber platform blogger, tentu ada masalah ketika menggunakan "Random Image Rotation", masalahnya adalah dalam penyimpanan file source php serta imagenya yang perlu di bungkus dalam satu folder, mau ngak mau, akhirnya filenya saya parkir di tempat penyimpanan gratis yang dapat membaca file php, dengan resiko tiap reload tidak berjalan sempurna perubahnnya (silahkan reload blog ini untuk melihat hasilnya).

Inti dari konsep "Random Image Rotation" ini adalah merotasi secara random image, jadi apapun imagenya dapat ada gunakan trik ini, seperti image pada header atau sidebar dan lainnya, tapi pada blog ini kebutuhannya untuk merubah image pada background template.

Langkah penerapan "Random Image Rotation" atau Rotasi Background tiap Reload:

1. Download source php nya, kemudian ubah menjadi file txt tersebut menjadi php dengan nama "rotate.php".

2. Karena hanya butuh 3 perubahan warna, maka saya membuat 3 image dengan warna merah, biru dan kuning, menggunakan photoshop berukuran 40x40 pixel.

3. Membuat folder, foldernya saya berinama "reload". Dalam folder tersebut berisi selain 3 image dengan warna yang berbeda, juga file source php hasil download tadi yang telah dirubah ext. bernama "rotate.php". Jadi keseluruhan dalam folder tersebut 4 file (3 image + 1 file php)

4. Upload folder yang saya berinama "reload" tersebut ke tempat hostingan, kemudian copy link file "rotate.php" didalam folder "reload", seperti berikut, yang saya miliki:

http://choen.freevar.com/reload/rotate.php

link "rotate.php" ini yang akan membaca image di dalam folder "reload" secara bergiliran ketika reload (F5).

5. Masukan link "rotate.php" tersebut kedalam script CSS template anda, karena saya merubah background body, script seperti ini:

body {background:#525a4a url(http://choen.freevar.com/reload/rotate.php); }

6. Sip Selesai... silahkan me-reload.

lihat: weblog yang menggunakan random background

Classic Template, HTML 5 dan CSS 3 di Blogger Template

09.16 syarif abdur rohman No comments

Kini Blog yang berbasis Blogger ini menggunakan HTML 5 dengan Template Classic. HTML 5 yang menggunakan doctype:<!DOCTYPE html> hanya dapat digunakan di Template Classic, jadi saya beralih dari template XML ke template HTML (template classic) karena ingin merasakan HTML 5.

Hal dasar mengenai HTML 5 di 'blogger template classic' ini:

1. Tentunya menggunakan doctype HTML <!DOCTYPE html>.
strukturnya menjadi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>

2. Menggunakan Element HTML 5 serta Javascript agar dapat dibaca oleh IE:

Element HTLM 5 yang baru, yaitu:

abbr,article,aside,audio,bb,canvas,datagrid,datalist, details,dialog,eventsource,figure, footer,header,hgroup,mark, menu,meter,nav, output,progress,section,time,video

dan berikut ini javascript agar IE dapat membaca Element baru HTML:



3. Gambaran umum struktur HTML 5 yang saya gunakan menjadi:

<!DOCTYPE html>
<html lang="id">

<head>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<title><$BlogPageTitle$></title>



</head>

<body>

<header>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>

<nav>
<ul>
<li></li>
</ul>
</nav>
</header>

<section id="content">
<article>
...
</article>

<aside> 
...
</aside>

</section>

<footer>
...
</footer>

</body>
</html>

4. Untuk Reset CSS pada HTML 5 saya sekedar menggunakan:

/* Reset */
html, body, h1, h2, h3, h4, h5, h6, section, header,  aside, footer, nav, article, fieldset, p, ul, ol, li, dl, dt, dd, form {
display: block; list-style: none; margin: 0; padding: 0}

CSS 3 yang saya gunakan:

Ada beragam pengembangan CSS 3, tetapi saya hanya menggunakan:

1. text shadow: text-shadow: 1px 1px 2px #0c0b00;,
2. border -webkit-border-radius: 6px; -moz-border-radius: 6px;, dan
3. box shadow -webkit-box-shadow: 0 1px 2px #272501; -moz-box-shadow: 0 1px 2px #272501;.

Selain itu pada Classic Template ini saya juga menggunakan Cufon untuk mengganti jenis font heading (h1,h2,h3,h4) dan javascript jQuery.

Penutup

Penggunaan HTML 5 sebenarnya digunakan untuk Tahun 2022 (kalo ngak kiamat..), tapi pada pengembangannya HTML 5 sudah bisa digunakan saat ini, walau ketika saya pelajari masih membingungkan menggunakan tag atau element yang baru, terutama pada strukturnya. Selain itu dengan adanya element baru di HTML 5 ini penggunaan tag div sedikit berkurang.

Sekian...

Menggunakan sIFR 2.0 di 'Blogger Template'

23.43 syarif abdur rohman No comments

Demo

sIFR adalah salah satu fasilitas alternatif pengganti jenis font untuk memperindah 'typography', khususnya pada heading (H1, H2, dll), sama seperti halnya dengan cufon. Kali ini saya akan mencoba menggunakan sIFR 2.0 di 'blogger template' (sIFR sekarang telah keluar versi 3.0).

Tahapan Menggunakan sIFR2 di 'Blogger Template'

1. download sIFR 2.0.
2. Upload file javascript di google code hasil dari download sIFR 2.0 tadi, yaitu sifr-addons.js dan sifr.js.

Kalo ngak mau repot upload, pake script berikut ini simpan dibawah </head>:

<script src='http://choenblogspot.googlecode.com/files/sifr.js' type='text/javascript'></script>
<script src='http://choenblogspot.googlecode.com/files/sifr-addons.js' type='text/javascript'></script>

3. Masukan code CSS hasil anda download sIFR 0.2 (yaitu: sIFR-screen.css dan sIFR-print) di edit HTML, template anda.

Kalo ngak mau repot copy paste code berikut dibawah </head>:

<style media='print' type='text/css'>
/* This is the print stylesheet to hide the Flash headlines from the browser... regular browser text headlines will now print as normal */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>
<style media='screen' type='text/css'>
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
visibility: hidden;
font-size: 16px;
letter-spacing: 40px;
}

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: -9px;
font-size: 14px;
}

.sIFR-hasFlash h3 {
visibility: hidden;
letter-spacing: -6px;
font-size: 20px;
}

.sIFR-hasFlash h4 {
visibility: hidden;
letter-spacing: -5px;
font-size: 21px;
}

.sIFR-hasFlash h5 {
letter-spacing: -4px;
visibility: hidden;
font-size: 14px;
}

.sIFR-hasFlash h6 {
letter-spacing: -4px;
visibility: hidden;
font-size: 12px;
}

</style>

4. Ini tahapan terpenting dari sIFR untuk menggunakan jenis font yang anda inginkan.

Sebenarnya ketika kita download sIFR 2.0 sudah disertakan file flash untuk membuat font, tapi ada cara lebih mudah, yaitu:

a. Pilih jenis font yang anda inginkan, atau cari di tempat yang menyediakan free font, kemudian simpan di desktop (sebab kalau masih di windows/font tidak bisa di upload).

b. Generate font yang anda telah pilih agar menjadi file swf, di sIFR Generator. Caranya tinggal anda upload font anda, kemudian next dan next sampai akhir hingga download. pada Step 2: Choose sIFR version, pilih sIFR 2, karena kita menggunakan sIFR 2.0.

c. Hasil donwload dari sIFR Generator, file font tersebut telah berupa '.swf', kemudian file swf tersebut perlu anda upload ke image shack, karena image shack bisa menyimpan file berbentuk .swf. Setelah anda upload ada ambil linknya, misalnya: http://img195.imageshack.us/img195/2534/copystruct.swf

d. Kemudian terakhir anda masukan javascript berikut untuk mengaktifkan font yang anda telah pilih tersebut, dengan cara semua alamat font dibawah perlu anda rubah sesuai font anda yang telah anda upload di image shack, disini saya menggunakan 3 jenis font untuk H1, H2 dan H3.

script tersebut, simpan dibawah </head>:

<script type='text/javascript'>
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax


sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf", sColor:"#AD3C00", sWmode:'transparent'}));

sIFR.replaceElement(named({sSelector:"h2, h4, h6", sFlashSrc:"http://img199.imageshack.us/img199/2368/motorway.swf", sColor:"#2F1F00", sWmode:'transparent'}));


sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"http://img508.imageshack.us/img508/6843/jamesfajardo.swf", sWmode:'transparent'}));

};


//]]>
</script>

>> code berwarna merah tersebut yang perlu anda ganti dengan alamat font swf anda.

5. Sip Selesai, silahkan anda kutak katik kembali semua script/code diatas untuk menyesuaikan dengan karakter template anda, baik itu ukuran font dan warna.

>> catatan kelemahan sIFR 2.0 ini, untuk text link yang menggunakan sIFR tidak aktif. jadi jangan menggunakan heading (h1,h2 dst) untuk text link.

:: lihat juga penggunaan cufon pada 'blogger template'.

Slideshow Effect Ngedet dengan Mootools

22.08 syarif abdur rohman No comments

Demo

Tutorial slideshow ini bernama noobslide berbasis mootools, dari beberapa pengembangan slide dari noobslide ini saya mencoba 'sample 2' yang menggunakan effect ngedet untuk diterapkan di 'blogger template'.

Tahapan Pengembangan Slideshow Effect Ngedet dari Mootools

1. Masukan script Mootools berikut sebelum </head> :

<!-- mootools -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

:: catatan: apabila script mootools ini sudah anda miliki, maka tidak perlu di input lagi.

2. Masukan Javascript ini sesudah script Mootools diatas:

<!-- Slideshow -->
<script type='text/javascript'>
//<![CDATA[
var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:['left','width'],vertical:['top','height']};this.size=a.size||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');this.button_event=a.button_event||'click';this.handle_event=a.handle_event||'click';this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])=='array'?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case'previous':b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case'next':b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case'play':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case'playback':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case'stop':b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+'px')}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,'next',true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}});

//]]>
</script>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function(){


//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $(&#39;box2&#39;),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $(&#39;prev1&#39;),
next: $(&#39;next1&#39;)
}
});


});
</script>

:: catatan: 'items: [0,1,2,3,4,5,6.7]', angka tersebut adalah jumlah image yang anda gunakan, untuk itu sesuaikan angka ini dengan image untuk slideshow yang anda gunakan, misal anda hanya menggunakan 3 image maka hanya [0,1,2].

3. Masukkan code HTML berikut sesudah <div id='sidebar-wrapper'>

<h2>SlideShow</h2>
<div class='sample'>
<div class='mask2'>
<div id='box2'>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmswoE0HZNI/AAAAAAAABo8/dfvVQU6r-ng/img1.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smswof-uatI/AAAAAAAABpA/NpNb_osZJ1w/img2.jpg'/></span>
<span><img alt='Photo' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGJ7z86I/AAAAAAAABpI/SuYuxjSLDuc/img4.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGEqDQfI/AAAAAAAABpU/JkMqVL3FzP8/img6.jpg'/></span>
<span><img alt='Photo' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
</div>
</div>
<p class='buttons'>
<span id='prev1'>&lt;&lt; Previous</span>
<span id='next1'>Next &gt;&gt;</span>
</p>
</div>

4. Masukkan kode CSS berikut:

/* slideshow */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

:: catatan: sesuaikan code CSS ini dengan karakter template anda.

4. Selesai.

Dua Karakter Blogspot yang Perlu Diperhitungkan

01.19 syarif abdur rohman No comments

Blogspot atau Blogger merupakan blog yang dapat di gunakan secara gratis, dengan segala keterbatasannya. Namun bagi para blogger yang kreatif, mereka dapat memaksimalkan keterbatasan tersebut. Seperti pada dua karakter blogspot berikut:

Dua Karakter Blogspot yang Perlu Diperhitungkan

1. Dani Iswara

Walau blog ini sudah tidak aktif, tapi si pemilik blog mampu melakukan beberapa trik atau hack pada blogspot (yang tekenal tidak standar web), agar blognya yang menggunakan template klasik dapat passed atau tervalidasi, baik itu XHTML dan CSS. Blog saya ini untuk masalah validasi itu angkat tangan, tidak mampu memaksimalkan lagi. Kini Dani tidak menggunakan lagi blogspot, dia menggunakan wordpress berbayar (dengan hostingan), mungkin karena blogspot masih ada beberapa kelemahan dalam memenuhi syarat 'standar web' yang dianutnya.

2. Mike Matas

Ketika mengunjungi blog ini saya tidak menyangka kalau blog ini menggunakan blogspot, saat sadar dan sedikit terkejut ketika mengklik 'post a comment', ow kok ke komen model blogspot! Ini lah kelebihan blog ini, yang menggunakan blognya semacam portfolio, dengan kepekaan desainnya dia dapat menghilangkan karakter blogspot pada templatenya.

Dua karakter blogspot ini patut diperhitungkan, dengan kreatifitas masing-masing yang dimiliki siempunya blog, mereka pantas untuk dijadikan rujukan.

:: lihat juga: blog amukti yang penuh imagi

Membuat tiap Link Redup - Mootools

17.16 syarif abdur rohman No comments

demo

Link redup atau link fading dengan menggunakan Mootools ini dikembangkan oleh David Walsh. Nah bagaimana link redup/fading ini dapat diterapkan di Template Blogger, sebelumnya lihat demo link redup, arahkah mouse anda ketiap link, maka anda dapat melihat ketika hover link tersebut redup.

Penerapan Link Fading di Blogger Template

Penerapan Link Fading ini sangat mudah:
1. Masukan script Mootools berikut sebelum </head> :


<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

:: catatan: apabila script mootools ini sudah anda miliki, maka tidak perlu di input lagi.

2. Masukan script javascript berikut:

<script type='text/javascript'>
window.addEvent('domready',function() {
$each($('a'), function(el) {
var original = el.getStyle('color');
var morph = new Fx.Morph(el,{ 'duration':'1000', link:'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ 'color':'#ccc' }) },
'mouseleave' : function() { morph.start({ 'color': original }) }
});
});
});
</script>


:: catatan:
- code 'a' yang berwarna merah tersebut dapat anda rubah, sesuai link yang anda ingin berikan effect, misal hanya ingin untuk judul postingan, maka kode 'a' anda rubah menjadi '.post-title'.

- code 'ccc' yang berwarna biru itu adalah kode warna, ini pun dapat anda rubah sesuai keinginan anda. kode warna ini ada kode warna hover dari link.

3. Sip Beres.

Blog Amuki - Desain template kaya imagi

06.07 syarif abdur rohman No comments

Walau menggunakan platform blogger/blogspot, Blog Amuki kaya dengan imaginasi dengan tema desain template kertas daur ulang. Konsep desain template yang dibangun Amukti pun semakin menarik dan dinamis dengan sentuhan flash pada bagian header dan bannernya, serta pada bagian sidebarnya diberi fasilitas javascript accordion dari jquery. Untuk itu blog ini bisa dijadikan inspirasi para pengguna blogger/blogspot, sebagai pertimbangan desain diluar standar yang berlaku.

Sabtu, 27 Februari 2010

Memasang "Canonical Link Element" di Blogger

Mengecek "Canonical Link Element" dengan Firefox

Senin, 01 Februari 2010

Hal Penting yang Perlu di Perhatikan

Prinsip dari Trik ini

Tahapan

Contoh kode Frontpage di Blogger Bergaya Blogazine

Penutup

Selasa, 26 Januari 2010

Rabu, 06 Januari 2010

Penjelasan

Tahapan

Tambahan

Penutup

Update

Minggu, 13 Desember 2009

Postingan yang Friendly

Muncul Masalah akibat Line Breaks

Kesimpulan

Kamis, 10 Desember 2009

Minggu, 29 November 2009

Reset CSS

Reset Bawaan Blogger

Reset Heading

Penutup

Sabtu, 14 November 2009

Grid System yang Digunakan

Materi Video Tutorial Edit Template Minima dengan Grid

Minggu, 08 November 2009

Jumat, 30 Oktober 2009

Penerapan @font-face di 'blogger template'

Senin, 19 Oktober 2009

Kamis, 08 Oktober 2009

Tahapan Optimasi "Title Tag" pada Classic Template

Selasa, 29 September 2009

Pada video tutorial ini saya mencoba mengedit 'template minima' bawaan 'blogger', pada:

Syarat menonton video tutorial 'edit template minima blogger' ini:

Silahkan menonton video tutorial ini, semoga tidak jenuh.

Kamis, 24 September 2009

Ragam "Random Background Rotation"

Penerapan "Random Image Rotation"

Minggu, 06 September 2009

Hal dasar mengenai HTML 5 di 'blogger template classic' ini:

CSS 3 yang saya gunakan:

Penutup

Minggu, 09 Agustus 2009

Tahapan Menggunakan sIFR2 di 'Blogger Template'

Minggu, 26 Juli 2009

Tahapan Pengembangan Slideshow Effect Ngedet dari Mootools

Sabtu, 25 Juli 2009

Dua Karakter Blogspot yang Perlu Diperhitungkan

Sabtu, 18 Juli 2009

Penerapan Link Fading di Blogger Template

Rabu, 15 April 2009

Entri Populer

Label

Arsip Blog