Cara Menambahkan Icon Pada Judul Widget/Gadget Blogger

Untuk mendapatkan cara menambahkan icon yang berbeda pada setiap judul widget blogger mungkin terdapat banyak versi. Dan saya akan memberikan cara sesimple mungkin untuk dapat dipahami pembaca. Untuk menggunakan cara yang saya berikan, pastikan template yang kalian gunakan sudah terpasang Font Awesome karena saya akan menggunakan icon dari Font Awesome. Jika kalian belum memasang Font Awesome bisa membaca Cara Memasang Font Awesome pada Blogger.

Jika ingin menambahkan icon diluar font awesome atau menggunakan icon buatan anda sendiri, saya sarankan terlebih dahulu anda menyiapkan sebuah icon atau gambar yang berukuran kira-kira sekitar 15x15 pixel atau lebih. Langsung saja masuk pada point dari topik yang kita bahas.

Simak langkah-langakah yang saya berikan.
1. Pada dashboard blogger kalian pilih Template >> Edite HTML

2. Cari ID Widget yang akan kalian tambahkan icon. Sebagai contoh saya akan menambahkan icon pada widget  Popular Post.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>...</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>...</div>
</b:includable>
</b:widget>

3. Tambahkan kode icon kalian sebelum atau sesudah <data:title/>

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>...</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><i aria-hidden='true' class='fa fa-fire' style='margin-right: 10px;'/><data:title/></h2></b:if>
<div class='widget-content popular-posts'>...</div>
</b:includable>
</b:widget>

Untuk mendapatkan icon dari font awesome bisa kunjungi http://fontawesome.io/icons/ dan yang ingin menggunakan icon buatan anda sendiri bisa menggunakan HTML dibawah ini.

<img src='http://4.bp.blogspot.com/-kK3RzQIzxIA/Us6fhhsYh2I/AAAAAAAAAZ0/FYKre29QEYw/icon.png' style='border:0;padding:0;margin-right:10px'/>

Ganti URL diatas dengan URL icon anda

4. Jangan lupa menambahkan style='margin-right:10px;' untuk memberi jarak antara icon dan judul widget seperti pada langkah 3

5. Pilih Pratinjau untuk melihat hasilnya. Jika kode sudah bekerja dengan semestinya klik Simpan

Saya rasa cukup jelas, jika masih ada yang kurang jelas bisa bertanya dikolam komentar. Terima kasih sudah berkunjung dan semoga bermanfaat.

Continue Reading

Cara Menghapus Akun Adsense Yang Tidak Bisa Di Batalkan

Ternyata untuk menghapus akun adsense cukup mudah. Tetapi untuk beberapa orang mungkin ada yang kesulitan untuk menghapus akun adsensenya, karena tidak ada link Batalkan Akun seperti tutorial yang kebanyakan orang berikan. Ada beberapa alasan kenapa tidak ada link batalkan akun. Biasanya karena mendaftar melalui Admob.

wtfaisal

Kenapa ingin membatalkan akun adsense? karna beberapa orang mungkin sulit untuk mendapatkannya. Jika kalian sudah yakin untuk membatalkan akun adsense anda silahkan ikuti step by step yang saya perintahkan.



1. Masuk ke akun gmail yang terkait dengan Adsense yang ingin anda hapus.



2. Lalu klik link

https://support.google.com/admob/contact/account_cancel

biasanya sudah terisi otomatis data anda.



3. Untuk data yang wajib anda tambahankan, masukan Publisher ID dengan Publisher ID yang ada di akun adsense anda. Untuk melihat Publisher ID anda bisa dengan Masuk akun adsensen anda > Lalu klik Akun > Klik Informasi Akun.

wtfaisal

4. Masukan alasan kenapa anda ingin menghapus akun anda.



5. Jika sudah mengisi semua form makan tunggu kurang dari 48 jam untuk mendaptkan persetujuan membatalkan akun adsense anda.



Contoh email balasan dari tim google yang menerima pengajuan pembatalan akun adsense.

wtfaisal

Terima kasih sudah berkunjung dan semoga bermanfaat.

