Monday 15 November 2010

Cara Membuat Link Berupa Gambar


Memasang link umumnya hanya berupa teks, kali ini kita akan bagikan cara membuat link didalam gambar. Tutorial ini bisa kamu pakai untuk mempercantik tombol link, misal untuk tombol download kamu perlu menggunakan tutorial ini. Untuk itu kita memerlukan sedikit kode untuk menciptakan link berupa gambar. Perhatikan gambar berikut ini :




Itulah Demo dari link berupa gambar, untuk membuatnya salin kode berikut ini pada form postingan ataupun sidebar blog kamu :

<a href="http://usershare.net/fajrialhadii/cemggsak40tj" target="_self" title="download"><img src="http://png-2.findicons.com/files/icons/719/crystal_clear_actions/64/kdevelop_down.png" /></a>




Keterangan !
  • http://usershare.net/fajrialhadii/cemggsak40tj (Link Tujuan) ganti menjadi link tujuan kamu
  • download (Judul) Judul ketika cursor didekatkan dengan gambar
  • http://png-2.findicons.com/files/icons/719/crystal_clear_actions/64/kdevelop_down.png (Link Gambar) ganti dengan link gambar yang kamu sukai
Sekilas sharing dari 4-jie jangan lupa komentar nya ya :)

Sunday 14 November 2010

Membuat Mozilla Firefox 3x Lebih Cepat

80% Netter lebih banyak menggunakan mozilla firefox sebagai browser kesayangan mereka. Ditinjau dari segi fasilitas, dan kualitas mozilla firefox diacungi jempol oleh setiap netter yang telah memakainya. Kali ini 4-Jie akan berikan trik Membuat Firefox 3X Lebih Cepat dari biasanya. Trik ini menggunakan sistem pengeditan value-value mozilla firefox. Bukan cuma itu, dengan cara ini kamu akan mendapatkan koneksi yang stabil serta mengoptimalkan gerakan untuk browser yang satu ini. Untuk membuat mozilla firefox 3x lebih cepat berikut caranya :


1. Ketik "about:config" pada address bar dan tekan enter.
carilah kode berikut :

network.http.pipelining
network.http.proxy.pipelining
network.http.max-connections-per-server
network.http.pipelining.maxrequests
network.http.max-connections
network.http.max-persistent-connections-per-proxy
network.http.max-persistent-connections-per-server


Secara normal browser akan membuat satu request untuk satu halaman web dalam satu kali . ketika kamu enable pipelining, itu akan membuat beberapa halaman dalam sekali. dan akan mempercepat page loading

2. rubah entries berikut menjadi :

Set "network.http.pipelining" menjadi "true"

Set "network.http.proxy.pipelining" menjadi "true"

set "network.http.max-connections-per-server" menjadi 32.

set "network.http.max-connections" menjadi 60.

set "network.http.max-persistent-connections-per-proxy" menjadi 16.

set "network.http.max-persistent-connections-per-server" menjadi 8.

set "network.http.pipelining.maxrequests" menjadi nilai seperti "30".

3.klik kiri (dimana saja) select New-> Integer. masukan "nglayout.initialpaint.delay" pada prefence name, kemudia set nilai menjadi "0".

klik kiri sekali lagi (dimana saja) select New-> boolean. masukan "browser.tabs.showSingleWindowModePrefs" set menjadi "true"
Selesai

Thursday 11 November 2010

Connectify : Jadikan Laptopmu Hotspot


Connectify, sebuah software yang memiliki fungsi untuk menjadikan laptop sebagai hotspot. Software ini memang patut dicoba buat kamu yang ingin berbagi koneksi melalui laptop. Ga perlu modal besar, cukup bermodalkan laptop kamu bisa jadikan laptop sebagai hotspot. Dengan catatan laptop kamu harus bersistem operasi windows 7, sebab software ini baru mendukung sistem operasi windows 7. Adapun yang perlu kamu butuhkan untuk menjadikan laptopmu sebagai media hotspot adalah sebagai berikut :
  1. Laptop
  2. Operating System sudah Windows 7
  3. Modem
Untuk lebih jelas perhatikan gambar proses nya :
Screen Shoot dari software connectify :


Layaknya hotspot pada umumnya, kita juga dapat memasang security word yang dapat mengunci jaringan hotspot, dengan tujuan agar tidak sembarangan orang dapat memakai jaringan hotspot yang kita pakai.

untuk mendapatkan software ini silahkan :







Password :
4-jie.blogspot.com

Craggle : Mesin Pencari Keygen, Patch, SN software



craggle, software satu ini memiliki fungsi untuk mencari serial number, patch, keygen, ataupun crack untuk software kamu. Craggle ini memiliki tampilan yang hampir sama dengan google, untuk lebih jelasnya perhatikan gambar berikut :

Cukup dengan memasukkan nama software yang ingin dicari pada kotak pencarian, maka secara otomatis akan muncul. Untuk mendapatkan serial number suatu software, maka yang dibutuhkan hanya software craggle ini dan koneksi internet.


Untuk mendapatkan software ini silahkan klik tombol dibawah ini








Password :

4-jie.blogspot.com

Wednesday 10 November 2010

Foxit Reader : Baca File Berformat PDF


Foxit Reader merupakan salah satu software yang memiliki fungsi yang hampir sama dengan Adobe Reader . Fungsi dari Foxit Reader adalah membaca file yang berformat PDF (Portable Document Format) yang dapat kamu gunakan untuk melihat file yang masih dalam format PDF. Kelebihan dari Foxit Reader yaitu tampilan lebih elegant, ringan, dan simple sehingga dapat digunakan untuk semua orang. Untuk mendapatkan software ini silahkan:





Password :

4-jie.blogspot.com

Edit Template Dengan Notepad ++



Software yang satu ini wajib dimiliki oleh seorang blogger/ web designer untuk memodifikasi atau mengedit. Dengan software ini, maka kamu akan mudah dalam mengedit sebuah template. CSS akan terlihat lebih rapi dan enak dilihat jika kamu menggunakannya. Software ini bernama Notepad ++. Software ini juga dapat mempermudah kita dalam pengeditan template, sebab notepad++ memiliki kelebihan tersendiri dibandingkan kita mengedit menggunakan notepad yang asalnya merupakan software bawaan dari microsoft. Untuk mendapatkan software ini silahkan klik tombol dibawah ini :





Password :

4-jie.blogspot.com

Tuesday 9 November 2010

Format Flash Disk dengan HP USB Format


HP USB Format merupakan software yang berguna buat kamu yg suka format flashdisk karena diserang oleh virus. Software ini sangat cocok kamu pasang di komputer, selain bermanfaat juga berukuran kecil. Fungsi dari HP USB Format yaitu untuk memformat flashdisk dengan tidak mengurangi size atau kapasitas dari flashdisk tersebut.






Password :
4-jie.blogspot.com

Monday 8 November 2010

Merubah Nama Processor Komputer

Ini bisa anda gunakan jika anda ingin Ngerjain seseorang agar mengira komputer anda adalah Pentium 4 yang super Cepet, tetapi padahal komputer anda adalah pentium 2 atau 3 kalau masih ada Pentium 1. hheee..

Caranya sebagai berikut :


1. Masuk ke registry editor anda ( Start –> Run –> Ketik regedit )

2. Masuk ke registry berikut
HKEY_LOCAL_MACHINE\HARDWARE\DISCRIPTION\System\CentralProcessor\
atau
HKEY_LOCAL_MACHINE\HARDWARE\DISCRIPTION\System\CentralProcessor\0\
atau
HKEY_LOCAL_MACHINE\HARDWARE\DISCRIPTION\System\CentralProcessor\1\

3. Cari key dengan nama “ProcessorNameString”

4. Klik kanan key tersebut lalu pilih Modify dan ubah Value Data tersebut sesuai keinginan anda (Contoh : Intel Pentium 4).

Sekarang anda bisa melihat perubahannya di System Properties anda (klik kanan icon My Computer dan pilih Properties ).

Saturday 6 November 2010

Membuat CBOX Melayang

Setelah beberapa hari gag mosting apapun, kali ini 4-jie akan posting tentang trik membuat cbox melayang. Trik ini hanya bisa dipakai buat kamu yang memakai layanan cbox, so buat kamu yang pakai cbox beruntung, sebab dengan trik floating shoutbox ini maka ruang untuk blog kamu akan lebih luas. Untuk contoh mari dilihat terlebih dahulu :



untuk membuatnya ikuti langkah berikut ini :
  • Login ke www.cbox.ws
  • Jika sudah masuk pada halaman cbox, klik Publish
  • Scrool sedikit kebawah, perhatikan pada step2
  • Pada Step 2 Choose a variation : inline (default), silahkan kamu ganti dengan Floating
  • Secara otomatis akan muncul kode dibawah nya,
  • Salin kode tadi pada blog dengan cara klik tambah gadget
  • Simpan
semoga bermanfaat 4-jie :D

Saturday 30 October 2010

Pasang Headline News di Blogspot

Headline News atau yang sering disebut Iklan berjalan ini biasa kita temukan pada bagian bawah TV Berita. Tapi apakah anda pernah menyadari bahwa fasilitas seperti itu bisa kita pasang pada blog kita sendiri khusus nya pengguna blogspot. Berikut sekilas headline news yang saya maksud :



Jika gambarnya kurang jelas, mari kita terapkan langkah-langkah berikut :

  • Login ke account blog
  • Klik design/rancangan page element
  • Lalu klik add widget "HTML/Javascript"
  • Letakkan kode berikut didalam nya :

<script type="text/javascript"
> var hn_url_blog = "http://4-jie.blogspot.com";
var hn_jumlah_post = 50;
var hn_warna_latar = "#000000";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script> <script src=" http://javascript16.googlecode.com/files/Headline-news.js "> </script>
  • Simpan
Catatan !

  • hn_url_blog adalah URL blog kamu
  • hn_jumlah_post adalah jumlah judul artikel yang akan tampil pada headline news.
  • hn_warna_latar adalah kode warna untuk latar belakang headline news.
  • hn_warna_garis adalah kode warna untuk garis bingkai headline news. (lihat kode disini : baca)
  • hn_posisi menentukan posisi headline news anda apakah di atas ("top") atau di bawah ("bottom"),
  • hn_tampilkan_judul bernilai true kalau sobat ingin menampilkan tulisan "Headline news of BLOGKAMU" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
Happy blogging with 4-Jie

Wednesday 27 October 2010

Cek Siapa yang Pasang Link Blog

Periksa dan periksa. Tutorial kali ini ga boleh dilewatkan. Dengan tutorial ini kita dapat melihat siapa saja yang telah memasang link blog kita. Jadi ga perlu susah-susah untuk cek satu per satu ke dalam blog tersebut. Cara ini dilakukan buat kamu yang melakukan kegiatan tukeran link sesama blogger.

