Membuat Daftar Isi pada Halaman Blogger Blogspot

Daftar Isi Blogspot ? apakah di perlukan, bagi saya tentu aja di perlukan, agar pengunjung web blog dapat lebih mudah mengakses halaman-halaman yang ada , apalagi jika blog yang kita kelola sudah memiliki banyak artikel.

Pada situs-situs blog dari blogger atau blogspot, ada beberapa trik menampilkan daftar isi blog baik melalui widget sidebar, entry post atau dari jenis halaman. Post kali ini akan mengungkap bagaimana membuat halaman daftar isi (Table of Content) pada halaman blogger. Dengan memanfaatkan javascript yang bersumber dari http://bloggergadgets.googlecode.com , anda dapat menaruhnya pada isi artikel di halaman blogspot anda. Kode sumber hasil tweak saya dapatkan dari situs www.bloggerplugins.org , dengan tweak tersebut anda dapat menampilkan daftar hingga 500 judul artikel pada halaman tersebut.

Berikut ini beberapa kelebihan yang ditawarkan dari versi tweak yang dibuat oleh admin situs diatas :
1. Dapat menampilkan hingga 500 judul artikel.
2. Ditampilkan dalam bentuk tabel dengan 3 kolom dan memiliki opsi sorting pada ke tiga kolom tersebut.
3. Contoh hasil dari halaman daftar isi ini, dapat anda lihat di halaman ini.

Langkah 1 - Buat Halaman dengan judul yang anda inginkan.

Copy paste kode dibawah ini dalam mode edit HTML pada halaman tersebut.

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>


Kemudian Publish halaman tersebut. Halaman ini sudah dapat memuat daftar isi blog anda, hanya saja tampilan tabel nya belum tersusun baik. Agar tabel tersebut tersusun baik, anda harus membuat pengaturan CSS bagi tabel ini. Silahkan ikuti tahapan-tahapan tersebut dibawah ini.

Langkah 2 - Menambah Parameter CSS Blogspot anda

Buka Dashboard anda, jika anda sudah menggunakan User Interface Blogger terbaru, silahkan cari dan buka Template, dan setelah itu buka Customize. Selanjutnya pilih Advanced >> Add CSS

Tambahkan kode dibawah ini ke kotak CSS tersebut :

#bp_toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Lanjutkan Membaca ...

Menampilkan Feed Post untuk kategori tertentu pada blogspot

Anda ingin memajang feed kategori tertentu yang anda inginkan untuk di display pada area widget sidebar anda. Ikut post ini secara seksama dan praktekkan pada blogspot anda. Anda dapat melihat contoh hasil dari script ini pada Sidebar Tab5.

Langkah 1: Tentukan Kategori yang ingin feednya ingin anda tampilkan.

http://UrlBloganda/feeds/posts/default/-/Your-category-name

Contoh :

http://Jabotabekinfo.blogspot.com/feeds/posts/default/-/Muallaf

Langkah 2: Tambahkan Widget ke Blog

Buka Dashboard blog anda, klik Design, Layout >> Add a Gadget >> HTML/JavaScript

Lalu paste dan sedikit edit pada script dibawah ini:


<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":" FEED-LINK-Dari-Langkah1-Diatas"},
"hideHeader":"false","height":"","count": 5 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://jabotabekinfo.blogspot.com" target="_blank">Widgets</a> </div>
<noscript>Browser anda tidak mendukung bagi eksekusi Javascript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0LTbJbBOILEDOljV5NDD0VwKShpbX4il0pltNpx1kExCLLK68GHPbbwwa6RJXh5VtPWnSVmyWI5qj8fsiQQKx1OXExTViEmFQ4-hXcpRvLKjahDBDdSyPy0zp3K7nqMgYgkeT67yBLM/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>


Catatan : Anda dapat merubah / menambahkan berapa banyak feed artikel yang ingin anda tampilkan dengan merubah Jumlah Count yang standar dari script ini berjumlah 5.

