Membuat Blog Di WordPress.com

Jika temen-temen blogger sudah bosan dengan tampilan blogspot, dan ingin membuat blog/web di wordpress.com. Kali ini saya akan berikan tutorial cara membuat blog di wordpress.com. Membuat blog di wordpress.com sangatlah mudah, hampir sama seperti kalau kita buat blog di blogspot. Kita tinggal isi formulir yang sudah disediakan, isi semua jangan sampai ada yang kelewatan, jadi deh blognya......

Membuat Blog di Blogspot

Artikel ini seharusnya saya letakkan di awal postingan saya, tapi karena kemarin ada teman yang bertanya bagaimana membuat blog di blogspot, yah ada baiknya tutorial ini saya tulis. Salah satu penyedia Blog yang cukup populer saat ini adalah Blogspot atau Blogger. Kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih Hidup karena hasil kreasi sendiri.

Langkah-Langkah Membuat Website

Sebelum memulai tutorial ini ada baiknya saya ulas sedikit tentang definisi website secara awam agar mudah di mengerti. Website adalah sekumpulan file berupa gambar, aplikasi, kode program dan lainnya yang di simpan di suatu tempat yang di sebut sebagai server. Server adalah sebuah komputer yang selalu hidup dan online serta bisa di akses melalui internet sehingga file2 yang anda simpan di server itu bisa di buka oleh semua orang di seluruh dunia. Untuk bisa mendapatkan layanan sebuah server, maka anda harus menyewa dari perusahaan webhosting.

Tentang PPC dan Daftar Situs PPC Lokal

PPC (Pay Per Click) merupakan salah satu alternative cara yang bisa kita lakukan untuk mendapatkan tambahan penghasilan lewat blog. Dengan PPC kita akan dibayar setiap ada orang yang mengklik iklan yang kita tempatkan di blog kita, untuk besarnya bayaran per kliknya itu tergantung dari program PPC yang kita ikuti, klo PPC lokal biasanya sekitar Rp. 400 atau Rp. 300 per kliknya.

Kenapa Backlink Itu Penting?

Walaupun sudah mau Maghrib, tapi nggak apa lah saya akan mencoba menulis mengenai teknik SEO yang lain yaitu Backlink. Backlink adalah link yang mengarah pada situs web kita dari situs lain. Dengan kata lain, backlink adalah tautan link yang dapat meningkatkan posisi SERP di Google. Jumlah backlink yang dimiliki situs adalah nilai popularitas situs tersebut. Kenapa backlink itu penting? Seperti yang saya tulis diatas, backlink memberikan kekuatan untuk bersaing di posisi SERP Google. Yang pada tahap selanjutnya akan memperkuat kata kunci pada blog anda.

Sabtu, 06 Oktober 2012

Pasang animasi status page loading di blogger


Ok langsung aja ya, sesuai janji saya kemaren untuk menuliskan tutorial cara pasang gambar status page loading ini di blogger, yang belum sempat baca silahkan simak dulu info sebelumnya tentang Page preloader disini.

Pertama, pilih saja dulu salah satu animasi preloader dari dua layanan ini Preloader atau Ajaxload, kemudian simpan hasil gambar dalam format gif tersebut. Kalo sudah, silahkan upload file gambar tadi ke hosting anda (yang gratis bisa pake geocities.com)

Langkah kedua silahkan buka notepad anda, kemudian simpan kode dibawah ini dengan nama preloader.js (pastikan ekstensi berakhiran JS, bukan TXT)

var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}


Kalo sudah, silahkan upload file preloader.js ke hosting anda (yang gratis bisa pake geocities.com)

Cara Pasang di blogger:

Langsung tuju saja ke alamat EditHTML, cari tag <body> Kemudian ganti tag <body> dengan kode dibawah ini, janga lupa ganti kode warna merah dibawah dan sesuaikan sendiri dengan lokasi alamat penyimpanan gambar dan file JS anda.

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='
http://lokasi-simpan.com/gambarpreloader.gif'/></div>

<script src='
http://lokasi-simpan/preloader.js' type='text/javascript'/>

Untuk mengubah penempatan gambar loading silahkan atur sendiri pada kode text-align:center (silahkan bermain saja dengan kode center, coba ganti dengan left, right, top atau bottom). Sebenarnya masih banyak trik lainnya, silahkan dikembangkan sendiri ya.

Perhatian! saya belum dapat info apakah merubah tag <body> ini melanggar TOS blogger apa tidak, jadi saya sarankan jangan di coba langsung di blog utama. silahkan bereksperimen di blog uji coba anda . Kalau terjadi apa2 jangan salahkan saya OK! :)

Menampilkan Gambar Transparan, Mouseover Effect

Ini maksudnya apa ya? ok, dari pada saya jelasin panjang lebar coba rekan lihat dulu samplenya di zoomtemplate.com, kalo sudah coba sekarang arahkan mouse ke gambar yang ada dihalaman postingan..nah disitu rekan akan melihat efek dimana gambar yang semula terang akan menjadi redup atau bisa juga sebaliknya dari redup menjadi terang ketika dilewati mouse. Mungkin sudah cukup jelas maksudnya ya, langsung aja ke bahasan selanjutnya :)

Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)



