Copas 5menit: Tips DanTrik Ngeblog

Showing posts with label Tips DanTrik Ngeblog. Show all posts

Sunday, March 11, 2012

Cara Membuat Daftar Isi Blog

Cara Membuat Daftar Isi Di Blog or Cara Membuat Daftar Isi Blog or Tutorial blog Cara membuat daftar isi blog Otomatis Versi V.2 Tutorial blogspot Cara membuat daftar isi Di blog Otomatis Versi V.1ini yang paling Canggih hal yang bisa kita lakukan untuk menampilan isi posting dalam blog secara lengkap dan juga bisa memudahkan pembaca untuk mengakses isi blog yang ada. Sekarang kita akan mencoba Cara Membuat Widget Daftar Isi Otomatis di Blog yang menampilkan isi posting secara keseluruhan yang terbagi dalam label posting secara otomatis,

Cara Membuat/Memasang Widget Daftar Isi otomatis

Baiklah Langsung Saja Kita Lihat Tata Cara Pembuatannya Cara Membuat Daftar Isi Di Blog Di Bawah ini :
Langkah Pertama

Login Ke Acount Blogger Kamu

Lalu Pilih Tata Letak

Klik Page Element

Klik Add Gadget

Klik plus button (+) for HTML/JavaScript.

Copy and paste kode dibawah ini

<div style="overflow:auto;
padding-left:5px;
border:1px solid white;
width:95%;
height:400px;
background:transparent url(#) no-repeat ;">
<script language="javascript">
numposts=9999;
home_page="BLOK KAMU.blogspot.com";
explanpost="new";
</script>
<ul><script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/sitemap-np.js"></script></ul>
</div>
Keterangan :
Kode width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan ).
dan Untuk Kode Warna Silakan Lihat Di Kode Warna Blog

Lihat Juga Tutorial Blog lainnya : Cara membuat daftar isi blog dengan scroll

Rating:4.5

Sunday, December 4, 2011

Cara Membuat Widget Fans Page FB Menjadi Lebih Menarik

Cara Membuat Widget Fans Page FB Menjadi Lebih Menarik or Cara Membuat Widget Like FB Menarik (Fans Page FB) Menjadi Lebih Gokill kenapa gokill karna Dengan Modifikasi/Edit Halaman Like Fans Page Facebook itu Bisa Bergoyang-Goyang Juga Berpindah Ke Kanan Kekiri Serta Menghilang Hilang menarik bukan selain itu juga kelebihan positif dari (Fans Page FB)= bisa membuat pengunjung blog merasa senang kemudian secara otomatis mereka me Like Halaman Fans Page Facebook kita artinya bertambah pula penggemar blog kita he,he,,

ok dah langsung saja kita ikuti Langkah Langkah Juga Tutorial Cara Membuat Widget Fans Page FB Menjadi Lebih Menarik or Cara Membuat Like FB Menarik (Fans Page FB) Menjadi Lebih Gokill =

Login Ke Account Blogger Sobat
KLik Rancangan Lalu Tambahkan GadgetHTML/Javascript
Kemudian Masukkan Kode Di Bawah ini =

<script src="http://ojel88.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script><div id="fbslidebox" style="position: fixed; width: 342px; overflow: hidden; bottom: 20px; right: 10px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbY8zagVxEI6D0ef9Twve1nCFT4YTdos_qq8NLpJqXl30xJaPESdIUfP4HowCe66FPigSlmvSokMgLxLrpzUzvV3Guxbq7U9tccJEiUzodJczPJSjpc7v02cKj8HPeCK7Tesjhc35jlZjy/s0/bo-bg-html.gif") repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(17, 17, 17); display: block;">
<div style="width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;">
<a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="http://www.blogger.com/post-create.g?blogID=4413479108497015649#">Exit</a>
<strong style="color: rgb(102, 173, 61);">Jangan Lupa Klik Like Ya</strong>
<iframe allowtransparency="true" style="border: medium none; overflow: hidden; width: 300px; height: 250px;" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/htclampung&width=300&colorscheme=dark&show_faces=true&stream=false&header=true&height=250" scrolling="no" frameborder="0">&amp;amp;amp;amp;lt;br&amp;amp;amp;amp;gt;</iframe>
</div></div>

Keterangan = Tuliasn Bold Hitam Ganti Blog ID SOBAT Tulisan Merah Ganti Dengan Halaman FB Sobat dan Tulisan BIRU ganti dengan kode Google Code Sobat sendiri jika ingin lebih ringan tampilan loadingnya akan tetapi jika blog sobat tidak banyak memakai javascript maka tidak diubah kodenya pun tidak masalah menurut saya

Semoga artikel Tips dan Trik Blog tentang Cara Membuat Widget Fans Page FB Menjadi Lebih Menarik or Cara Membuat Like FB Menarik (Fans Page FB) Menjadi Lebih Gokill bermanfaat buat sobat semua ^_^

Saya tau artikel ini dari om ELANG AJIB

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Wednesday, November 30, 2011

Cara Membuat Recent Post Bergerak Ke Bawah