Continue Reading

LIRIK Death Kanker Over Doze ( DKOD )

SUMBER : D.K.O.D

Continue Reading

Cara Mudah Membuat Slide Show Foto di Blog

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.


Sumber : http://kurniasepta.blogspot.com/2013/03/cara-mudah-membuat-slide-show-foto-di.html

Continue Reading

Cara Membuat Widget Fan Page Facebook Auto Hide di Blog

Kali ini CJH akan membagi tentang Cara Membuat Widget Fan Page Facebook Auto Hide di Blog.

Widget Fan Page Facebook Auto Hide di Blog bisa membantu kawan-kawan blogger untuk menambah space / ruang pada template blog. Sehingga space yang kosong bisa anda gunakan tempat iklan atau yang lainnya. Kenapa demikian ? karena Fan Page Facebook tersebut bisa muncul atau sembunyi lalu muncul kembali.

Penempatan Widget Fan Page Facebook Auto Hide di Blog tepat berada di pojok kanan bawah pada halaman blog kita. Widget Fan Page Facebook Auto Hide di Blog Muncul ketika mouse diarahkan ke bawah atau ke atas halaman. Heheheh, Atas Bawah... apa dia malu yah ampe muncul dan tidak muncul heheheh.

Untuk mempersingkat, inilah Cara Membuat Widget Fan Page Facebook Auto Hide di Blog.
1. Seperti biasanya, anda harus membuka Akun Blog anda sendiri (pinjam boleh asal disetujui, heheheh)
2. Pilihlah Rancangan / Design pada Dasbor Blog Anda (seperti biasa juga nih)
3. Lalu tambahkan Widget (klik add widget / tambah gadget)
4. Pilih mode HTML/Javascript
5. Copy-lah script dibawah ini dan paste-lah pada kotak widget yang tadi anda tambahkan.

<script src="http://ojel88.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: #fff;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 5px ridge #80ff00; display: block;">
<div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;">
<a id="fbcloseslidebox" style="float: right; color: #000; padding: 0pt 2px; border: 1px solid #000; text-decoration: none; font-size: 10px; font-family: Verdana" href="#">Exit</a>
<strong style="color:#000;">Silahkan Anda Like/Suka</strong>

Silahkan Letakkan Kode /Script Fan Page Facebook Anda disini

</div></div>

6. Simpan Widget dan simpan template blog anda.
7. Lihat Hasilnya.

Catatan :

• Untuk yang berwarna biru silahkan anda ganti kata-kata yang anda inginkan.
• Untuk yang berwarna merah Silahkan Letakkan Kode /Script Fan Page Facebook

Sumber :  http://lapo-kita.blogspot.com/2012/04/cara-membuat-widget-fan-page-facebook.html

Continue Reading

Cara Membuat Popular Post Bergerak Kebawah

Hello. Sudah lama saya tidak posting di blog ini lagi. Nah, untuk kesempatan kali ini saya akan berbagi sebuah Tutorial blog tentang "Cara Membuat Popular post Bergerak ke bawah | Tutorial Blog"  .
dari judulnya ajah pasti sudah tau bukan dengan penggunaan tutorial yang satu ini. yakni supaya Postingan yang populer atau yang sering di kunjungi bisa lebih menghemat tempat. karena akan bergerak ke bawah. sobat bisa melihat contohnya di blog saya ini.

Ikuti langkah-langkah di bawah ini :
1. Pertama sobat harus log-in dulu ke blog
2. kalau sobat sudah log-in. lalu masuk ke menu Tata letak.
3. lalu Click Add Gadget , lalu sobat pilih Entri Populer

4. Kemudian Pilih kembali Add Gadget, dan sekarang kita pilih HTML/JavaScript
5. Kemudian Copas ( Copy Paste ) kode di bawah ini

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:340px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:340px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

6.Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya





Suber : http://ademiftah666.blogspot.com/2013/02/cara-membuat-popular-post-bergerah-ke.html

Continue Reading

Cara dapat domain dot com gratis

Domain Dot Com

