bukan-rahasia

Friday, May 13, 2011

Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot

Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.

Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdN4X3yV0cvSCrG_C18Dl-moLzHaPvi5xnglQaiZipaOfWsjNc4kZEv00vMRNqbLLf7M1S0DGIkQj1ccawoVMt7kDyf0cuFmL3CnguXr7VRBtKQ2tfQHTBc0eBL4KmsLYtlMe4S45SMWg/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdN4X3yV0cvSCrG_C18Dl-moLzHaPvi5xnglQaiZipaOfWsjNc4kZEv00vMRNqbLLf7M1S0DGIkQj1ccawoVMt7kDyf0cuFmL3CnguXr7VRBtKQ2tfQHTBc0eBL4KmsLYtlMe4S45SMWg/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

3. Save template.

4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:

<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:

<li class="current"><a href="http://bukan-rahasiia.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag gadget/widget tersebut ke bawah/atas header.

9. Save lagi.

10. Done!

Re-coded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.

Credits to coder: cssmenumaker

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS Simple Black Blogger/Blogspot

Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, saya persembahkan kepada sobat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorFYfO49BtZzPbdHY5KrqGppbZrRO4EzqeVfFz36tqbGksh2SPYmzeBtEU_HoFPoBPkPdwB5t-xUDhCN4HQ0OB5NkYSwOZx65edYyno7xt_-dED6vEuufJ10OE4ZHNTXnJI0TAw2tRWc/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1z6yazdyzBQWd1KWEnluxlVuAoP1rZwHEpzxYbb3HhQb0D29HbxMe9lZ4vWTjWcqjIUvLYtwyz1tdPRb1RegMVC0qkpYu8r9wgavJROgbtH5hZypL9CfQ8NmCGcyfmes-8nJbyt6Jng/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.

<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:

<li><a class="current" href="http://bukan-rahasiia.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag/geser widget menu horizontal tersebut ke bawah/atas header.

9. Save lagi.

10. Done!

Re-encoded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.

Credits to coder: cssmenumaker

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Tuesday, May 10, 2011

Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting

HTML link atau hyperlink, adalah kata, sekumpulan kata, ataupun gambar yang apabila di-klik akan menuju ke dokumen/halaman lain atau bagian lain dari dokumen/halaman yang sama. Link di dalam dunia web tentu saja selalu kita jumpai dan sering kita fungsikan. Dalam dunia blog dan para blogger, sangat penting untuk mengetahui hal mendasar mengenai HTML link berserta atribut-atribut pentingnya agar dapat membuat navigasi link yang sesuai dengan yang diinginkan dan dibutuhkan, baik oleh pemilik blog itu sendiri maupun bagi pengunjung.

Tag dasar HTML link (hyperlink) adalah <a>, yang bisa digunakan dengan atribut href yang mengacu ke dokumen lain dan juga untuk membuat bookmark dengan menggunakan atribut name.

Kode HTML untuk sebuah link adalah:

<a href="url">anchor text<a/>

Kita lihat disitu digunakan atribut inti href yang mengacu ke url dari halaman yang dituju, sedangkan anchor text berada di antara dua tag a pembuka: <a>, dan penutup: </a>.

Contoh:

<a href="http://bukan-rahasiia.blogspot.com/p/free-backlink-builder-get-quality.html">Free Backlink Builder<a/>

Pada browser, tag tersebut akan ditampilkan seperti ini:

Free Backlink Builder

Selain atribut inti href, terdapat pula beberapa atribut penting lain yang dapat ditambahkan pada tag <a>, misalnya target, name, rel, title, dan masih banyak lagi lainnya. Pada kesempatan kali ini saya akan membahas beberapa atribut yang lazim dan fungsional saja untuk blog/website:

1. Target

