Membuat Daftar Isi/Blog Contents pada Blogger atau Website

Desain blog agar tampak cantik dan menarik pasti diingini oleh semua orang termasuk Smartsoner. Hasil dari blogwalking hari ini mengakibatkan artikel Membuat Daftar Isi pada Blogger pun terciptalah.

Read More…!

Embedeed Flash Objects dengan HTML atau XHTML

Hi SmartSoner, artikel kali ini akan membahas bagaimana cara membuat HTLM ke XHTML dengan menyisipkan Video Flash Object. Terkadang ada beberapa artikel yang membutuhkan sisipan Video Flash Object, namun SmartSoner tidak perlu bingung lagi. Ikuti cara berikut ini dan semoga sukses.

Read More…!

Cara Membuat Greeting Script Welcome and Good Bye pada Blogspot

Postingan saat ini akan membagi tips untuk menambahkan greeting script yang berfungsi sebagai salam atau suatu sambutan terhadap pengunjung.
Berikut adalah langkah-langkah menambahkan greeting script:

Read More…!

Cara Membuat Anti Copy Paste Pada Blogspot

Pernahkah Smartsoner membuat artikel atau postingan di Blog dan ada yang menjiplaknya? Istilah kerennya, copas (copy and paste).

Dengan begitu gampangnya orang lain hanya copas memakai artikel Smartsoner. Padahal postingan artikel tersebut telah dibuat dengan jerih payah yang menyita tenaga, fikiran, ide-ide kreatif dan juga biaya internet. Hehehehe.

Jika Smartsoner adalah tipe orang yang anti copas, maka berikut adalah langkah-langkah membuat blog anti copy paste (blog anti copas):

Read More…!

Efek Marquee Pada Title Blogger

Hari ini RichSeason menghabiskan waktu menelusuri beberapa website dengan satu tujuan yaitu hanya untuk mendapatkan beberapa script html yang akan digunakan untuk mempercantik RichSeason. Hasil penelusuran dari Rich kali ini membuahkan hasil yaitu prosedur penambahan efek Marquee pada Title di blogger dengan menggunakan script HTML.

Nah sebagian pembaca setia RichSon (disingkat dari RichSeason-red)mungkin penasaran bagaimana caranya menambahkan efek marquee pada blogger. Berikut RichSon akan melampirkan beberapa tips sebagai berikut.
1. Login pada account blogger anda.
2. Klik "Layout" kemudian pilih "Edit HTML"
3. Search tag <head>
4. copy paste Script HTML dibawah setelah tag <head>

<!--Begin Marquee Title Blogspot-->
<script>
var txt=&quot; - <data:blog.title/> - "Deskripsi Blog anda" &quot;;
var kecepatan=170;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
</script>
<!--End Marquee Title Blogspot-->

5. Klik "Save Template"
6. Selesai.

catatan:
Warna Merah pada code tersebut adalah script untuk Nama Site/Blog anda.
Warna Biru dapat anda gantikan dengan deskripsi dari blog anda.

Semoga PC Tips RichSon kali ini bisa menambah kecantikan dari tampilan blog para pembaca setia RichSon.
Thanks to RielThe

Read More…!

Menambahkan Widget IP Address Detector pada Website Anda

IP Address Detector merupakan suatu tools yang digunakan untuk mendeteksi IP Address dari setiap pengguna. Dengan demikian setiap pengunjung dapat mengetahui IP Address mereka saat memasuki situs anda. Nah pada kesempatan kali ini, SMART Son memutuskan untuk membahas mengenai cara menambahkan Widget IP Address pada website pembaca setia SMART Son

Sebelum membahas lebih jauh tentang IP Detector, kita harus tahu apakah IP Address itu?

IP Address (Internet Protocol Address) adalah logical address dari adapter jaringan. Alamat IP adalah unik dan mengidentifikasi komputer pada jaringan. Sebuah alamat IP dapat swasta, untuk digunakan pada LAN, atau publik, untuk digunakan di Internet atau WAN (Wide Area Network) lainnya.

Nah, setelah mengetahui apa IP address itu maka disediakanlah tools yang berfungsi sebagai pendeteksi IP Address pengunjung. Widget IP Address Detector ini selain sebagai pendeteksi IP Address, dapat juga mempercantik tampilan website maupun blog pembaca setia SMART Son. Maka dengan sangat bangga SMART Son membagi beberapa Script HTML dari IP Address Detector sebagai hasil penjelahan selama ini sebagai berikut:

1. Single IP Address Detector

Code:
<!--Check IP Address Link Begin--> <a title="Check Your IP Address" href="www.smartson.co.cc/2010/05/menambahkan-widget-ip-address-detector.html"><img src="http://www.ongsono.com/show_ip_address.php" border="0" alt="what is my ip address?" /></a> <!--Check IP Address Link End-->