siang para sahabat pembaca yang budiman. hehehe berjumpa lagi di tulisan sederhana saya kali ini saya akan share tentang bagaimana cara mendapatkan domain gratis dot com dot org dll. ok langsung saja.

sahabat bisa mendapatkan hal tersebut jika sahabat mendaftar di sebuah situs yang menyediakan pendaftaran gratis di KLIK SINI , kemudian referal 9 orang teman maka sahabat akan mendapatkan domain sesuai keinginan sahabat secara cuma-cuma alias free.

ok tunggu apa lagi segera daftrakan blog sahabat, saya juga lagi usaha nih untuk tanda trimakasih sahabat mendapat info ini silahkan daftar disini DISINI untuk domain gratis

ok, demikan infonya semoga bermanfaat :)

UPDATE: ada sahabat komen dibawah katanya sudah dapat 13 referal tapi ga dapet, kesimpulan situs penyedia domain gratis tersebut cuma spam, Tapi apa salahnya mencoba siapa tahu ada keberuntungan. mungkin.

Continue Reading

Belajar Membuat Animasi Dengan Photoshop

Software : adobe Photoshop CS3 - CS4 .. CS2 blom cek udah ada fasilitas animasinya ato belom yaa.. mungkin masih pake Image Ready.

Saya coba buat dasar-dasar nya aja.. atau gimana sih cara buat suatu gambar itu jadi gerak.. belom masuk ke berubah bentuk ya.. cuman gerak aja..
Pembuatan animasi di photoshop ada 2 cara :
1. Import Langsung dari layer ( Make frame from layers - buat yang udah EXPERT )
2. Manual ( ini khusus buat menggerakan benda aja)
Sekarang kita mulai dengan yang manual dulu aja yaa.. dari dasar dulu la..
Pertamax.. hehehe buka dokumen baru :

Buat kotak dengan rectangle marquee tool. Klik Select > Inverse.. lalu warnai dengan warna Hitam Klik Edit > Fill > Black

Sekarang buat lingkaran dengan Elliptical Marquee tool.. ( Sambil tekan tombol SHIFT biar Bener-bener bulet jadinya )..
Warnai dengan Gradient TOol > Radial Gradient. Warna Terserah aja..

Kalo ngikutin nya bener … jadinya kayak gini ..

Sekarang kita gerakkan Bola nya..
Klik Windows > Animation, maka muncul Animation Bar..

Klik Duplicate Selected Frame .. Muncul Frame baru dengan posisi bola yang sama..

Sekarang pindahin bola yang ada di frame 2 ke tepi kiri tengah..

Klik Tween Animation Frame untuk membuat Frame-frame dari posisi bola di atas ke posisi bola di samping secara otomatis.. kalo mau gerakan nya halus.. frame nya banyakin aja.. saya pake 5 frame aja..

Sekarang udah jadi deh.. gerakan dari atas ke samping kiri.. coba aja tekan tombol Play.

Pake cara yang sama .. Sekarang klik frame terakhir.. Klik duplicate selected frame lagi.. Pindahkan bola ke bawah tengah.. lalu buat Tween animation frame.sebanyak 5 juga.. Lalu animasikan bola dari tengah bawah ke tengah kanan.. animasikan lagi..
Untuk yang terakhir jangan sampe kembali ke posisi awal.. tapi buat renggang sedikit..

Klik tombol Play.. Kalo udah Ok save di GIF..
Klik File > Save For Web and Devices

Hasilnya :

Selamat Mencoba…

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… Rank: wait… Traffic: wait… Price: wait… C: wait…

Continue Reading

Cara Membuat Animasi Bergerak GIF Sederhana

Cara Membuat Animasi Bergerak GIF Sederhana Easy GIF Animator 4 Pro. Anda ingin membuat animasi banner seperti di bawah ini? Caranya sangat mudah dan praktis. Dengan software Easy GIF Animator Pro 4, Anda akan dapat dengan mudah membuat animasi bergerak gif sederhana. Hal pertama yang perlu dilakukan adalah membuat banner-banner master yang akan digunakan untuk membuat animasi tersebut.  Banner-banner tersebut dapat Anda buat menggunakan Software Adobe Photoshop_7.0  atau yang lainnya dengan format GIF.