Atribut target digunakan sebagai perintah pada browser untuk menampilkan dokumen dengan cara yang lebih spesifik. Secara default tanpa atribut target, browser akan membuka halaman tertentu pada window/tab yang sama. Dengan atribut traget, kita bisa menampilkan suatu halaman di tab/window lain yang lebih baru atau bagian frame lain pada suatu halaman web (bagi halaman web yang memiliki elemen frame).

contoh:

<a href="http://bukan-rahasiia.blogspot.com/p/free-backlink-builder-get-quality.html" target="_blank">Free Backlink Builder<a/>

Tampilan pada browser tetap sama:

Free Backlink Builder

Silahkan klik link tersebut untuk melihat perbedaanya dengan link yang di atasnya.

Target memiliki perintah bermacam-macam, misalnya self, parent, top, new, dan lain-lain. untuk melihat tutorial mengenai atribut target, membuat link terbuka di window/tab baru, dan membuat seluruh link blog secara otomatis terbuka di window/tab baru, silahkan buka: Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya.

2.Title

Title adalah bagian dari link yang berfungsi memberikan penjelasan yang lebih detil ataupun sama mengenai sebuah link. Title muncul sebagai tooltip ketika mouse berada di atas link.

Contoh penggunaan atribut title:

<a href="http://bukan-rahasiia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" title="tutorial lengkap membuat menu breadcrumbs di blogger">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>

berikut tampilan linknya, hover mouse anda di atas link:

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot

3. Rel (relationship)

Atibut rel menunjukkan keterkaitan dengan dokumen/halaman yang sama atau dokumen/halaman lain yang dituju. Atribut ini bersifat invisible bagi browser dan difungsikan sebagai informasi tentang sebuah link bagi search engine. Ada begitu banyak perintah pada atribut rel, yang paling kita kenal adalah rel="nofollow", yang merupakan perintah bagi search engine untuk mengabaikan suatu link pada sebuah halaman website/blog. atribut rel="nofollow" utamanya digunakan untuk menghindari spam. Dalam dunia SEO, atribut ini digunakan oleh blogger atau webmaster pada link-link yang tidak ingin di-indeks oleh Google, biasanya untuk menghindari link farm dan meyeimbangkan persentase jumlah inbound dan outbound links, karena jumlah outbound link yang melebihi jumlah inbound link dapat berakibat buruk pada SEO blog/website.

Contoh penggunaan atributnya:

<a href="http://bukan-rahasiia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" rel="nofollow">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>

Link Pada Gambar (Image Link)

Gambar dapat pula memiliki link apabila kita menambahkan tag link pada tag gambar.
Tag dasar HTML gambar adalah:

<img src="url gambar"/>

Kita dapat membuat gambar mengandung link dengan memasukkannya diantara tag link, sebagaimana memasukkan anchor text:

<a href=url yang dituju"><img src="url gambar"/><a/>

Secara default, ketika kita mengupload dan menghosting gambar di situs-situs tertentu dan juga di Blogger/Blogspot, gambar yang diupload secara otomatis telah ditanami link. Link tersebut menuju ke url gambar itu sendiri. Sebagai contoh adalah gambar berikut (hover mouse ke atas gambar dan lihat link pada footer browser):

Ketika mengupload ke Blogger (i.e Picasa Web Album), secara otomatis gambar dan link akan memiliki url yang sama:

(contoh tanpa CSS Styling)
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dYLQNq6kRnUMVEoA57lFudaklLfbgdKecvmrBuBu-E-DNvW7XfFOj0XVQJmHYC-e-O1T0-JjU4IicEDsgrk9bTm1TOOTwXh_JEFX_FSwymb9bKfF1HBgQo27JaoqMXiqVq_PCw2KlTP5/s1600/header.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dYLQNq6kRnUMVEoA57lFudaklLfbgdKecvmrBuBu-E-DNvW7XfFOj0XVQJmHYC-e-O1T0-JjU4IicEDsgrk9bTm1TOOTwXh_JEFX_FSwymb9bKfF1HBgQo27JaoqMXiqVq_PCw2KlTP5/s1600/header.png"/></a>