<img src="Url lokasi simpan gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)



<img src="Url lokasi simpan gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>


Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

 .post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}


Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.


Breaking News: zoomtemplate.com sudah mencapai tahapan final, untuk desain template sengaja saya buat khusus dengan memasang berbagai efek istimewa dan beberapa teknik koding yang masih jarang digunakan di template yang ada selama ini. Semoga cepat kelar ya..dan ditunggu juga untuk sumbangan template rekan lainnya. thanks

Animasi gambar Opacity menggunakan jQuery

Postingan kali ini sebenarnya cuman memperbaiki tutorial sebelumnya mengenai tranparansi gambar menggunakan CSS Opacity. Kok memperbaiki, emang ada yang salah ya? sejujurnya gak ada kok, masalahnya hanya pada tampilan di browser..dimana CSS opacity ternyata kurang begitu berjalan dengan baik pada beberapa browser versi jadul, salah satunya di IE6. Selain itu efek animasi yang ditampilkan juga kurang begitu mantap dan terlihat kasar.  Nah sayang banget tuh punya efek animasi gambar yang ok tapi gak support di browser lawas, untuk itu kali ini saya coba mengenalkan efek animasi yang lain menggunakan Opacity via jQuery.



Efek blur tranparansi yang ditampilkan menggunakan Opacity jQuery ternyata lebih halus jika dibanding dengan Opacity CSS, dan sepertinya juga support di semua browser, asalkan pada browsernya tetap mengaktifkan Enable Javascript lho ya hehehe. Untuk melihat contoh efek gambar yang dihasilkan jQuery silahkan langsung aja ke Blog baru saya Free Blogger Templates Gallery.

OK, langsung ke tutorial saja ya...

Buka halaman Edit HTML kemudian letakan script dibawah ini di bawah kode ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.efekanimasi&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>


Contoh manual memasang efeknya pada gambar :

<img
class="efekanimasi" src="url alamat gambar"/>

Sebenarnya ada cara lain yang lebih mudah dimana kita bisa langsung mengaktifkan efek gambar ini disemua image pada halaman posting. Caranya, copy paste aja script dibawah ini, dan letakan saja dibawah kode ]]></b:skin> atau dibawah script yang sudah kita masukan sebelumnya.

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>


Good Luck :)

Mengembalikan dan Mengaktifkan Komentar Avatar Blogger pada Custom Template

Secara default sebenarnya komentar avatar pada blogger sudah bisa rekan aktifkan langsung tanpa merubah apapun pada tempate yang belum dimodifkasi. Tapi ini akan bermasalah bila template yang digunakan saat ini sudah menggunakan custom template. Nah biar komentar avatar ini bisa tampil kembali caranya sangat mudah, ikuti saja tutorial dibawah ini:


Mengaktifkan Komentar Avatar Blogger Pada Custom Template 

Pertama cari kode dibawah ini.

<dl id='comments-block'>

Kemudian ganti kode diatas dengan kode dibawah ini.

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

Setelah mengganti kode diatas, kemudian cari baris kode dibawah ini.

<a expr:name='data:comment.anchorName'/>

Kemudian letakan kode dibawah ini setelah kode diatas.

<b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
 </b:if>


Untuk mengaktifkan atau menonaktifkan gambar profil dalam komentar, buka halaman Pengaturan - Komentar. Lalu beri tanda check "Ya" pada "Tampilkan gambar profil dalam komentar?"

Mengembalikan Komentar Avatar  jika menggunakan avatar dari MyBloglog

Sebelumnya saya pernah menulis tutorial memasang komentar avatar menggunakan mybloglog, nah bila rekan hanya ingin menggunakan avatar standar blogger, rekan bisa dengan mudah mengembalikannya. ikuti tutorial dibawah ini.

Untuk memudahkan rekan menghapus kodenya, pertama coba cari dulu kode dibawah ini

<b:loop values='data:post.comments' var='comment'>

Kemudian lihat baris kode dibawahnya seperti ini

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>


Kalo sudah ketemu, tinggal hapus aja semua kode diatas, kemudian ikuti kembali cara mengaktifkan komentar avatar seperti yang tertulis diatas.

Pasang Avatar pada Komentar Blogger

Masih dalam memperingati ulang tahun blogger yang ke-10, Kali ini blogger menambahkan fitur terbaru lagi yaitu selain pengunjung memberi komentar, dapat juga langsung menampilkan komentar tersebut bersamaan dengan photo profile blogger mereka.  Fasilitas ini sangat mirip dengat tutorial yang pernah saya tulis beberapa waktu lulu disini dan disini. Sayangnya, untuk bisa menampilkan kometar Avatar pada Blogger, kita harus dalam status login.


Blogger juga memberikan kemudahan untuk meng-upload langsung foto profil ketika kita ingin meninggalkan komentar,  pada komentar pilih tombol Pratinjau, klik "Add photo" untuk meng-upload foto ke profil Blogger. Berikutnya ketika kita meninggalkan komentar diBlogger, foto profil akan langusng ditampilkan di sebelah kolom komentar.


