Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Kotak Posting HTML

Written By V - Net Kudukeras on Sabtu, 11 Juni 2011 | 06.24

Sebenarnya posting saya ini bukan Membuat Kotak HTML, tapi setidaknya lebih memisahkan atau menandai pada posting kata-kata dengan kode script atau HTML. Sebenarnya bukan kotak, tapi suma sekedar membuat posting tersendiri pada HTML. Baik langsung saja.
1. Buka Blog sobat
2. Klik rancangan, trus edit HTML.
3. Ane ingetin jangan lupa di backup dulu.
4. cari kode ini :

]]></b:skin>


5. Setelah ketemu paste kode di berikut ini di atas kode skin tersebut

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}


Note : kode dengan warna bisa sobat ganti sesuai selera.
Url juga ganti dengan alamat url tempat sobat menyimpan gambar,
ukuran normalnya, 125px x 60px (lebih kurang tidak apa-apa asal
jangan terlalu besar atau kecil)


6. Simpan template
7. Lihat hasilnya. (Contoh seperti punya saya ini)

Nah seperti itulah Membuat kotak Posting HTML semoga bermanfaat. Mudah-mudahan cara ini akan terus digunakan untuk posting yang menggunakan HTML. Sekian dari saya n, keep blogging
Update :
Untuk melakukan posting, silakan copy code ini :
<div class="codeview">

Ketik kode HTML, css, Javascript code disini </div>
Kalau takut lupa silakan paste di tempale posting aja. caranya :
1. buka Pengaturan
2. pilih format
3. Paste di kotak template posting kemudian simpan n masukkan codenya di antara kode tersebut.




the source of : ukicool
06.24 | 0 komentar | Read More

Cara Menghilangkan Navbar di Blog

Written By V - Net Kudukeras on Kamis, 18 Februari 2010 | 09.27


Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.



Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}




Atau bisa juga menaruh kode berikut persis di bawah kode :


<style type="text/css"><br/>#navbar-iframe {display:none;}<br /></style>




Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

# Untuk template klasik


1. Sign in di blogger


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman


5. Copy kode berikut lalu paste di atas kode



/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}




6. Klik tombol Simpan Perubahan Template


7. Selesai.




# Untuk template baru


1. Sign in di blogger


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data


5. Copy kode berikut lalu paste di atas kode ]]>



/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}




6. Klik tombol Simpan Template


7. Selesai.



Selamat menikmati blog tanpa navbar !
09.27 | 1 komentar | Read More

Cara Membuat Spoiler Di Posting Blog / Forum

Written By V - Net Kudukeras on Selasa, 16 Februari 2010 | 22.52

Sebelumnya saya akan menjelaskan bagaimana cara membuat spoiler pada posting blog yang ditanya oleh Yoga Adhi Pratama.

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. (berlaku juga untuk web)

Berikut adalah kode javascipt yang harus ditambahkan dalam posting:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>JUDUL></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>



Keterangan:

* Warna merah yang ada dapat diganti sesuai dengan keinginan
* "isi spoiler" dapat di ganti dengan text, gambar, musik, atau video
* Untuk musik dan video yang dimasukan adalah embed kode
* Apa bila spoiler berupa gambar maka di upload terlebih dahulu lalu di ambil linknya di "edit HTML" atau mengambil link upload seperti di photobucket, bannerbreak dll seperti ini:

<a href="http://bunli.blogspot.com"><img border”0” width="200" src="http://bannerbreak.com/banners/2/403/123030631272792456.gif" height="50"/></a>


* dan hasilnya seperti ini:

Show :

 v-net kudukeras

22.52 | 0 komentar | Read More

Cara Menyembunyikan Buku Tamu / Shoutbox

Written By V - Net Kudukeras on Sabtu, 13 Februari 2010 | 01.29

Per-Tama Kali-nya ini saya mempostinkan tampilan buku tamu yang amat mudah. Yaitu Buku Tamu yang bisa sembunyi dari tampilan Firefox kamu, yang animasinya berbeda dengan lain-nya. Pada post ini, tampilan buku tamu seperti pada animasi power point kamu (keren-kan???). Pertama kamu klik tulisan buku tamu, sesudah itu muncul ShoutMix dengan samar-samar, terus menjadi jelas. Langsung saja tanpa panjang lebar, Baca selengkapnya untuk CARA-NYA !!!

CARANYA:
1. Langsung saja masuk Java Script/Edit HTML..
2. Masukkan script di bawah ini

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #88C900;
background:#E5E5E5;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()">[Close]</a></div>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="vnetkudukeras" src="http://www6.shoutmix.com/?vnetkudukeras" scrolling="auto" width="250" frameborder="0" height="450">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www6.shoutmix.com/?vnetkudukeras"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;View shoutbox&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;</iframe>

<a href="http://www.shoutmix.com/" title="Get your own free shoutbox chat widget at ShoutMix!">Daftar ShoutMix</a>

<!-- End ShoutMix -->
<div style="text-align:right; font-size:10px">
Dapatkan Buku Tamu Seperti Ini di
</div>
<div style="text-align:right; font-size:10px">
<a href="http://v-netkdk.blogspot.com/2010/02/cara-menyembunyikan-buku-tamu-shoutbox.html">v-netkdk.blogspot.com</a>
</div>
</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://farm5.static.flickr.com/4067/4353460446_d5b0632e7d_o.png"/>
</a>
</div>
</script>





3. Ganti teks yang Di-BOLD, dengan kode ShoutMix, atau semancamnya dengan milik anda!