Untuk membuat gambar memiliki link ke halaman blog/website yang diinginkan, maka harus mengganti link default pada tag <a>:

<a href="http://bukan-rahasiia.blogspot.com"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dYLQNq6kRnUMVEoA57lFudaklLfbgdKecvmrBuBu-E-DNvW7XfFOj0XVQJmHYC-e-O1T0-JjU4IicEDsgrk9bTm1TOOTwXh_JEFX_FSwymb9bKfF1HBgQo27JaoqMXiqVq_PCw2KlTP5/s1600/header.png"/></a>

Hover mouse di atas gambar di atas dan lihat perbedaan link dengan gambar sebelumnya.

Bagi dunia SEO, link tersebut menjadi tidak sia-sia karena tidak menuju ke url gambar, padahal bukan gambar itu yang sedang dioptimasi, kecuali bagi yang memang ingin gambarnya di-SEO-kan. Untuk memperkuat lagi dan agar search engine dapat membacanya, tambahkan atribut alt. Atribut ini akan dibaca sebagai anchor text oleh search engine. Alt berfungsi menjadi anchor text yang muncul di browser ketika gambar gagal dimuat, sehingga pengunjung tetap dapat melihat ada link di bagian tertentu halaman blog/website.

Contoh penggunaan atribut alt:

<a href="http://bukan-rahasiia.blogspot.com"> <img alt="Tips-Tricks Blogger | SEO Blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dYLQNq6kRnUMVEoA57lFudaklLfbgdKecvmrBuBu-E-DNvW7XfFOj0XVQJmHYC-e-O1T0-JjU4IicEDsgrk9bTm1TOOTwXh_JEFX_FSwymb9bKfF1HBgQo27JaoqMXiqVq_PCw2KlTP5/s1600/header.png"/></a>

Jika gambar belum/gagal termuat, dia akan muncul sebagai link dengan anchor text:

Tips-Tricks Blogger | SEO Blogspot

Okay, itu tadi sekilas mengenai HTML link & Image link, silahkan bereksperimen dengan anchor text, atribut link, dan juga link gambar. Thanks.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Ahmad Khoirul Azmee’s Registered & Protected Blog Entry
http://bukan-rahasiia.blogspot.com/2011/05/html-link-gambar-dan-atribut-penting.html
E2D1M-7W4GV-67ANK
Copyright:All Rights Reserved
Registered:Wed May 11 01:49:31 UTC 2011
Fingerprint:7af41f750aab7a0a698da959449823142cc08f352c0ff741027162dba50a0e18
Title:Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting
http://myfreecopyright.com/registered_mcn/BLYTH-K75HM-MBYTY/May_2011/E2D1M-7W4GV-67ANK

Monday, May 9, 2011

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot

Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel.

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting.

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.

2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:

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

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:

<b:include data='posts' name='breadcrumb'/>

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Enjoy menu breadcrumbs baru di Blog Blogger/Blogspot-mu!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Tuesday, May 3, 2011

Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon

Tutorial cara mengganti text "Older Post", "Home", dan "Newer Post" di Blogger/Blogspot dengan tulisan lain atau gambar (icon)

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

Anda dapat dengan mudah mengubahnya menjadi tulisan lain atau gambar (icon) dengan cara sebagai berikut:

1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".

2. Cari kode yang berwarna merah sebagai berikut:

Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).

expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>

