D3554M: Tips blog

Tampilkan postingan dengan label Tips blog. Tampilkan semua postingan

Kamis, April 18, 2013

0 Blogspot Gratis Tapi Punya Batas (Limit)

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Blogspot Gratis tapi punya batas (Limit) dan harus diperhatikan oleh penggunanya. Blogger.com sebagai pengelola blogspot milik Google awalnya memang diperuntukkan sebagai blog pribadi dengan memberikan ruang yang cukup untuk sebuah blog pribadi.

Namun perkembangan dunia blogging seakan memberi batasan tipis antara website (situs) dan blog. Blog bukan bersifat sebagai “catatan pribadi” online lagi, melainkan bisa sebagai sarana bisnis online, jejaring sosial, berita, dan lain-lain.

Bermain di Blogger, akan terlihat banyak limit "batas" penting yang benar-benar sangat membatasi. Beberapa informasi tentang batasan account Blogger dapat dibaca, berikutnya.

What are the limits on my Blogger account?

We try to give you a lot of room to play here on Blogger, so you'll see that a lot of the important "limits" here aren't really very limiting. But just in case you were wondering, here is some information about about what a single Blogger account will hold.

Batas (limit) penggunaan Blogspot

Jumlah Blogspot yang dapat dibuat: Pengguna blogspot dapat memiliki hingga 100 blog per akun (dengan 1 email Google).
Jumlah posting: Tidak ada batasan pada jumlah posting pada satu blog. Artikel akan disimpan pada akun (kecuali dihapus secara manual) terlepas dari apakah Anda mempublikasikan atau tidak. Namun batasan pem-publikasi-an sehari, secara normal adalah 80 artikel/hari, lebih dari itu akan muncul kode verifikasi bukan spam.
Ukuran Tulisan: Artikel posting tidak memiliki batas ukuran tertentu, tapi posting untuk halaman awal (homepage) dan halaman arsip dibatasi.
Ukuran Halaman: Halaman depan (homepage) atau halaman arsip terbatas pada 1 MB. Jadi jika Anda mencoba membuat ratusan posting pada halaman depan Anda, mungkin mendapatkan kesalahan penerbitan "006 Please contact Blogger Support." Menurunkan jumlah posting yang ditampilkan di halaman depan dan arsip adalah cara memperbaiki hal ini. Selain itu akan membuat awal loading blog lebih cepat juga.
Jumlah Komentar: Posting dapat memiliki sejumlah komentar. Namun, jika Anda memilih untuk menyembunyikan komentar di blog, semua komentar yang sudah ada akan tetap disimpan pada akun Anda.
Jumlah Gambar: Sampai dengan 1 GB total penyimpanan, bersama dengan Picasa Web
Ukuran Gambar: Jika Anda posting gambar melalui Blogger Mobile ada batas 250K per gambar.
Anggota Tim untuk mengelola blogspot: Dibatasi 100 anggota per blog.
Jumlah Label: Sampai 2000 label unik per blog dan 20 label per posting.
Deskripsi Blog: Dibatasi sampai 500 karakter, tanpa HTML. Menambahkan karakter tambahan atau HTML dapat menyebabkan itu kembali ke pengaturan sebelumnya.
"About Me" Profil Informasi: maksimum 1.200 karakter.
Profil Minat dan Favorit: Maksimal 2.000 karakter dalam setiap bidang.

Catatan: FTP Blogspot terbatas 25 MB atau 100 MB, tergantung pada jenis upgrade yang dimiliki. Jika melebihi kuota (Dalam kasus ini, jika ruang blogspot dialokasikan dengan gambar atau file lainnya), layanan dihentikan dan mungkin tidak dapat meng-upload posting baru. Untuk menyiasati hal ini, perlu untuk menghapus file yang tidak terpakai dari akun untuk membebaskan ruang lebih banyak ruang.

Sumber Blogspot Gratis Tapi Punya Batas (Limit) : http://support.google.com/blogger/bin/answer.py?hl=en&answer=42348

Bagaimana menyiasati keterbatasan blogspot tersebut? Nanti saya coba sharing lagi.

Senin, April 08, 2013

0 Trik Memasang Widget Gambar Blog

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Kali ini, saya akan membahas tentang widget ini. Sebelumnya, Artikel Populer dengan Artikel Terbaru yang akan kami bahas sebenarnya sama, tetapi, pada umumnya widget Artikel Terbaru ini ditaruh pada bagian tab postingan, bukan pada tab Home. Karena tidak etis biasanya jika ditaruh pada halaman utama. Untuk Screen Gambarnya atau contoh, bisa dilihat disini :

Jadi, jika tertarik, ikuti caranya :

1. Login ke Blogger
2. Klik Rancangan >> Add Gadget >> HTML Javasript
3. Copy Paste kode berikut ini

<div style="border: 1px solid rgb(153, 153, 153);overflow: auto;width:ancho;height:300px; padding: 10px;">
<ul>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 230; /*Lebar Widget*/
cellspacing = 8; /*Jarak Judul Dengan Artikel*/
borderColor = "#ffffff"; /*Warna Garis Tepi*/
bgTD = "#000000";
thumbwidth = 50; /*Lebar Gambar*/
thumbheight = 50; /*Tinggi Gambar*/
fntsize = 12; /*Ukuran Font Judul*/
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 15;
home_page = "http://URL BLOG SOBAT/";
</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
</ul></div>

4. Terakhir, Save

0 Semua Kode Warna

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

KODE WARNA

kode- kode warna ini bisa anda pakai untuk mewarnai bagian isi dari wap/web.
Bisa untuk mewarnai latarbelakang halaman atau background.
Bisa untuk mengatur warna text/tulisan, dan juga untuk mewarnai border..
Bisa anda pilih sendiri warna yang anda suka sesuai keinginan anda.
Berikut kode- kodenya.