Gampang kan??? Anda juga bisa mendapatkan
Buku Tamu Keren dari www.yuli-mylovely.blogspot.com!!
Selamat Mencoba!!

4. Oh iya, buat kamu yang mau ganti bullet Buku Tamunya (icon yang di-klik utk memunculkan Buku Tamu itu-loh, yang bertuliskan Buku Tamu, Ngerti-kan ???) bisa ganti alamat icon-nya yang ditebalin (adakan alamat yg bawah tu na!!!) ganti aja dengan alamat icon kamu,,,Bisa kok. . .
01.29 | 0 komentar | Read More

Membuat Tab View Bag 2

Tab View merupakan sebuah Widget yang dapat meletakkan link atau gambar atau apapun juga kedalamnya, yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah, dengan Tab View ini kita dapat menghemat pemakaian Sidebar. Dan banyak sekali cara pembuatan Tab View begitupun Bentuknya, caranya berikut ini :

Berikut langkah-langkahnya

1. Login ke blogger dengan ID anda

2. Lalu Klik Menu Templates


3. Klik Sub Menu Edit HTML

4. Pada Kotak Edit HTML cari Kode ]]></b:skin>

5. Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}


6. Lalu letakkan kode berikut dibawah kode <head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>


7. Save Template

8. Pergi ke halaman Element Halaman

9. Klik Add Widget Element

10. Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>


12. Klik Save. (selesai sudah)

-------------------------------------------------------------------------------------
Untuk Lebih paham ini saya kasih script tab view punya saya, anda/ kamu/ saudara/ saudari bisa mengotak - atik script berikut ini !!!!

<form action="tabateonsoft.html" method="get">
<div id="Tabateonsoft" class="Tabateonsoft">
<div class="TFs">
<a>Recent Post</a>
<a>Recent Comment</a>
<a>About Visitor</a>
<a>Top Post</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<script style="text/javascript" src="http://sites.google.com/site/ruangsc/enes/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="httphttp://v-netkdk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<script style="text/javascript" src="http://sites.google.com/site/hostingfreesite/javascript/Recent_Comments.js"></script><script style="text/javascript">var numcomments = 7;var showcommentdate = true;var showposttitle = true;var numchars = 75;var standardstyling = true;</script><script src="http://symoi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<script src="http://www.e-referrer.com/link.js" type="text/javascript">
</script>
<script type="text/javascript">
write_ref(53583);
</script>
<div style="border:0px;padding:0px;border-collapse:collapse;text-align:center;margin-left:auto;margin-right:auto;font-size:xx-small">
<a href="http://www.e-referrer.com/" target="new" title="Visit eReferrer and get your own FREE referrer list!">v-netkdk.blogspot.com</a>
</div>

<center>
<!-- Site Meter -->
<script src="http://s26.sitemeter.com/js/counter.js?site=s26symoi" type="text/javascript">
</script>
<noscript>
<a href="http://s26.sitemeter.com/stats.asp?site=s26v-netkdk" target="_top">
<img border="0" alt="Site Meter" src="http://s26.sitemeter.com/meter.asp?site=s26symoi"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter --></center>

<center>
<a href="http://whos.amung.us/stats/ido4jz1bs8hr/"><img border="0" width="81" src="http://whos.amung.us/widget/ido4jz1bs8hr.png" height="29" title="Click to see how many people are online"/></a></center>

<!-- Begin Shinystat Free MSN code -->
<div align="center">
<a href="http://www.shinystat.com" target="_top">
<img border="0" alt="Free hit counter" src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=symoi"/></a>
</div>
<!-- End Shinystat Free MSN code -->

<center>
<script language="JavaScript" src="http://xslt.alexa.com/site_stats/js/s/a?url=symoi.blogspot.com" type="text/javascript"></script></center>

<center>
<a href="http://www.ipnow.org"><img border="0" src="http://www.ipnow.org/images/1/00FF00/000000/newmyinfo.jpg"/></a></center>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1db0519c1a1484330328c8c455a513c7&url=http%3A%2F%2Fsymoi.blogspot.com&num=10" type="text/javascript"></script>
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>






00.42 | 0 komentar | Read More

Cara Membuat Penomoran (Numbering) di Blog

Written By V - Net Kudukeras on Rabu, 10 Februari 2010 | 01.46

Apa sih yang dimaksud dengan penomoran atau numbering? Yang dimaksud dengan penomoran adalah pemberian nomor pada daftar, biasanya penomoran dimulai dari angka 1 dan terus

meningkat seiring dengan bertambahnya daftar tersebut.

Sebagai contoh, anda ingin membuat sebuah daftar mengenai cara-cara posting artikel di blogger.com :

Langkah-langkah dalam memposting suatu artikel:

  1. Sebaiknya klik terlebih dahulu " Edit HTML
  2. Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda
  3. Klik tombol " Preview " untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
  4. Klik tombol " publish ". Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Mungkin ada yang pernah mengalami sulitnya membuat penomoran di blogger seperti yang pernah saya alami. Anda bisa menggunakan kode HTML seperti ini:


<ol>
<li>
</ol>



Coba diterapkan pada contoh di atas :

Langkah-langkah dalam memposting suatu artikel:

<ol>
<li>Sebaiknya klik terlebih dahulu " Edit HTML".
<li>Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
<li>Klik tombol " Preview " untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
<li>Klik tombol " publish ". Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.
</ol>

Selesai. Artikel anda pun terlihat rapi. Cara yang saya gunakan sangat mudah, ada cara lain, namun lebih sulit. Yaitu menggunakan kode style="TEXT=INDENT"
01.46 | 0 komentar | Read More

Pasang Widget Google Translate