Selesai dan lihat hasilnya.

Lanjutkan Membaca ...

Simpan Javascript (.js) di blogger-blogspot

Anda dapat menyimpan script Javascript anda langsung template blogspot anda. Ketika anda ingin menaruh javascript pilihan anda pada blog blogger anda, anda hanya perlu merubah sedikit script pembuka dari kode javascript tersebut. Mengapa metode ini yang harus anda pilih ? karena ini bebas bandwith dan yang lebih penting lagi adalah, akan mempercepat proses loading blog anda.

Berikut ini adalah langkah-langkah untuk mengkonversi javascript agar dapat di host di blogger dan tentunya dapat di eksekusi oleh blogspot :

1. Download atau copas file javascript yang ingin anda tempatkan ke blogger.
2. Ganti Script pembuka file javascript dari kode1 ke kode2
   Kode1:
   <script src="JavaScript File" type="text/javascript">

   Kode2:
   <script type='text/javascript'>
//<![CDATA[
<-- Javascript (.js) File Code </script>
//]]&gt;
</script>

3. Buka file javascript tersebut dan copy paste seluruh isi teks dari javascript tersebut
   menggatikan tulisan yang dibuat bold diatas
   
4. Simpan Template anda, dan sekarang file javascript tersebut sudah tersimpan di blogger anda dan dapat di eksekusi.
   

Jika anda, tetap ingin menyimpan diluar blog anda dan menggunakan layanan google yang lain yaitu google code, saya sarankan untuk mencoba DROPBOX, karena berdasarkan pengalaman saya, akses ke DROPBOX akan jauh lebih cepat dibanding ke google code.

Lanjutkan Membaca ...

Membuat Auto ~Read More~ Jump Breaks di blogspot anda

Membuat Auto Link "Read More" (Jump Breaks) ke artikel terkait pada blog di blogspot anda adalah merupakan salah satu fitur blogger. Dengan memanfaatkan ini, jika template anda tidak mendukung "pemotongan kalimat" pada artikel untuk di tampilkan oleh halaman utama anda, anda bisa membuatnya secara manual. Link Read More ke artikel terkait ini juga akan ditampilkan pada halaman "search/label/" dan juga halaman arsip tanggal, bulan dan tahun. Pemotongan kalimat pada artikel (Jump breaks) dimaksudkan untuk kemudahan navigasi pengunjung blog anda. Juga mempercepat waktu untuk memuat halaman, Pengunjung dapat memilih artikel mana yang hendak mereka baca. Disamping itu juga, mencegah anda memotong bagian artikel yang ditampilkan dihalaman utama secara manual saat mengedit dokumen, sehingga anda tidak perlu kuatir jika suatu waktu anda lupa melakukannya.

Keunggulan Link Auto Read Mode Paul Crowe

Saya menggunakan script dari Paul Crowe, yang akan secara otomatis mengubah artikel menjadi 'read more' pada ringkasan halaman utama blog anda dengan tambahan image thumb. Berikut ini adalah beberapa fiturnya :

• Memotong artikel panjang anda dengan beberapa baris untuk ditampilkan di halaman utama dan beberapa halaman lain dan secara otomatis memberikan link ke artikel terkait.
• Gambar pertama dari artikel ditampilkan dgn ukuran thumbnail dan ditampilkan di samping ringkasan.
• Anda bisa mengatur berapa banyak teks ditampilkan dalam ringkasan.
• Anda dapat memilih ukuran thumbnail.
• Semua artikel sebelumnya akan diperlakukan sama sehingga anda tidak usah membuka arsip-arsip blog anda.
• Halaman lain seperti pada halaman label dan halaman arsip akan mengikuti seperti pada halaman utama

Langkah-langkah Membuat Membuat Auto ~Read More~ Jump Breaks secara Manual

Langkah 1 :

Log in ke Dashboard blog anda dan Navigasi ke Layout > Edit HTML.

Langkah 2 :