Untuk mengaktifkan atau menonaktifkan gambar profil dalam komentar, buka halaman Pengaturan - Komentar. Lalu beri tanda check "Ya" pada "Tampilkan gambar profil dalam komentar?"

Sekedar info, beberapa template yang sudah dimodifikasi mungkin akan bermasalah dengan fasititas  Avatar komentar ini, tapi jangan khawatir semua bisa di kembalikan seperti semula kok :)

Photo diambil langsung dari Buzz.blogger.com

Cara Simple Membuat Iklan Melayang dengan Tombol Close



Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode, tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pasti bisa melakukannya, ok saya "Kang Yasin" akan segera memberikan tutornya, nih ikutin saja langkahnya :

 
  1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  2. Masuk ke Tab Tata Letak
  3. Pilih Elemen Halaman
  4. Tambah Gadget Pilih HTML / JAVASCRIPT
  5. Dan Copy kode di bawah ini kedalamnya yah

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3KLAX68YqsKRpnf7-4eJbvhMOh34z8Xx5Llt4STWamctwFppAWJQ7fH7l4SW1G36PDUqgd5eTFGUIQG3e3sP-ytsgxVgME1b7H9ukqcKwEAultzc4CalyViucZJud0xT2S26KjH25sY/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3KLAX68YqsKRpnf7-4eJbvhMOh34z8Xx5Llt4STWamctwFppAWJQ7fH7l4SW1G36PDUqgd5eTFGUIQG3e3sP-ytsgxVgME1b7H9ukqcKwEAultzc4CalyViucZJud0xT2S26KjH25sY/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>



<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>


Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>


    6. Simpan

Semoga BERHASIL :)

Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed


Website standar atau jadul biasanya tanpa dukungan Rss Feed, ini berbeda jika kita menggunakan platform blog seperti Blogger, Wodpress dan platform lainya yang memang sudah terlebih dahulu tertanam sindikasi Rss Feed. Keutamaan Rss Feed tidak lain adalah sebagai cara termudah agar pembaca (subscriber) feed via online dapat mengetahui update terbaru pada suatu situs,  selain itu tentu saja peran Rss Feed sangatlah besar bagi spider search engine agar dapat mengindex semua halaman Website.

Tutorial kali ini saya akan menunjukan bagaimana mudahnya membuat Rss Feed dengan cepat tanpa harus menggunakan software tertentu atau tanpa harus menulis baris kode XML yang bikin kita pusing.

Tutorial Membuat Feed dengan Goolge Reader:

Langkah I:
1. Silahkan kunjungi Google Reader, login seperti biasa.
2. Tuju ke Notes


3. Arahkan mouse ke button Note In Reader, lalu drag and drop button tersebut dengan cara menahan klik dan arahan ke tab bookmark website rekan (dalam contoh saya menggunakan browser Flock)


 Link Google reader yang sudah tersimpan dalam Bookmark



4. Sekarang buka website rekan yang ingin ditambahkan RSS Feed, Contoh disini saya menggunakan Premium template.
5. Blok sebagian tulisan yang menurut rekan penting, mulai dari title dan deskripsi singkat. Lalu klik Note in Reader yang ada dalam Bookmark


6. Akan muncul Dialog Box Google Reader disebelah kanan.
7. Disini silahkan hilangkan tanda Check untuk Add to shared items, Masukan nama Tag utama kedalam Add Tags (contoh: Zoom Premium), dan pastikan rekan menggunakan tag yang sama untuk setiap halaman yang akan rekan buat Feednya.
9. Klik tombol Post Items

Langkah II:
1. Tuju ke menu Settings, lalu klik Reader Settings


2. Pilih Tab Folder and Tags
3. Akan tampil nama tag yang sudah rekan buat, jangan lupa set feed berwarna abu-abu (private) ke Public
4. jangan lupa catat / copy alamat linknya.

Langkah III:
Langkah membuat feed sudah hampir selesai, sekarang kita membakar link Feed yang sudah rekan copy tadi dengan Feedburner. Maaf saya tidak menjelaskan panjang lebar tentang pendaftara Feedburner, disini saya anggap rekan sudah mengerti caranya :)

Langkah Terakhir:
Agar website langsung support Rss Feed, rekan hanya perlu menambambahkan kode di bawah ini kedalam website. Letakan diantara Tag <Head> </Head>

<link rel="alternate" type="application/rss+xml" title="Title website" href="http://feeds2.feedburner.com/feedburnerID" />


Note: Jika rekan ingin menambahkan Feed untuk halaman yang baru, rekan dapat dengan mudah mendistribusikannya melalui RSS feed dengan hanya mengulangi Langkah I

Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress menggunakan plugin untuk menampilkan thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih mudah di blogger. Cukup dengan conditional Tag.


Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.

Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman artikel (item).

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

Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang ingin dijadikan thumbnail.

Berikut total kode:

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

.thumb {display:none}

</style>
</b:if>
 

Letakkan kode tersebut diatas </head>

***

Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode berikut:

<a class="thumb" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"
href="...s1600/anonymous.png"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;width:
35px; height: 35px;" src="...s400/anonymous.png" border="0"
alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>