Cara Membuat Recent Post Bergerak Ke Bawah yah itulah Tips Dan Trik Tutorial Blogspot tentang Membuat Recent Post Bergerak Ke Bawah or hanya keyword google Cara Membuat Recent Post + Thumbnail dengan Jquery
Recent Post adalah widget Blog yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Cara Membuat Recent Post Bergerak Ke Bawah Dengan widget recent post ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir yang diposting di blog. Dengan sekali klik, pengunjung akan langsung menuju ke artikel yang masih fresh.

Cara Membuat Recent Post Bergerak ,Di artikel sebelumnya saya sudah menulis tutorial membuat Recent Post / Artikel Terakhir dengan Thumbnail. Dengan fungsi thumbnail, Widget Recent Post akan menampilkan Gambar yang ada di dalam artikel seperti yang biasa kita jumpai pada Widget Related Post / Artikel Terkait yang dipasang di akhir artikel / postingan blog.

Secara tidak sengaja, saya menghapus JavaScript Recent Post Thumbnail BLOGGERBUGIS yang tersimpan di sites google. Karena malas upload kembali JSnya, sekalian saja saya memasang Widget Recent Post Thumbnail yang baru yang telah di tambahkan efek MARQUEE / Berjalan. Dengan efek marquee, Widget Recent Post Thumbnail BB jadi tampak lebih menarik. Related Post Thumbnail akan BERGERAK turun dengan teratur. Hasilnya, jadilah Widget Recent Post Thumbnail Animasi hehehe....
Belum puas dengan animasinya, sekalian saja saya tambahkan bingkai yang tidak bisa di gunakan untuk foto dinding. Hasilnya... silhkan lihat sendiri pada sidebar blog BLOGGERBUGIS ini (kalau belum diganti dengan yang lebih canggih hehe...).

Cara Membuat Recent Post Bergerak, Mau tahu cara memasang Widget Related Post Tumbnail Animasi yang bergerak turun dan dilengkapi dengan bingkai yang tidak bisa digunakan untuk foto dinding di rumah pada blog anda ? (Kalau kalimatnya terlalu panjang, silahkan ambil nafas dulu. Bernafas melalui hidung... lalu keluarkan melalui bokong hehehehe......).

Copy kode HTML berikut :

<center><table border="2" cellpadding="7"><tbody><tr><td><center><style type="text/css">
#rp_plus_img{height:280px;overflow:hidden;border:solid 0px #000000;padding:6px 10px 14px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:0px;list-style:none;}
#rp_plus_img a{color: #000000;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#000000;text-align:left;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#DF0101;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #DF0101;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/bloggerbugis/js/RergerakBB4U%282%29.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 45;
</script> <script src="http://blogger-bugis.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center></td></tr></tbody></table></center>

Paste di NOTEPAD atau Microsoft Office Word.

Ganti kode yang berwarna BIRU dengan url blog anda.

Selanjutnya....................

Tambahkan gadget baru pada blog anda dengan memilih kotak HTML/JavaScript lau paste kode Related Post yang telah anda ganti dengan URL BLOGANDA sendiri lalu simpan. Jika anda belum tahu cara menambahkan gadget baru pada BLOG BLOGSPOT. silahkan baca A. MENAMBAHKAN WIDGET DISINI

Selesai........

Jika ingin mengedit kode yang lain, silahkan edit kode HTML Recent Postnya yang di beri warna MERAH sesuai petunjuk berikut :

height:280px; Adalah tinggi Kotak Recent Post. Silahkan ganti angka 280 menjadi angka yang lebih banyak jika ingin membut kotak yang lebih panjang atau sebaliknya.

font-size:14px;font-weight:bold !important;color:#000000; Adalah kode untuk Besar huruf dan warna Judul artikel. Ganti angka 14 menjadi lebih besar jika ingin membuat Teks Judul menjadi lebih besar dan sebaliknya. Kode #000000 adalah kode warna hitam. Silahkan diganti dengan kode warna anda jika anda menginginkan warna lain pada judul artikel yang akan ditampilkan Related Post.

font-size:12px;font-weight:normal !important;color:#DF0101; Adalah kode untuk tulisan yang ada di bawah gambar thumbnail yang merupakan kalimat pertama artikel. Cara mengedit kodenya sama seperti cara mengedit judul artikel di atas.

var speed = 1000;
var pause = 3500; Adalah kecepatan Gambar bergerak Turun dan Lama Gambar Terdiam sebelum bergerak. Ganti angka 1000 jika ingin membuat gambarnya bergerak turun lebih cepat dan sebaliknya. Begitu juga dengan angka 3500 jika ingin membuat gambar terdiam lebih lama dan sebaliknya, sebelum gambar bergerak turun.

var numposts = 20; adalah jumlah judul postingan / artikel yang akan di tampilkan secara bergantian. Silahkan ganti angka 20 menjadi lebih besar jika ingin menampilkan lebih banyak judul artikel pada widget recent postnya, atau sebaliknya.

Jika anda masih ingin mengedit kode yang lain, silahkan saja. Kalau widgetnya hancur baru tau rasa, Oce bro.. semoga Tutorialnya Cara Membuat Recent Post Bergerak bermanfaat... Salam Blogger...

Source = Blogger BUGGIS

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Tuesday, November 29, 2011

Cara Mengubah Blog NoFollow Jadi DoFollow