2. Multi Detector IP Address

Code:
<a onclick="this.href='http://www.smartson.co.cc/2010/05/menambahkan-widget-ip-address-detector.html'" rel="nofollow" href="http://www.richseason.blogspot.com/" target="_blank"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>

3. IPligence Detector IP Address - Vertical

Code:
<a href="http://www.smartson.co.cc/2010/05/menambahkan-widget-ip-address-detector.html"><img src="http://www.ipligence.com/freetools/iplocation/b2/" alt="geolocation database" /></a>

4. IPligence Detector IP Address - Horizontal

Code:
<a href="http://www.smartson.co.cc/2010/05/menambahkan-widget-ip-address-detector.html"><img src="http://www.ipligence.com/freetools/iplocation/b1/" alt="geolocation database" /></a>

Tanpa banyak komentar lagi, berikut adalah langkah - langkah menambahkan IP Address Detector pada website pembaca setia SMART Son.

A. Blogger
1. Browse ke blogger.com dan login.
2. Klik "Layout" kemudian pilih "Page Elements".
3. Klik "Add a gadget", setelah muncul sebuah jendela "Add a Gadget" cari dan tambahkan "HTML/Java Script"
4. Copy and Paste salah satu HTML Script diatas pada kotak "HTML/Java Script"
5. Klik Save.
6. Selesai.

B. Wordpress
1. Login ke dashboard wordpress anda.
2. Pada "Appereance", klik "Widgets"
3. Tambahkan widget "TEXT" ke sidebar wordpress anda.
4. Copy and Paste salah satu HTML Script diatas ke dalam kotak "TEXT"
5. Klik Save.
6. Selesai.

C. Website.
1. Login ke panel admin website anda.
2. Copy and Paste salah satu HTML Script diatas ke dalam gadget sidebar website anda.
3. Klik Save.
4. Selesai.

Demikian Tips SMART Son yang membahas tool IP Address Detector ini maka akan semakin mempercantik tampilan website atau blog anda. Thanks to Rielthe.co.cc

Read More…!

Galery Status Yahoo Messenger

Galeri Status Yahoo Messenger menjadi pokok bahasan dari Tips RichSeason kali ini. Berbekal dari pembahasan artikel Menampilkan Status Yahoo Messenger Pada Situs Anda maka ini merupakan kelanjutannya.
Dari Tips RichSeason sebelumnya pembaca setia RichSeason telah berhasil Menampilkan Status Yahoo Messenger pada blog ataupun situs, maka saat ini RichSeason akan membahas Galery Status Yahoo Messenger secara seksama.

Kode HTML untuk Status Yahoo Messenger:
<a href='ymsgr:sendIM?thepower_ranger'>
<img src='http://opi.yahoo.com/online?u=thepower_ranger&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>

Catatan: Code yang berwarna biru diganti dengan ID Yahoo Messenger anda.
Angka berwarna merah merupakan style galeri dari status YM. Angka tersebut bisa diganti antara 1 - 17 seperti yang akan ada pada daftar Galery Status Yahoo Messenger.

Tanpa basa basi lagi mari kita simak Galery Status Yahoo Messenger berdasarkan kode angka dari 1-17 dibawah ini.

1 =
2 =
3 =
4 =
5 =
6 =
7 =
8 =
9 =
10 =
11 =
12 =
13 =
14 =
15 =
16 =
17 =

Nah, keren bukan?
Demikian Tips RichSeason membahas tentang Galery Status Yahoo Messenger dengan terperinci, sekarang giliran teman-teman pembaca untuk memilih angka Galery sesuai dengan selera anda. Thanks to RielThe.co.cc

Read More…!

Blogumulus, Si Tag WP-Cumulus Dari Wordpress Untuk Blogger

Pernahkah anda memperhatikan bahwa tag (istilah pada wordpress) atau label (istilah pada blogger) terlihat bergerak? Tag/Labelnya berbentuk bola bumi dan bergerak mengikuti pergerakan dari kursor mouse. Jika di Wordpress, anda hanya menginstal plugin WP-Cumulus yang telah tersedia pada server Wordpress, tapi bagaimana dengan blogger yang serba manual? Tentulah jawabannya yaitu anda harus mengedit lagi HTML pada Layout Blogger

Edit HTML merupakan pekerjaan serba teliti. Nah tanpa berbasa basi lagi, kita akan membedah Script HTML pada Blogger kita. Mari ikutilah langkah - langkah ini dengan seksama.
1. Log In ke Blogger anda
2. Pada "Dashboard" Klik "Layout".
3. Setelah itu klik "Edit HTML"
4. Check / Centang box "Expand Widget Templates".
5. Cari kode yang hampir mirip dengan kode dibawah ini:
<b:section class='sidebar' id='newbar' preferred='yes'> (Tiap Theme/Template berbeda penamaannya, biasanya ini merupakan kode html untuk sidebar).
6. Copy and paste kode ini dibawahnya.