Written By V - Net Kudukeras on Selasa, 09 Februari 2010 | 18.58

Widget yang akan terpasang adalah seperti gambar berikut, silahkan sorotkan mouse anda ke gambar-gambar bendera yang ada sehingga terlihat sedikit efek blur sebagai pemanis :

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Bagi anda yang tertarik untuk memasang widget ini, berikut adalah langkah-langkahnya :

  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak
  3. Klik tab Elemen Halaman

4. Klik Tambah Gadget

5. Klik tanda plus (+) untuk HTML/Javascript

6. Copy paste kode google translate ke dalam kolom yang tersedia


<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXTRAMlTVO1vsuZJpafv1JDH06EHl6YND9fjK6wH09wS8v_CwaKPRkWJdQDDpPf_SsWEf11AiziOJuCs2DZz6RfdDp7MdKKe847neWLnG_GMmDIrJUo39Us8pMKID-uM94oj2Sob-A4Y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiz6U-s2jSSZjTU5n2o5J7_hg1qjOZWmDhp2WrroUy_NfLSh8yBR6DQtYiaU05Or7pj12Xq7n3ghOD_1OKmC1J0-iXYoaw0K17xsJnDD7Uy-4b6A-v0aR64JVHqPZlXoO7I0W1IdQEFRA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGap9rWuMO72U6Fx0zJVTR5ADrNn7LCrkYTGhzJJJ3w5VQWh8u262kCY_WUT5R6w65X_8jNPYTKLaLUOmJXoz11ZzgzZbpRkf08puyp3_3rIwuqecdqzXOCdWoctdM4B5C1kyMYXDrnlHX/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBJcUhm8oIbhTZs-SqF5SJN8ltD6bqIppTyH9mxRYS433ZoGNlYk8uxMbh8HTOfokcM5v-i86U3PfjRL4DFC8xSsFRrOPrGXxlTdOG6ZOr3JdyVn2O9fKNVK3oyfEVf3Uzw9CXun5TXkF/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvPg7t-Jbh0tl1e_V452nUjNSa6xJSXPqgBdRbwLNho1tXG26MqSo6mscdS3ZGEIK8fnOmx800F2jX_RycmdPCY_MyH5oiVrVQnXcz67B2tFM2rvGz1Lcasa_ZlxHPwflXDQN0mmehz1g/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjVd1d6ySb_r6G5ZtvuOnyfrNq9l0yK7SPEZ103YuyfiCM7ORHS4B8Nvr9bQPiptDGdA7iEt_x5COAwwoHuMecEJvRvDNm8q4o_TWhWsRaOmljsTnY2G1HSo1dUIXC4Zs1WdDCUmyIDs/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQTI7X7WJDYbaVSmWH5MxIkLeFTNObJJ9moDl_QaY7FhC3y2NycajQPE_F3sJ4DlmOBSq8ysBbt1Hr3kg0YGrMjDby1bk7mYz7r394ANx2lkIpB6yh3mFABVIBiuB-PzKDjD3n-VXK90/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQyhAs7FlMht4S4GUsMyBmqRWmWUsDeok58pd6l8u_pmm0k0pT7HO_5Tfvekyim1DnNVl1NkmIOdgN3Bdsc9z0-xXC6_f9y9zDFAk4134QUKoIWQ8954moxknAwAxRFc0HK54lhyPUcI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwgKwaXmuB0Zgamc2KtjYfb-PVfXhdZG1tKHHJytpI7TBUF17tp02cuJC1pLg_0ES5CY4inQzI7aObMfl0istFD1oRycEAlzHSFdkuaXlKtStN4m51fMNaFccIWcSnzy4SJzLaSuXiJDCS/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wA-QDdVhPs-OGafUnysS7g2Hl1rh0SfPjY41AIjvqTi8fGO60srdr2X4wCv64D6MGs7rn32GFOhRj4aVecPWzSzgxmIaO84msDPtNdFKoWo4mlxdse3QX85VK1DD7VysM18JtKHYSjM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuwqKEehuv-IPswcG7IPzZ50gnRVkJLzHq5VKbRJwIiQKBIUIv1ea6svN5IkuT4D8MYJHXaEyFWsZNjYgylKddHPHPr6e3s8TBmQlbiHr33FhM34R2s2uEtHl__VldtUIopCVjZwj60s/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVs433jaMv4hEwg_rV6dr2LnLTwyM-Q_g13yXnV0Ed0WSAhN4FNhXmN_puN5mt_Q2DMwdeoEFxgR6OE4t9uMXiHALM2tcppIwvmPsD0Hwv4rGHExttlF9nwLvaKgGc1NsWBHJhvouqabA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=”font-size:10px;margin:8px 0px 3px 0px”>

by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

18.58 | 0 komentar | Read More

Cara Memasang Widget Daftar Isi Pada Blogger

Daftar isi di blog atau suatu Situs sangatlah penting perannya, karena ini dapat mempermudah pembaca kita menemukan artikel-artikel lain di blog kita.
Setelah berkutat berhari-hari dengan javascript, akhirnya selesai juga script untuk membuat daftar isi blog.

Daftar isi ini tidak hanya menampilkan judul dan link-nya, tapi juga menampilkan label, tanggal postingan, serta ringkasan dari artikel-artikel kita.

Selain itu, daftar isi ini dapat di-filter untuk menampilkan beberapa artikel dengan label atau tanggal tertentu saja, dan dapat juga diurutkan sesuai tanggal atau judulnya.
Untuk contohnya, kamu bisa lihat di sini.