Langkah mengecek Apakah link kita dipasang sebagai berikut

Langkah I
  • Ketik http://www.google.com/webhp?hl=id di address bar pada browser
  • Pada kotak pencarian, ketik link:http://4-jie.blogspot.com didalam nya
  • Setelah selesai mengetik, klik search atau telusuri
  • Perhatikan judul dan link blog yang muncul, itulah link yang telah terpasang
Keterangan !
Untuk tulisan yang berwarna biru, silahan ganti dengan alamat blog masing-masing
Langkah II

  • Masuk ke situs MyPagerank , disini : http://www.mypagerank.net/service_linkcheck_index
  • Masukkan alamat Blog dikotak yang tersedia
  • Masukkan Code verifikasi yang disediakan
  • Kemudian Klik tombol "Check My Link"
  • Selesai

Tuesday 26 October 2010

Mengganti Default Bullet dengan Arrow Icon di blogspot

Pernah merasakan rasa jenuh karena melihat bentuk bullet pada blog kamu ?
Mungkin itu hal yang 4-Jie rasakan seperti kamu. Untuk kamu yang mau mengganti bullet default menjadi bullet sesuai dengan keinginan kamu, kamu dapat mengikuti langkah-langkah berikut. Sebelum memodifikasi bullet, silahkan perhatikan gambar yang dibawah ini (merupakan gambar bullet)



Berikut langkah-langkah memodifikasi tampilan bullet pada blog kamu :

  • Login - Layout/Tata Letak - Edit HTML - Expand Template Widget
  • Cari menu li pada template Anda, contohnya pada kode berikut:
.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.5em;
}


  • Jika sudah, ganti kode diatas dengan kode dibawah ini :
.post li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUlVAenEN_a4eYPHbOx17FR3GX6NcALLiW_MMa-BtA6WzqwzJfRTybQzq0Kh9ycAIyjNq3OKGY-VsQ-MQ_3-ZGpsvabn0IDmCcAAyFKTWeLfGTRpObglWPihiTCuUP6JVM-v4ChTz6oY/s1600/libg300.png') no-repeat 0px .30em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.5em;
}
  • Perhatikan tulisan yang berwarna merah. Itu merupakan URL Gambar yang ingin dijadikan New Bullet, dapat kamu ganti dengan URL Gambar kamu masing-masing
  • Langkah Selanjutnya, Klik SAVE

Sunday 24 October 2010

Payout Pertama dari Negeriads.com





Hari ini tepat pada tanggal 24 oktober 2010 4-jie mendapatkan sedikit rezeki dari internet. Meskipun ga banyak, tapi 4-jie merasa cukup dan terus bersyukur kepada Allah SWT. karena berkat rezeki yang iya berikan 4-jie masih tetap bertahan sampai sekarang. Berikut ini bukti pembayaran Negeriads.com yang saya dapatkan melalui rekening saya :









Buat kamu yang ingin menambah uang jajan bisa langsung bergabung dengan Negeriads.com secara gratis. Cukup email yang kamu perlukan untuk melakukan pendaftaran di Negeriads.com dan tidak dikenakan sepeser pun. Jadi tunggu apalagi, kalau saya bisa kenapa kamu tidak ?

Buruan gabung agar pundi-pundi rupiah terus bertambah untuk mu lol



Keterangan !



Untuk mendaftar menjadi publisher di Negeriads.com silahkan klik link beri

kut ini untuk langsung menuju halaman utama Negeriads.com

Sunday 17 October 2010

Membuat Favicon di blogspot



Favicon merupakan salah satu bagian dari blogspot yang berfungsi sebagai logo atau icon sebuah blog. Dengan memiliki favicon, maka blog akan memiliki sebuah ciri khas yang tersendiri. Adapaun banyak mereka memakai favicon untuk mempercantik dan memberikan kesan indah kepada pengunjung blog. Adapaun contoh dari favicon adalah sebagai berikut :


Favicon Default dari blogger.com :

Favicon yang kita ubah sesuai selera :


Perhatikan gambar yang didalam kotak, itulah yang dinamakan dengan Favicon

Untuk membuat favicon di blogspot cara nya :
  • Login ke blogger.com
  • Klik Dashboard, lalu pilih Rancangan
  • Pilih Edit HTML
  • Letakkan kode berikut sebelum kode </head>


<link href='http://i289.photobucket.com/albums/ll211/rhee_dhie/favicon.jpg' rel='shortcut icon'/>


Perhatikan !

Kode yang berwarna merah adalah link gambar yang ingin dijadikan favicon, jadi kamu harus meng-upload gambar nya terlebih dahulu

  • Langkah terakhir jangan lupa di simpan
Happy blogging with 4-jie


smile

Thursday 14 October 2010

Pasang Spoiler di blog

Pasang spoiler di blog, itukah judul post kali ini. Spoiler merupakan salah satu wadah untuk kita untuk lebih mudah menempatkan widget apapun didalam nya. Kita dapat menempatkan widget tukeran link, site info, atau apapun didalam nya. Dengan menggunakan spoiler, blog akan terlihat lebih rapi dan ruang dari sebuah blog akan lebih luas. Bukan cuma itu, dengan memasang spoiler kecepatan blog akan bertambah. Untuk demo silahkan lihat gambar dibawah ini :

Cara membuat nya seperti berikut :

  • Login terlebih dahulu di blogger.com
  • Klik Rancangan » Pilih Tambah Gadget
  • Pilih HTML/ JavaScript
  • Letakkan kode berikut ini didalam nya