#000000 black
#FFFFFF white
#FF0000 red
#FFFF00 yellow
#008000 green
#0000FF blue
#00FF00 lime
#FFA500 orange
#FFC0C8 pink
#02691E chocolate
#A52A2A brown
#C0C0C0 silver
#808080 gray
#FFD700 gold
#00FFFF aqua
#800000 maron
#000080 navy
#808000 olive
#800080 purple
#008080 teal
#00FFFF cyan
#FF7F50 coral
#DC143C crimson
#DEB887 burlywood
#622222 firebrick
#696969 dimgray
#DCDCDC gainsboro
#460082 indigo
#F0E68C khaki
#E6E6FA lavender
#FAF0E6 linen
#FF00FF magenta
#DDA0DD plum
#CD853F peru
#FDF5E6 oldlace
#FFE4B5 moccosin
#FFEAE1 mistyrose
#F5FFFA mintcream
#FFDAB9 peachpuff
#B0E0E6 powderblue
#BC8F8F rosybrown
#860000 darkred
#006400 darkgreen
#8A2BE2 blueviolet
#7FFFD4 aquamarine
#5F9EA0 cadetblue
#ADFF2F greenyellow
#008686 darkcyan
#A9A9A9 darkgray
#606766 darkkhaki
#860086 darkmagenta
#55662F darkolivegreen
#FF8C00 darkorange
#9932CC darkorchid
#E9967A darksalmon
#483086 darkslateblue
#2F4FAF darkslategray
#940003 darkviolet
#FF1493 deeppink
#00BFFF deepskyblue
#1E90FF dodgerblue
#FFFAF0 floralwhite
#228622 forestgreen
#DAA520 goldenrod
#FF69B4 hotpink
#CD5C5C indianred
#FFF0F5 lavenderblush
#7CFC00 lawngreen
#ADD8E6 lightblue
#F08080 lightcoral
#E0FFFF lightcyan
#90EE90 lightgreen
#FFB6C1 lightpink
#FFA07A lightsalmon
#20B2AA lightseagreen
#87CEFA lightskyblue
#B0C4DE lightsteelbue
#32CD32 limegreen
#BA55D3 mediumorchid
#9370DB mediumpurple
#3CB371 mediumseagreen
#7B68EE mediumslateblue
#071585 mediumvioletred
#191970 midnightblue
#6B8E23 olivedrab
#FF4500 orangered
#98F698 palegreen
#DB7093 palevioletred

Minggu, April 07, 2013

0 Trik Meningkatkan Alexa Rank

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara mudah meningkatkan rank alexa adalah dengan memperbanyak jumlah artikel dan pengunjung yang ada di blog kita, akan tetapi lebih dari itu ada juga cara khusus yang bisa anda lakukan untuk meningkatkan rank alexa dengan beberapa cara yang akan saya bahasa kali ini.

Alexa rank sendiri adalah situs penyedia layanan rating website yang ada diseluruh dunia.

Peringkat alexa rank ini biasanya digunakan sebagai patokan atau acuan dalam beberapa hal seperti :

Semakin kecil alexa rank semakin bagus
Alexa rank digunakan dalam persyaratan beberapa PPC dan PTR
Alexa rank menentukan kualitas dari website tersebut

Jadi meningkatkan rank alexa sangatlah penting karena website atau blog anda akan semakin berkualitas, serta akan lebih mudah mendapatkan penghasilan dari Paid To Review (PTR), layanan adsense Paid To Click (PTC) serta bisnis online lain yang melibatkan website atau blog.

Kriteria Penilaian Alexa Rank

Sebelum membahas cara meningkatkan rank alexa sebaiknya anda mengetahui apa saja yang menjadi kriteria penilaian dalam alexa rank yaitu :

Alexa rank mendapatkan traffik dari alexa widget dan alexa toolbar
Website tentang teknologi biasanya disukai alexa
Alexa biasanya update setiap minggu bahkan setiap hari
Sedangkan untuk update utama dilakukan 3 Bulan sekali

Nah dari pembahasan diatas pasti anda sudah tahu bagaimana cara meningkatkan rank alexa dengan mudah kan ?

Jika tidak mari ikuti pembahasan saya selanjutnya.

Cara Meningkatkan Rank Alexa

Sekarang anda masuk ke pembahasan utama dari Cara meningkatkan rank alexa, pastikan anda sudah menyiapkan akun blog anda di tab baru karena kita akan mengedit beberapa hal dalam website atau blog anda.

Update Konten Secara Berkala

Ini adalah saran yang paling umum tentang bagaimana merampingkan ranking alexa di blog, dengan melakukan penambahan konten atau artikel di blog secara berlaka anda akan lebih mudah mendapatkan pengunjung dan meningkatkan rank alexa juga.

Anda tidak perlu setiap hari mengupdate konten yang ada di website anda, minimal dalam 1 bulan dengan 1 buah artikel baru saja sudah cukup dan lebih baik minimal 1 artikel baru muncul di blog anda setiap minggunya.

Cara ini sangat ampuh meningkatkan rank alexa di blog atau website yang masih baru.

Pasang Alexa Toolbar Di Browser Anda

Kegunaan dari alexa toolbar adalah menampilkan alexa rank dari website yang kita lihat dengan cepat (dibagian toolbar browser), selain itu juga dengan memasang alexa toolbar anda ikut memberikan penilian terhadap website yang anda kunjungi termasuk website anda sendiri yang tentunya akan meningkatkan rank alexa dari website yang anda kunjungi tersebut tersebut.

Saat ini Alexa Toolbar bisa di pasang di Google Chrome dan Mozzila Firefox