Atau,

<img class="thumb" src="...s1600/anonymous.png" alt="" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.

Cara Melihat Berapa Yang Online (User Online)

User online sebuah tools untuk melihat berapa pengunjung yang sedang online di blog atau situs kita pada saat waktu yang sama. Dengan tools user online kita bisa melihat berapakah yang sedang mengunjungi blog kita.

Kali ini saya akan memberikan trik tentang cara pembuatan user online di blog kita yang berupa text jadi gak begitu berat untuk blog kita.


<b><script type="text/javascript" src="http://fastonlineusers.com/on3.php?d=irhamwoles.blogspot.com"></script> User Online</b>



Pasang code di atas pada menu Layout-> Page Elements lalu klik "Add a gadget" lalu pilih "HTML / JavaScript" kemudian paste.

Ingat tulisan yang berwarna merah dan tebal diatas ganti dengan alamat blog kamu

Nah tutorial singkat untuk kali ini. Salam blogger.

Widget Recent Posts Dan Recent Comments Dari Blogger

Recent posts dan recent comments atau widget komentar dan posting terakhir adalah widget yang sering digunakan para blogger, karena kedua widget ini sangat berguna untuk mengetahui komentar terakhir dan posting terakhir di blog kita.

Dulu saya pernah mencoba menulis tentang cara membuat recent comments dan recent posts dengan javascript, namun sekarang kita tidak perlu susah-susah lagi untuk membuat widget tersebut dengan menggunakan javascript karena blogger sudah menyediakan widget ini di widget featured blogger.

Bagi Anda yang belum tau tentang cara menggunakan widget ini silahkan ikuti panduan dibawah ini.


Cara menggunakan widget ini cukup mudah yaitu :

  1. Masuk pada "Design→ Page Elements"
  2. Lalu Klik tombol "Add a Gadget"
  3. Dan klik tombol "Featured"

  4. Cari gadget Recent Comments, untuk menggunakan widgetnya klik tombol (+)

    Setelah muncul kotak dialog seperti diatas kemudian isi konfigurasi widgetnya dan tekan tombol "SAVE"
  5. Dan untuk widget Recent Post pada langkah nomer 3 cari gadget "Recent Posts" dan klik tombol (+) maka akan muncul kotak konfigurasi seperti dibawah ini


    Nah setelah muncul kotak konfigurasi seperti diatas, lalu isi konfigurasinya sesuai keinginan Anda lalu "SAVE"
  6. Selesai dan lihat hasilnya.
Okkey inilah bukti kemajuan blogger yang bisa Anda rasakan, semoga blogger lebih canggih lagi dan kita pun lebih mudah menggunakan blogger. Salam blogger

WIdget IP Addres Ckecker

Nahh ini dia yang buat blog kita terkesan mempunyai nilai database tinggi.. tau gak kamu kalau ada yang mengunjungi blog kamu maka sang pengunjung itu dapat melihat IP addresnya sendiri bahkan Negara, OS dan juga Browser yang dipakai.. jiaaa pasti bagi yang belum tau beranggapan kalau sang Owner blog mempunyai pengetahuan tentang database tinggi... tapi jika di teliti ini adalah layanan dari situs yang menyediakan Widget Ini... nah mau tau gimana IP Addres Checker itu lihat aja gambar dibawah...
IP
Nahh gimana dari keterangan diatas kamu pengen buat gakk. kalau pengen aku kasih teu caranya dahh.. nii...

  1. Buka website http://www.wieistmeineip.de/banner/
  2. Nah didalam website tersebut ada Beberapa Style.. pilihlah sesuai keinginan kamu dan Lalu Copy Code yang ada dibawah Style tersebut
  3. Jika udah di copy codenya kemudian masukkan di blog kamu dengan cara masuk menu Layout --> Page Elements kemudian Add a gadget lalu pilih HTML/JavaSrcipt kemudian paste Codenya
  4. Save dan lihat Hasilnya...

nah gimana gampang kan.... kamu juga bisa mengotak-atik codenya looooo...
ni dibawah ada juga website yang menawarkan layanan yang sama gratis pula
www.ping-timeout.de
www.ip2location.com
www.wieistmeineip.de

Cara Memasang Tombol Google+ di Blogger


gplus Saya yakin pembaca setia blog ini tidak kesulitan untuk memasang tombol Google+ (G+), tapi tidak semua juga mengerti caranya, terlebih yang baru belajar ngeblog. Selain itu disini saya juga  mencoba menjelaskan secara rinci dari beberapa masalah yang kadang membuat tombol Google+ tidak bekerja sebagaimana mestinya. Jadi silahkan luangkan waktu sejenak untuk belajar tutorialnya dibawah ini:

Langkah memasang tombol G+ sangat mudah silahkan ikuti tutorial dibawah ini

Silahkan memasang Script dibawah ini atas Tag </body>
<!-- Tempatkan tag ini di bagian head atau tepat sebelum tag body penutup -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode dibawah ini.

<!-- Tempatkan tag ini di tempat yang Anda inginkan untuk menampilkan tombol +1 -->
<g:plusone size="small"></g:plusone>