Kalau Anda gunakan Adobe Photoshop, pertama yang harus dilakukan untuk membuat animasi bergerak sederhana GIF adalah membuat Banner Masternya dan mengubahnya ke format GIF. Kemudian Anda dapat mengeditnya dengan program Paint (bawaan windows)  Sehingga Anda akan mendapatkan beberapa Banner yang siap disusun menjadi animasi bergerak sederhana menggunakan program Easy   GIF  Animator Pro_4.

Semakin banyak variasi animasi bergeraknya maka semakin banyak jumlah Banner yang harus dibuat. Sebagai contoh pada Banner animasi seperti di atas,  maka cukup dibutuhkan 2 banner master karena hanya ada 2 variasi

  

Dengan Easy GIF Animator 4 Pro, Anda dapat membuat animasi bergerak GIF sederhana dengan mudah dan disitu Anda juga dapat mengatur Waktu Tampilan tiap-tiap perubahan sesuai yang Anda kehendaki.

Continue Reading

Kode Warna

Cyan #00ffff

Blue #0000ff

Skyblue #abcdef

Darkcyan #008686

Cadetblue #5f9ea0

Midnightblue #191970

Mediumslateblue #7b68ee

Cornflowerblue #6495ed

Lightsteelblue #b0c4de

Lightskyblue #87cefa

Powderblue #bde0e6

Aquamarine #7fffda

Dodgerblue #1e90ff

Royalblue #4169e1

Blueviolet #8a2be2

Indigo #460082

Lavender #e6e6fa

Lightblue #add8e6

Deepskyblue #00bfff

Darkslateblue #483080

Mediumvioletred #071585

Mediumturquoise #4801cc

Mediumorchid #ba55d3

Darkturquoise #00ccd1

Paleturquoise #afeeee

Darkorchid #9932cc

Slateblue #6454cd

Aqua #00ffff

Red #ff0000

Darkred #860000

Indianred #cd5c5c

Firebrick #622222

Lightsalmon #ffa07a

Lightcoral #f08080

Maroon #800000

Crimson #dc143c

Tomato #ff6347

Salmon #fa8072

Coral #ff7f50

Pink #ffc0cb

Hotpink #ff69ba

Deeppink #ff1493

Lightpink #ffb6c1

Mistyrose #ffe4e1

Moccasin #ffe4b5

Peachpuff #ffdab9

Mintcream #f5fffa

Floralwhite #fffaf0

Oldlace #fdf5e6

Thistle #d8bfd8

White #ffffff

Linen #faf0e6

Navy #000080

Snow #fffafa

Orange #ffd000

Orangered #ff4500

Burlywood #deb887

Darkorange #ff8c00

Palevioletred #db7093

Sandybrown #f4a460

Rosybrown #bc8f8e

Brown #a52a2a

Peru #cd853f

Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f
Lightpink #ffb6c1
Navojowhite #ffdead
Darksalmon
Khaki #f0e68c
Aquamarine
Chocolate #d2691e

Continue Reading

Tips Membuat Label Cloud Tanpa Edit HTML

Kali Ini Kita akan membuat label cloud tanpa edit html.

langsung saja silahkan baca tutorial dibawah ini

Seperti Biasa :
1. login ke akun Blogger anda
2. Masuk Ke Rancangan Elemen Laman
3. Kemudian Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy code dibawah ini

<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0x003483&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/CJH'style='12'&gt;Catatan Jalan Hidupku&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Domain'style='12'&gt;Domain&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Download'style='12'&gt;Download&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Kisah%20Isfiratif'style='12'&gt;Kisah Insfiratif&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Info'style='12'&gt;Info&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Tips%20Dan%20Trick%20Cinta'style='12'&gt;Tips Dan Trick Cinta&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Tips%20Trick%20Facebook'style='12'&gt;Tips Dan Trick Facebook&lt;/a&gt;

&lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Tutorial'style='12'&gt;Tutorial Blogger&lt;/a&gt;