Caranya:

  • Masuk ke account Blogger kamu, pilih "Posting" - "New Post",
  • Kemudian isi judulnya dengan judul yang kamu inginkan, seperti "Daftar Isi" atau semacamnya,
  • Kemudian copy-paste kode di bawah ini:


<div id="cl_option">
Tunggu Sebentar, Lagi LOADING Database... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
<script src="http://ia341333.us.archive.org/0/items/THldtbase/contentlist.js"> </script>
<script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"></script>

  • Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
  • Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
  • Untuk mencegah daftar isi ini berada di halaman paling depan, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu,
  • Kalau kamu ingin yang versi bahasa inggris, ganti aja contentlist.js jadi contentlist_en.js.


08.35 | 0 komentar | Read More

Cara Membuat TabView Ala KOMPAS.COM

Tab view memang merupakan widget yang sedang digandrungi saat ini. Bahkan hampir semua design template yang dibuat oleh blogger, dilengkapi dengan widget tab view ini. Nah, dengan sedikit modifikasi, saya membuat tab view ini dengan style ala kompas.com. Dimana tab view ala kompas ini dilengkapi dengan url link di bagian bawah setiap tab. Untuk melihat contohnya, silahkan buka aja kompas online disini. Ok, untuk tutorial cara membuatnya, kita langsung aja ke TKP. Pertama-tama, silahkan download dulu script/text t ab view disini. Kemudian, simpan script/text tersebut dalam bentuk text document (untuk namanya, terserah anda aja), lalu simpan di hosting web anda. Kalo ngk punya hosting berbayar, gunakan aja web hosting gratis seperti : Ripway. setelah selesai, silahkan login ke akun blogger anda.

Langkah berikutnya, silahkan masuk ke halaman edit HTML, seperti biasa jangan lupa expand template. untuk kode CSS-nya, masukkan kode di bawah ini sebelum kode ]]></b:skin> :

div.TabView div.Tabs { height: 24px;margin-left:14px; overflow: hidden;} div.TabView div.Tabs a { float: left; display: block; width: 90px; text-align: center; height: 24px; padding-top:2px; margin:2px; vertical-align: middle; background:#dedede;border:1px solid #222; text-decoration: none; font-family: "Arial", Tahoma; font-size:11px; font-weight: bold; color: #000; } div.TabView div.Tabs a:hover{background-color: #F76541; color: #fff;} div.TabView div.Tabs a.Active{background-color: #fff; color: #000;} div.TabView div.Pages { background:#fff; clear: both; border-top: 1px solid #222; overflow: hidden;font-family:"Arial", Tahoma, Verdana;} div.TabView div.Pages li { border-bottom:1px solid #6D7B8D; background:url("http://i278.photobucket.com/albums/kk100/herdiansyah/bulletarrow.gif") no-repeat 0px .30em; margin:0; padding:0 0 .25em 10px; line-height:1.2em } div.TabView div.Pages div.Page {height: 100%; padding: 0px; overflow: hidden;} div.TabView div.Pages div.Page div.Pad {padding: 3px 5px;}



Setelah itu, simpan kode script/text di bawah ini sebelum kode </head> :

<script src='http://h1.ripway.com/bocahzaman/TabViewku.txt' type='text/javascript'/>


Jangan lupa, http://h1.ripway.com/bocahzaman/TabViewku.txt diganti dengan alamat link hosting penyimpanan script/text tab view anda.

Untuk kode CSS dan script/text-nya sudah selesai, silahkan simpan template anda. Berikutnya, masuklah ke halaman template anda dan tambahkan halaman di bagian template anda sesuai dengan keinginan. Masukkan kode HTML di bawah ini :

<form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 330px;" class="Tabs"> <a>Judul tab 1</a> <a>Judul tab 2</a> <a>Judul tab 3</a> </div> <div style="width: 330px; height:200px;" class="Pages"> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> <div class="Page"> <div class="Pad"> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>



Selesai.....Silahkan Langsung di Coba






08.13 | 0 komentar | Read More

Solusi Hosting Gratis Dari Google Code

Bagi pengguna blog, tentu saja sangat menyadari
keterbatasan hosting, khususnya untuk file dalam bentuk javascript. Selama ini, kita hanya menggunakan hosting gratis pihak ketiga yang penuh kendala. Mulai dari pengaruh loading page yang berat, hingga bandwidth yang ala kadarnya. Tapi jangan khawatir, kini google menyediakan hosting gratis, yang dijamin unlimited bandwidth dengan kecepatan loading yg cukup.





Solusi hosting Anda yang kemarin bermasalah, kini sudah teratasi dengan menggunakan hosting gratis dari Google Code.


Kali ini, saya akan memberikan tips penggunaan hosting gratis file javascript di google. Berikut langkah-langkah yang harus Anda lakukan :

1. Silahkan masuk terlebih dahulu di alamat Google Code Hosting. Dan akan terlihat tampilan gambar seperti di bawah ini :

2. Lalu tekan tombol Create a new project, maka tampilan selanjutnya akan seperti ini :

3. Isilah form sesuai dengan gambar di atas, diakhiri dengan menekan tombol Created Project. Tampilan berikutnya akan seperti ini :

4. Selanjutnya, tekan tombol tab Download lalu tekan kembali tab New Download.

5. Isilah form yang disedikan dengan data file Anda. Setelah itu, browse file javascript Anda, dan silahkan attach. Selanjutnya tekan tombol Summit File.

6. Sekarang file javascript Anda sudah tersimpan di google. Tampilannya akan seperti gambar di bawah ini :

7. Jika anda ingin menggunakan file yang sudah tersimpan, arahkan cursor mouse Anda di nama file yang sudah tersimpan, lalu klik kanan. Copy file tersebut, dan silahkan gunakan di blog Anda.

Cukup mudah bukan?. Yang pasti, solusi hosting Anda yang kemarin bermasalah, kini sudah teratasi dengan menggunakan hosting gratis dari google code tersebut.
08.00 | 2 komentar | Read More

Menulis Rumus Kimia di Blog

Hi... Ketemu lagi deh .... Tapi kali ini aku nulis yang simpel aja dulu. Kita akan menuliskan rumus kimia diblog seperti ini :

1. Nama lain dari air adalah H<sub>2</sub>O
2. 9 adalah hasil dari 3<sup>2</sup>
3. Rumus kimia air Aki adalah H<sub>2</sub>SO<sub>4</sub>

Menulisnyapun sangat mudah hanya membutuhkan sedikit penmabahan tag. Bagaimana ? tertarik lagi kan untuk mengikutinya ? trik ini bisa anda coba dalam hitungan menit saja.....

Walau terkesan rumit tidak tag khusus untuk menulis script diatas . Lebih detilnya sebagai berikut :
1. Tulisan menjorok ke bawah
contoh : Nama lain dari air adalah H2O
script : Nama lain dari air adalah H<sub>2</sub>O
2. Tulisan menjorok ke atas
contoh : 9 adalah hasil dari 32
script : 9 adalah hasil dari 3<sup>2</sup>

Kesimpulannya :
huruf yang akan dibuat sedemikian rupa diapit dengan tag
<sub>...</sub> atau <sup>...</sup>
07.44 | 0 komentar | Read More

Membuat Slider Ala Zinmag

Coba perhatikan header blog ini, apakah ada yang menarik? Iya, slide “featured content”, yang bergerak disertai dengan foto. Menarik bukan? Postingan ini mungkin bukan yang pertama kali, namun tidak membuat saya ciut nyali untuk berbagi. Share tidak mengenal waktu dan tempat, tapi niat dam keinginanlah yang menjadi factor utamanya. Banyakan cuap-cuap ya?he..3x. Oke klo gitu, saya tidak usah berpanjang lebar lagi [ntar isi posting malah ngk connect ma judulnya], mari kita mulai dengan, hal apa yang kita butuhkan......

Pertama, tentu potongan artikel [post summary] dan foto terkait adalah hal yang terpenting. Hal ini berfungsi sebagai isi dari slider [lihat slide featured content di bagian atas]. Setelah itu, ikuti langkah-langkah pemasangannya sebagai berikut....

Pertama, Login kea kun blogger anda. lalu masuk ke edit halaman, terus edit HTML [jangan lupa centang expand widget]. Tahap selanjutnya, cari kode : ]]></b : skin, dan masukan kode script di bawah ini persis di atasnya;