Download Alexa Toolbar Gratis Disini...!!!

Pasang Alexa Widget Di Web Atau Blog

Alexa widget sendiri berfungsi menampilkan nilai rank alexa dari blog tersebut serta mencatat traffik pengunjung, sehingga hal ini bisa menjadi cara meningkatkan rank alexa yang lebih efektif.

Untuk memasang alexa widget di blog atau situs anda yaitu :

Masuk ke akun blog anda
Pilih blog anda masuk ke bagian tata letak
Buat widget baru HTML/Javascript
Pasang kode dibawah ini, ubah tanda warna merah dengan alamat situs anda

<a href="http://www.alexa.com/siteinfo/www.dessam13.blogspot.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=www.dessam13.blogspot.com'></script></a>

Simpan dan lihat hasilnya
Untuk website dan blog lain seperti wordpress caranya hampir sama.

Alexa Certified Traffic Ranking for www.isowap.com

Alexa widget dengan ukuran 120 x 95 yang paling sering digunakan

Atau kunjungi website Alexa Widget, disana terdapat banyak jenis dan ukuran widget lainya yang bisa anda pasang di blog untuk meningkatkan rank alexa anda.

Membuat Artikel Tentang Teknologi Dan Alexa

Seperti yang sudah saya jelaskan tentang kriteria penilian alexa bahwa cara meningkatkan rank alexa salah satunya adalah bahwa alexa menyukai situs bertemakan teknologi apalagi yang sering membahas alexa.

Hal ini terjadi karena jika anda membahas tentang alexa seperti saya dengan artikel Cara Meningkatkan Rank Alexa maka anda secara otomatis mengundang para pengguna alexa toolbar untuk melihat dan mengunjungi situs anda dan hal tersebut akan menigkatkan rank alexa anda dengan mudah.

sekian trik yang bisa saya bagikan,,
semoga bermanfaat

Sabtu, Maret 16, 2013

0 Trik Cek Dan Mengurangi Error Validasi HTML

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Untuk mengetahui valid tidaknya template yang anda gunakan, anda bisa menggunakan tool markup validation yang di sediakan oleh W3C di http://validator.w3.org. silahkan menuju ke sana lalu masukan url blog anda pada kolom address kemudian klik check.
bagaimana hasil cek blog anda? berapa error dan warning yang anda dapat?

dari hasil penelusuran saya, sebagian mengatakan bahwa validasi html tidak berpengaruh dalam SEO, dan ada juga yang mengatakan berpengaruh. kalau untuk saya sendiri, setelah mengecek validasi html blog ini, lumayan juga erorr dan warningnya, jadi kalau bisa dikurangai kenapa tidak.! setidaknya itu akan menjadi nilai tambah untuk Seo On Page blog kita.

Cara Cek Dan Mengurangi Error Validasi HTML

sudah banyak yang memposting tentang cara mengurangai error validasi html, dan tidak valid 100%. akan tetapi jumlah error cukup menurun. dan lebih baik. tidak ada salahnya jika saya ikut menulis apa yang sudah saya terapkan pada template blog ini. yang awalnya error samapi 250'an. setelah oprek sana sini jumalah error tinggal hitungan jari kaki dan tangan hehee.. :D

untuk mengurangi jumlah error validasi anda dapat menerapkan cara ini:
masuk ke edit html kemudian centang expand template widget,
untuk berjaga-jaga kesalahan saat mengedit template. sebaiknya backup dulu template anda.
kemudian tekan tombol Ctrl+f untuk mepermudah anda mencari kode-kode yang nantinya akan di ubah.

Pertama ganti DOCTYPE bawaan blogger, cari kode seperti ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

lalu ganti dengan kode ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kedua cari kode seperti ini

<b:include data='blog' name='all-head-content'/>

lalu hapus kode tersebut dan ganti dengan kode ini

<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/IDPROFILEANDA' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGGERANDA' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGGERANDA/posts/default' rel='service.post' title='NAMABLOG - Atom' type='application/atom+xml'/>
<link href='http://www.URLBLOG.com/feeds/posts/default' rel='alternate' title='NAMABLOG - Atom' type='application/atom+xml'/>

KET:
*IDPROFILEANDA= ganti dengan id profil anda.
*IDBLOGGERANDA= ganti dengan id blogger anda.
*NAMABLOG= ganti dengan nama blog anda.
*URLBLOG= ganti dengan url blog anda.

Ketiga temukan kode

<b:include name='quickedit'/>

kemudian hapus semua kode seperi itu, kode tersebut salah satu penyumbang error yang besar. kode ini yang menampilkan quickedit, dengan gambar simbol obeng dan tang yang biasanya ada di sudut kanan bawah widget blog. ketika anda menambah widget baru, kembali ke edit html dan hapus lagi kode seperti diatas.

Keempat cari kode </head> lalu letakan kode ini tepat di bawahnya

untuk langkah keempat ini, tidak dapat di lakukan pada tampilan blogger baru, jika anda mencobanya akan terjadi error, template tidak dapat di simpan. jadi anda harus pindah sementar ke tampilan blogger lawas, setelah itu masukan kode diatas.
kode diatas berfungsi untuk menghapus navbar blogger, ketika muncul konfirmasi untuk menghapus, klik hapus. setelah itu anda dapat pindah kembali ke tampilan baru blogger.

Kelima menghapus post icon, cari kode ini

<span class='post-icons'>

           

           <b:if cond='data:post.emailPostUrl'>

            <span class='item-action'>

            <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>

            </a>

          </span>

           </b:if>

          

          <b:include data='post' name='postQuickEdit'/>

         </span> <div class='post-share-buttons'>

          <b:include data='post' name='shareButtons'/>

         </div> </div>