&lt;/tags&gt;" type="application/x-shockwave-flash" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id="tagcloud" bgcolor="#ffffff" name="tagcloud" height="230" width="250"></embed>

Ket :

• Ganti Kode : http://www.catatanjalanhidupku.co.cc/search/label/CJH dengan link tujuan kamu
• Lalu ganti “Catatan Jalan Hidupku” dengan judul yang ingin ditampilkan.

• Untuk Menambahkan Link tujuan Lainnya tinggal di Copy aja kode &lt;a href='http://www.catatanjalanhidupku.co.cc/search/label/Domain'style='12'&gt;Domain&lt;/a&gt; dibawahnya.

6. Save dan lihat blog anda

Continue Reading

Cara Membuat Artikel Terkait Dengan Thumbnail

Sebelumnya di blog ini telah dibahas mengenai cara memasang widget artikel terkait di blog dan cara memasang widget artikel terkait dengan scroll box. Namun widget tersebut tanpa thumbnail, jadi hanya menampilkan judul-judul artikelnya saja. Kali ini akan dibahas tentang cara memasang widget artikel terkait denganthumbnail.

Widget artikel terkait dengan thumbnail ini cukup menarik karena disertai dengan gambar. Gambar yang muncul diambil dari salah satu gambar yang ada di artikel yang dimaksud. Widget artikel terkait merupakan daftar link dari judul-judul artikel suatu blog yang berlabel sama dengan artikel yang sedang dibaca.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

5. Copy kode berikut letakkan dibawah kode tersebut.

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

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

<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

5. Copy kode berikut dan paste di atas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script type='text/javascript'>

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

6. SIMPAN

7. Klik Lihat Blog untuk melihat hasilnya.

• Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
• Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
• Bila ingin mengganti default thumbnail, edit kode berikut  var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
• Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2"; ( Untuk mengganti kode warna dengan selera anda klik sini )

Baca Selengkapnya disini : http://lanoblog.blogspot.com/2011/10/cara-membuat-artikel-terkait-dengan_02.html#ixzz1m5JK1Leu

Continue Reading

Pasang Emoticon di kotak komentar

Dengan memasang emoticon dikotak komentar diblogger mungkin akan lebih mempercantik penampilan dikomentar blog anda dan pegunjung pun lebih tertarik melihatnya berikut cara membuatnya...simaklah...semoga berhasil..kode emoticon ini saya ambil dari blog O-OM.berikut ada sedikit gambaran untuk emoticonnya...

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Klik Expand Widget Template.

5. Cari Kode </body>.Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

6. Letakkan kode dibawah diatas kode tersebut.

<script src='http://oom.blog.googlepages.com/smiley.js' 
type='text/javascript'/> 

7.Cari Kode berikut ini.

<p class='comment-footer'>

8. Letakkan Kode dibawah ini dibawah kode <p class='comment-footer'>.


 <b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> 
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> 
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> 
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> 
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> 
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> 
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> 
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> 
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> 
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> 
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> 
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> 
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> 
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> 
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> 
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> 
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> 
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> 
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> 
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> 
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> 
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> 
=))</b>

9. SIMPAN

Baca Selengkapnya disini : http://lanoblog.blogspot.com/2011/10/pasang-emoticon-di-kotak-komentar.html#ixzz1m5HnlGmO

Continue Reading

Membuat halaman web menjadi lebih baik

Aspek yang diukur dari suatu halaman web adalah proses loading yang cepat, tampilan yang menarik, dan kemudahan dalam navigasi. Saya akan membahas satu persatu.

Kecepatan Proses Loading
Sebuah halaman standar tanpa grafik, seharusnya saat loading tidak lebih dari 3 sampai 7 detik. Untuk meload sebuah grafik seharusnya tidak boleh lebih dari 9 detik. Jadi total halaman dengan grafik adalah sekitar 15 detik. Sebagai contoh yang baik yahoo.com, halaman utama mereka diload sekitar 8 detik dengan modem 28.8k.
Untuk mengurangi waktu tersebut, anda perlu berpikir ekstra. Sebagai contoh, jangan meletakkan animasi flash berlebihan, background terang, lebih dari tiga banner dalam satu halaman, dsb. Banyak pengguna internet yang mempunyai desain tampilan yang menarik dan isi yang bagus.
Juga kurangi ukuran dari image anda, banyak image tampak sama walaupun anda telah mengurangi separuh dari warnanya. Anda bisa menggunakan software seperti Paint Shop Pro atau Photoshop.