<center><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100%;" value="Link Sahabat" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Close&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Open&#39;; }" type="button" />
</div>
<div style="margin: 0px; padding: 6px;" class="alt2"><div style="display: none;">
Ganti dengan kode widget kamu !

<div style="border: 0px solid rgb(0, 0, 0); overflow: auto; width: 100%; height: 220px; text-align: left;">
<center><li><a href="">/////</a></li>
</center></div></div></div></div></center>
  • Save
Keterangan !
» Untuk tulisan yang berwarna merah silahkan ganti dengan kode widget yang kamu punya

Saturday 9 October 2010

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Fungsi Kode Untuk Mengatur Tampilan Content Blog - Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.


Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.


1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.


2. Kategori Post dan Single Post


<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).
Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.


3. Halama Utama Blog dan Kategori Post


<b:if cond='data:blog.pageType != &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.


4. Single Post


<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.


5. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.


6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'> ... </b:if>


Contoh penerapan kode :
<b:widget id='Feed1' locked='false' title='Comments' type='Feed'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada artikel selanjutnya). Semoga bermanfaat.

Cara Pasang Facebook Like di Blogspot

Fitur di dalam facebook memang sebenarnya cantik dan indah jika dapat kita gunakan. Bukan hanya itu, blog akan terlihat memiliki campuran antara blogger dan facebook.

Kita akan bahas tentang cara memasang facebook like di blog. guna nya yaitu untuk menentukan seberapa banyak orang yang suka dengan blog kita.

untuk menentukan kapan saja facebook like akan muncul silahkan baca : Fungsi kode untuk mengatur tampilan content blog

Cara Menambahkan Tombol Facebook Like ke Blogspot
  • Login - Layout/Tata Letak - Edit HTML
  • Ceklist tulisan Expand Template Widget
  • Cari kode berikut
<data:post.body/>

  • Letakkan kode berikut diatas kode tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>


Tombol facebook like akan muncul jika kamu telah membaca secara lengkap/ penuh sebuah postingan. Untuk menampilkan tombol facebook like di homepage hapus kode yang berwarna biru.
  • Klik Save Template

Kustomisasi Tambahan


Catatan !

Ada beberapa kustomisasi yang bisa anda terapkan pada tombol ini. Seperti berikut:
Penggantian kalimat like menjadi recommend pada kode yang bertuliskan action=like menjadi action=recommend

  1. Coba ganti tulisan colorscheme=light menjadi colorscheme=dark atau colorscheme=evil
  2. Anda juga bisa mengganti model tulisan yang semula font=arial menjadi salah satu dari opsi berikut ini:
    1. font=lucida+grande
    2. font=segoe+ui
    3. font=tahoma
    4. font=trebuchet+ms
    5. font=verdana

Friday 8 October 2010

Pasang Facebook share button di blog



Postingan kali ini bertema tentang share. Banyak manfaat yang dapat kita ambil jika kita mampu share postingan kita ke salah satu jejaring sosial bernama facebook . Dengan berbagi postingan secara tidak langsung kita akan mendapatkan banyak pengunjung, sebab mereka yang memiliki facebook akan membaca, dan pasti nya akan penasaran dengan apa yang telah kita share. Untuk memasang facebook share button berikut cara nya :

  • Login ke blogger.com
  • Klik Dashbord dan pilih design
  • Pilih Tambah Gadget, Pilih HTML/JavaScript
  • Tambahkan kode berikut didalam nya :
Kode untuk Full

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>


Code untuk compact

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>


selesai, jangan lupa di save ya :)

Pasang Top commentar widget

Widget yang satu ini, dapat membantu kita dalam menghitung siapa saja yang paling banyak memberikan komentar di blog kita. Bukan hanya itu, kamu juga dapat lebih dekat kepada para pengunjung. Bukan cuma itu, widget ini dapat membantu kita dalam penghitungan widget, jadi buat blog kamu yang sedang memiliki kontes banyak-banyakan komentar, widget ini salah satu pilihannya.

Tutorial untuk memasang widget top commentor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Paste kode berikut ke ruangan HTML/javascript


<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://URL ANDA.blogspot.com
&ExcludedNick1=NAME1
&ExcludedNick2=NAME2
&ExcludedNick3=NAME3
&ShowHowMany=10
&ExcludeCommentsBefore=08-01-2010 (i.e. 01-01-2010)
&IncludeCommentsBefore=08-31-2010 (i.e. 01-31-2010)
&_callback=getYpipe
&_id=932ec72eca30a5b8a83365f4eb4349cd
&_render=json"
type="text/javascript"></script>
<small><a href="http://4-jie.blogspot.com/2010/10/pasang-top-commentar-widget.html">Get this widget here</a></small>


3. Jangan lupa save ya

Catatan !
untuk
http://URL ANDA.blogspot.com silahkan kamu ganti dengan alamat blog kamu
NAME1,NAME2,NAME3 kamu dapat ganti dengan nama kamu. Fungsi nya supaya komentar owner atau seseorang tidak terhitung dalam proses penghitungan top commentar.


kalau ada yang kurang mengerti silahkan tinggalkan komentar :)



Pasang jQuery animated share button