kemudian ganti dengan kode ini

<span class='post-icons'>

           

           <b:if cond='data:post.emailPostUrl'>

           </b:if>

         </span>

         </div>

Keenam kurangi penggunaan dash/strip (-) pada kode html maupun css, seperti

Contoh pada html:

 SALAH

 BENAR

Contoh pada css:

/*--------------- Navbar ---------------*/ SALAH

/*Navbar*/ BENAR

Ketujuh selalu gunakan atribut alt pada setiap penggunaan gambar

Contoh:

<img alt='Keterangan Gambar' src='Url Gambar'/>

Sabtu, Maret 09, 2013

0 Trik judul blogspot bergerak

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Membuat Judul blog bergerak adalah salah satu cara untuk membuat blog sobat menjadi terlihat lebih menarik. Nah, selain itu judul blog bergerak ini pun memiliki fungsi lain , mungkin sobat memiliki sebuah blog yang judul blognya panjang, judul blog bergerak ini merupakan salah satu alternatif agar judul blog sobat yang panjang terbaca.

Hanya dengan mengubah sedikit kode html template sobat, judul blog bergerak pun jadi. Pada postingan sebelumnya juga kita pernah membahas tentang Cara membuat judul adress bar tampil beda. Sama dengan postingan sebelumnya, kita menggunakan script yang dapat membuat judul blog bergerak. Untuk gerakannya, judul blog bergerak ini satu jenis dengan marquee. Yaitu bergerak dari kanan ke kiri. Okedeh sobat, tanpa basa-basi lagi silahkan sobat lihat bagaimana cara Membuat Judul blog bergerak di bawah ini.

Masuk ke blogger.com dan login menggunakan akun blog sobat
Masuk pada halaman Template
Klik Edit HTML lalu Lanjutkan
Cari kode <title><data:blog.pageTitle/></title>, untuk mempermudah pencarian gunakan ctrl+f
Jika kode tersebut sudah ditemukan, ganti kode tersebut dengan kode di bawah ini:
<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/> - ";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
- tulisan berwarna merah adalah kode dari kecepatan gerakan judul blog. Jadi bisa sobat ganti sesuai dengan keinginan sobat.
- tulisan berwarna biru adalah kode otomatis dari judul blog sobat. Nah, bisa sobat ganti dengan mengganti kode berwarna biru tersebut dengan judul blog sobat yang diinginkan
Sebelum sobat simpan, silahkan klik Pratinjau terlebih dahulu agar judul blog berjalan sesuai dengan keinginan sobat
Jika sudah pas dan sesuai dengan keinginan sobat silahkan klik Simpan Template

sekian triknya

Jumat, Maret 08, 2013

1 Trik buat 3 kolom di atas footer

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Langsung saja ke triknya ,,,

1. Login pada blog sobat
2. Langsung ke halaman Template kemudian Edit HTML
3. Expand Template Widget
4. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut

#footer-bottom {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut

<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>

6. Simpan dan lihat hasilnya

0 Trik buat 3 kolom di bawah header

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara Membuat 3 Kolom Di Bawah Header. Artikel kali ini kita akan membahas sedikit cara memodifikasi blog yaitu Cara Membuat 3 Kolom Di Bawah Header. Biasanya 3 kolom ini digunakan sebagai space iklan. Selain digunakan sebagai space iklan, 3 kolom ini juga bisa digunakan sebagai daftar artikel, daftar link dan sebagainya. Nah langsung aja yuk kita cari tau Cara Membuat atau Menambah 3 Kolom Di Bawah Header :

Masuk ke akun bloggger anda.
Klik Layout/Template (New) > Klik Edit HTML.
Beri tanda centang pada Expand Widget Template.
Sekarang Cari kode ]]></b:skin>.
Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>.

Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer">
Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'> atau <div id="main-outer">.

Langkah terakhir klik Tombol Simpan Template.
Selesai dan lihat hasilnya.
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout. Semoga bermanfaat Artikel Cara Membuat 3 Kolom Di Bawah Header, Terima kasih.

Kamis, Maret 07, 2013

1 Trik buat daftar isi otomatis dengan scroll

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Membuat daftar isi blog otomatis di blogspot mempunyai keunggulan lebih praktis dari pada anda membuat daftar isi manual yang harus mengisinya otomatis setiap kali anda membuat postingan baru. Pada daftar isi blog otomatis ini anda sekali meletakkan script di bawah ini dan hasilnya daftar isi blog blogspot sobat akan update otomatis tanpa ribet ga pake pusing.

Cara membuat daftar isi otomatis di blog

1) Masuk ke account blogger anda. Lalu buat laman baru bukan postingan baru karena lebih statis.

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

2) Beri judul Laman tersebut misal "Daftar isi" atau "Daftar isi blog".

3) Setelah itu pindah ke mode HTML seperti gambar di atas >> lalu ganti semua kode yang muncul seperti di lingkaran dengan kode Membuat daftar isi blog otomatis buatan saya di bawah ini;

<div style="height: 300px; overflow: auto; text-align: left; width: 530px;">
<script src="http://yourjavascript.com/12152269523/daftar-isi-otomatis.js">
</script>
<script src="http://dessam13.blogspot.com//feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

4) Ganti URL blog berwarna merah diatas dengan Url blog sobat.

5) Publikasikan dan lihat hasilnya.

Note : warna hijau untuk mengatur tinggi area scrol daftar isi.
warna ungu untuk mengatur lebar area scroll daftar isi blog.

Selamat mencoba membuat daftar isi blog otomatis di blogspot/blogger dan semoga berhasil. Jika mengalami kendala dalam membuat daftar isi blog otomatis di blogspot sobat maka jangan segan untuk Contact saya di menu atas saya akan menjawab pertanyaan tentang cara membuat daftar isi blog otomatis dengan senang hati.