Termukan kode Berikut

</head>

Langkah 3 :

Cari kode dan tambahkan kode dibawah sebelum (diatas) tag . Note : Jika template anda mendukung perangkat Mobile, tempatkan script Javascript ini pada bagian awal javascript pada bagian :

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' >
</script>


Keterangan Pengaturan diatas :

Kode pada tulisan biru mengatur tentang bagaimana ringkasan artikel ditampilkan. Jika artikel mempunyai image, thumbnail image akan ditampilkan disamping ringkasan. Berikut ini keterangannya :

summary_ noimg= 430; --> Panjang ringkasan jika artikel tidak memiliki thumbnail.
summary_img = 340; --> Panjang ringkasan jika artikel memiliki image, image di konversi ke ukuran thumbnail.
null_thumb_height = 120; --> Tinggi Pixels thumbnail.
null_thumb_width = 120; --> Lebar Pixels thumbnail.

Langkah 4 :

Langkah selanjutnya, temukan bagian berikut dari kode pada body blog anda. (Gunakan kombinasi tombol Ctrl + F untuk mempercepat pencarian). <data:post.body>

Langkah 5 :

Kemudian ganti kode <data:post.body> dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>
<a expr:href='data:post.url' >Read more ... </a>
</span>
</b:if>
</b:if>


Anda bisa rubah tulisan "Read More..." warna biru diatas dengan nama lain, Misal : Baca selengkapnya ... , Baca Artikel .... dan lain-lain.

Langkah 6 :

Klik Simpan Pengaturan Template. Jika terjadi error, itu menandakan adanya bagian yang tidak terinput.



Sumber : http://bloggedtips.blogspot.com/2011/12/insert-automatic-read-more-jump-breaks.html

Lanjutkan Membaca ...

Penggunaan Meta Tag Dinamis oleh para Blogger wordpess sangat bermanfaat bagi blog tersebut agar halamannya cepat masuk ke SERP Google (Search Engine Result Page), sehingga langkah-langkah ini nantinya akan sangat berpengaruh pada SEO (Search Engine Optimation) blog anda. Dengan menambahkan script dibawah, setiap posting artikel yang anda lakukan akan memiliki meta deskripsi yang berbeda antara satu posting dengan posting lainnya dan dilakukan secara otomati atau dengan kata lain, meta deskripsi dan keyword akan ter-generate secara otomatis untuk setiap posting. Dengan demikian, script dibawah sudah dapat menjadi solusi, setidaknya mengurangi gap antara blog berbasis wordpress dan blog berbasisi blogspot. Silahkan lakukan langkah-langkah seperti yang tercantum dibawah ini.

Cara Tambah Meta Tag Dinamis pada blogspot

Note: Sebelum melakukan perubahan apapun pada template, Buat backup template blogspot anda terlebih dahulu.

Langkah 1 :Log in ke Dashboard blog anda dan Navigasi ke Layout > Edit HTML.

Langkah 2 :Termukan kode Berikut

<title><data:blog.pageTitle/></title>

Ganti dengan Kode dibawah ini

<b:if cond='data:blog.url == &quot;http://alamatblogsobat.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='description' content='isi dengan deskripsi untuk homepage blog'/>
<meta name='keywords' content='isi dengan kata kunci untuk homepage pisahkan dengan koma'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

Langkah 4 :Simpan Template dan Penambahan Meta Tag Selesai

Sebaiknya Tambah Juga Beberapa pengaturan Meta Tag dibawah ini

<meta content="all-language" http-equiv="Content-Language" />
<meta content="Global" name="Distribution" />
<meta content="Indonesia" name="geo.country" />
<meta content="tempat tinggal sobat" name="geo.placename" />
<meta content="nama sobat" name="author" />
<meta content="all" name="robots" />
<meta content="all" name="googlebot" />
<meta content="all" name="msnbot" />
<meta content="all" name="Googlebot-Image" />
<meta content="all" name="Slurp" />
<meta content="all" name="ZyBorg" />
<meta content="all" name="Scooter" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="true" name="MSSmartTagsPreventParsing" />