Berbagi melalui sosial bookmark merupakan salah satu faktor penting untuk mendapatkan visitor yang lebih banyak. Bukan hanya itu, postingan kamu akan banyak di komentar oleh orang-orang ketika datang dan membuka postingan yang kamu buat. Blog akan terlihat lebih menarik karena adanya efek animasi dalam share button nya. Buat kamu yang ingin membuat silahkan ikuti langkah-langkah berikut ini :

  • Login terlebih dahulu di blogger.com
  • Pilih Rancangan -> Tambah Gadget
  • Pilih HTML/JavaScript, dan letakkan kode berikut ini didalam nya :
<style>
#stage{

position:relative;
width:110%;
height:140px;
padding-left:15px;
background:transparent;
}

.btn{

background:transparent;
height:90px;
left:0;
top:0;
width:20px;
position:relative;
margin:20px 0 0 0px;
float:left;
}

.bcontent{

position:absolute;
top:auto;
bottom:20px;
left:0;
}

span.fb_share_no_count {
display:block;
}

span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/jquery01/script.js"></script>

<div id="share">
<div id="stage">
<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script</div</div>
</div>
</div></script></div></div></div></div>



  • langkah berikut nya yaitu simpan dan lihat hasil nya
Always happy your blogging

Thursday 7 October 2010

Pasang jQuery Twitter Ticker


Siapa yang tidak kenal dengan twitter ?
Salah satu jejaring sosial yang sekarang lagi naik daun ini nanti nya akan menggantikan kedudukan facebook yang sampai saat ini masih eksis dan terus jaya di tanah nusantara :p
sekarang kita akan bahas cara pasang jQuery Twitter Ticker, yang nanti nya semua tweeps kamu akan muncul disitu, dan kamu dapat publikasikan nya ke dalam blog. langsung saja,

  • login ke akun blogger
  • pilih rancangan
  • pilih tambah gadget --> pilih HTML/ JavaScript
  • letakkan kode berikut di dalam nya
<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BOdUMRnR9CmPJ_rKZzHCsBi3XfX-07bbSawAKFrqCgR7hDrr5_tSux0xBWXqthShzg_fvusnkotCtG-WINkNi62ctOd5ERnAoi4venJLDWVtlbpa__DbofcDhSy_FfuLPrwEWRRHrLk/s1600/slickbg.png) no-repeat #f5f5f5;
color:#666666;
display:none;
-moz-border-radius:10px 10px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
text-align:left;
}

#tweet-container{
height:230px;
width:auto;
overflow:hidden;
}

#twitIcon{
position:absolute;
top:-25px;
left:-10px;
width:64px;
height:64px;
}

#top-bar{
height:45px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxavKkaVfvtGzrXynTqAbq92Dba2EBjF6669ampap71rdzcl0gHgehvi0undx83xYKjH8h5shND_vd5_lPC3YYF8OE2kBc4lkEx7nRT5clzkCOM9uB74WQJq-aDV14mceNcKIlFpJ3g-w/s1600/top_bar.png) repeat-x;
border-bottom:1px solid white;
position:relative;
margin-bottom:8px;
-moz-border-radius:6px 6px 0 0;
}

.tweet{
padding:5px;
margin:0 8px 8px;
border:1px solid #F0F0F0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-uaBttGYKRSoiGVEf22U-2vRlTupWis97zni2zrVe7hrPGbEp0EZxMrBqHVyhe2DZZhCNRR5KyI5N4XLGXpOwNyMMsk888LjYbzAWxxSGLXhn4tuK7gs39HCw87J-rCOr0A4OVvxt42I/s1600/transparent.png);
width:auto;
overflow:hidden;
}

.tweet .avatar,
.tweet .user,
.tweet .time{
float:left;
}

.tweet .time{
text-transform:uppercase;
font-size:10px;
color:#AAAAAA;
white-space:nowrap;
}


.tweet .avatar img{
width:36px;
height:36px;
border:2px solid #eeeeee;
margin:0 5px 5px 0;
}

.tweet .txt{
clear:both;
}

.tweet .user{
font-weight:bold;
}

#loading{
margin:100px 95px;
}



#twitter-ticker{
margin:40px auto 20px;
}

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right:4px;
top:0;
height: 100%;
background: #ddd;
}
.jScrollPaneDrag {
position: absolute;
background: #999;
cursor: pointer;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}
a.jScrollArrowUp:hover {
/*background-color: #f60;*/
}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}
a.jScrollArrowDown:hover {
/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-color: #f00;*/
}

h4.tut{
color:#fff;
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:16px;
padding:12px 0 0 58px;
text-transform:uppercase;

text-shadow:2px 1px 6px #333;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript">
var tweetUsers = ['ID_TWITTER_ANDA','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];
var buildString = "";

$(document).ready(function(){

$('#twitter-ticker').slideDown('slow');

for(var i=0;i<tweetUsers.length;i++)
{
if(i!=0) buildString+='+OR+';
buildString+='from:'+tweetUsers[i];
}

var fileref = document.createElement('script');

fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");

document.getElementsByTagName("head")[0].appendChild(fileref);

});

function TweetTick(ob)
{
var container=$('#tweet-container');
container.html('');

$(ob.results).each(function(el){

var str = ' <div class="tweet">\
<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\
<div class="time">'+relativeTime(this.created_at)+'</div>\
<div class="txt">'+formatTwitString(this.text)+'</div>\
</div>';

container.append(str);

});

container.jScrollPane();
}

function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}

function relativeTime(pastTime)
{
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();

var difference = parseInt((currentStamp - origStamp)/1000);

if(difference < 0) return false;

if(difference <= 5) return "Just now";
if(difference <= 20) return "Seconds ago";
if(difference <= 60) return "A minute ago";
if(difference < 3600) return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600) return "One day ago";

var dateArr = pastTime.split(' ');
return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>

<!--[if lt IE 7]>
<style type="text/css">
div.tweet {
background:none;
border:none;
}

div#twitIcon{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NX3ZAwlZ7vVwacT2N-LT5BEB8l225ih2ybUi-ihRq8uaejtNeBG6AkZzLfGIplBfF6l6sVSzqFqyHUDBULXHomw6eWRC3Kj1knI5GF1WkUuOR6Bb2zWrUR38P8Kg4eFv9YpF56yLweU/s1600/twitter_64.png, sizingMethod=crop);
}