Rabu, Maret 06, 2013

0 Trik buat daftar isi dengan JQuery

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Membuat Daftar Isi – Pada kesempatan kali ini dessam akan share tutorial untuk cara membuat daftar isi blogspot untuk sobat semua. Membuat daftar isi blogspot mungkin sudah banyak yang tahu, namun daftar isi yang andalanku share adalah membuat daftar isi dengan jQuery.

Nah, bagi sobat yang mau membuat daftar isi blogspot dengan jQuery, dibawah ini andalanku akan tuliskan langkah-langkahnya. Mari langsung saja sobat lihat cara membuat daftar isi jQuery tersebut.

Cara Membuat Daftar Isi Blogspot Dengan JQuery

Login ke Blogspot.
Klik Design/Rancangan.
Pilih Edit HTML.
Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>

#dafis-acc{

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#333;

background:#ffffff;

}

.dafis-label {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2dzvVTGcjxt6IUoLH_azI0EqI7-6SM6bMNonbYAy6mljTN7bYOBqCfzJ8ihgairX1G9PPl5-TeHLrMiamT1xRb7ZuyRhDcYsehEzZgkAAvpISN3ean8bUOq2XpTL7GTIjX2S1zSfeG70/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;

border: 1px solid #2F94BA;

color: #FFFFFF;

cursor: pointer;

font-weight: bold;

line-height: 1.4em;

margin: 1px 3px;

outline: medium none;

overflow: hidden;

padding: 2px 10px;

text-decoration: none;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

vertical-align: baseline;

white-space: nowrap;

}

.dafis-label:hover {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6PPK358D2unHhsW2U4KOGaPwELRyVncuHRb8CEGIW_XFdry3ruR_yut9oVElbT-3fLFJueitMT3F3OmKdqUmW8pb9tHuxFwlgQNg8YASh7WnmUt-Hhwk1eSYQMO6IkZ2VAxxSyrtSQU/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;

color: #003366;

}

.dafis-daf ol {

margin: 0 0 0 30px !important;

padding: 0 !important;

}

.dafis-daf ol li {

background-color: #C9E9F4;

border: 1px solid #339DC6;

line-height: 1.5em;

margin: 1px 3px !important;

text-align: left;

white-space: nowrap;

}

.dafis-daf ol li a {

color: #333333 !important;

display: block;

padding-left: 10px;

text-decoration: none !important;

}

.dafis-daf ol li a:hover {

background: none repeat scroll 0 0 #7BC4DF;

border-left: 5px solid #333333;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

Copy kode dibawah ini dan letakkan diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika di blog sobat sudah ada kode diatas, maka sobat boleh abaikan langkah ini.
Selanjutnya copy dan paste kode dibawah ini dalam postingan maupun widget blog sobat.

1 2	`<script type="text/javascript"` `src="http://dessam13.blogspot.com/"></script>` `<script src="<span style="color:` `#ff0000;">http://URL BLOG.blogspot.com</span>/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>`

Ganti http://URL BLOG.blogspot.com dengan URL blog sobat.
Selesei.

Bagaimana pendapat sobat dengan Cara Membuat Daftar Isi Dengan JQuery diatas, jangan lupa beri komentarnya ya sekalian bagikan juga ke Google Plus, Twitter dan Facebook. Terima kasih!!!.

Senin, Maret 04, 2013

0 Trik New Tab ketika link post di klik

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Open New Tab maksudnya adalah ketika link pada postingan di klik , maka secara otomatis link akan terbuka pada tab baru. Open New Tab sangat bagus di gunakan pada blog / website karena dengan Open New Tab Blog/Web kita tidak akan tertutup atau di tinggalkan oleh pengunjung blog.

Ada beberapa cara untuk membuat Open New Tab pada blog/web :

1. Login ke Blogger.

2. Buka Halaman Dasbord

3. Klik Rancangan (Design)

4. Klik Edit HTML

5. Cari kode <head>.

Gunakan tombol Ctrl + F agar lebih mudah dan cepat untuk mencarinya.

6. Copy dan paste code script di Bawah kode <head>.

7. Klik Simpan (Save Template).

Kode script nya di bawah ini :

<base target='_blank'/>

Semoga bermanfaat, jika perlu bantuan silakan tinggalkan pesan di kolom komentar

0 Trik Buat Related Post Dengan Thumbnail

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Langsung saja ke caranya:

1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.
3.Cari kode </head> dan letakkan kode dibawah ini tepat diatas-nya.

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjPgjbuFg-Dy_T06MarNQm7dya_IicXSN6Qc_vb625gW-C4h1eTCRJ6gaOc_AgPQbwMgv2IZbrR165-LWpbLdJjMd0CJKQF1JaTEyYYao-SjPH7AP8xWuVfoKOs758x413a0d6mRn7xM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

Keterangan:

Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, anda bisa merubahnya sesuai keinginan anda.
Kode yang berwarna biru adalah judul dari widget related posts-nya, anda bisa merubah-nya sesuai keinginan anda.

4.Cari kode <div class='post-footer-line post-footer-line-1'> (biasanya dalam satu template terdapat dua kode <div class='post-footer-line post-footer-line-1'> , jika ada dua pilihlah yang kedua) Dan letakkan kode dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-1'>.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</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>

5.klik save template.

Selesai sudah langkah-langkah Trik Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi anda.

0 Trik Menampilkan Judul Postingan Saja Di blog

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Banyak cara agar merubah tampilan blog menjadi lebih simple, salah satunya dengan hanya menampilkan judul postingan pada halaman utama karena dengan hanya menampilkan judul postingan pada halaman utama maka kita akan menghemat tempat yang ada di blog kita dan kita bisa menampilkan banyak postingan sekaligus pada halaman utama.

Dengan trik ini juga rasanya kita akan memperkecil loading blog pada halaman utama karena halaman utama hanya menampilkan judul postingan saja tanpa menampilkan gambar dan yang lainnya. Dan tentunya ini akan berimbas bagus bagi perkembangan SEO blog kita. Nah bagi anda yang tertarik mencoba untuk menampilkan judul postingan saja pada halaman utama silahkan ikuti langkah-langkah berikut ini.

1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru silahkan klik rancangan » edit HTML » centang kotak Expand Template Widget. Dan disarankan untuk mem-backup template anda buat jaga-jaga bila terjadi kesalahan.
3.Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat di bawah kode ]]></b:skin>.