Tampilan yang Menarik
Jangan sampai menaruh banner lebih dari tiga dalam satu halaman, siapa orang yang mau melihat banyak banner dalam satu halaman.
Kedua, bila halaman anda penuh berisi text jangan sampai membuat background dengan grafik atau image karena hal ini menyebabkan text sulit dibaca.
Ketiga, hindari background berwarna hitam, kecuali halaman anda berhubungan dengan horror atau misteri. Background hitam juga mempunyai kesan 'negatif' bagi halaman anda.

Kemudahan dalam Navigasi
Halaman anda harus jelas, jangan menggunakan tabel atau frame yang berbatas. Gunakan warna yang sejuk bagi mata. Juga jangan meloncat tiba-tiba dari halaman yang gelap ke halaman yang super terang. Berilah keterangan pada bagian yang sekiranya sulit atau susah dimengerti. Berilah beberapa option ketika pertama kali pengunjung masuk tetapi jangan berlebihan. Buatlah menu dan submenu serta jangan meletakkan apapun pada suatu menu yang besar. Cobalah untuk tidak mengharuskan pengunjung untuk mengklik pada banner,iklan dan sebangsanya, lebih baik anda gunakan kata2 'Click on our sponsor'
Letakkan posisi diri anda sebagai seorang pengunjung, pelajari apa yang mungkin mereka sukai dan yang tidak. Bertindaklah sebagai seorang human ketika anda menerangkan dalam text, bukan sebagai buku. Selanjutnya tunjukkan pada pengunjung bahwa anda selalu memeriksa halaman anda dan yakinkan bahwa mereka harus kembali lagi pada lain waktu.

Sebagai kesimpulan, untuk membuat halaman menjadi lebih baik :
1. Jangan meletakkan animasi atau image berlebihan
2. Jangan menggunakan background image
3. Isi yang bermutu
4. Jangan menggunakan lebih dari tiga banner dalam satu halaman
5. Hindari menggunakan background hitam
6. Kurangi ukuran image dengan mengurangi warna
7. Gunakan desain yang sama dalam setiap halaman anda
8. Jangan menggunakan tabel atau frame berlebihan
9. Gunakan menu dan submenu yang sistematis
10. Gunakan pendekatan personal, seolah anda tahu pengunjung
11. Letakkan posisi anda sebagai seorang pengunjung

Continue Reading

Cara Membuat Widget Berdampingan

Selamat siang semua, dalam kesempatan kali ini saya akan membahas tentang bagaimana cara membuat widget berdampingan

bagaimana cara membuat widget berdampingan, caranya sangatlah mudah kalian tinggal menyelipkan beberapa kode di awal dan akhir script widget. Tepatnya kode seperti ini :

<table><tr>
<td>kode widget anda</td>
<td>kode widget anda</td>
</tr></table>

Saya sendiri menggunakannya agar tidak terlalu memakan banyak tempat di blog ini dan agar terlihat lebih rapi, tapi kayaknya ngga rapi, hehe. Jika kalian ingin memasang lebih banyak lagi widget yang berdampingan, kalian bisa menyalin dan menempel kode <td>kode widget anda</td> dan isi lagi kode widget yang ingin dibuat berdampingan. Namun perlu ingat juga, sesuaikan juga lebar sidebar atau halaman post kalian agar tidak bertabrakan atau ukuran yang tidak sesuai dan malah menjadi tidak rapi.

Selamat Mencoba.

Continue Reading

Cara membuat Scroll Box

Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :

JUDUL ARTIKEL
Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

Berikut Kode untuk scroll box diatas :

<div align="center">

<table width="250" border="1">

<tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>

<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>

</table>

</div>

Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :

TIPS DAN TRIK CINTA

Tips Dan Trik Menghadapi Kekasih Yang Sedang Bad Mood Tips Motivasi mario teguh tentang CINTA 10 Kalimat Yang Buat Pasangan Amat Bahagia Inilah Penyebab Seseorang Susah Mendapatkan Pacar Tanda Terjebak Hubungan Tak Pasti 7 Alasan Sahabat Lebih Penting Dari Pada Kekasih Tips Memberikan Hadiah Yang Unik Untuk Pasangan Dihari Spesial 5 Tips Jitu Agar Wanita Mengejar Anda 5 Kriteria Wanita Idaman Di Mata Pria Ciri Pria Yang Benar Benar Punya Rasa Cinta Ciri Ciri Wanita Dambaan Pria 5 Cara Ngegebet Cewek Yang Lebih Tua Tips Menjaga Cinta Agar Tetap Awet Dan Langgeng Inilah Alasan Kenapa Banyak Remaja Bercinta Didalam Tips Agar Kegagalan Cinta Tidak Terulang Kembali

Berikut Kode untuk scroll box diatas :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">

<ul>

<li><a href="http://www.catatanjalanhidupku.co.cc/2012/02/tips-dan-trik-menghadapi-kekasih-yang.html">Tips Dan Trik Menghadapi Kekasih Yang Sedang Bad Mood</a></li>

<li><a href="http://www.catatanjalanhidupku.co.cc/2012/02/tips-motivasi-mario-teguh-tentang-cinta.html" target="_new">Tips Motivasi mario teguh tentang CINTA</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/10-kalimat-yang-buat-pasangan-amat.html">10 Kalimat Yang Buat Pasangan Amat Bahagia</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/inilah-penyebab-seseorang-susah.html">Inilah Penyebab Seseorang Susah Mendapatkan Pacar</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tanda-terjebak-hubungan-tak-pasti.html">Tanda Terjebak Hubungan Tak Pasti</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/7-alasan-sahabat-lebih-penting-dari.html">7 Alasan Sahabat Lebih Penting Dari Pada Kekasih</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-memberikan-hadiah-yang-unik-untuk.html">Tips Memberikan Hadiah Yang Unik Untuk Pasangan Dihari Spesial</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-tips-jitu-agar-wanita-mengejar-anda.html">5 Tips Jitu Agar Wanita Mengejar Anda</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-kriteria-wanita-idaman-di-mata-pria.html">5 Kriteria Wanita Idaman Di Mata Pria</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/ciri-pria-yang-benar-benar-punya-rasa.html">Ciri Pria Yang Benar Benar Punya Rasa Cinta</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/ciri-ciri-wanita-dambaan-pria.html">Ciri Ciri Wanita Dambaan Pria</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-cara-ngegebet-cewek-yang-lebih-tua.html">5 Cara Ngegebet Cewek Yang Lebih Tua</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-menjaga-cinta-agar-tetap-awet-dan.html">Tips Menjaga Cinta Agar Tetap Awet Dan Langgeng</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/inilah-alasan-kenapa-banyak-remaja.html">Inilah Alasan Kenapa Banyak Remaja Bercinta Didalam</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-agar-kegagalan-cinta-tidak.html">Tips Agar Kegagalan Cinta Tidak Terulang Kembali</a></li>

</div>
</div>
</td></tr>
</tbody></table>
</div></div></div></td></tr>
</table></div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna yang ada disebelah samping halaman ini. 

Dan cara penulisan  link untuk daftar seperti diatas, silahkan anda lihat artikelnya di : http://www.carabuatwebgratis.com/2011/03/penggunakan-atribut-hyperlinks.html

Demikian cara membuat scroll box,

Continue Reading

Cara Menaruh Like Facebook Berada Di Pojok Bawah

karna kali ini saya lagi gak ada kerjaan dari pada bengong mendingan ngebloging.
postingan kali ini membahas tentang posisi yang tepat untuk like facebook yang berada tepat di pojok bawah blog contoh seperti di blog saya ini lohh..
bisa juga anda ganti dengan scrip iklan atau scrip yang lainnya.