Pada postingan saya kali ini, saya akan membahas tentang blog NoFollow dan DoFollow. ok langsung aja apa yang dimaksud dengan NoFollow dan DoFollow

Cara Mengubah Blog Nofollow Menjadi Dofollow yah itulah judul artikel tutorial blogspot htc kali ini Blog dofollow artinya blog yang memberikan backlink oneway terhadap si pemberi komentar di blog kita. Cara Mengubah Blog Nofollow Menjadi Dofollow
Backlink oneway adalah jika kita berkomentar pada blog yang dofollow, secara otomatis blog kita akan mendapat link balik dari empunya blog secara cuma-cuma dan juga akan membuat blog kita cepat terindeks oleh mesin pencari.

Cara Mengubah Blog Nofollow Menjadi Dofollow, Dengan meninggalkan komentar di blog yang dofollow berarti sama saja kita mempromosikan blog kita. Lihat saja blog-blog yang sudah terkenal yang mempunyai page rank tinggi, disana terlihat puluhan komentar setiap postingannya. Memang ada juga yang enggan mengubah blognya menjadi dofollow dan tetap memakai nofollow mungkin semata - mata untuk menghindari link keluar lebih banyak.

Langkah-langkahnya Cara Mengubah Blog Nofollow Menjadi Dofollow :

Login ke Blogger dengan ID anda.
Klik Tata Letak. Klik Edit HTML, jangan lupa backup dahulu template anda dengan mengklik Download Template Lengkap.
Centang Expand Template Widget
Cari kode yang seperti ini :
Lebih mudahnya klik Ctrl+F dan ketik kata nofollow.

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

Kemudian ganti menjadi seperti berikut ini :

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>http://www.blogger.com/img/blank.gif

simpan template lalu selesai semoga Cara Mengubah Blog Nofollow Menjadi Dofollow bermanfaat buat sobat semua..

source = http://caramembuatyangakumau.blogspot.com

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Monday, November 28, 2011

Cara Membuat Menu Horizontal Drop Down CSS Pada Blog

Cara Membuat Menu Horizontal Drop Down Dengan CSS/Javascript Pada Blog
Pada Kesempatan Kali Ini Saya Akan Membahas Tutorial Blogspot Artikel Tentang Membuat Menu Horizontal Drop down CSS Pada Blog
Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.

Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada menu Blog Ini
Langkah Pertama
Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

Lalu Simpan Template.
Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
Copy dan paste Script dibawah ini

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>

<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

Lalu Simpan Dan Lihat Hasilnya...

Keterangan:
Tanda # untuk Tempat Url yang anda inginkan
Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Sunday, November 27, 2011

Cara Membuat TabView Widget

TabView Widget hadeeh ayo dong sayang Blog HTC kesayangan saya he,he,, Cara Membuat TabView Widget di BLogspot or Cara Membuat TabView Widget Pada Sidebar Blog

ada Hari Ini Saya Akan Memberi Tau Teman Teman Bloggers Semua Tutorial Bagaimana Cara Membuat TabView Widget Di Blog, Tab View sendiri menurut saya adalah sebuah menu untuk meletakkan menu menu lainnya sehingga tidak memakan tempat pada template Blog kita baiklah langsung saja untuk melihat Demonya lihat pada Blog Ini.

Kita Mulai Perhatikan Baik Baik Langkah Langkah Di Bawah ini :
Langkah Pertama

Login ke akun Blogger kamu.

Dari halaman dashboard, pilih Edit HTML.

Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk lebih mudah mencarinya.

lalu copy Script berikut dan letakkan diatas kode ]]></b:skin> tersebut

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}
Langkah Kedua, Setelah itu letakkan kode berikut dibawah kode ]]></b:skin>

<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>
Lalu Simpan Hasil Editing Tersebut.

Langkah Ketiga

Pilih tab Elemen Halaman ( Page Element ).

Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.

Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">


<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>


</div></div></form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>
Keterangan :

Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

Untuk mengganti kode warna bisa kamu lihat disini Kode Warna atau Menggunakan kode warna dalam blogging. Lanjut Artikel Blog ini Tentang cara membuat tab view widget animasi.
Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Membuat Form Berlangganan Email Feedburner

Cara Membuat Form Berlangganan Email Feedburner, or Cara membuat Form "Email Subscriber" / "Berlangganan Lewat Email Saat ini hampir setiap blog menyediakan layanan fasilitas berlangganan posting melalui email. Ingin agar blog Anda terkenal? Gunakan layanan berlangganan artikel via email dengan FeedBurner. Beberapa situs yang menyediakan jasa layanan pengantar posting gratis selain Feedburner adalah Feedblitz dan Zookoda. Saya pakai Feedburner karena fitur yang mereka sediakan terbilang lengkap termasuk layanan pengantar posting melalui email. Selain itu, situs ini adalah milik Google sehingga namanya sekarang adalah Google Feedburner. Untuk mendaftar ke Feedburner Anda cukup memiliki email di gmail yang bisa digunakan untuk login ke feedburner. Secara singkat feedburner adalah situs yang memberikan layanan dalam hal sindikasi atau feed. Anda bisa menempatkan kotak yang berisi tempat untuk mengisikan alamat email dan sebuah tombol dengan tulisan Berlangganan Gratis atau Email Subscriber di mana saja pada bagian blog. Bisa pada sidebar, pada bagian akhir setiap posting atau pada header dan footer blog, tinggal disesuaikan dengan template layout blog. Setting tampilan juga tergantung pemilik blog mau dibuat seperti apa sehingga menarik. Fugsi form berlangganan ini adalah untuk memudahkan pembaca blog agar bisa berlangganan atau mendapatkan informasi terbaru dari posting blog kita yang dikirim melalui email mereka. Jika memang ada posting artikel terbaru, maka para pelanggan yang sudah memasukkan email dan mengkonfirmasi di emailnya secara otomatis mendapatkan kiriman email berisi artikel posting terbaru blog. Tertarik untuk menambahkan aksesoris berlangganan posting via email? Silahkan ikuti cara berikut.