Kode di atas masih menyisakan beberapa komponen pada halaman utama selain judul postingan, seperti tanggal posting, jumlah komentar,label,dan yang lainnya. Jika anda menginginkan hanya menampilkan judul postingannya saja pada halaman utama tanpa menampilkan tanggal postingan, label,jumlah komentar, dan yang lainnya silahkan anda pakai kode yang ini.

4.Save template anda.

Demikianlah tutorial tentang Trik Menampilkan Judul Postingan Saja Pada Halaman Utama mudah-mudahan postingan saya yang sangat singkat kali ini bermanfaat bagi anda.

Minggu, Maret 03, 2013

0 Trik mempercepat loading blogspot

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara/trik menambah kecepatan loading blog dengan script/kode atau cara agar loading blog bertambah cepat dengan script tertentu.

Postingan Blogaul kali ini akan membahas trik mengenai mempercepat loading blog dengan menggunakan script/kode tertentu. Pada postingan sebelumnya, saya juga membahas artikel mengenai cara mempercepat loading blog yang hampir sama tapi agak sedikit rumit karena menggunakan berbagai cara/proses-proses tertentu. Silahkan dibaca bila tertarik. Nah, di postingan kali ini saya akan berbagi trik yang yang sama tapi sedikit lebih simple dan mudah karena hanya menggunakan sebuah script yang disebut dengan script lazyload. Dengan memasang script ini di blog ini di blog kita, loading blog memang sedikit lebih ringan karena script ini akan membantu meringankan gambar-gambar yang ada di blog sobat sehingga loading nya lebih cepat. Dengan loading blog yang cepat, tentu akan membuat pengunjung senang dan betah begitu juga dengan sobat sendiri. Bagi yang tertarik untuk memasang nya, silahkan ikuti langkah-langkah di bawah. Berikut cara menambah kecepatan loading blog dengan script ampuh:

1. Login ke akun Blogger sobat.

2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Cari kode </head> di template sobat (Untuk mempermudah pencarian, gunakan Ctrl+F atau F3).

4. Letakkan kode berikut tepat di atas kode nomor 3 tadi

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://amronbadriza.googlecode.com/files/Lazyload%20Script.js' type='text/javascript'/>
<script>
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yQfneM4BQLiCFcBAsgHX7HpVkrygFDFI6Bj18zDIT04rvSNhi6E7uVBtGgJdPnVaYn6t_nFGDL15e98fKYt8aVB9XbUvgXm2cNfDcBmgpGonx_PUDVFRgMe-xkPmxK69snz8vcS5gI8/s1600/loading.png",threshold : 200});
});
</script>

5. Simpan template sobat.

NB: Lazyload script ini tidak bekerja pada semua blog. Ada kalanya blog yang dipasangi memang bisa bertambah cepat loading nya, tapi ada kala nya juga malah bertambah berat. Oleh karena itu sobat perlu mencoba dan mengamati nya dulu. Bila memang bisa bermanfaat buat blog sobat berarti silahkan dipasang, tapi kalau malah menjadikan loading blog tambah berat silahkan dihapus saja.

Sekian postingan mengenai cara mempercepat loading blog dengan script yang bisa saya share kali ini. Semoga bermanfaat buat semua.

0 Trik anti copy paste data blogspot

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara/trik mengatur blog menjadi anti copas/copy paste atau cara mengubah/merubah blog menjadi anti copy paste atau cara agar blog kita tidak bisa dicopas.

Membuat blog menjadi anti copy paste merupakan salah satu cara menjaga keamanan/privasi blog kita. Selain blog, kita juga bisa bisa memproteksi elemen-elemen atau widget-widget blog kita dari orang-orang jahil, misalnya memproteksi counter histats. Baca: cara private counter histats. Nah, kali ini saya akan membahas mengenai trik mengatur blog menjadi anti copy paste menggunakan sript. Oke, langsung saja.. Cara kerja script ini adalah menonaktifkan fungsi blok pada posting sehingga copy paste terhadap blog kita dapat diminimalisir. Tapi saya sarankan jika blog sobat bertema "blog tutorial" sebaiknya jangan menggunakan script ini, karena script/kode yang ada pada tutorial sobat tidak akan bisa di blok. Baik langsung berikut cara mengubah blog menjadi anti copy paste:

Login ke akun Blogger sobat.
Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
Cari kode </head> (gunakan ctrl+f).
Copy paste script berikut tepat di bawah kode nomor 3 tadi

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>
Simpan template dan lihatlah hasilnya.

Gunakan script ini jika konten blog sobat memang mengandung hak cipta atau bersifat pribadi yang tidak ingin di copy paste. Nah demikian cara membuat anti copy paste di blog, semoga bermanfaat!

0 Trik buat gambar bergantian di Header

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Caranya :
>Masuk ke "dashboard" blog anda, lalu untuk jaga-jaga terjadi kesalahan baiknya didownload dulu tempalte anda yang sekarang dan simpan,kemudian klik "rancangan",klik "edit Html",centang kotak kecil dipojok atas kanan kotak HTML .