Cara memasang tombol G+ diatas sebenarnya sudah selesai, tapi jika anda ingin menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol G+ dengan ukuran Standar (24 piksel)
<g:plusone></g:plusone>

Tombol G+ dengan ukuran Kecil (15 piksel)
<g:plusone size="small"></g:plusone>

Tombol G+ dengan ukuran Sedang (20 piksel)
<g:plusone size="medium"></g:plusone>

Tombol G+ dengan ukuran Tinggi (60 piksel)
<g:plusone size="tall"></g:plusone>

Tombol G+ Untuk HTML5
<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat custom tombol G+ sendiri
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
  function renderPlusone() {
    gapi.plusone.render("plusone-div");
  }
</script>
<body>
  <a href="#" onClick="renderPlusone();">Render the +1 button</a>
  <div id="plusone-div"></div>
</body>
 
Custom Tombol G+ dengan URL khusus
<!-- customized for a specific address -->
<g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>
Untuk customize tombol G+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat, lihat tutorialnya disini

Cara pasang Tombol G+ disebelah Tombol Facebook (dalam halaman posting)
<span style='float:left; width:65px;'><!-- Place this tag where you want the +1 button to render -->
<g:plusone expr:href='data:post.url' size='medium'/>
</span>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.pjumpjhp?href=&quot; + data:post.url + &quot;&amp;layout=button_count&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:110px; height:30px;'/>
</div>


Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman home (index).
Pada halaman Posting dengan menggunakan kode <G:Plusone/> biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol G+ yang ditujukan pada halaman post yang letaknya berada dalam halaman utama ini biasanya bermasalah karena G+ setahu saya tetap akan mendeteksi sebagai halaman index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba menggunakan kode ini <g:plusone expr:href='data:post.url'/>

Auto Hide Navbar Blogger

Agan Irham sebelumnya pernah menulis tentang menghilangkan navbar blogger tapi cara itu melanggar TOS Blogger, Maka dari itu saya menulis artikel yang bermanfaat ini yang aku ambil dari o-om, maka saya pertimbangkan saja untuk menulis ini, karena sangat bermanfaat, kita dapat manfaat kedua-duanya yaitu nggak melanggar TOS blogger dan kita dapat mempercantik blog kita.
Auto Hide ini menyembunyikan Navbar Blogger bukan menghilangkan, Navbar akan tersembunyi bila Pointer tidak diarahkan pada Navbar blogger tapi jika Pointer Diarahkan pada bagian atas Blog atau tempat Navbar itu maka Navbar akan muncul.

Setidaknya kaya diatas pengertianya dan kita akan melangkah ke pemasanganya yaitu:


  1. Pastiakan udah log in di blogger
  2. Ke menu Layout Kemudian Edit HTML
  3. Kemudian Cari Code seperti ini ]]></b:skin> (untuk mempermudah pencarian ketik ctrl+F)
  4. Lalu Diatas Code ]]></b:skin> tambahkan Code seperti dibawah
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
  5. Selesai Deh tinggal SImpan Template dan lihat hasilnya..


sekian yah semoga bermanfaat bagi anda.. terus berkreasi majukan komunitas blogger indonesia

Highlight Post Dengan Tombol Select All

Salam blogger,

Sebelumnya pada postingan yang kemaren agan irham sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu. Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

Seperti contoh dibawah ini




Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...

Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah code <head>





<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

4. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code ]]></b:skin>




/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px;
border:1px solid #FFC71F;
background:#FFFFCC;
}
.kopiaer { /* -- Style Box Luar --*/
background:red;
padding:7px;
}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00;
border:1px solid #FFC71F;
color:#FFD65C;
padding:2px;
font-weight:bold;
}

Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya


<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">

INI TEKS YANG INGIN DITAMPILKAN

</div>
</div>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.

Highlight Post Dengan Tombol Select All

Salam blogger,

Sebelumnya pada postingan yang kemaren agan irham sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu. Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

Seperti contoh dibawah ini




Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...

Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah code <head>





<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

4. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code ]]></b:skin>




/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px;
border:1px solid #FFC71F;
background:#FFFFCC;
}
.kopiaer { /* -- Style Box Luar --*/
background:red;
padding:7px;
}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00;
border:1px solid #FFC71F;
color:#FFD65C;
padding:2px;
font-weight:bold;
}

Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya


<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">

INI TEKS YANG INGIN DITAMPILKAN

</div>
</div>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

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

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code
<b:if cond='data:blog.pageType == data:blog.homepageUrl'>


Untuk menempatkan di halaman Archive saja
<b:if cond='data:blog.pageType == "archive"'>


Untuk menempatkan dihalaman item/posting saja digunakan code
<b:if cond='data:blog.pageType == "item"'>


Dan untuk pada halaman pages atau static page blogger digunakan
<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
<b:if cond='data:blog.url == "URL_HERE"'>


Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

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

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:




Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!

Cara Menghilangkan Tulisan LinkWithin


