Senin, 06 Mei 2013

Membuat Daftar Isi

Daftar isi pada blog akan memudahkan pengunjung mencari artikel yang dicari, dengan daftar isi di blog ini akan membuat para pengunjung lebih betah baca-baca di blog kita, karena sudah kita suguhi dengan semua content yang ada di blog kita.
Manfaat lain adanya dafar isi di blog adalah akan membuat mesin pencari menyukai blog kita, yang implikasinya akan mengindeks semua halaman yang kita tampilkan di halaman utama pada daftar isi tersebut
Oke tidak usah berpanjang lebar lagi, bagi sobat blogger yang tertarik untuk memasang daftar isi di dalam blognya, berikut langkah-langkahnya:
1. Login dulu ke blog sobat
2. Kalo sudah login, selanjutnya kalo gak mau susah payah, ada cara gampang , silahkan Klik Tombol di bawah untuk langsung menambah widget ke blog sobat:







Kemudian Atur Posisi Widgetnya dan Tempatkan sesuai keinginan Kalau saya Pasang di bagian Sidebar/kanan.. bisa juga di pasang di bagian footer kalau mau :D Cek Kodenya dan lakukan Pengaturan seperti dijelaskan di bawah.
3. Jika ingin Cara manual juga Ada Kok, Masuk ke Blogger,goto Design/Rancangan Seperti Biasa Tambahkan Elemet dengan klik [Add Page Element atau Add Widget] selanjutnya Pilih [Java Script/HTML] kemudian Copy paste kode di bawah ini:
<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: "350px;" margin="5px" ;>
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://didixsetya.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Widget By: [<a href="http://blog-triks.blogspot.com">blog-triks</a>]

Keterangan:
Untuk kode berwarna merah silakan diganti nilainya sesuai selera sobat
Ganti blog didixsetya.blogspot.com dengan url blog masing-masing :)
var numposts : Jumlah Daftar posting yang ditampilkan
var showpostdate: menampilkan tanggal (false berarti tidak ditampilkan)
var showpostsummary: menampilkan ringkasan posting
var numchar : jumlah karekter post summary

dasar Dasar Html

Sebuah Home Page, Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Bila para pembaca sekalian tidak senang mengutak-atik file HTML pada blogger,itu sebenarnya wajar, apalagi untuk yang pemula (saya juga). Sebab, kemungkinan takut terjadi apa-apa pada blognya (hayo ngaku?). Sebenarnya ga usah takut, Bahasa HTML berbeda dengan Bahasa Pemrogaman yang membutuhkan logika tingkat tinggi(walaupun bentuknya sama-sama rumit), HTML cuma butuh kreativitas kita, kok bisa gimana? Karena keindahan sebuah Home Page tergantung bagaimana kita memadukan warna dan bidang yang di bentuk dari Bahasa HTML tadi.. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR
kode :
<img src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif" border="0" height="17" width="90">
keterangan :
yang warna biru adalah lokasi gambar kamu.
height="17" width="90" adalah ukuran lebar dan tinggi gambar
hasil :


* CARA MEMBUAT LINK
Kode :
<a href="http://blog-triks.blogspot.com" >trik blog </a>
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "trik blog" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href="http://blog-triks.blogspot.com" target="_blank"><img src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif" border="0" height="17" width="90"> </a>
Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://trik-tips.blogspot.com"
Hasil :
trik blog (dibuka pada window yg sama)
(dibuka pada window baru)

* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :
<center>text</center>
Keterangan :
Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU
Kode :
<br>
Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :
<b>text</b>
<i>text</i>
<u>text</u>
Hasil :
Tebal
Miring
Garis Bawah

* MEMBERI WARNA TEXT
<font color="#FF0000"> text </font>
<font color="red"> text </font>
Keterangan :
Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
Hasil :
Merah
biru

* KODE-KODE WARNA
WarnaKode
 #000000
 #999999
 #FFFFFF
 #FF0000
 #00FF00
 #0000FF
 #FFFF00
 #00FFFF
 #FF00FF
 #9900FF
 #FF6600


Kode2 warna selengkapnya bisa dilihat DISINI

* PENULISAN KARAKTER-KARAKTER KHUSUS
Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :
Karakter
Kode
>
&gt;
<
&lt;
&
&amp;
"
&quot;
(spasi)
&nbsp;

Cara Membuat Read more(baca selanjutnya)

Pada Default Blog Tempate postingan akan ditampilkan full memanjang kebawah. Beberapa memang ada , template yang menampilkan postingnnya sebagian,trus kalo mau baca lanjutannya harus klik dulu di link Read More/Baca selanjutnya/apalah istilahnya...Disini masalahnya, Kalo postingan full memanjang kebawah blog kita akan terlihat panjang banget(kalau postingannya panjang),berantakan, dan kurang simple. Ini menjadikan keindahan dan kecantikan blog kita jadi berkurang , jadinya pembacanya pun kurang tertarik/bosan dengan postingannya (nglihat postingannya aja langsung pusing...). Tapi masalah tersebut bisa diatasi. Jika kamu ingin postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (gunakan CTRL+F untuk mencari kodenya) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>


8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>


10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
Selamat Mencoba...

Generator kode Warna Html

Dalam mendesain blog ataupun website,pastinya kita tidak akan terlepas dari gradiasi. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut kode warna HTML. Oleh karena kebutuhan tersebut, saya coba sediakan untuk semuanya generator kode warna HTML berikut. Selamat berkreasi,semoga membuatmu bermakna dan berwarna









































































































































































































Kode warna yang terpilih :

Cara Mudah Mengganti Favicon Blogger Tanpa Mengedit HTML

Mengganti Favicon, mungkin sudah banyak yang tahu caranya, dan blog-triks juga pernah memaparkan caranya disini. Mengapa saya membahasnya lagi? Karena kali ini cara yang akan saya paparkan berbeda, ini lebih mudah dari cara mengganti favicon yang sebelumnya saya tulis disini. Panggantian favicon yang akan saya jelaskan disini tanpa melalui editing HTML, melainkan langsung dari fitur yang dimiliki blogger. Tak usah belama-lama, langsung akan saya jelaskan caranya secara lengkap, silakan disimak :)


  1. Masuk halaman Blogger in Draft, silakan login dengan akun blogger sobat
  2. Di halaman utama terdapat daftar blog sobat, silakan klik Dashboard pada blog yang akan diedit faviconnya


  3. Kemudian klik Edit pada elemen Favicon Setting yang terletak diatas elamen navbar


  4. Akan muncul window baru, yaitu window favicon configuration

  5. Silakan sobat pilih file icon yang ingin dipasang, gunakan file dengan ekstensi .ico karena file yang support adalah file icon .ico . Bagi sobat blogger ingin mengkonversi file JPG, PNG atau file lain ke .ICO dapat sobat lakukan di http://www.icoconverter.com/ atau situs konversi lainnya

  6. Setelah itu klik Save untuk menyimpan setting yang telah dilakukan


  7. Selesai, coba sobat buka blognya, dan favicon sudah berubah susai yang diganti tadi :)

THIS IS FEATURED POST 1 TITLE

THIS IS FEATURED POST 1 TITLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Quas molestias excepturi
THIS IS FEATURED POST 2 TITLE

THIS IS FEATURED POST 2 TITLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Impedit quo minus id
THIS IS FEATURED POST 3 TITLE

THIS IS FEATURED POST 3 TITLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Voluptates repudiandae kon
THIS IS FEATURED POST 4 TITLE

THIS IS FEATURED POST 4 TITLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Mauris euismod rhoncus tortor