#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

Langkah selanjutnya, masukkan kode di bawah ini tepat di bawah kode : ]]></b : skin :

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>



Terakhir, cari kode dibawah ini :

<div id='header-wrapper'>
.............
.............
……….
……….
</b:section>

setelah itu, masukkan kode di bawah ini tepat di bawah kode di atas :
<!-- Casing -->
<div id='casing'>

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='http://herdiansyah-hamzah.blogspot.com/search/label/Seri%20Tulisan%20Politik' title='Seri Tulisan Politik'>Seri Tulisan Politik</a></h2>
<span class='slmet'/>
<p>Seri tulisan politik adalah kategori gagasan dan pandangan saya terhadap realitas politik Indonesia hari ini. Kaum mapan (borjuasi) telah membangun tembok angkuh yang menenggelamkan kepentingan rakyat miskin selama bertahun-tahun. Untuk itu, perjuangan merebut kekuasan adalah hal mutlak yang harus kita lakukan demi merebut kembali hak rakyat yang telah dirampas selama ini. Memang berat dalam kegamangan dan kebingungan gerakan demokratik hari ini, namun tidak ada yang mustahil jika bangunan persatuan mampu kita bangun bersama.... </p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Featuredpolitics.jpg'/>
</div>

<div class='slide'>
<h2><a href='http://herdiansyah-hamzah.blogspot.com/search/label/Seri%20Tulisan%20Hukum' title='Seri Tulisan Hukum'>Seri Tulisan Hukum</a></h2>
<span class='slmet'/>
<p>Seri tulisan hukum adalah kategori gagasan dan pandangan saya terhadap realitas hukum di Negara kita hari ini. Fenomena korupsi, praktek mafia peradilan dan akses hukum yang begitu sempit bagi masyarakat marginal [miskin], adalah buah nyata dari sistem hukum kita yang masih timpang dan bobrok. Hal ini ditandai dengan kian maraknya praktek pembungkaman dan penutupan ruang dan kesempatan bagi rakyat untuk mendapatkan bantuan dan pelayanan hukum secara cuma sebagaimana yang telah diamanatkan oleh Undang-undang Dasar Negara kita....</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Featuredlaw.jpg'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='Action Games'>Seri Tulisan Daerah</a></h2>
<span class='slmet'/>
<p>Seri Tulisan Daerah ini, tentu akan lebih banyak mengupas tentang situasi Kalimantan Timur, tempat saya bermukin saat ini. Lebih tepatnya, seri ini adalah ide dan gagasan soal fenomena social yang tengah terjadi di daerah, khusunya menyangkut kemiskinan, pengangguran dan kesejahteraan. Kemiskinan merupakan bentuk langsung dari ketidakstabilan ekonomi (unstabilished economic). Meningkatnya kriminalitas, dekadensi moral, ketidakpercayaan diri secara massal, serta lemahnya produktivitas dan kreatifitas, adalah buah dari kemiskinan....</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Daerah.png'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>Seri Blogger Tricks</a></h2>
<span class='slmet'/>
<p>Seri Blogger tricks ini merupakan kumpulan postingan mengenai trik, tips dan segala sesuatu yang berbau blogger. Meskipun tulisan-tulisan disini bukan ide dan gagasan original dari saya, tapi tetap nekad aja deh. Itung-itung berbagi buat sesama. Banyak dari para blogger yang ingin ini dan itu untuk mengoptimalkan dan mempercantik blog, tapi terkadang bingung harus bagaimana. Nah, mampir dan sempatkan aja untuk membuka serial kategori blogger tricks ini. Mudah2an bermanfaat bagi anda yang membacanya...</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/BloggerTricks.png'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>Seri Tulisan Internasional</a></h2>
<span class='slmet'/>
<p>Under Construction, be Patient...</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/internationalnews.png'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