LinkWithin merupakan widget yang banyak digunakan oleh para blogger untuk menampilkan berita terkait yang letaknya di bawah postingan artikel. LinkWithin dapat meningkatkan peringkat tampilan halaman (pageview rank), memberikan link postingan artikel yang relevan untuk pembaca dari posting tertentu, menjaga mereka terlibat dengan blog Anda, dan meningkatkan lalu lintas blog (traffic) Anda. LinkWithin tampil dengan desain elegan dan mudah dalam pemasangan. Nahhh.. untuk Anda yang sudah memasang widget LinkWithin, coba perhatikan tulisan "LinkWithin" yang ada di bawah widget tersebut. Oke...bro untuk menghilangkan tulisan "LinkWithin" tersebut silakan disimak tips & triknya berikut ini.
  • Login ke blog.
  • Klik Tata Letak.
  • Edit HTML, centang Expad Widget Templates
  • Cari kode ]]></b:skin> dan
  • Letakkan kode script di bawah ini tepat diatas kode ]]></b:skin> 


  • Klik "Save" dan lihat hasilnya...
.:Semoga Bermanfaat:.

Memasang Related post with thumbnail (Linkwithin) di blog Memasang Related post with thumbnail (Linkwithin) di blog

Memasang Related post with thumbnail (Linkwithin) di blog
Nah, setelah sekian hari agan irham istirahat tidak mengurus blog. Akhirnya, agan irham kembali datang mengurus blog :D. Sekarang, kita akan mempelajari tentang bagaimana cara memasang related post with thumbnail dari Linkwithin. Linkwithin adalah situs penyedia widget related post bergambar untuk beberapa blog atau website. Pada posting sebelumnya juga, agan irham pernah menjelaskan bagaimana cara memasang related post with scroll di bawah postingan. Fungsi dari related post with thumbnail ini sama dengan related post sebelumnya. Yaitu untuk mempermudah pengunjung blog sobat membaca postingan lainnya dan fungsi lainnya yaitu untuk meningkatkan pageview sobat. Nah, berikut penampakan dari related post with thumbnail (linkwithin)
Memasang Related post with thumbnail (Linkwithin) di blog
Linkwithin akan membaca seluruh postingan sobat secara random. Bahkan, postingan yang belum pernah dilihat, akan ditampilkan oleh linkwithin. Jadi fiturnya bagus kan ;). Linkwithin biasanya dipasang di bawah postingan. Tampilan linkwithin, dapat menarik perhatian pengunjung untuk mengkliknya. Linkwithin melakukan generating gambar dari postingan yang dimuat, atau jika tidak ada gambar dalam suatu postingan, LinkWithin akan menampilkan gambar dasar berwarna abu-abu dan sedikit bertekstur. Nah, tertarik untuk memasangnya di blog sobat, so cek this out..

Cara memasang Related post with thumnail (linkwithin) di blog
  1. Langsung saja sobat kunjungi situsnya di www.linkwithin.com/learn
  2. Di bagian kanan, terdapat kolom pengisian untuk mendapatkan widget linkwithin
  3. Isi alamat e-mail sobat dengan benar
  4. Di kolom selanjutnya, isi dengan url blog/website sobat
  5. Kemudian pilih platform blog sobat. Nah, langkah ini dilakukan jika sobat ingin memasang widget linkwithin secara mudah dan cepat
  6. Pilih jumlah postingan/stories yang ingin ditampilkan
  7. Jika blog sobat menggunakan tampilan yang gelap, centang saja pada "My blog has light text on a dark background"
  8. Lalu klik Get Widget!
  9. Dihalaman selanjutnya sobat akan dibimbing untuk memasang widget linkwithin sesuai dengan platform blog
  10. Setelah itu di halaman Tata Letak, drag widget link within ke bawah postingan
Cara menghilangkan widget linkwithin di homepage
Bila sobat memasang widget link within menggunakan langkah cepat dan mudah. Hasilnya widget akan muncul di homepage. Jadi aneh terlihatnya, Selain itu, loading di homepage akan menjadi lambat dan berat. Nah, untuk menghilangkan widget linkwithin di homepage silahkan ikuti langkah - langkah di bawah ini:
  1. Ikuti langkah-langkah mendapatkan widget linkwithin seperti biasa, namun menggunakan Platform Other
  2. Lalu copy kodenya
  3. Masuk ke halaman Template
  4. Edit HTML lalu Lanjutkan
  5. Cari kode </body> gunakan ctrl+f
  6. Copy kode di bawah ini dan pastekan di atask kode </body>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    Paste kode linkwithin disini
    </b:if>
  7. Simpan Template
Cara mengganti tulisan You might also like pada linkwithin
Nah, sekarang saatnya modif widget tersebut. Yaitu dengan mengubah tulisan You might also like dengan tulisan yang sobat inginkan. Berikut langkah-langkahnya:
  1. Masuk ke halaman Template
  2. Edit HTML lalu Lanjutkan
  3. cari kode </head> gunakan ctrl+f
  4. pasang kode di bawah ini di atas kode tersebut
    <script>linkwithin_text='Artikel Terkait:'</script>
  5. Ganti tulisan Artikel Terkait: dengan tulisan yang sobat inginkan
  6. Simpan Template