div#twitIcon img{
display:none;
}
</style>
<![endif]-->

<div id="twitter-ticker">
<div id="top-bar">

<div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NX3ZAwlZ7vVwacT2N-LT5BEB8l225ih2ybUi-ihRq8uaejtNeBG6AkZzLfGIplBfF6l6sVSzqFqyHUDBULXHomw6eWRC3Kj1knI5GF1WkUuOR6Bb2zWrUR38P8Kg4eFv9YpF56yLweU/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h4 class="tut">TWITTERKU</h4>

</div>

<div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQeSygYOVWrcFSr8AuYfNI4642L4WZuxGqkxVmkD0q0D4sL5vEFLPN-EmbmfJC3uaCgecZ0wxluAEFjRlDLhqrFBUJLBbUEvlKjbcxoAx-OuRPHXhw4-UJKUPU2nwqDtbYV9vnlohYdYU/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>


  • jika sudah selesai jangan lupa di save
Catatan !

Untuk tulisan yang berwarna merah, silahkan kamu edit terlebih dahulu dan sesuaikan dengan nick twitter kamu

Cara banned IP address visitor

Kali kita kita akan bahas tentang banned, sedikit berbeda ya dengan yang sebelumnya, sebab disini kita akan sedikit bermain tentang javascript. tapi jangan takut, langkah-langkah nya mudah kok, tidak sesulit seperti yang kamu fikirkan. salah satu fungsi kita untuk banned IP Address visitor adalah untuk membuat blog kita jauh lebih bersih dan aman dari sebelumnya. Bukan hanya itu, secara tidak langsung kita juga dapat mem-block visitor yang merusak blog kita, misalkan "visitor yang berbuat tidak sopan,seperti memberikan komentar/ chat dengan kata-kata kotor". Jika sobat mau tau cara bikinnya, silahkan ikuti tutorial berikut ini :
  • Log in ke blogger
  • Pilih dashbord --> Layout --> Edit HTML
  • Cari kode <head> dan letakkan kode berikut dibawah nya
<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//&lt;!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com

var banned_ip = new Array();

banned_ip[0] = '0.0.0.0';
banned_ip[1] = '0.0.0.0';
banned_ip[2] = '0.0.0.0';
banned_ip[3] = '0.0.0.0';

var mes_bi = "IP anda telah di Banned. Silahkan hubungi owner untuk lebih lanjut";

for(var i=0;i&lt;banned_ip.length;i++) {
eval('var re = /^' + banned_ip[i] + '/ ;');
if (re.test(mc_user_ip))
{
document.write('&lt;style type="text/css"&gt;');
document.write('BODY{display:none;}');
document.write('&lt;\/style&gt;');
alert(mes_bi);
break;
}
}
//]]&gt;
</script>



Catatan !

Wajib kamu ganti :
  • Tulisan berwarna merah merupakan IP address pengunjung yang ingin di blog
  • Tulisan berwarna hijau merupakan pesan yang nantinya akan muncul ketika sang pengunjung masuk ke blog anda
selamat mencoba, dan satu lagi jangan di salah gunakan ya :)

Daftar blog ke ratusan search engine


Kali ini 4-jie akan bahas tentang mendaftarkan blog. tetapi kali ini cara nya beda, beda nya kita akan langsung daftar ke ratusan situs dengan cara mengklik dan mengetik. mudah, cepat, dan tentu nya instan banget nih. bukan hanya itu, kita juga tidak kehilangan banyak waktu untuk mendaftarkan blog ke search engine. Keuntungan yang didapat, blog akan lebih mudah dikenali oleh search engine seperti google, yahoo, bing, msn dll. Tak hanya itu, setiap hari nya pengunjung akan datang dan mampir terus di blog kamu. Saya akan berikan link nya, dan sobat bisa daftar sendiri. Caranya mudah banget loh, tinggal masukin nama blog, link blog, dan jangan lupa untuk di submit ya. Berikut link nya :



selamat mendaftar, jangan lupa ya kalau udah ke index sama oom search engine, pasang link blog ane ya :p

Sunday 3 October 2010

Pasang sitemap di sidebar

Postingan kali ini sedikit berbeda dari yang lain. tema kali ini yaitu sitemap. apa sih sebenarnya sitemap itu ? sitemap adalah kumpulan dari seluruh judul atau isi postingan sebuah blog. yang kita tau, sitemap ditempatkan didalam postingan, tetapi yang ini berbeda loh, sitemap kali ini akan kita letak di sidebar. Mau tau gimana bentuknya, lihatlah gambar berikut :


bagaimana setelah melihat gambarnya ?
mau tau cara bikinnya, ayo ikut 4-jie ya :

1. Login Blogger
2. Klik Rancangan --> Tambah Gadget
3. Klik HTML/ JavaScript
4. Tambahkan kode dibawah ini didalam nya