<div class='clear'/>


Selesai, selamat mencoba....

Catatan : untuk merubah background image slide yg berwarna hitam, silahkan cari kode :#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png), dan ganti gambar dan warna sesuai dengan selera anda. Sedangkan isi posting dan gambar bergerak, silahkan ganti sesuai dengan isi blog anda





07.09 | 0 komentar | Read More

115 Aplikasi Facebook Yang Wajib dimiliki Blogger

Dibawah ini saya mengelompokan beberapa Aplikasi Facebook yang wajib dimiliki setiap blogger, sebagian besar aplikasi sangat berguna untuk memperbaharui status jejaringan sosial lainnya melalui Aplikasi Facebook dan sebagian lagi bisa Anda gunakan sebagai cara termudah untuk promosi blog.


Twitter

Anda tentunya sudah mengenal Twitter, dengan tersedianya Twitter diaplikasi Facebook ini berarti mempermudah Anda untuk memperbaharui status di Twitter Anda. Pada dasarnya setiap kali Anda melakukan update melalui twitter maka secara otomatis pesan tersebut akan langsung diimpor sebagai status baru di facebook

Networks Blogs

Anda dapat mempromosikan blog Anda di Facebook melalui aplikasi NetworkedBlogs. NetworkedBlogs adalah komunitas blogger bagi mereka yang mencintai blog. Bergabung sekarang dengan menambahkan blog Anda, dan bergabung dengan blogger lainya yang mempunyai minat yang sama dengan Anda

Friend Feed

Anda mungkin sudah tidak asing dengan Friend Feed. Setelah Anda men-setup profil Anda pada layanan Friendfeed Feed dengan benar, Anda dapat memperbaharui status dan konten dari banyak sumber ke dalam satu lokasi. Dan memungkinkan Anda untuk melakukan import semua status kedalam Facebook Profil!

Ping.fm

Ping.fm memungkinkan Anda untuk melakukan tindakan-tindakan seperti update status melalui aplikasi Ping.fm. Saya tidak akan menjelaskan panjang lebar layanan ini karena Anda mungkin juga sudah mencobanya.

Notes

Dengan Notes Facebook, Anda dapat berbagi kisah kehidupan Anda dengan teman-teman Anda melalui bentuk tulisan. Anda dapat menAndai teman-teman Anda dalam catatan, dan mereka dapat memberi komentar di dalamnya. Aplikasi Notes menampilkan beberapa catatan yang terakhir ditulis oleh teman-teman Anda, catatan yang mana teman-teman Anda telah ditandai, dan tautan ke catatan-catatan Anda.

Blogvote

Konsep di balik Blogvote sangat sederhana, Anda tinggal menelusuri melalui berbagai blog yang telah diajukan dan mengevaluasi kualitas mereka pada skala 1 sampai 5. Anda dapat melihat beberapa blog dengan peringkat teatas, memberi komentar pada blog itu dan tentu saja memungkinkan mengirim blog Anda sendiri.

HTML Profile Box

Letakkan kode HTML di personal profile Anda! Anda bisa menggunakan Format teks untuk bold, italic, underlined, colored, add background color, menggunakan berbagai font, ukuran font, menyisipkan tabel, gambar, link dll. Yang jelas Anda bisa melakukan apa saja yang biasa Anda lakukan dengan HTML!

My Stuff

My Stuff hampir sama dengan aplikasi HTML Profile Box diatas, namun aplikasi ini sangat terbatas dan terbilang sangat sederhana.

RSS Share

Facebook sendiri sebenarnya membolehkan kita melalukan impor RSS Feed melalui Aplikasi Notes, tapi jika Anda ingin mencoba aplikasi lainnya, RSS Share bisa jadi pilihan.

Sosial RSS

Sosial RSS memungkinkan Anda untuk menambahkan RSS Feed ke halaman profile facebook Anda, tersedia 2 pilihan box tab atau Tab khusus di halaman personal Anda atau pada Facebook Page Anda. RSS Anda akan diiperbarui secara otomatis dan memungkinkan pembaca Anda berlangganan ke feed Anda jika mereka menginginkannya!

Mirror Blog

Mirror Blog juga salah satu aplikasi yang memungkinkan Anda melakukan Share RSS Feed. Aplikasi ini juga bisa digunakan untuk menulis posting blog melalui facebook, sayangnya aplikasi ini mengharuskan kita melakukan save username dan password, ini yang membuat saya kurang nyaman menggunakannya.

05.10 | 0 komentar | Read More

86 Menampilkan Next Comments Blog untuk komentar diatas 200

