Premium Themes Blogger

1. Login ke blogger dengan akun anda
2. Kemudian pilih Layout
3. Setelah itu pilih Edit HTML
4. Jangan lupa centang kotak kecil Expand Template Widget
5. Backup template anda dengan mengklik link Download Full Template untuk jaga-jaga kalo terjadi kesalahan, anda bisa menggunakan template yang sebelumnya.
6. Cari kode ini :
   #comments-block .comment-body p {
   .................
   .................
   .................
   }
7. Letakkan kode berikut di bawah kode tadi :

   .owner-Body {
   background:#808080;
   margin-left:20px;
   color:#000000;
   }
   .owner-Body p {
   text-align:justify;
   margin:0 0 .75em;
   padding-left:10px;
   background:#F2F5A9;
   border-left:5px solid #2E2E2E;
   }

   Ganti kode "color = warna teks" "background = warna latar teks" dan atur jarak sesuai kebutuhan agar serasi dengan warna dan template blog anda.
8. Cari kode <dd class='comment-body'>
9. Letakkan kode berikut diatasnya :
   

   <b:if cond='data:comment.author == data:post.author'>
   <dd class='owner-Body'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>

   Tambahkan juga kode
   

   </b:if>

   Sehingga secara lengkap hasilnya akan menjadi seperti ini :

   <b:if cond='data:comment.author == data:post.author'>
   <dd class='owner-Body'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
   
   <dd class='comment-body'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   </dd>
   
   </b:if>

10. Simpan template dengan mengklik tombol SAVE TEMPLATE
11. Selesai

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>

</form>

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>

</form>

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>

<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRIUlMtkWj5kImCzw_6NE2McCplUh_q1-Bla2gnrKTiyX2dY8j3nArNcWJUacyRXMSFq9834zuLvTOkeYeCStKqRYyAx3Bbde7edkHS7bam7GuYPDS3L2VLnRU8WP9aOMINuCebzRqznrW/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>

</form>

1. Meningkatkan traffic pengunjung secara instant dan cepat 
2. Mempercepat peningkatan Link Popularity pada Alexa dan PR (untuk Alexa anda harus pasang widget Alexa asli dari situsnya, sedang untuk Google PR, blog anda sebaiknya daftarkan dulu di Google.com/addurl dan Google.com/webmasters/tools, usahakan juga pasang tracker Google.com/analytics)
3. Mencegah Link popularity/PR drop karena blog tidak pernah dapat visitor
4. Blog yg terlihat ramai memberi kesan baik pada visitor dan blogger lain

1. Semakin otomatis dan instant, semakin jelek kualitas visitornya (visitor sekedar numpang lewat) 
2. Pengunjung sebagian besar hanya memiliki 2 tujuan, yaitu Traffic dan Uang 
3. Peningkatan traffic yg tidak wajar, tidak stabil dan berlebihan karena traffic exchange, kurang disukai Search Engine, jadi sebaiknya digunakan seperlunya dan sewajar mungkin, misal; biasanya anda dapatvisitor 50 perhari, jangan langsung dikebut jadi 1000 visitor besoknya, itu namanya tidak wajar dan bisa-bisa anda kena penalty 

1. Login ke blogger dengan akun anda. 
2. Setelah itu pilih tata letak/layout
3. Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget
4. Kemudian cari kode </head> 
5. Kalau sudah ketemu letakkan script ini tepat diatasnya:

<script src='http://enes-sc.googlecode.com/files/rainbowlink.js'/>

1. Pertama anda harus login ke Admin WordPress..
2. Kemudian pada sisi kiri halaman  klik menu [Post] >> [Add New].
   
3. Selanjutnya akan ada tampilan halaman ‘Add New Post’.
   
4. Anda bisa memulai menulis artikel pada mode [Visual].
   
5. Setelah itu pada kolom ‘Publish’ sebelah kanan area penulisan, klik [Edit] Visibility: Public.
   
6. Beri tanda tik [ • ] [Public] dan centang [ √ ] pada [Stick this post to the front page] > [OK].
7. Setelah selesai, klik tombol [Save Draft] bila anda ingin menyimpannya dulu atau klik tombol [Publish] bila anda ingin menampilkannya pada halaman blog anda.
   

• Login ke blogger dengan akun anda.
• Kemudian menuju Rancangan >>Edit HTML.
• Letakkan kode css berikut ini sebelum kode ]]></b:skin>
  

  #pageflip { position: relative }
  #pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
  #pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_vLqgJnf_zIAZ_yTtRIhQOY_5UAthZGkDU6N6Rmy34DPrE-uHAdvJuecqup6AbZs8cq7ousHLAY0tTYtUe4y2hxoTJL-XyV55TFiukGB1EjAD8_nO2dhu_E6DISexALH2JHJqOh-MZM/s1600/large-cuss.jpg) no-repeat right top; text-indent:-9999px }