(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:

a. Jika ingin mengganti dengan tulisan lain:

<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.

<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.

<data:homeMsg/>adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.

Contoh:

expr:title=’data:newerPageTitle’>Next</a>
expr:title=’data:olderPageTitle’>Previous</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>

b. Jika ingin mengganti dengan gambar (icon):
Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
contoh:

expr:title=’data:newerPageTitle’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcj8yjmNz71PTdbCD9p41OAWBwd4Dh4BtzfSel_cWtHp_OgqaznJr8b5Ff4NhwxitFGKTo5Orkk0gbCqK3M3b1bBpHHJDtgm_COeXBrDGMNs5EEvrFMDbF0_An9MYWEwE0PwekQOaM1ft/s1600/next.png"/></a>
dan seterusnya......

Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Monday, May 2, 2011

Cara Membuat Daftar Isi (Sitemap) di Blogger/Blogspot

Daftar Isi (Table of Contents) sering pula di sebut sebagai sitemap (peta situs) karena isinya digenerasikan (generated) dari url sitemap feed. Jika sitemap blog di search engine berfungsi sebagai alat untuk mempermudah pemetaan isi blog/website oleh search engine, maka sitemap yang ini berfungsi sebagai alat navigasi dan pemetaan bagi pengunjung/visitor untuk melihat seluruh isi konten atau artikel blog/website dalam satu halaman khusus. Tentunya ini sangat menguntungkan pengunjung dan juga pemilik blog/website dalam usaha meningkatkan jumlah pageview.

Daftar isi kali ini dibuat dengan aturan javascript yang file-nya sudah saya upload dan dapat langsung digunakan. Isi yang ditampilkan dibagi berdasarkan label, sehingga perlu digarisbawahi bahwa setiap posting harus memiliki label. Tanpa label, posting tidak akan termuat di daftar isi. Simak cara membuat label blogger bagi yg belum mengetahui cara buat label..

Cara membuat daftar isi/sitemap blog di blogger/blogspot:

1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).

Dashboard > New Post/Edit Post > Edit Pages > Create New Page

2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain lain.

3. Pada bagian kanan kotak posting klik "Edit HTML".

4. Masukkan script berikut:

<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script>
<script src="http://bukan-rahasiia.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Ganti http://bukan-rahasiia.blogspot.com dengan url blog/website anda.

5. Jika ingin melihat hasilnya klik "preview/pratinjau".

6. Publish post.

7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.

8. Done!

---------------------------------------------------------------
Update:
Buat @Idnay yg komentar dibawah minta tulisan "new" berwarna putih, saya sudah buatkan scriptnya:
ganti: http://yourjavascript.com/18113981113/bukarahasiablog-toc.js
dengan: http://yourjavascript.com/111006011142/bukarahasiablog-toc-putih.js
---------------------------------------------------------------

You now already got a sitemap/table of content page for your blog visitors!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Sunday, May 1, 2011

Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot V2

Fitur Back To Top/Scroll To Top, seperti yang telah dijelaskan dalam Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), adalah fitur navigasi blog yang berfungsi sebagai shortcut agar pengunjung bisa kembali ke bagian atas halaman blog dengan cepat dan hanya dalam satu klik.

Tombol back to Top Blogspot kali ini berjenis melayang (floating) dan berada di bagian pojok kanan bawah. Kodenya pun sedehana dan tidak menggunakan javascript/jquery sehingga waktu muatnya lebih pendek. Script ini dibuat berdasarkan perintah link yang mengacu ke wrapper (#) dengan ditambah aturan CSS position-styling. Easy.

Cara Memasang Back to Top Blogger/Blogspot V2:

1. Copy kode berikut:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>

Anda dapat mengganti title Scroll/Back to Top dengan kata-kata yang diinginkan. Ganti url gambar back to top blog dengan gambar back to top anda, atau copy salah satu dari beberapa gambar "Back To Top" di posting tips-tricks blogger sebelumnya: Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), atau bisa juga googling dengan keyword "back to top button image". Edit ukurannya sesuai dengan besar yang diinginkan, lalu upload. Masukkan url gambar yang telah diupload ke dalam script.

2. Buka dashboard > Design/Rancangan > Klik Add a/Tambah Gadget > Pilih opsi HTML/Javascript

3. Paste/letakkan kode tersebut, lalu save.

Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang menjadikannya melayang.

4. Done!