langsung aja dah Cara Membuat Form Berlangganan Email Feedburner Dengan Gambar/BackGround

Kunjungi situs Feedburner (http://www.feedburner.com) dan login dengan akun gmail Anda.

2. Selanjutnya Anda akan ditawarkan kotak untuk mengisikan alamat blog untuk dibakar.

3. Untuk blogger silahkan masukkan alamat feed seperti ini
http://namablog.blogspot.com/feeds/posts/default
Ganti nama blog dengan url blog Anda.

4. Ada kotak kecil bertuliskan "I am a podcaster!" dapat dicentang jika blog Anda hanya berisi video-video. Jika tidak, jangan dicentang. Kemudian klik tombol next.

5. Setelah itu Anda akan ditawarkan untuk mengisi form Feed Title dan Feed Address silahkan diisi. Biasanya Feedburner langsung menyesuaikan dengan judul blog namun Anda dapat menggantinya sesuai kalimat atau kata yang paling cocok. Selanjutnya klik tombol next.

6. Pada halaman berikutnya ada pemberitahuan seperti ini Congrats! Your FeedBurner feed is now live. Want to dress it up a little? Oke sudah selesai dan teruskan dengan mengklik tombol next.

7. Kemudian Anda akan diberi pilihan FeedBurner Stats automatically tracks. Silahkan pilih menu default atau Anda juga dapat menambah menu lain yang ditawarkan. Selanjutnya klik tombol next.

8. Pada halaman berikutnya akan nampak beberapa menu pilihan di bagian atas dan pilih Publicize.

9. Pada menu Publicize Anda akan melihat fitur layanan yang siap Anda gunakan seperti Headline Animator, BuzzBoost, Email Subscriptions, PingShot, FeedCount, Chicklet Chooser dan yang lain. Nah, untuk membuat formulir berlangganan pilih menu Email Subscriptions.

10. Pada halaman Email Subscriptions Anda klik tombol Activate.

11. Selanjutnya feedburner akan memberikan kode html. Yang di atas adalah html yang hasilnya berupa kotak formulir berlangganan melalui email disebut Subscription Form Code dan di bawahnya adalah html yang hasilnya berupa link berlangganan melalui email disebut Subscription Link Code. Saya tawarkan berupa kotak formulir berlangganan melalui email. Pada menu drop down, silahkan pilih use a widget in Blogger (jika blog Anda di blogger). Lalu klik tombol Go! Sebenarnya Anda bisa saja meng-copy kode html tadi ke notepad atau text editor lainnya dan cara pasang ke blogger cukup mudah. Jika ini yang menjadi pilihan, silahkan masuk ke blog Anda dan klik Tata Letak yang membawa Anda ke Elemen Halaman dan klik Tambah Gadget. Pada menu selanjutnya, pilih tambah HTML/Javascript. Nah, Anda paste kode html tadi di situ. Dan klik simpan. Ok, sekarang lihat hasilnya pada blog.

12. Jika mengikuti cara setelah klik Go! tadi, akan terbuka jendela baru pada monitor yang membawa Anda menuju blog yang tadi didaftarkan. Di sana tertulis menambah elemen halaman. Silahkan ganti judul jika perlu dan jika tidak biarkan saja judulnya Subscribe via email. Kemudian klik tombol menambah widget.

13. Widget sudah ditambahkan pada elemen halaman blog. Pilih tempat yang sesuai dengan drag widget tersebut dan tempatkan di bagian blog yang Anda rasa paling cocok.

14. Jika sudah, klik Lihat blog untuk melihat hasilnya. Akan ada form email subscriber.

Nah, kembali ke Feedburner. Hingga saat ini, selain form email subscriber saya juga menggunakan fitur FeedCount yang menunjukkan jumah pembaca blog, Chicklet Chooser dan Optimize serta fitur lain yang membuat blog tampil prima. Untuk fitur-fitur tersebut, Anda bisa mempelajarinya. Agak capek memang, namun saya yakin blog Anda akan semakin terkenal dengan Feedburner. Kalau saya ketik semuanya, waduh capek juga karena begitu banyaknya fitur feedburner di sana. Jika Anda sudah terbiasa dengan kode-kode html, Anda juga dapat mengutak-atik tampilan form berlangganan feedburner dan fitur lainnya. Ok, selamat berjuang.

(Sumber : http://bangdel.blogspot.com)

Semoga Artikel Cara Membuat Form Berlangganan Email Feedburner Dengan Gambar/BackGround Bermanfaat Buat Semua ^_^

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Tela Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Menampilkan Judul Posting Saja Tanpa isi Halaman

Demo Hanya Tampil Judul Posting Saja Ada Di Blog HTC ini ^_^ yah tutorial selanjutnya adalah Cara menampilkan judul posting tanpa isi (halaman) posting or Cara Menampilkan Judul Posting Saja Ketika melakukan pencarian atau membuka isi label (kategory) di blog saya pasti akan melihat hasil tampilan berupa link judul posting beserta tanggal tanpa menampilkan isi posting sama sekali, tentu saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika berselancar di blog kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu yang lama sampai halaman benar-benar terbuka sempurna.

Untuk mengatasi masalah diatas ada baiknya kita hanya menampilkan judul posting beserta tanggal posting saja, selain mempermudah, tentu saja loading page kita akan 50x lebih cepat dari biasanya ketika membuka halaman label.

Lihat contoh gambar yang hanya menampilkan judul posting dan tanggal:

Mari Kita Lihat Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog maksudnya saya ini Cara menampilkan judul posting tanpa isi (halaman) posting :

Pertama :

Buka Template -> Edit HTML -> Jangan lupa lakukan backup template :) -> kemudian beri tanda cek pada 'Expand Widget Templates'

Kedua :

Lihat kode dibawah ini:


<div class='blog-posts hfeed'>

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

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

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

Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna merah diatas dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Ketiga :

Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)