>Setelah itu cari kode <div id='content-wrapper'> ,(biar mudah carinya pakai Control F) dan kopi kode scrip di bawah ini lalu tempelkan pas di bawah kode <div id='content-wrapper'>.
------------------------------------------------------------------------------------------------


<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>


<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>



<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>



<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>



<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>



<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>


</div>

<div class='fp-nav'>
<span class='fp-pager'/>
</div>

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

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


------------------------------------------------------------------------------------------------
>Dan simpan,bila sukses boleh lihat hasilnya.

CATATAN ;
Lihat dengan teliti tulisan yang berwarna hijau :
1. ### -pagar 3 x masukan Url yang anda kehendaki mau dituju.
2. URL GAMBAR ANDA -Isi dengan url gambar anda yang telah disimpan seperti di google picasa atau situs yang lainnya.
3. JUDUL KETERANGAN - Tulis judul keterangan yang sesuai dengan url yang hendak dituju.
4. Keterangan gambar anda - Isi deskripsi singkat untuk url yang dikehendaki.

Untuk Contoh bisa di lihat di sini,cuma bedanya yang buat contoh gambarnya di atas postingan. Kalau kepengin sperti yang di contoh letakn kode scrip tadi di bawah kode ini

<div id='main-wrapper'>.

Semoga jadi,berhasil dan dimudahkan,thanks sudah mampir di blogspot dessam13.blogspot.com

0 Trik Membuat Label Menjadi 2 Kolom

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Gambar di atas menunjukkan bahawa label ditampilkan menjadi 2 kolom. Nah tanpa basa basi, mari kita praktik Membuat label Menjadi 2 Kolom.

Jika di blog sudah ada labelnya, maka tinggal masuk ke html blog sobat. Setelah itu centang kotak kecilnya ya sob. Setelah itu cari kode ]]></b:skin>

Untuk mempermudah gunakan Ctrl+F atau F3 (jika sobat menggunakan mozilla firefox). Jika sudah paste kode ini diatas kode merah tersebut.

#Label1 li {
float:left;
width:45%;
}

Simpan deh! atau kalau tidak preview dulu hasil edit label sobat.

Perlu diperhatikan nama label sobat. Mungkin nama label di atas bisa berbeda dengan nama label punya saya, untuk mengetahui nama label silakan sobat gunakan pencarian dengan Ctrl+F atau F3 dan ketik 'Label1' tanpa tanda petik, jika sama lanjutkan, jika beda silakan sobat ganti dengan nama label sobat.

Tidak semua template mendukung warna background yang mengikuti. Seperti kasus saya, dengan trik ini mungkin warna background tidak selalu mengikuti kotak label. Yang jelas saya sudah mencoba di blog saya yang lain dan berhasil.

Seperti itulah cara Membuat label menjadi 2 kolom. Semoga berhasil

0 Trik buat Tampilan Halaman Utama Tanpa Posting

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Dengan menambah conditional tag yang akan diletakkan pada kode posts blog nantinya, maka posts blog / posting blog akan tampil di halaman utama saja dan tidak akan tampil di halaman posting. Dan nantinya jika conditional tag / tag kondisional ditambahkan, maka tampilan pada "Tata Letak" akan terlihat seperti gambar di bawah ini :

membuat halaman utama blog tanpa posting

Cara Membuat Homepage Blog Tersendiri Tanpa Posting

1. Login ke Blogger
2. Pilih Template
3, Pilih Edit HTML
4. Pilih Lanjutkan
5. Tidak perlu dicentang kotak dekat Expand Widget Template
6. Gunakan tombol F3 untuk mencari kode seperti dibawah ini

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Kode warna biru diatas merupakan kode untuk posts blog / tempat postingan, saya akan menghilangkannya, caranya cukup menambahkan kode warna merah dibawah ini dan letakkan di atas kode tersebut :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>

Dan untuk penutupnya ditambahkan kode </b:if> jadi penerapannya seperti ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

7. Simpan Template

Penting :

Dengan menggunakan tutorial ini, apabila anda membuat postingan baru maka anda tidak dapat melakukan fitur "Pratinjau" dan yang terlihat berupa widget yang anda tambahkan.

0 Trik Membuat Read More di Blogspot

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara membuat read more di Blogspot atau blogger sangat mudah, hanya dengan manupulasi CSS display:none yaitu meng-hiden teks yang tidak ingin ditampilkan di home, archive dan halaman label. Sebenarnya teknik ini bisa digunakan untuk menerapkan salah satu teknik Black Hat SEO di blogspot, untuk teknik SEO haram ini tidak akan saya bahas disini, yang berminat silakan explore dan dicoba sendiri.
Berikut ini langkah-langkah untuk membuat read more blogger

Silakan login ke blogger.com, klik link Layout (Tata Letak) kemudian klik link Edit HTML
Aktifkan list Expand Template Widget, agar source script template blogger na terlihat secara keseluruhan.
Tepat di atas atau sebelum tag </head> masukkan kode berikut seperti ini:
<style> <b:if cond='data:blog.pageType == "item"'> span.hidenpost {display:inline;} div.hidenpost {display:inline;} <b:else/> span.hidenpost {display:none;} div.hidenpost {display:none;} </b:if> </style>
Cari <data:post.body/> dan tambahkan kode berikut tepat dibawahnya:
<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Baca selengkapnya <data:blog.pageTitle/></a> </b:if>
Selesai. Sekarang setiap posting letakkan
<span class="hidenpost"> sisa postingan yang akan dihiden, akhiri dengan </span> (ketika memasukkan <span class="hidenpost"> dan </span> posting harus dalam mode Edit HTML bukan Compose ) pastikan juga diantara <span class="hidenpost"> dan </span> tidak boleh ada <span> jika tidak bisa dihindarkan gunakan <div class="hidenpost"> dan </div> demikian juga sebaliknya

