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