Lanjutkan Membaca ...

Cara Tambah Breadcrumb Untuk Mudahkan Navigasi

Sangat Bermanfaat Untuk Meningkatkan posisi SERP dan SEO Blog Anda

Breadcrumb atau breadcrumbs adalah suatu cara bagi bloger untuk memudahkan navigasi pengunjung saat mengunjungi blog yang dimiliki. Banyak pendapat para pakar blogging bahwa penggunaan breadcrumbs ini juga bermanfaat untuk meningkatkan SEO bagi blog pemasangnya, namun demikian dengan keberadaan breadcrumbs ini, yang paling penting adalah bagaimana pengunjung blog lebih leluasa dalam menavigasi blog tersebut. Umumnya Breadcrumbs terlihat seperti berikut ini:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Langkah-langkah menambah Breadcrumbs dalam Blogger (Blogspot)

Note: Sebelum melakukan perubahan apapun pada template, Buat backup template blogspot anda terlebih dahulu.

Langkah 1 : Log in ke Dashboard blog anda dan Navigasi ke Layout > Edit HTML.

Langkah 2 :Termukan kode Berikut

<b:includable id='post' var='post'>

Taruh kode dibawah ini dibawah Kode diatas

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

Langkah 3 :Termukan kode Berikut

<b:includable id='main' var='top'>

Ganti dengan Kode dibawah ini


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<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"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<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>
<b:includable id='main' var='top'>


Langkah 4 :Termukan kode Berikut

]]></b:skin>

Ganti dengan Kode dibawah ini


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



Langkah 5 :Simpan Template dan Pembuatan Breadcrumb selesai

Jika Anda menggunakan beberapa label untuk satu posting, Breadcrumb hanya menampilkan label terakhir yang anda ambahkan, sehingga diletakkan label yang anda inginka di akhir dalam posting anda.

Sumber: http://bloggerhowtotips.blogspot.com/2010/06/how-to-add-breadcrumbs-in-blogger-to.html

Lanjutkan Membaca ...

Tambah Font ke Blogspot anda

Pengin tambah variasi font pada blog berbasis blogger yang anda miliki ? Penambahan font ke blogspot anda menjadi mungkin dengan menggunakan Google Font API. Penambahan fitur ini tergolong sederhana, yaitu hanya 1 langkah penting untuk meload font tambahan pada bagian <head></head> blogspot anda.

Ikuti perintah-perintah berikut untuk menyertakan font-font baru ke blogspot anda :

1. Kunjungi Google Fonts Directory.
2. Pilih jenis font yang anda sukai dan ingin anda gunakan.
3. Klik pada tab " Get the code ".

4. Tandai pilihan pada checkboxes untuk beberapa metode yang bisa digunakan, jika masih belum paham, gunakan metode standar, namun jika sudah paham CSS, bisa gunakan salah satu metode dibawah. Selanjutnya copy kode script tersebut untuk dimasukkan kode script sebelum tag </head> blog anda.

5. Selanjutnya buka dan Edit HTML blogger anda
Blogger > Design > Edit HTML. Lalu cari kode pada script blog anda. Kemudian paste script yang anda copy dari Google Font sebelum kode head penutup diatas.

6. Untuk mengaktifkan font tersebut dibagian manapun blog anda, anda hanya cukup memasukkan nama font tersebut didalam kode perintah style.

Jika digunakan pada post anda, gunakan script span dibawah :

<span style="font-family: iceland; font-size: 30px;"></span>

Digunakan untuk mengganti font untuk merubah tampilan blog, dapat digunakan dengan perintah :
<div style="font-color: orange; font-family: iceland; font-size: 30px;">
.</div>

* Note : Sesuaikan dengan jenis font yang anda pilih

Browser compalitibity

API Google Font compatible dengan browsers berikut:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Lanjutkan Membaca ...