Semoga Artikel Tentang Hanya Tampil Judul Posting Saja Cara menampilkan judul posting tanpa isi (halaman) posting or Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog bermanfaat buat sobat semua ^_^

Sumber = OOM

Cara Membuat READ MORE OTOMATIS Di BLOG

Cara Membuat READ MORE OTOMATIS Di Blog, yah itulah kata kunci blog HTC kali ini ME- RAJAI Tutorial Blogspot di Segala Penjuru Dunia Adalah TUjuan Saya diantaranya Cara Membuat READ MORE Otomatis Di Blog dan Postingan artikel Tutorial Blogspot kali ini akan memberikan Cara Pasang Readmore Otomatis Di Blogspot atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial Cara Membuat READ MORE OTOMATIS Di Blog berikut ini :;;;

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

Semoga Artikel Cara Membuat READ MORE Otomatis di Blogspot bermanfaat buat sobat bloggers semua

Source = http://zona-klik.blogspot.com

Friday, November 25, 2011

Cara Membuat Efek Refresh di Blog

Cara Membuat Efek Refresh di Blog or keyword Google Cara Membuat Efek Reload atau Refresh di Blog, Refresh atau Reload di blogspot. Merupakan salah satu efek yang dibuat untuk ME - Refresh secara Otomatis Blog Anda, contohnya pada Situs Situs Website TErkenal DI Dunia Seperti Facebook, ok dah Daripada menunggu lama

lama mending langsung ke tutorial Blog nya aja ya :

Cara Membuat Efek Reload atau Refresh di Blog :

Pilih Rancangan -- Edit Html - Kemudian Tekan CTRL + F

Letakkan kode berikut sebelum <head> :

Nb : Kode yang berwarna merah adalah waktu untuk merefres dalam satuan detik.
Contoh : Jika anda menulisnya dengan
60 = 1 menit
120 = 2 menit
dan seterusnya.
Ingat ! jangan membuat waktu refres yang terlalu cepat, karena akan mengakibatkan pengunjung anda kesal dan bisa kabur.

Kemudian Save Template.

Semoga Artikel Cara Membuat Efek Reload atau Refresh di Blog

Lihat Juga Posting Paling Populer Blog HTC yang ini Cara Membuat Effect Page peel Dengan jQuery

Warning : Mohon Konfirmasikan Link Anda Kembali Pada Link Populer Blog ini di halaman Homepage Blog ini karna Saya baru ganti template dan tidak membackup Link link sobat,
Mohon Maaf yah Terima Kasih ^_^

Cara Membuat Effect Page peel Dengan jQuery

Cara Membuat Sudut Halaman Blog Terlipat dan Menggulung (Page Peel jQuery) Di Blog Dengan Jquery Atau CSS or keyword Cara Membuat Effect Page peel Dengan jQuery - Seperti yang sudah banyak bertebaran di internet,t utorial cara membuat halaman blog seolah tergulung dan melipat seperti yang sobat dapat lihat di beberapa situs diantaranya adalah blog dari milik HTC di SINI.

Cara Membuat Effect Page peel Dengan jQuery ,Para programmer menamakan sebagai 'Page Peel',seperti pada tutorial-tutorial beberapa waktu lalu,menggunakan jQuery untuk blogger masih banyak diminati,sekedar flasback teknik jQuery pernah kami gunakan dalam membuat menu jQuery,membuat slideshow jQuery,membuat TabView jQuery dan popup jQuery dan masih banyak lagi yang sobat

yah langsung aja dah Copas Langsung DI BLog sobat Tutorial Cara Membuat Effect Page peel Dengan jQuery Buat BLogger dengan CSS/Jquery yah itu hanya keyword google aja semoga ke index postingan ini :D