Kode 1.
<b:widget id='Label2' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<div id='xsnazzy'>
<b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b><div class='xboxcontent'>
<b:if cond='data:title'>
<h2 style='font-family:arial'>Labels</h2>
</b:if>
<div class='widget-content'><center>
<script src='http://goldenranger.webs.com/jscript/blogumulus_swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.rielthe.co.cc/'>RielThe</a> For <a href='http://www.smartson.co.cc/'>SmartSon</a> and <a href='http://www.smartson.co.cc/'>Smart Son</a></div>
<script type='text/javascript'>
var so = new SWFObject
(&quot;http://goldenranger.webs.com/jscript/blogumulus_tagcloud.swf&quot;,
&quot;tagcloud&quot;, &quot;180&quot;, &quot;180&quot;, &quot;9&quot;,
&quot;#FFFFFF&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='10'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</center></div>
</div><!--xboxcontent-->
<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>
</div><!--end of xsnazzy-->
</b:includable>
</b:widget>

atau Kode 2:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://www.rielthe.co.cc/rielthejs/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.rielthe.co.cc/'>RieL The</a> and <a href='http://www.smartson.co.cc'>Smart Son</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://www.rielthe.co.cc/rielthejs/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency, memungkinkan untuk membuat background transparan

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

7. Klik "Save Template"
8. Selesai.

Setelah melewati sedemikian rumitnya proses membenah Script HTML, maka Label/Tags anda akhirnya dapat terlihat seperti Tag/Label dari WP-Cumulus pada Wordpress. Demikianlah Tips RichSeason untuk anda hari ini. Thanks to Rielthe.co.cc

Read More…!

Menampilkan Status Yahoo Messenger Di Situs Anda

Menampilkan status Yahoo Messenger pada blog atau situs anda sangat membantu customer maupun pembaca setia untuk berinteraksi dengan owner blog atau situs. Dengan demikian penyampaian saran, pertanyaan, dan kritik dapat tersampaikan kepada owner blog / situs melalui fasilitas chat Yahoo Messenger.

Saat ini Rich Season akan membahas bagaimana menambahkan Status Yahoo Messenger pada Blogger dan Wordpress anda. Berikut adalah langkah-langkahnya:

A. Blogger/Blogspot (Pada PROFIL)
1. Langkah pertama Log In ke Blogger
2. Klik "Layout" kemudian klik "Edit HTML"
3. Check/Centang "Expand Widget Templates"
4. Cari code dibawah ini:
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
5. Copy and Paste Kode HTML dibawah ini tepat diatas kode yang kita cari tadi.
<a href='ymsgr:sendIM?thepower_ranger'>
<img src='http://opi.yahoo.com/online?u=thepower_ranger&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>
5. Klik SAVE untuk menyimpan.
6. Selesai.

B. Blogger/Blogspot (Pada GADGET)
1. Langkah pertama Log In ke Blogger
2. Klik "Layout" kemudian klik "Page Elements"
3. Klik "Add a Gadget"
4. Copy and Paste kode HTML ke dalam gadget.
<a href='ymsgr:sendIM?thepower_ranger'>
<img src='http://opi.yahoo.com/online?u=thepower_ranger&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>
5. Klik SAVE untuk menyimpan.
6. Selesai.

C. Wordpress
1. Login ke Dashboard Wordpress
2. Klik "Appereance" kemudian klik "Widgets"
3. Klik and drag "TEXT" ke salah satu sidebar.
4. Copy and Paste Kode dibawah ini ke dalam kolom "TEXT"
<a href='ymsgr:sendIM?thepower_ranger'>
<img src='http://opi.yahoo.com/online?u=thepower_ranger&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>
5. Klik SAVE.
6. Selesai.

Catatan: Code yang berwarna biru diganti dengan ID YM anda.
Angka berwarna hijau merupakan style galeri dari status YM. Angka tersebut bisa diganti antara 1 - 17.

Demikianlah tutorial singkat RichSeason mengenai cara Menampilkan Status Yahoo Messenger pada Blogger dan Wordpress. Semoga bermanfaat. Thanks to RielThe.co.cc

Read More…!

Menampilkan Kode HTML Pada Artikel Anda

Inilah hal yang paling merepotkan tatkala membuat artikel dan isi artikelnya mengharuskan anda untuk menampilkan kode HTML. Kode HTML yang ingin ditampilkan tidak hanya sekedar di ketik pada kotak postingannya, tapi harus terlebih dahulu di ubah ke kode yang bisa di baca artikel. Hal ini memaksakan anda untuk menggunakan software atau tool tertentu untuk melakukan konversi kode HTML tersebut.

Terkadang tiap postingan yang berisi kode HTML akan mengalami error atau tidak akan muncul pada artikel dihalaman depan / homepage. Misalnya kode < harus diganti dengan &lt; dan kode &lt; harus diganti dengan &amp;lt;

Berikut adalah cara mengubah kode HTML agar dapat dibaca pada artikel anda.
1. Browse ke situs ini
2. Copy and Paste kode HTML anda ke kolom yang disediakan situs tadi.
3. Klik Encode
4. Copy kode hasil Encode dan Paste ke artikel anda.
5. Anda telah sukses melakukan encode kode HTML. Selesai.

Thanks to RielThe.co.cc

Read More…!

Menambahkan Read More Pada Blogger

Hari yang melelahkan telah ku habiskan dengan menjalajahi google hanya untuk mencari beberapa artikel tentang bagaimana membuat Read More pada Blogspot/Blogger. Dan pada akhirnya telah kutemukan dan saya memutuskan untuk membuat artikel ini.

Nah, dulu saya menggunakan Blogger tetapi sempat saya tinggalkan dikarenakan beberapa hal seperti fasilitas Read More, Template yang terbatas dan lain lain. Jika dibandingkan dengan Wordpress, pada halaman membuat tulisan sudah ada tombol more untuk membuat Read More pada penulisan artikel anda. Namun hari ini saya berhasil menemukan sebuah trik untuk membuat Read More pada Blogger. So, simaklah dengan baik langkah-langkahnya.

Terlebih dahulu kita harus tahu apa fungsi Read More itu. Read More adalah fasilitas untuk membuat penulisan artikel di halaman depan ditampilkan hanya berupa ringkasan. Pada umumnya di blogger tidak disediakan fasilitas/fitur Read More tersebut. Sehingga waktu membuat tulisan artikel yang agak panjang akan ditampilkan seluruhnya di halaman depan dari Blogspot saya. Maka untuk mengatasi hal ini, kita harus kerja ekstra untuk mengedit HTML Code nya biar hasilnya maksimal sesuai keinginan kita.

Namun janganlah kuatir, saya akan membagikan 3 langkah membuat Read More pada Blogger dengan menambahkan paragraft PARAGRAFT AWAL / PENGANTAR yang akan ditampilkan di halaman depan. Saya sarankan anda menggunakan mozilla firefox dan aktifkan FindBar (CTRL+F) dibagian bawah pada browsernya.

1. Penambahan 'Conditional CSS'
Conditional CSS mengubah bagaimana postingan tampil di halaman yang berbeda.
Caranya:
klik Layout —> Edit HTML.
Lalu backup template dengan mengklik Download Full Template. (optional)
Klik checkbox Expand Widgets Template tepat di atas kotak Edit Template.
Kemudian Search/Cari dan temukan kode </head> ini *(gunakan fasilitas FindBar pada mozila/flock)

Tambahkan kode berikut tepat di atasnya:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Gunanya adalah membuat class bernama fullpost yang akan tampil hanya di halaman detail (permalink).

2. Penambahan Read More
Langkah kedua, menambahkan link “Read More” (atau apa pun sesuai selera Anda) yang akan tampil setelah paragraf pengantar.
Scroll dan temukan kode:
<data:post.body/>

Tambahkan kode berikut setelahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read More...!</a>
</b:if>

Kalau sudah, klik Save Template. Link Read more ini hanya akan tampil di halaman depan (home) dan arsip (Archive). Kalau diklik, akan membuka halaman baru berisi satu tulisan penuh.

3. Penambahan di Post Template
Langkah terakhir adalah menambah format di template postingan, sehingga setiap membuat postingan baru akan memudahkan Anda, di mana menempatkan paragraf pengantar dan di mana sisa keseluruhan tulisan.

Klik Settings —> Formatting, lalu geser ke paling bawah halaman.
Copy dan Paste kode berikut ini ke kotak Post Template:

Paragraf Pertama
<span class="fullpost">
Paragraf Sisa
</span>

Klik Save Settings.

Ketika Anda membuat postingan (Create Post) dan kemudian mengklik tab Edit Html, Anda akan melihat seperti berikut ini:Ganti tulisan “PARAGRAF PERTAMA” dengan paragraf pertama Anda sendiri. Kemudian ganti tulisan “PARAGRAF SISA” dengan sisa paragraf berikutnya dari tulisan Anda. Jangan menghapus kode <span class="fullpost"> dan </span>.

Intinya masukkan paragraf pengantar Anda di atas kedua kode itu dan paragraf berikutnya di antara kedua kode tersebut. Lalu klik Publish. Lihat hasilnya dengan klik View Blog. Akhirnya anda telah mengerti cara menambahkan Read More pada blogger, selanjutnya terserah anda..!

Thanks to Rielthe.co.cc

Read More…!