• Lalu copy semua kode javacsript yang ada  disini dan letakkan diatas kode </head>
• Cari kode <body> dengan menggunakan control f, letakkan kode di bawah ini tepat di bawahnya.
  

  <div id='pageflip'>
  <a href='http://feeds.feedburner.com/co/vlpg' target='_blank'>
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_vLqgJnf_zIAZ_yTtRIhQOY_5UAthZGkDU6N6Rmy34DPrE-uHAdvJuecqup6AbZs8cq7ousHLAY0tTYtUe4y2hxoTJL-XyV55TFiukGB1EjAD8_nO2dhu_E6DISexALH2JHJqOh-MZM/s1600/large-cuss.jpg'/>
  <span class='msg_block'/>
  </a>
  </div>

• Simpan Template.

1. Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
2. Tulisan yang berwarna hijau adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.

<script src='https://sites.google.com/site/bangkolis/javascript/peel_Download Disini.js' type='text/javascript'/>

1. Pertama login ke Admin WordPress anda.
2. Pada sisi kiri halaman  klik menu [Tools] > [Import].
   
3. Pada halaman import, klik link [Blogger].
   
4. Kemudian muncul halaman ‘Import Blogger’ dan klik tombol [Authorize].
5. Setelah muncul halaman Google accounts, masukan email dan password account anda di Blogspot dan klik tombol [Sign in].
6. Kemudian klik tombol [Grant access].
7. Kemudian muncul halaman ‘Blogger Blogs’, pilih blog yang ingin anda import dan klik tombol [Import].
8. Tunggu sampai proses import dari Blogspot ke WordPress selesai.

1. Kunjungi http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini:
   
2. Pilih Background Theme sesuai dengan preferensi kita;
3. Di kolom Display name, masukkan nama yang akan kita tampilkan. Contrenglah opsi Show Yahoo! Messenger display image jika kita ingin menampilkan gambar yang sekarang muncul di YM kita.
4. Pilihlah salah satu ucapan selamat datang di kolom Online Greeting, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
5. Pilihlah salah satu pesan bahwa kita sedang tidak online di kolom Offline message, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
6. Contrenglah opsi Require visitors to enter Nickname to send IM agar setiap orang yang mengirim pesan ke kita diwajibkan mengisikan nama aliasnya (nick name);
7. Pada kolom Save Pingbox as, tulislah nama Pingbox kita. Misal, jika pingbox yang kita bikin sekarang ini akan dipasang di blog, berilah nama Pingbox Blogger atau sesuka anda.
8. Tekan tombol Save;
9. Akan muncul windows bar. Masukanlah Yahoo! ID dan passwordnya, lalu tekan tombol Sign In. Windows itu akan menutup sendiri.
10. Akan muncul kotak berisikan kode yang harus kita pasang. Untuk mendapatkan kode yang pas sesuai peruntukannya, pilihlah jenis blog atau website kita. Misal, jika kita ingin mendpatkan kode untuk Blogger maka kliklah logo dan tulisan Blogger yang tersedia.
11. Tentukan ukuran kotak yang kita inginkan. Sangat disarankan untuk memilih opsi Recommended.
12. Tekan tombol Copy to clippboard.

1. Login ke blogger dengan akun anda, kemudian klik Rancangan/Design >> Tambah/Add Gadget >> pilih HTML/JavaScript
2. Setelah terbuka halaman baru, pada kolom Judul, tulislah Judul yang kita mau, misal: CHATBOX.
3. Pada kolom Konten masukan kode Pingbox yang telah dicopy sebelumnya, caranya letakkan Crusor ke dalam kolom Konten, lalu klik kanan dengan mouse dan pilih paste atau tekan Ctrl + V pada keyboard;
4. Klik Simpan, selesai.

<style type="text/css">

HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}

</style>

1. Login ke Admin WordPress anda.
2. Pada sisi kiri halaman  klik menu [Post] > [Add New].
   
   
3. Dan akan tampil halaman ‘Add New Post’.
   
4. Silahkan mulai menulis pada mode [Visual].
   
5. Setelah selesai anda menulis, letakkan kursor anda diantara tulisan yang akan anda pecah menjadi dua bagian.
6. Setelah itu, klik tombol [Insert More tag].
   
7. Setelah disisipkan read more:
   
8. Setelah selesai, klik tombol [Save Draft] bila anda ingin menyimpannya dulu atau klik tombol [Publish] bila anda ingin menampilkannya pada halaman blog anda.
   