pergi ke Dashboard,
lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa conteng tulisan Expand Widget Template.
Selanjutnya cari kode </head> berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
Lalu Copy Kode Di Bawah Ini DI Atas Kode </head>
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Selesai Dah Semoga Artikel Cara Membuat Effect Page peel Dengan jQuery

Catatan : Kelebihan Memakai Page Feel ini Tidak Berat Juga Tampilan Blog Terlihat Lebih Menarik ( Silakan Langsung Dipasang Pada BLog Anda Dan Konfirmasi Ke Blog ini Lalu Saya Akan Pasang Link Kalian Secara Otomatis Di HomePage Link Blog Populer Blog ini )

Warning : Mohon Konfirmasikan Link Anda Kembali Pada Link Populer Blog ini di halaman Homepage Blog ini karna Saya baru ganti template dan tidak membackup Link link sobat,
Mohon Maaf yah Terima Kasih ^_^

Menghilangkan Widget di Halaman Posting dan Home

Cara Menghilangkan Widget di Artikel/Home/Postingan Tertentu dan Membuat Widget atau Sidebar Menghilang Dan Berpindah Di Blog atau keyword cara menyembunyikan /Muncul/Menyembunyikan/Menampilkan widget/pada Homepage/halaman dan Sidebar utama, Assalamulaikum Wr.Wb... Pata Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Membahas Tentang Membuat Menu Slide melayang di bagian kiri blog dengan css . Dan Pada Tutorial Yg sama Juga Yaitu Tutorial Blog.. Saya Akan Membahas Tentang Bagaimana Cara Menghilangkan/Membuat Widget Hanya di Halaman Posting dan Home .Saya Disini Akan Membuat Artikel tsb.. Yg Salah Satu Sobat Saya Pesan nih Artikel..
Maksud Artikel Ini Adalah.. Bagaimana Menghilangkan Slah satu sidebar atau Menghilangkan semua sidebar.. dan ataupun menghilangkan widget-widget lainnya dengan css dan beberapa HTML, Dan Juga Memindahkan Letakknya/Posisi Si Widget Tersebut..

Nah Kita mulai ja Penjelasannya Cara Menghilangkan Widget di Halaman Posting dan Home :

<b:if cond='data:blog.pageType != "index"'>
<style>#sidebar-leftwrap{float:right;}#sidebarright{display: none ;}#main-wrapper {width:712px}.post {width:712px}.main .Blog{float:left; margin:0 5px;padding:0;width:739px !important}</style>
</b:if>

Berikut Penjelasaannya :

Untuk KOde Yg Berwarna Merah Itu Adalah HTML Yg Menandakan Pada Halaman Posting Jadi Dihalaman Situ Sobat Bisa Memberinya Style css yg sobat inginkan Ataupun Javascript yg sobat inginkan.