Ki ta yang menggunakan Blogger Custom Template biasanya tidak terlalu memperhatikan masalah Next Comment ini, masalah ini biasanya baru ketahuan setelah jumlah komentar diblog kita sudah melebihi angka 200. Saya dulu sempat kaget juga melihat jumlah komentar blog saya yang seharusnya menampilkan lebih dari 500 komentar dan ternyata dari blogger sendiri hanya membatasi pada 200 komentar saja per artikel, selebihnya blogger meminta pengguna untuk melihat halaman lanjutan yang ditampilkan bedasarkan jumlah komentar dan link ke halaman komentar yang lebih baru.

Tidak adanya fasilitas Next Comment ini pada Custom Template lama juga bukan kesalahan dari pembuat template terdahulu, saya bisa mengatakan ini karena blogger sendiri yang beberapa waktu lalu baru memperbaharui fasilitas ini, akibatnya tempate-template yang lama malah tidak support untuk menampilkan fasilitas ini. Tapi jangan kawatir, untuk menambah fasilitas Next Comment ini gak begitu sulit kok, ikutin saja tutorialnya di bawah ini:

Pertama cari kode dibawah ini, oh iya jangan lupa memberi centang pada Expand Template Widget.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Kalau sudah ketemu Copas aja semua kode dibawah ini, lalu letakan tepat dibawah kode diatas.

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>


Dengan cara yang sama, Copas kembali semua kode diatas, kemudian cari kembali kode dibawah ini dan letakan kode yang baru saja kita copas tadi tepat diatas kode dibawah ini.



<p class='comment-footer'>


Silahkan disimpan, oh iya sayangnya kita tidak bisa melihat hasilnya kecuali komentar di blog kita ada yang sudah mencapai angka lebih dari 200 :(

Yups! Tutorial diatas sebenarnya sudah Finish, tapi bila ingin menampilkan tampilan yang berbeda menggunakan Custom CSS pada Blogger Next Comment, kita bisa menggunakan coding CSS dibawah ini:



.paging-control-container
{
float: right;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 0pt;
font-size: 11px;
font-weight:bold;
}



dah selesai silahkan coba dan praktekkan langsung

04.59 | 0 komentar | Read More

Mengoptimalkan Google Webmaster Tools

merupakan salah satu faktor yang menentukan keberhasilan blog anda di Google Search Engine, hal yang telihat sepele sekalipun kadang memiliki pengaruh besar jika anda benar-benar serius mengoptimalkannya. Sehebat apapun tehnik anda menentukan keyword tanpa dasar setting yang kokoh pada Google Webmaster Tools semua akan sia-sia saja. Agar tidak salah melakukan setting kali ini saya mencoba membeberkan rahasianya, silahkan dipelajari :)

Menambah Format Feed cadangan di Sitemaps

Salah satu cara memudahkan spider google mengindex halaman yaitu dengan mengarahkannya melalui sitemaps. Sayang diblogger kita tidak dapat memasang alamat sitemaps sendiri, jadi mau tidak mau kita menggunakan alamat standar feed Atom.xml. Tahukah anda tidak selamanya menggunakan satu target sitemap proses index halaman akan selalu berhasil. Untuk menghindari masalah ini saya sarankan anda menambah alamat sitemap cadangan jika sewaktu-waktu diperlukan. Untuk blogger sendiri ada 4 format default feed yang bisa digunakan sebagai cadangan sitemap:

Atom.xml

Rss.xml

feeds/posts/default

feeds/posts/default?alt=rss

Cara membuat Format Feed cadangan di Sitemaps:

Pada menu Sitemaps, kemudian silahkan pilih Add Sitemap. Pada combo box silahkan pilih Add general Sitemap lalu masukan pilihan feed default diatas.

Hindari duplikat kode verification

Perhatikan bahwa verifikasi hanya ada satu pada satu alamat blog, kebanyakan blogger baru dengan mudahnya melakukan copy-paste source code keblog lainnya tanpa peduli kode verifikasi ini masih menempel dikode yang lama. Walaupun google hanya melakukan pengecekan kode verifikasi pada alamat blog tujuan tidak ada salahnya kita menghindari duplikat kode verifikasi. salah satu kelemahan blogger dimana ketidakmampuannya memberikan kebebasan pilihan verifikasi dalam bentuk HTML file.

Cara verifikasi:

Pada tab tools silahkan pilih menu Manage Site verifikasi, kemudian pada box pilihan silahkan pilih Add a meta tag. Silahkan copy paste code tersebut ke halaman Edit HTML anda dan letakan kode ini bawah tag . Jika sudah simpan blog anda kemudian kembali ke google webmaster lalu tekan command Verified. sampai disini anda sudah sudah berhasil melakukan verifikasi.

Mengatur kecepatan web Crawler (Googlebot)

Seberapa cepat anda meminta googlebot mengindex halaman terbaru anda? kadang kita terlalu bernafsu untuk membuat pilihan ke mode Faster. walaupun cara ini efektif untuk mempercepat googlebot mengindex halaman namun cara ini sangat beresiko dan mode faster biasanya memiliki jatah waktu tertentu (expires), saya sarankan anda tetap mempertahankan pada Normal Speed saja

Cara mengatur kecepatan index web crawler (googlebot):

Pada menu Tools silahkan pilih Set Crawl Site kemudian beri tanda centang pada Normal Recommended crawl rate.

Pilihan Target Geographic