Sabtu, Maret 02, 2013

0 Trik Membuat Emotion Di Kolom Komentar Blog

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Langsung ke caranya ya bos,,,

Login ke Dasbor blog sobat >> Edit HTML.( backup atau download template lengkap sobat terlebih dahulu untuk jaga-jaga jika terjadi kesalahan ).
Jangan lupa centang Expand Template Widget.
Cari kode penutup </body>.
Simpan kode di bawah ini di atas </body>.

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comment-holder');
if(a) {
b = a.getElementsByTagName("p");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i.imgur.com/Jnwl1.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i.imgur.com/h9NDs.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i.imgur.com/IL1IB.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i.imgur.com/k3Fdh.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i.imgur.com/ZDlSF.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i.imgur.com/OXalA.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i.imgur.com/cnARR.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i.imgur.com/WTmJr.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i.imgur.com/kenHK.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i.imgur.com/aDJrj.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i.imgur.com/E5qba.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i.imgur.com/w3vTW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i.imgur.com/0WFG2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i.imgur.com/bkfG8.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://i.imgur.com/zvteN.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://i.imgur.com/xkzm0.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://i.imgur.com/UqDiW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://i.imgur.com/5uihz.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://i.imgur.com/5O9L2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://i.imgur.com/7RDAt.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://i.imgur.com/WmQPn.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://i.imgur.com/9C3hy.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://i.imgur.com/fFhYI.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://i.imgur.com/e50uc.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:y:/gi, "<img src='http://i.imgur.com/RjY5y.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:z:/gi, "<img src='http://i.imgur.com/lrZEF.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:ab:/gi, "<img src='http://i.imgur.com/KJbrk.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}}}
//]]>
</script>

Kemudian sobat cari lagi kode:

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
</div>

Dan pasang kode emoticon gif berikut ini di bawah </div> yang terakhir.

<b:if cond='data:blog.pageType == "item"'>
<div style='text-align:center; font-weight:bold; margin-top:15px; margin-bottom:10px;'>
Untuk menggunakan emoticon ini, COPAS kode ke kotak komentar.
</div>
<b><img src='http://i.imgur.com/4a2GG.gif' width='40'/>
:a:
<img src='http://i.imgur.com/Jnwl1.gif' width='40'/>
:b:
<img src='http://i.imgur.com/h9NDs.gif' width='40'/>
:c:
<img src='http://i.imgur.com/IL1IB.gif' width='40'/>
:d:
<img src='http://i.imgur.com/k3Fdh.gif' width='40'/>
:e:
<img src='http://i.imgur.com/ZDlSF.gif' width='40'/>
:f:
<img src='http://i.imgur.com/OXalA.gif' width='40'/>
:g:
<img src='http://i.imgur.com/cnARR.gif' width='40'/>
:h:
<img src='http://i.imgur.com/WTmJr.gif' width='40'/>
:i:
<br/>
<img src='http://i.imgur.com/kenHK.gif' width='40'/>
:j:
<img src='http://i.imgur.com/aDJrj.gif' width='40'/>
:k:
<img src='http://i.imgur.com/E5qba.gif' width='40'/>
:l:
<img src='http://i.imgur.com/w3vTW.gif' width='40'/>
:m:
<img src='http://i.imgur.com/0WFG2.gif' width='40'/>
:n:
<img src='http://i.imgur.com/bkfG8.gif' width='40'/>
:o:
<img src='http://i.imgur.com/zvteN.gif' width='40'/>
:p:
<img src='http://i.imgur.com/xkzm0.gif' width='40'/>
:q:
<img src='http://i.imgur.com/UqDiW.gif' width='40'/>
:r:
<br/>
<img src='http://i.imgur.com/5uihz.gif' width='40'/>
:s:
<img src='http://i.imgur.com/5O9L2.gif' width='40'/>
:t:
<img src='http://i.imgur.com/7RDAt.gif' width='40'/>
:u:
<img src='http://i.imgur.com/WmQPn.gif' width='40'/>
:v:
<img src='http://i.imgur.com/9C3hy.gif' width='40'/>
:w:
<img src='http://i.imgur.com/fFhYI.gif' width='40'/>
:x:
<img src='http://i.imgur.com/e50uc.gif' width='40'/>
:y:
<img src='http://i.imgur.com/RjY5y.gif' width='40'/>
:z:
<img src='http://i.imgur.com/lrZEF.gif' width='40'/>
:ab:
<br/>
</b>
</b:if>

Save Template dan lihat hasilnya.

Cara Membuat Emoticon Di Kolom Komentar Blog

Jangan lupa Berkomentar,,,

Kamis, April 18, 2013

Batas (limit) penggunaan Blogspot

Senin, April 08, 2013

KODE WARNA

Minggu, April 07, 2013

Kriteria Penilaian Alexa Rank

Cara Meningkatkan Rank Alexa

Sabtu, Maret 16, 2013

Sabtu, Maret 09, 2013

Jumat, Maret 08, 2013

Kamis, Maret 07, 2013

Cara membuat daftar isi otomatis di blog

Rabu, Maret 06, 2013

Senin, Maret 04, 2013

Minggu, Maret 03, 2013

Sabtu, Maret 02, 2013

Welcome To my SIte

Studio21

Popular Posts

free visitor

Sahabat Blogger

Members

Search Engine

Thanks Atas Kunjungannya

View MY Instagram

My Other Site

Tentang Saya

Entri Populer

Daftar Isi

Total Pengunjung

Label

FOLLOW

D3554M