Untuk KOde Yg Berwarna Kuning, Itu Kode Untuk Membuat Sidebar yg disebelah kiri Berpindah Menjadi Sebelah Kanan.. (artinya Sidebar sebelah kiri akan dipindahkan disebelah Kanan Hanya Dalam Halaman Posting) .. ingat Nama sidebar ( #sidebar-leftwrap ) Bisa Berubah-ubah Tergantung Pada Templatenya ,KLo di Template Gradient Red And Black (Template Blog Ini ) baru menggunakan Css Tsb.. Tapi Klo Di Template Blog lain Saya tidak Jamin Cssnya Sperti itu.. Jadi Sobat Harus Mencari Css sidebar Kirinya dulu..

Untuk KOde Yg Berwarna Hijau Tua ,itu Kode Untuk Membuat Sidebar yg disebelah kanan menghilang artinya (Sidebar sebelah kanan akan menghilang Hanya Dalam Halaman Posting) ingat Nama sidebar ( #sidebarright ) Bisa Berubah-ubah Tergantung Pada Templatenya ,KLo di Template Gradient Red And Black (Template Blog Ini ) baru menggunakan Css Tsb.. Tapi Klo Di Template Blog lain Saya tidak Jamin Cssnya Sperti itu.. Jadi Sobat Harus Mencari Css sidebar Kirinya dulu..

Untuk KOde Yg Berwarna Hitam , ituAdalah KOde Widget Posting Maksud KOde Tsb adalah Widget Posting Blog Akan Berubah Ukuran Menjadi 712 px Pada Halaman POsting

Dan Untuk KOde Yg Terakhir Atau KOde Yg Berwarna Biru Itu Adalah KOde Widget Hlaman Blognya Jadi Maksud Dari KOde itu Adalah Widget Blog (Widget Sesudah Posting ) Akan Berubah Ukuran Menjadi 739 px Pada Hlaman Posting

CATATAN :

Taruh/Letakan/Copas KOde/css Dan HTML Tersebut Diatas KOde
ingat Disetiap Template Berbeda2 Css Sidebarnya,Footernya,atau apapun Widgetnya Kecuali Css Posting ( .posting ) dan Css Lapisa Posting/Widget Blog

Ya udah Sekian Posting Blog Kali Ini Semoga Sobat Semua Senang Apa Yg Sudah Saya Bagikan Ini
Oh ya Apabila Sobat Ada yg kurang Jelas Bisa Tanya Langsung Kepada Saya
Silakan Di add Fb Saya (Teja Htc) Bagi yg Blm Nge Add saya dan apaBila Yg sudah nge add saya Bisa langsung tanyakan sama saya.. :)

Sumbernya Blog Adik Saya Sendiri Teja HTC ^_^

Sunday, November 20, 2011

Cara Pasang Like Facebook Di Blog

Cara Pasang Like Facebook Di Blog atau testing keyword artikel blogspot ini soale ada banyak berbagai macam pencarian di google nya Cara Pasang Tombol Facebook Like Di Blog, Cara Membuat Badge Like Facebook di Blog, Cara Membuat Like This Box Facebook
ok deh langsung aja ya sob Cara Memasang Widget Tombol "Like" Facebook di Blog

1. login blog
2. rancangan -> edit HTML (Centang Expand Template Widget )
3. cari kode <data:post.body/>
4. lalu taruh kode dibawah ini, dibawah kode diatas

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100
&action=like&font=arial&colorscheme=light"' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

ok deh selamat mencoba semoga berhasil memasang widget like facebook

baca juga Tentang Efek Hujan Salju di Blog

Cara Membuat Efek hujan Salju Pada Blog

Cara Membuat Efek hujan Salju Pada Blog langsung aja ya sob.... ni ane punya tips Cara Memberi Efek Turun Salju Pada Blog... yang mana artikel tutorial blogspot ini berhubungan dengan Cara Membuat Widget Burung Twitter Terbang Di Blog

sebenernya tips ini cukup gampang kok.. karena kita hanya tinggal memasukkan JS alias Script ke halaman XML kita....

ok langsung aja deh ke langkah-langkahnya Cara Memberi Efek Turun Salju Pada Blog....

1. Login Blogger
2. Klik rancangan --> edit HTML --> centang pada Expand Template Widget
3. Cari kode <head>
4. Lalu masukkan kode dibawa ini ke atas kode <head>http://www.blogger.com/img/blank.gif

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/vikry-Snow.js' type='text/javascript'/>

5. Simpan Templates

contohnya bisa dilihat http://www.formelyna.co.cc/

good luck.........

Source : ViKrY'X MadZ

Cara Membuat SPOILER BLOG

Cara Membuat SPOILER DI BLOG yah itulah Tutorial Blogspot HTC selanjutnya, Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler, keyword Cara Membuat Spoiler Di Blog

Cara Membuat Spoiler Di Blog, Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

� Spoiler Forum misalnya KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.

� Spoiler untuk Blogspot/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam memasang spoiler di blog :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div></div></div></div>

Kode HTML diatas akan memberikan hasil seperti dibawah ini:

Tentang bla..bla.bla..

Jika Ingin Membuat Lebih Indah Dengan Spoiler Background Atau BerWarna Warni SIlakan Edit Sendiri yah :P

Saturday, November 19, 2011

Disable Klik Kanan Pada Blog

Cara Mendisable Klik Kanan Pada Blogspot atau bisa juga dengan keyword Cara Menonaktifkan/Mematikan Klik Kanan Pada Blog yah itulah Tips Dan Trik Blogspot HTC kali ini, Terkadang kita ada kalanya kepingin halaman blog kita tidak bisa di klik kanan oleh orang lain, mungkin karena ada sesuatu hal yang membuat kita terpaksa membuatnya.

Mungkin saja karena kita ingin melindungi semua rahasia-rahasia yang ada di balik klik kanan tersebut. Terlepas dari hal itu, entah anda pingin atau tidak, saya coba membantu cara praktis membuat klik kanan di halaman blog anda agar didisable oleh system.

Untuk itu silahkan ikuti langkah-langkah berikut ini tentang Cara Disable Klik Kanan Pada Blog.

1. Masuk ke Blog anda
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Klik pilihan menu HTML/JavaScript
5. Pastekan script di bawah ini ke dalam kolom konten tersebut

<script>
var message="Maaf, Klik Kanan Saat Ini Saya Disable ";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

6. Silahkan ganti script yang berwarna merah dengan kalimat pilihan anda
7. Klik Simpan
8. Selesai

Selamat mencoba, semoga bermanfaat artikel Cara Disable Klik Kanan Pada Blog ini..

Cara Membuat Navigasi Halaman Ala Google

Cara Membuat Navigasi Halaman Ala Google atau Cara Membuat Navigasi/Halaman Bernomor Seperti dan Bergaya Mbh Google Di BLog yah itulah tutorial blog HTC selanjutnya yaitu bagaimana Cara Membuat Navigasi Pada Blog

Cara Membuat Navigasi Ala Google Pada Blogspot

Sudah paham kan? Jika sobat berminat untuk membuatnya, silahkan ikuti tutorial berikutCara Membuat Navigasi Ala Google Pada Blog. :
1. Login ke akun blogger sobat.
2. Pergi ke tab rancangan, lalu edit HTML.
3. Cari kode ]]></b:skin>, kemudian taruh kode berikut ini TEPAT di atasnya:

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

4. Sekarang cari lagi kode </body>.
5. Jika sudah ketemu, copy dan paste kode berikut TEPAT di atasnya:

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

if(postNum==1) postNum++;
html += html3+ '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){
upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

if(postNum==1) postNum++;
html += html3+ '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ></script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ></script>')
}
}
</script>

6. Save template, dan lihat hasilnya!