Anda ingin bersaing posisi keyword di Google.com? lupakan saja jika content anda full Indonesia tulen. Jangan terlalu memaksakan diri bertarung kata kunci pada global google, persaingan di google.com terlalu berat bagi content non english dan terus terang bakal menghancurkan posisi keyword anda. Pada kenyataannya ketika seseorang melakukan pencarian, google sebenarnya sudah otomatis melakuan redirect domain sesuai lokasi negara. Disinilah anda harus jeli mengatur target geographic lokasi pencarian, jika content anda lebih cenderung ke bahasa indonesia berarti target pembaca anda dari indonesia juga khan. Saya sarankan ada baiknya anda hanya focus di google.co.id

Cara menentukan target Geographic:

Pada menu Tools silahkan pilih Set geographic target kemudian beri tanda centang pada Associate a geographic location with this site pilih target negara yang anda ingingkan, Indonesia misalkan.

Pilihan Set preferred domain

Pilihan preferred domain ini masih kontroversial, beberapa webmaster banyak mengatakan bila hasil index pencarian akan lebih bagus jika jika kita hanya menampilkan nama domain tanpa www, perlu dicatat ini bukan dari setting redirect domain, tapi hanya cara google menampilkan hasil index pencarian saja. Untuk kali ini saya juga belum berani menentukan pilihan mana yang terbaik..jika masih ragu anda bisa memilih pada pilihan Don't set an association.

Cara menentukan Set preferred domain:

Pada menu Tools silahkan pilih Set geographic target kemudian anda bisa memilih 3 pilihan yang diberikan, beri tanda centang pada pada salah satunya..sesuai saran saya jika masih ragu anda bisa memilih pada pilihan Don't set an association

Berikan kemudahan google mengindex image pada blog anda:

Mungkin anda tidak percaya kalo pengunjung blog om 20% berasal dari pencarian gambar, untuk itu saya sarankan anda mengaktipkan fasilitas ini. Ada kalanya seseorang mencari file gambar dengan keyword tertentu disini anda harus pintar memberikan nama file target. sekali lagi tidak ada rahasia apapun untuk memenangkan index pencarian pada gambar, yang anda perlukan hanya menentukan nama file gambar sesuai dengan relevant keyword.

Cara menentukan Enhanced image search:

Pada menu Tools silahkan pilih Enhanced image search kemudian beri tanda centang pada I would like to enable enhanced image search on my site and am authorized to opt into this advanced service.

04.34 | 0 komentar | Read More

Cara Membuat Tabel Di Blog Dengan Google Documents

Written By V - Net Kudukeras on Senin, 08 Februari 2010 | 01.27

Cara membuat tabel di blog sudah banyak diberikan di blog lain, tapi cara membuat tabel yang akan disampaikan di sini sangat berbeda dan lebih mudah bahkan buat blogger pemula yang tidak paham bahasa HTML. Umumnya untuk membuat tabel di blog maupun situs digunakan kode HTML, namun dalam tulisan ini kita akan belajar membuat tabel dengan memanfaatkan google documents.

Cara membuat tabel di google documents ini sama dengan membuat tabel di Microsoft excel yang berupa spreadsheet. Kelebihannya adalah tabel ini online dan bisa disisipkan di blog maupun di situs.

Kelebihan lain cara membuat tabel dengan google documents adalah:

  1. Tidak perlu memahami bahasa HTML yaitu kode (“<table>, <td>, <tr>, dst”).
  2. Tampilan tabel seperti spreadsheet excel, dan bisa terdiri dari beberapa sheet.
  3. Luas tabel (terutama lebar) tidak dibatasi oleh lebar halaman blog.
  4. Data dalam tabel tidak bisa di bajak (copas).
  5. Mudah di edit langsung di google documents.
  6. Lebar dan panjang baris maupun kolom mudah diatur, tanpa kode HTML (“width, height, dll”)
  7. Jumlah baris dan kolom bisa diatur yang ingin ditampilkan dan yang tidak ingin ditampilkan

Kekurangan cara membuat tabel dengan google documents hanya 1 yaitu, tidak bisa menyisipkan link.

Langkah cara membuat tabel dengan google documents ini sebagai berikut:

Login ke google documents
Login Ke Google Documents

Klik “New” dan pilih “spreadsheet
Buat New Spreadsheet

Isi data tabel dan percantik seperti yang biasa kita buat di spreadsheet excel.

Simpan dan beri nama file tabel yang kita buat
    Simpan dan beri Nama Tabel

    Simpan dan beri Nama Tabel

Klik “Share” dan pilih “Publish As A Webpage
    Mempublikasikan tabel

    Mempublikasikan tabel

Pilih sheet yang ingin ditampilkan dan contreng pada “Automatically republish after changes are made“Â lalu klik “Start Publishing
    Mendapatkan kode tabel

    Mendapatkan kode tabel

Pilih “HTML To Embed in A Page“, “Sheet” yang ingin ditampilkan, dan range baris dan kolom yang ingin ditampilkan. Contohnya: A1:F16.
    Copy kode tabel dan paste di blog

    Copy kode tabel dan paste di blog

Copy keseluruhan kode yang ada dan paste di halaman atau tulisan yang ingin menampilkan tabel tersebut.

<iframe width='460' height='300' frameborder='0' src='http://spreadsheets.google.com/pub?key=ttKd0sUSyysgleAqF0cGilQ&single=true&gid=0&range=A1%3AF16&output=html&widget=true'></iframe>


Atur lebar dan panjang tabel pada bagian width dan height (tulisan warna biru berikut) sesuai dengan lebar halaman blog. Kelebihan panjang maupun lebar tabel akan ditampilkan dalam bentuk scroll (layar gulung).

Contoh hasil membuat tabel dengan google documents ini seperti berikut:






01.27 | 0 komentar | Read More