1. Bold, menebalkan text.
2. Italic, mencetak miring text.
3. Strikethruough, mencoret text.
4. Unordered list, menampilkan daftar peluru pada text.
5. Orderd list, menampilkan daftar peluru berbentuk angka pada text.
6. Blockquote, membuat baris tulisan khusus pada text.
7. Align left, membuat rata kiri text.
8. Align center, membuat rata tengah text.
9. Align right, membuat rata kanan text.
10. Insert/edit link, membuat dan mengedit link pada text.
11. Unlink, menghapus link pada text.
12. Insert More tag, memecah text menjadi dua bagian (read more).
13. Proofread Writing, untuk pemeriksaan ejaan taxt.
14. Toggle fullscreen mode, menampilakan halaman penuh penulisan.
15. Show/Hide Kitchen Sink, menampilkan dan menyembunyikan tombol tambahan fasilitas penyuntingan text.

Untuk melihat tombol tambahan fasilitas penyuntingan yang lainnya, klik tombol (Show/Hide Kitchen Sink).

1. Paragraph, membuat format gaya penulisan text.
2. Underline, menampilkan garis bawah pada text.
3. Align full, membuat rata kanan dan kiri pada text.
4. Select text color, memberi warna pada huruf.
5. Paste as Plain Text, menempelkan text melalui mode bebas pengkodean.
6. Paste from Word, menempelkan text dari aplikasi word.
7. Remove formatting, membersihkan format yang ada pada tulisan seperti semula.
8. Insert custom character, menampilkan daftar karakter dan simbol penulisan.
9. Outdent, membuat text menjorok keluar.
10. Indent, membuat text menjorok kedalam.
11. Undo, kembali satu aksi ke belakang aktifitas penyuntingan.
12. Redo, kembali satu aksi kedepan aktifitas penyuntingan.
13. Help, bantuan.

1. Visual, menampilkan mode penulisan dalam bentuk icon.
2. HTML, menampilakan mode penulisan dalam bentuk kode HTML.

1. Login ke blogger dengan akun anda
2. Rancangan >> Edit HTML
3. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.
   

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

4. Text yang dicetak tebal adalah posisinya, kalau pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top"
5. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
   

   <div id="gambar_mojok">
   <a href="http://freedownloadcopasthemes.blogspot.com">
   <img src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" border="0" /></a>
   </div>

6. Jika anda pingin yang ada disitu bukan gambar tetapi jam, kalender, hit counter atau widget-widget yang lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
7. Simpan hasil kerja kamu dan lihat hasilnya

• Kode url yang berwarna bitu http://freedownloadcopasthemes.blogspot.com" ganti dengan url blog anda.
• Warna merah http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif adalah url gambar yang anda bisa ganti sesuai keinginan.

<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse"

border width="383">
<tr>
<td>kode banner1</td>
<td>kode banner2</td>
<td>kode banner3</td>
</tr>
</table>

<a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>

<a href="http://www.neobux.com/?r=ncmajid"><img src="http://images.neobux.com/imagens/banner3.gif" width="125" height="125"></a>

<a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>

Mudah bukan? selamat berkreasi dan semoga bermanfaat.

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

<ul class='v2' id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

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

<script type='text/javascript'>


$(document).ready(function()  {


$(&quot;#topnav  li&quot;).prepend(&quot;<span/>&quot;); //Throws an  empty span tag right before the a tag

$(&quot;#topnav  li&quot;).each(function() { //For each list item...
var  linkText = $(this).find(&quot;a&quot;).html(); //Find the text  inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the  text in the span tag
});

$(&quot;#topnav  li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop:  &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop:  &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

<ul id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

1. Anda harus login dulu di wordpress
2. Pada halaman dashboard, pilih menu tampilan >> typekit fonts

3. Jika Anda belum pernah Sign Up sebelumnya, maka klik menu Sign Up, jika sudah pernah Sign Up, maka teman-teman tinggal memilih menu update ID

4. Pilih Try it for free

5. Setelah itu isi formulir pendaftaran yang tampak seperti gambar di bawah ini, dan pilih create my account

6. Pilih jenis layanan yang Anda inginkan, pada tutorial kali ini, saya sarankan memilih yang Free

7. Kode di bawah ini perlu diingat karena akan digunakan pada proses selanjutnya.

8. Jangan lupa untuk mengklik tombol Get Starter
9. Pilih tombol All fonts

10. Pilih add to kit pada font yang diinginkan

11. Pada gambar di bawah ini masukkan tag menu yang diinginkan pada kotak inputan yang bernama selector, di sini saya mengetikkan h1, lalu pilih add, pilih publish

12. Kembali ke menu tampilan > typekit fonts, masukkan kode yang Anda peroleh pada proses Sign Up lalu pilih Update ID

13. Untuk mencobanya Anda dapat membuat postingan baru. Inputkan postingan dalam bentuk html dengan terlebih dahulu diberi tag, sesuai dengan yang Anda telah inputkan pada inputan Selector, pada tutorial ini saya mencoba untuk menginputkan <h1> testing <h1>

14. Hasil tampilan akhir.