Begitulah Kiranya Step by Step Cara Membuat Navigasi/Page Number Ala Google

Semoga Bermanfaat!

Cara Membuat Blog Menjadi Dofollow

Cara Membuat Blog Menjadi Dofollow yah Tutorial Blogspot lagi dah rencana incar visitor yang lebih banyak lagi :v, Blog Dofollow sudah merajarela dimana-mana, dan telah tersebar hingga seluruh dunia. Menanggapi request dari sahabat Deny maka Deny akan menuliskan artikel cara membuat blog menjadi dofollow.

Banyak sobat blogger yang membuat blog menjadi dofollow hanya untuk mendapatkan komentar yang banyak. Selain itu menurut mereka blog dofollow akan menghasilkan pengunjung yang banyak dan terus setia berkunjung dan bahkan berkomentar di blognya (baca: tips mendapatkan pengunjung setia). Cara Membuat Blog Menjadi Dofollow

Jika menurut saya, blog dofollow dan nofollow (baca: apakah dofollow dan nofollow itu?) itu hampir sama saja, namun yang membedakan blog dofollow memberikan backlink yang lebih banyak saat berkomentar daripada blog nofollow, maka itulah yang menimbulkan minat pengunjung untuk berkomentar di blog dofollow.

Apakah anda sudah yakin ingin merubah blog anda menjadi dofollow? Jika anda berminat silakan ikuti tutorial berikut di bawah ini: Cara Membuat Blog Menjadi Dofollow.
1. Login ke akun blogger sobat.
2. Pergi ke tab rancangan, lalu pilih edit html.
3. Centang expand template widget, lalu cari kode berikut:

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

4. Hapus kode yang berwarna merah di atas, sehingga kodenya akan menjadi seperti ini:

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

5. Lalu cari kode berikut ini:

<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

6. Kemudian hapus kode yang berwarna merah di atas, sehingga kodenya akan menjadi seperti ini:
<a expr:href='data:backlink.url'><data:backlink.title/></a>

7. Simpan template.

Selamat anda sudah selesai merubah/membuat blog anda menjadi dofollow. Saya tekankan tidak semua blog dofollow memiliki komentar banyak, terkecuali bagi mereka yang blognya bertraffic tinggi, rajin blogwalking (promosi), ataupun yang memiliki pengunjung setia. Dan tidak mesti juga blog nofollow memiliki komentar sedikit, semua itu tergantung dari blogwalking tadi (berkomentar), kualitas artikel, dan traffic yang lumayan tinggi juga.

Silakan tentukan pilihan anda, apakah anda yakin ingin membuat blog menjadi dofollow? Itu dipilihan anda masing-masing.

Baca Juga Posting Penting Lainnya Mengenai Blog Anda :

Cara Memasang Reply Pada Komentar Blog.
Cara Membuat Artikel Terkait Bergambar.
Cara Agar Blog Jadi Nomor Satu di Google.
Cara Membuat Blog Agar Tampil dan Ke Index di SERP / Search Engine Google .

Source : Blog Daw XP

Cara Menambah Emoticon Pada Kotak Komentar

Cara Menambah Emoticon Pada Kotak Komentar Blogspot atau Cara Membuat/Memasang/Menambah Emoticon Pada Kolom Kotak Komentar Blog ada Banyak Macam Macam Smile/Icon/Emoticon ada Smile Naruto, KAskus dan Yang lainnya , Lihat Juga Tutorial Dan Tips Juga Trik Blog HTC yang Sangat Penting Menurut saya seperti : Cara Memasang Reply Pada Komentar Blog.
Cara Membuat Artikel Terkait Bergambar.
Cara Agar Blog Jadi Nomor Satu di Google.
Cara Membuat Blog Agar Tampil dan Ke Index di SERP / Search Engine Google .

Bagi anda penggemar chating, pasti anda tidak asing lagi menggunakan emotion. Emotion adalah karakter ekspresi lucu berbentuk gambar yang sering digunakan dalam berchating ria atau dalam postingan forum, mungkin dalam yahoo sudah biasa kita menggunakan emotion. Tapi kali ini saya akan memberikan kode emotion untuk ditambah di kolom komentar agar blog sobat bertambah cantik dan elegant dengan emotion ini. Berikut cara-cara yang harus anda lakukan jika ingin Menambah Emoticon Pada Kolom Komentar ini dia cara Cara Menambah Emoticon Pada Kotak Komentar Blogspot atau Cara Membuat/Memasang/Menambah Emoticon Pada Kolom Kotak Komentar Blog :

Cara Menambah Emoticon Pada Kolom Kotak Komentar

1. Login ke akun blogger kamu.
2. Pergi ke Menu Rancangan, pilih Edit HTML.
3. Centang Expand Widget Templates.
4. Cari kode </body>, lalu paste kode di bawah ini di atas kode </body>:

<script src='http://hbhost.googlecode.com/files/yemoticon.js' type='text/javascript'/>

5. Cari kode ini: <p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
6. Copy kode di bawah ini, lalu paste di bawah 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>

Simpan Lalu Lihat Hasilnya...

ha,ha, untung aja di ingatkan saking kebanyakan posting sampe lupa Source : Daw XP
Demikian Posting Tentang Cara Menambah Emoticon Pada Kotak Komentar.