Nah, bagaimana ? sudah jelas ? okedeh kang reggy pamit dulu untuk Memasang Related post with thumbnail (Linkwithin) di blog. Sampai Jumpa ;)

Cara Meningkatkan Feedburner Readers di Blog

Satu hal yang mungkin teman-teman kadang lupa dalam membuat sebuah blog, yaitu mengenai RSS Reader. Apa sih sebenarnya RSS Reader itu? RSS reader adalah aplikasi yang digunakan untuk membaca RSS dari sebuah website. Cara membaca RSS suatu website adalah, anda masukkan alamat feed website tersebut, lalu RSS akan mengambil RSS dari feed website tersebut. Setiap kali web tersebut di update, versi RSSnya akan disediakan oleh feed, dan akan diambil oleh RSS reader anda.

Nah, yang menjadi permasalahan sekarang adalah kenapa jumlah pembaca pada Feedburner-Count kadang terlalu sedikit. Perlu diketahui bahwa tidak semua pembaca RSS Feed selalu menggunakan alamat Feedburner untuk berlangganan posting dan komentar pada blog. Hal ini terjadi ketika pembaca melakukan akses ke alamat blog maka secara otomaris web browser akan membaca alamat default Rss Feed pada blogger kita.

Disini nanti saya akan jelaskan bagaimana cara untuk meningkatkan RSS reader kita. Tapi yang perlu anda perhatian bahwa cara ini nantinya tidak akan meningkatkan nilai Feedburner-Count secara otomatis, semua tergantung banyaknya pembaca yang berlangganan postingan kita. Artinya kita hanya mengarahkan pembaca selalu mengakses ke alamat feedburner, jadi pembaca kita tidak terbagi dengan alamat default RSS Feed blog kita. Jika temen-temen ingin tahu caranya ikuti langkah berikut ini :
  1. Login ke Blogger dengan akun anda
  2. Pilih Rancangan >> Edit HTML (Jangan lupa lakukan backup template)
  3. Kemudian cari kode dibawah ini:
  4. <b:include data='blog' name='all-head-content'/>
  5. Jika sudah ketemu ganti kode diatas dengan code dibawah ini.
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='blogger' name='generator'/>
    <link rel="alternate" type="application/atom+xml" title="Title Blog Anda - Atom" href="Namablog.blogspot.com/feeds/posts/default" />
    <link rel="alternate" type="application/rss+xml" title="Title Blog Anda - RSS" href="Namablog.blogspot.com/feeds/posts/default?alt=rss" />
    <link rel="service.post" type="application/atom+xml" title="Title Blog Anda - Atom" href="http://www.blogger.com/feeds/IDBLOGANDA/posts/default" />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www2.blogger.com/rsd.g?blogID=IDBLOGANDA" />
  6. Ganti Tulisan berwarna diatas sesuai keterangannya
  7. Cari kode dibawah ini :
  8. .feed-links {
  9. Kemudian tambahkan code dibawah ini, tepatnya dibawah kode diatas
    display: none;
    jadi hasilnya seperti ini:
    .feed-links {
    display:none;
  10. Masih pada Template -> Edit HTML -> beri tanda centang pada Expand Template Widget
  11. Cari kode dibawah ini
    <b:includable id='feedLinksBody' var='links'>
    <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>
    </b:includable>
  12. Jika sudah ketemu, ganti code diatas dengan kode dibawah ini
    <b:includable id='feedLinksBody' var='links'>
    <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <b:if cond='data:blog.pageType == "item"'>
    <a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml'><data:f.name/> (RSS)</a>
    <b:else/>
    <a class='feed-link' href='http://feeds.feedburner.com/YourFeedburnerFeed' type='application/rss+xml'><data:f.name/> (RSS)</a>
    </b:if>
    </b:loop>
    </div>
    </b:includable>
  13. Ganti tulisan yang berwarna kuning dengan url feed anda. 
  14. Kemudian Save Template anda, selesai.
Kode-kode diatas berfungsi untuk mengubah alamat link ke Feedburner, biasanya pada blogger ditandai dengan : Berlangganan: Posting (Atom) atau Subscribe to: Posts (Atom). Nah, gimana mau dicoba? Jika temen-temen sudah dicoba cara diatas tapi tetep masih minim pembaca. Ya, mesti rajin nulis artikel yang banyak.

Membuat Label Bergerak (animasi) di Blogspot

Tahukah temen-temen apa itu blogumulus? Blogumulus itu adalah label widget yang dibuat dengan basis flash animation. Widget ini akanb eraksi kalo pointer mouse dideketin ke widget ini. Pertama kali Blogumulus diciptakan oleh Roy Tankc tapi cuma terbatas untuk kaum pengguna Wordpress dan ngga mungkin untuk di pakai didalam Blogger. Tapi sekarang Amanda Fazani udah menyempurnakan widget ini sehingga bisa dipake di dalam blogger.


Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannya Blogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumulus widget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus Untuk melihat seperti apa label animasi ini, Oke, bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya. 
  1. Login ke blogger dengan ID anda.  
  2. Klik Tata Letak.  
  3. KLik tab Edit HTML.  
  4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman. 
  5. Cari kode yang mirip dengan kode di bawah ini :
  6. <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.
  8. <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://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&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='12'><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'/> </div> </b:includable> </b:widget>
  9. Kemudian Save Template anda.
Note : Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal: Merubah lebar, tinggi dan warna background. Variable untuk lebar dan tinggi ada pada baris script berikut,
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
240 menunjukkan lebar widget. 300 menunjukkan tinggi widget. #ffffff menjukkan warna background. 100 menunjukkan kecepatan putaran. Merubah warna text. Variable untuk lebar dan tinggi ada pada baris script berikut,
so.addVariable("tcolor", "0x333333");
"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script berikut,
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>");
12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.

Semoga Berhasil.

Membuat Recent Post Thumbnail bergerak di Blog

recent post maskolisKali ini saya akan memberikan tutorial tentang gimana caranya membuat recent post yang ada gambarnya, nggak itu aja gambarnya bisa jalan lagi, hebat kan? Karena dengar-dengar fungsi atau keberadaan recent post akan sangat berguna (terasa dibutuhkan) ketika pengunjung berada pada halaman posting. Kemungkinan besar mereka ingin mencari link posting-posting terbaru yang masih tergolong fresh.

Recent post kali ini ada sedikit berbeda dengan recent post yang  saya postingkan kemarin  yang hanya menyediakan fasilitas thumbnailsnya saja, teman teman bisa lihat di homepage blog ini. Tapi kalau yang ini agak sedikit berbeda, karena selain memiliki thumbnail (gambar), disertakan juga tampilan tanggal postingan dan jumlah komentar, dan tentu dengan efek spy. Sangat menarik untuk di coba teman-teman. Recent post ini saya dapatkan dari hasil browsing ke tempatnya om Abu Farhan
 
langsung kita menuju ke langkah-langkah pembuatannya  :
  1. Log in ke Blogger
  2. Kemudian pilih Design --> Page Element
  3. Add gadget -->> HTML/Javascript
  4. Copy paste kode di bawah ini ke gadget sidebar teman-teman.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://creatingwebsite-maskolis.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Save-->> Selesai.

Catatan Penting :
  1. Ganti URL ( http://creatingwebsite-maskolis.blogspot.com/ ) dengan URL teman .
  2. Atur lebar dan sesuaikan dengan lebar sidebar teman-teman.
  3. Apabila ingin menyesuaikan lagi dengan background template teman-teman, bisa menggantinya dengan background yang lain.
  4. Sesuaikan juga lebar dan tinggi gambar (thumbnails) nya.
  5. Berapa post yang teman-teman ingin tampilkan bisa di ubah sesuai selera.
Itu tadi sedikit gambaran bagaimana caranya untuk membuat recent post thumbnail yang bisa gerak naik turun, semoga berhasil.

Sekian dari saya. Semoga bermanfaat

Membuat Recent Comment di Blog

Membuat Recent Comment di Blog

recent comment
Sudah lama sekali saya tidak menulis tentang tutorial blog, kali ini saya akan mencoba memberikan satu lagi penjelasan tentang cara membuat recent post di blog. Sebenarnya tutorial ini jadul dan sudah banyak beredar di internet, tapi apa salahnya jika saya tulis kembali. Recent comment atau komentar terbaru adalah sebuah fungsi untuk menampilkan komentar terbaru secara real-time pada blog kita. Jadi jika ada pengunjung yang berkomentar di postingan kita maka kita bisa langsung tahu dan bisa langsung untuk menanggapinya. Cara ini sangat berguna bagi blog yang sering mendapat komentar.

Sebenarnya ada cara lain untuk mengetahui komentar masuk yaitu dengan fasilitas pemberitahuan komentar via email yang disediakan oleh blogger. Namun cara ini kurang efektif karena kita harus selalu login ke email untuk mengeceknya. Tunggu apa lagi, langsung saja pada langkah-langkah pembuatannya :
  1. Masuk ke blogger dengan akun anda.
  2. Kemudian pilih halaman tata letak (Layout)
  3. Pilih elemen laman >> pilih add a gadget (tambah gadget)
  4. Kemudian pilih HTML/Javascript
  5. Copy paste code di bawah ini
    <div style="overflow: auto;width: 200px;height: 300px; text-align: left; ">
    <script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://creatingwebsite-maskolis.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
    </div>
    Keterangan :
    Widht:200px; adalah lebar dari kotak recent comment, boleh dirubah sesuai selera masing-masing;
    Height:300px; adalah tinggi kotak recent comment, boleh juga dirubah sesuai selera masing-masing;
    Angka “5 adalah jumlah komentar yang akan tampil pada kotak recent comment, ini juga boleh dirubah sesuai selera masing-masing;
    URL Blog Saya harus diganti dengan URL blog Anda.
  6.  Terakhir yang mesti anda lakukan ada simpan atau save
Berhubungan saya lagi buru-buru saya akhiri dulu tutorial membuat recent comment ini, sangat sederhana hanya untuk mengisi waktu istirahat makan siang. Lain kali kita sambung lagi dengan tutorial baru dengan tema yang baru pula. Selamat mencoba dan semoga bermanfaat.