<div style="overflow: auto; padding-left: 5px; width: 100%; height: 350px;">
<script language="javascript"><br />numposts=9999;<br />home_page="4-jie.blogspot.com";<br /></script>
<ul><script style="" src="http://javascript16.googlecode.com/files/sitemap2.js"></script><script src="http://4-jie.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</ul></div>
5. Save dan lihat hasil nya clapclap


Keterangan !

silahkan ganti tulisan yang berwarna merah menjadi alamat blog sobat masing-masing

Membuat widget tampak rapi

Terkadang kalau kita pasang widget di blog, posisi widget tersebut tidak teratur atau sering disebut berantakan ok. Jadi biar enak dilihat sendiri dan enak dilihat oleh pengunjung ada baik nya kita rapikan tuh widget nya agar kelihatan tampak lebih indah dan elegant. Sebagai owner, cara ini tidak boleh dilewatkan, apalagi dilupakan. Berikut gambaran dari widget yang ingin kita susun menjadi rapi :



udah liatkan gambarannya, cara membuat nya sebagai berikut :

1. Log in ke Blogger
2. Masuk ke tab layout
3. Pilih tab add page element
4. Pilih HTML/Javascript
5. Masukkan kode berikut ini di dalam HTML/Javascript

<table>
<tr>
<td>Judul Widget</td>
<td>:</td>
<td>KODE WIDGET</td></tr>

<tr>
<td>Judul Widget</td>
<td>:</td>
<td>Kode Widget Sobat</td></tr>

<tr>
<td>Judul Widget</td>
<td>:</td>
<td>Kode Widget Sobat</td></tr>
<tr>
<td>Judul Widget</td>
<td>:</td>
<td>Kode Widget Sobat</td></tr>
<tr><td valign="top" colspan="3"><script style="">
function showpostcount(json) {
document.write('Sampai saat ini ada <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b> artikel. ');}</script><script src="http://4-jie.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"/></td></tr>
</table></script></td></tr></table>


Keterangan:

6. Silahkan sobat ganti tulisan yang berwarna merah dengan judul dan kdoe widget sobat sendiri

7. Jika sudah save dan lihat blog anda akan tampak rapi,idealnya cara seperti ini lebih baik diletakkan di dasar blog biar lebih rapi.


selamat mencobaa yaa.... 4-jie

Memodifikasi Kotak Berlangganan Feedburner

Kali ini 4-jie akan membahas tentang feedburner. Feedburner wajib dipasang buat setiap blogger yang ingin memajukan tingkat pengunjung/ visitor nya. Untuk kali ini, tema nya tentang Memodifikasi kotak berlangganan feedburner . Dimana kita akan upgrade tampilan awal kotak feedburner yang masih dibilang biasa menjadi yang lebih luar biasa smile

Untuk DEMO nya silahkan lihat gambar dibawah ini :

Lalu, bagaimana caranya membuat tampilan kotak feedburner menjadi lebih menarik. Sehingga pengunjung bisa betah berlama-lama di blog anda? Caranya adalah dengan modifikasi tampilan kotak feedburner. Cara modifikasi feedburner berikut:

  • Login ke Blogger
  • Masuk ke bagian Rancangan
  • Pilih Elemen Halaman
  • Kemudian klik Tambah Gadget
  • Piih HTML/Javascript
  • Masukan kode di bawah ini, di dalam form yang di sediakan:


<style>
.form{border:1px solid #d8d8d8;background:#fff padding:3px;width:308px;height:200px;-moz-border-radius:6px}.rss{background:url("http://i56.tinypic.com/5y6kxi.png") no-repeat top right}.button{background:#9b9b9b;color:#FFF;font-size:11px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:1px solid #fff;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:5px}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/fajrialhadi"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLxdF0nG4P52BZEqJ95TA_dKQK0D4KA6leUE4RWZ_3cY_pjX0cRgaaUnlzCQoNhPjFQUzMDz3I9664MhOSi2E4tgwA9LLamu3pzKL2tUHme6dtlyN_xpKLuLBiQcK1J9UccWA9UPuzhUR/s144/rss%20feed%20icon.gif" /></a> <a href="http://feeds.feedburner.com/fajrialhadi">GET UPDATE VIA RSS</a></div>
<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>
<div style="padding-left:10px">Jika anda suka dengan artikel di blog ini. Silahkan berlangganan via RSS. Isi alamat email anda di bawah ini!!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=fajrialhadi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="4-jie" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
<div style="padding-left:10px"><a href="http://feeds.feedburner.com/4-jie"><img src="http://feeds.feedburner.com/~fc/egablogs?bg=99CCFF&amp;fg=444444&amp;anim=1" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan:
Kode warna hijau : Biarkan atau ganti dengan gambar sesuka anda
Kode warna merah : Ganti dengan id feedburner anda
Kode warna oranye: Ganti dengan gambar feedcount anda


  • Setelah semua selesai anda edit, klik save dan lihat hasilnya
kalau kira-kira masih binggung silahkan sobat tinggalkan komentar nya disini ya question
Begitulah caranya, semoga bermanfaat ya... happy blogging with 4-jie

Pasang Widget Tukar Jenis Font

Kali ini 4-jie ingin sharing tentang cara membuat widget tukar font. Dimana pengunjung dapat memilih sendiri font yang iya sukai. Bukan hanya itu, pengunjung juga bisa lebih betah di blog kamu dengan adanya widget tukar font ini. Meskipun terbilang widget kecil, tetapi dapat memperindah tampilan postingan kamu loh. Untuk melihat contoh silahkan lihat gambar dibawah :



ga percaya, mari kita ikuti langkah-langkah sebagai berikut :
  • login ke akun blog masing-masing
  • klik rancangan
  • klik Tambah Gadget --> HTML/ JavaScript
  • Copy kode dibawah ini dan letakkan didalamnya :
<div class='widget-content'>
<center><script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman" />Times New Roman
<option value="Arial" />Arial
<option selected value="Book Antiqua" />Book Antiqua
<option value="Bookman Old Style" />Bookman Old Style
<option value="Century Gothic" />Century Gothic
<option value="Comic Sans Ms" />Comic Sans Ms
<option value="Tahoma" />Tahoma

<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana" />Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px" />8
<option value="9px" />9
<option value="10px" />10
<option value="11px" />11
<option selected value="12px" />12
<option value="14px" />14
<option value="16px" />16
<option value="18px" />18
</select></form><center></center></center>
</div>
  • klik simpan
dan lihat widget tukar font telah terpasang di blog kamu

Monday 27 September 2010

Menampilkan Status Yahoo Messenger di Profile


Karena udah lama ga update, pasti udah ga sabar ya nungguin info terbaru dan terhangat seputar otak atik blog ya... Kali ini saya akan share cara membuat status yahoo messenger tampil di widget profile blog. contohnya dapat kamu liat seperti yang ada di blog saya ini. Dengan menempatkan status yahoo messenger di profile akan kelihatan bahwa blog lebih simple, elegant, dan ruang yang disediakan jauh lebih baik daripada kita pakai lagi hanya untuk menambahkan widget status yahoo messenger. langsung saja ya, berikut nih tutorial nya sob :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya
<a href='ymsgr:sendIM?IDYMSOBAT'> <img src='http://opi.yahoo.com/online?u=IDYMSOBAT&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>
5. Selesai dan tinggal save aja....
untuk tulisan yang berwarna merah silahkan sobat ganti dengan ID y
happy blogging with 4-jie

Tuesday 17 August 2010

Label Cloud Berwarna

Membuat label cloud dengan penuh warna-warni mungkin akan terlihat indah ya, walaupun mungkin sebagian orang ada yang tidak menyukainya. Label cloud sudah tahu kan sobat?? yup, "cloud" merupakan label yang tersusun seperti "awan". Label cloud tersusun dengan berbagai ukurannya, ada yang besar, sedang, dan kecil. Nah kalau untuk membuat label menjadi berwarna-warni sobat cukup memberi kode sedikit CSS.

Caranya sebagai berikut :

1. Login blogger
2. Masuk ke Edit HTML
3. Design - edit html - masukkan kode di bawah ini di atas kode ]]></b:skin>

.label-size-1 a {font-size: 12px;text-decoration: none;color:#B45F04}
.label-size-2 a {font-size: 14px;text-decoration: none;color:#cd9f01;}
.label-size-3 a {font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;color:#4B088A}
.label-size-4 a {font-size: 18px;font-weight:bold;text-decoration: none;color:#ea5a04;}
.label-size-5 a {font-size: 24px;text-decoration: none;color:#04B4AE}
.label-size-1 a:hover,.label-size-2 a:hover,.label-size-3 a:hover,.label-size-4 a:hover,.label-size-5 a:hover { text-decoration:underline }


Selesaii

Wednesday 4 August 2010

Mengganti Font dan Warna Judul

Kenapa harus diganti? Jawabannya tentu banyak kemungkinan. Tapi yang jelas font dan warna judul blog ini memang jadi sasaran awal bila berhubungan dengan utak atik tampilan. Sebabnya karena bagian inilah yang pertama kali terlihat begitu sebuah blog baru dibuka. Boleh dikatakan bagian ini (header) bagaikan mahkota pada sebuah blog. Nah, yang menjadi masalah: Bisakah font dan warna judul blog ini diganti? Jawabannya tentu saja bisa. Karena blogspot memang sudah menyediakan fasilitas untuk ini. Caranya pun juga sangat mudah. Sebagai contoh anda bisa ikuti beberapa langkah di bawah ini:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Selajutnya klik Perancangan Template



3. Klik pada Advanced


4. Untuk mengganti jenis fontnya cari dan kliklah Font Judul Blog.
5. Maka disamping kanannya akan muncul fasilitas untuk mengatur model, ketebalan, dan ukuran fontnya. Silahkan anda pilih pengaturan setiap bagian tersebut sesuai keinginan anda. Jangan lupa perhatikan setiap bagian yang anda klik akan langsung menampilkan perubahan pada judul blog anda (lihat perubahan di bagian bawahnya).



6. Jika sudah selesai sekarang anda bisa beralih untuk mengganti warna fontnya. Caranya cari dan kliklah pada Warna Judul Blog.





7. Maka di sampingnya akan muncul tabel warna. Kliklah salah satu warna yang anda inginkan dan lihatlah perubahnnya.



8. Jika kurang puas dengan koleksi warna yang tersedia maka anda bisa cari warna lain dengan mengklik tanda panah di bagian kanan atas, sehingga akan muncul kotak koleksi warna yang lebih kaya.



9. Jika sudah sekarang kliklah APPLY TO BLOG.


10. Maka akan muncul tulisan seperti di bawah ini, sebagai tanda bahwa perubahan yang anda lakukan sedang disimpan. Tunggulah hingga prosesnya selesai.


11. Sekarang kliklah View Blog untuk melihat hasilnya.