langsung saja cara pembuatnya
1.Log In Ke blogger.com lalu Klik Tata Letak --->> Edit HTML

2.Cari Kode  ]]></b:skin>  Supaya lebih mudah Cari dengan menggunakan tombol ctrl + f

3.Kalo sudah ketemu taruh kode di bawah ini tepat di atas kode ]]></b:skin> :


#trik_pojok { position:fixed;_position:absolute;bottom:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan :
Text yang dicetak Biru adalah posisinya, jika ingin di posisi pojok kiri bawah tinggal text "right" diganti dengan "left". Begitu pula tulisan "bottom", jika ingin di posisi atas bisa diganti dengan "top".

4.Selanjutnya cari kode </body> Dan letakan kode berikut di atasnya :

<div id="trik_pojok">

Letakkan kode like Facebook atau kode Script lainnya disini

</div>


Ganti tulisan yang berwarna hitam tebal dengan Kode like facebook atau script yang lainnya .

Selesai klik Save.

Continue Reading

Cara membuat widget melayang pada blog

Cara membuat widget melayang pada blog. Terutama yg akan blogtegal bahas yakni membuat widget melayang pada pengguna blogspot, manfaat dari widget melayang itu sendiri banyak, biasanya di gunakan untuk ditempati iklan berbasis PPC atau iklan yg begitu penting yg sangat terbatas waktu promosinya yang di maksudkan agar pengunjung tahu bahwa ada bisnis yang penting sekarang ini.
Widget melayang ini bisa kita atur tata letaknya entah mau d letakan sebelah kiri, kanan, atas maupun bawah pada posisi blog, nanti akan awak terangkan di bawah, hokey :d
Untuk tampilan besar kecilnya ukuran widget melayang ini tergantung pada isi yang akan kita tempatkan.
Jika widget melayang ini kita tempati iklan berbasis PPC, maka ukuran-y akan menyesuaikan dg ukuran iklan, untuk contohnya bisa di lihat pada pojok kanan atas di blogtegal.com ini.
Bagaimana apakah kamu tertarik untuk membuatnya? Jika ya mari kita lakukan penelitiannya hehehehe. . . . . .
Silahkan copi paste script di bawah ini pada widget HTML/Javascript.
Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:

• masuk ke dasboard blog kamu.
  
• pilih Rancangan
  
• pada elemen halaman klik ''Tambah widget''
  
• Dan pilih Widget HTML/Javascript
  
• kemudian paste-kan script di bawah ini.
  
• dan Simpan

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> silahkan tempatkan kode iklan atau banner atau teks atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Perhatikan pada tulisan yang berwarna ungu pada script di atas, di situ berisi tentang pengaturan tentang posisi, background,border widget melayang tersebut. Atur sesuai dg keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan.

Continue Reading

Cara Membuat Daftar Isi Per Label dengan Sroll Box

Untuk membuat daftar isi per label dengan scroll box di sidebar blog, kita dapat menggunakan dua cara. Cara yang pertama adalah dengan membuatnya secara manual. Sedangkan cara yang kedua kita bisa menggunakan sebuah script. Setiap cara memiliki kelebihan dan kekurangannya masing-masing.

Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog.

Sedangkan jika kita menggunakan sebuah script, maka waktu yang diperlukan akan lebih singkat. Namun, pemasangan script ini berpotensi memperlambat loading blog. Script ini saya dapat dari Blog Viky dengan perubahan di bagian scroll box-nya. Dengan script ini kita dapat membuat daftar isi berdasarkan satu label saja atau beberapa label sekaligus. Script ini akan menempatkan posting terbaru pada urutan teratas.

Untuk membuat daftar isi berdasarkan satu label tertentu saja, silakan perhatikan langkah-langkahnya di bawah ini.

1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.

* width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
* height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
* border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
*

menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan
.
* Ganti klikmunadi.blogspot.com dengan alamat blog Sobat.
* Ganti Jejaring%20Sosial dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.

3. Klik tombol SIMPAN.

4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.

5. Klik tombol SIMPAN.

Continue Reading