Minggu, 28 Agustus 2011

Pasang Widget Recent Post bergambar

Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari Bloggertriks.com. Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar.Eh iya sampelnya pada gambar di samping.Biar nggak lama-lama ,kita langsung saja ke tutornya saja :
  1. Tinggal mengCopy-Paste script berikut :
<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 = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://blogmeinside.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


     2.Buka blogger.com, loginlah pada blog anda, pilih tab Rancangan.
     3.Lalu pada opsi Elemen Laman klik Tambah Gadget/Add Gadget,pilih lagi pilihan Java script/HTML.
     4.Masukan atau paste script tadi yang telah di copy pada kotak Gadget yang akan muncul.

  •  Yang perlu diketahui :

boxwidth - Ukuran Lebar Widget.
cellspacing - Spasi diantara cells.
borderColor - Warna Border.
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails.
fntsize - Ukuran Font pada title.
acolor - Warna title.
aBold - Tebal huruf pada title.
numposts - Jumlah recent post yang yang ingin ditampilkan.
home_page : http://blogkamu.com/ (Ubah sesuai URL blog anda)



Pasang widget recent post bergambar,Tutorial pasang recent post + thumbnails+comment count, pasang widget post terbaru pada blog, Cara pasang recent post pada blogger.

Pasang Widget Alexa Traffic widget pada blog

Salah satu cara meningkatkan alexa rank atau peringkat alexa adalah dengan cara memasang widget alexa di blog atau website anda.
Seperti kita tahu bahwa alexa rank akan membuat peringkat berdasarkan banyaknya pengunjung blog atau web, semakin banyak pengunjung terhadap suatu blog atau web maka alexa rank akan semakin baik. Darimana alexa mengetahui jumlah kunjungan terhadap suatu web atau blog? alexa akan mengetahui jumlah kunjungan terhadap suatu web atau blog berdasarkan informasi dari komputer yang browser internetnya memasang alexa toolbar. Lho, kan tidak semua orang memasang alexa toolbar di browser internetnya? nah, justru itulah maka muncul alternatif lain bagi pemilik blog atau web untuk mendapatkan data yang akurat tentang banyaknya kunjungan yaitu dengan memasang alexa widget pada blog atau web yang di miliki. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada web atau blog anda.Nah,,,kini anda sudah tahukan ?. kalau begitu kita langsung ke tahapnya :
  1. Bukalah pada tab browser anda http://www.alexa.com/siteowners/widgets, atau bisa cari lewat Google dengan kata kunci Alexa Widget, apabila link ini telah lawas.
  2. Akan muncul halaman seperti ini





     3.Sebagai contoh masukan alamat blog atau web anda.Lalu klik "Built Widget".
     4.Setelah itu akan muncul Widget Alexa yang bisa anda pilih ukuranya, seperti  Button, Vertical Banner, dan Banner.Jika sudah anda pilih mana yang cocok, ambilah dengan meng Copy-Paste script/HTML yang terletak di dalam kotak di samping sampel gambar.
     5.Kemudian Loginlah ke blog anda, klik tab "Rancangan".
     6.Pada opsi Elemen Laman, klik Tambah gadget/Add gadget lalu pilih lagi pilihan Java script/HTML.
     7.Dan yang terakhir anda masukan script/HTML yang telah di copy tadi. Klik Simpan.

Pasang widget Alexa Rank, Tutorial pasang widget Alexa, Pasang alexa rank pada blog, Alexa rank for blogger, Alexa Traffic Widget.


Tulis Posting Lewat Microsoft Word

Diantara cara menulis posting selain menggunakan fasillitas post editor dari blogspot sangatlah banyak, seperti lewat email gmail, email yahoo, dan masih banyak lainnya. Anda mungkin kurang suka menulis posting lewat post editor, mulai dari tampilan, kotak editor yang terlalu kecil, kurang biasa dan tak bisa di simpan seperti halnya menulis di microsoft word. Mungkin posting kali ini bisa anda manfaatkan intisarinya bagi anda yang sudah terbiasa menggunakan microsoft word atau biasa kita sebut ms word karena aplikasi yang sudah lama ada ini termasuk yang bisa anda manfaatkan kemudahanya, untuk menulis porting lewat ms word bisa anda ikuti caranya berikut ini :
1. Sebagai contoh disini penulis menggunakan ms word versi 2010 atau 2007. Jalankan aplikasi microsoft word anda pada komputer anda.

2. Buatlah lembar kerja baru anda yang akan anda posting pada blog anda, dengan mengklik icon "office button" yang biasanya terletak di kiri atas ms word, lalu tekan lagi "NEW".

3. Kemudian akan muncul lembar kerja yang tersedia yang banyak dan varian guna. Dan khusus blog , anda pilih "New Blog Post" lalu tekan lagi "Create".

4. Kemudian akan muncul popup bertajuk "Register a Blog Account", anda klik "Register Now".

5. Lalu akan muncul lagi popup "New Blog Account", pilih blogger terkhusus yang menggunakan account blogger. Klik "Next". Kemudian masukkan data akun blog berupa user name atau email dan password.

6. Lanjutkan dengan mengklik "ok". Lalu muncul kotak konfirmasi keberhasilan anda, klik lagi "ok".

7. Setelah itu anda dapat memulai membuat artikel yang akan di post-kan pada blog.

8. Jika anda telah selesai menulis. Klik "publist" pada tab "blog post" di bagian atas.

9. Lalu masukkan email dan password. seperti tadi yang anda masukkan, pada kotak dialog yang akan muncul. Setelah itu klik "yes".

10. Selesai, anda bisa lihat hasilnya.


Menulis posting blog lewat ms word, tutorial menulis posting lewat ms word, cara mudah tulis posting lewat ms word.

Kamis, 07 Juli 2011

Membuat kotak banner pada blog

Jika anda mengikuti beberapa program affiliate khususnya PPC, pastilah anda menyediakan ruang dalam blog anda untuk di pasangkan iklan dari situs periklanan yang anda ikuti. Namun bagaimana jika anda memberi kotak banner kosong seperti gambar di samping dan anda tawarkan kepada pengunjung yang ingin memasang iklan pada blog anda, pasti anda akan mendapatkan penghasilan tambahan berkat kotak banner kosong yang di isi iklan orang lain. Kotak banner ini selain bisa anda gunakan sebagai tawaran kepada pengunjung yang ingin memasang iklan (biasanya berupa gambar), juga bisa anda pasang script dari program-program PPC yang anda ikuti, yang ukuranya kurang lebih 125x125, bagi anda yang ingin mengaplikasikan trik ini pada blog, ikuti saja langkah-langkah berikut ini :
  1. Login ke blog anda, pilih Rancangan, pilih lagi opsi Edit HTML.
  2. Jangan lupa back up atau download dulu template lengkap anda, agar menjadi solusi apabila terjadi kesalahan atau galat pada template anda.
  3. Carilah kode ]]></b:skin>,lalu letakan kode di bawah ini di bawah ]]></b:skin>.

/* Kotak Banner
===================== */
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center; }

#Box-Banner-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px outset #c0c0c0; }

#Box-Banner-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px inset #333; }

     4.  Klik simpan template.
     5.  Buka Rancangan, lalu Elemen Laman, pilih lagi HTML/java script.
     6.  Lalu copy kode di bawah ini :
<div id="Box-Banner-ads"> 
Letakkan kode banner anda disini

<a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

</div>
    7. Paste kode tersebut pada kotak HTML/java script tadi.
    8. Masukkan kode script banner ataupun pada tulisan letakkan kode banner anda di sini. Dan masukkan link atau alamat blog anda pada tulisan # .
    9.  Dan terakhir klik simpan, lihat hasilnya .

Cara menambah iklan banner di blog, cara membuat kotak banner di blog, cara menambah kotak sponsor di blogger, tutorial memasang iklan banner pada blogspot. kotak banner blogspot tutor.

Cara membuat tab pada blog

Memasang tab merupakan hal yang udah banyak di terapkan para blogger selain membuat tampilan template bagus dan indah juga mengatasi memakan banyak tempat pada template. Anda tau pengunjung kadang mengalami lambat loading pada halaman blog seseorang, karena adanya widget-widget yang banyak terpampang di header, footer, dan tempat lain. Dan sudah pasti membuat tab merupakan solusi, karena tab ini bisa anda isi banyak widget hanya pada satu tempat. Cara pasangnya pun tak terlalu rumit, berikut caranya :
  1. Login ke blog anda, pilih menu Rancangan, pilih lagi opsi Edit HTML.
  2. Buka kotak pencarian tag dengan mengklik ctrl + f, agar mudah mencarinya. Cari kode <body>
  3. Kemudian letakkan kode di bawah ini persis di bawah kode <body>
 <script src='http://recent.googlecode.com/files/tabs.min.js' type='text/javascript'/>
     4.  Setelah itu anda cari lagi kode ini  ]]></b:skin>
     5.  Kemudian pasang kode di bawah ini di bawah kode tersebut .

<style type='text/css'>
ul.tabs{float:left;list-style:none;height:32px;border-bottom:1px solid #999;border-left:1px solid #999;width:100%;margin:0;padding:0}
ul.tabs li{float:left;height:31px;line-height:31px;border:1px solid #999;border-left:none;background:#e0e0e0;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:1.2em;border:1px solid #fff;outline:none;padding:0 20px}
ul.tabs li a:hover{background:#ccc}
html ul.tabs li.active,html ul.tabs li.active a:hover{background:#fff;border-bottom:1px solid #fff}
.tab_container{border:1px solid #999;border-top:none;clear:both;float:left;width:100%;background:#fff;-moz-border-radius-bottomright:5px;-khtml-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px}
.tab_content{font-size:1.2em;padding:20px}
.tab_content h2{font-weight:400;padding-bottom:10px;border-bottom:1px dashed #ddd;font-size:1.8em}
.tab_content h3 a{color:#254588}
.tab_content img{float:left;border:1px solid #ddd;margin:0 20px 20px 0;padding:5px}
html .menu{height: 1%;}
</style>
     6.  Kemudian klik simpan template.
     7.  pindah ke opsi Elemen Laman, Buat gadget baru atau tambah gadget, lalu pilih HTML/java script.
     8.  Copy kode di bawah ini :

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(); return false;
});
});
</script><div class="container">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Tab 1</h2>
KONTEN YANG INGIN ANDA TAMPILKAN 1
</div>
<div id="tab2" class="tab_content">
<h2>Tab 2</h2>
KONTEN YANG INGIN ANDA TAMPILKAN 2
</div> <div id="tab3" class="tab_content">
<h2>Tab 3</h2>
KONTEN YANG INGIN ANDA TAMPILKAN 3
</div>
</div>
</div>
 catatan : 
  • anda dapat ganti menu tab pada tulisan tab 1, tab2, tab3.
  • Dan masukkan konten, widget atau gadget yang ingin anda tampilkan pada tulisan KONTEN YANG INGIN ANDA TAMPILKAN 1,2,3 
  • Ingat menu tab dan isi, persis letaknya konten yang anda inginkan 1 akan di letakan pada menu tab 1 dan seterusnya.

Memasang tab pada blog, Cara memasang tab pada blogspot, tutorial pasang tab pada blog, buat tab mudah di blogspot 
               
 

Cara pasang read more pada blog

Dari anda pasti sudah tahu apaitu read more tak usah di jawab, pasti jawaban anda benar pemasangan read more ini sangat berperan penting apabila artikel anda tergolong panjang. Pada pemostingan kali ini membahas mengenai pemasangan read more yang lebih mudah di bandingkan kebanyakan artikel mengenai read more yang sulit. Untuk cara ikutilah berikut ini :
  1. Loginlah ke blog anda, pilih menu Rancangan, lalu pilih lagi opsi Edit HTML.
  2. Centanglah atau checklist kotak Expand template widget, Kemudian carilah kode </head>.
  3. Jika telah ditemukan pasanglah kode bawah ini, di bawah kode </head> tersebut. 
 <script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
    4.  Kemudian cari lagi kode <data:post.body/> 
    5.  Kalau sudah ketemu gantilah kode tersebut dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
     6. Anda dapat mengganti kata read more dengan kata lain seperti baca selanjutnya, lanjut baca dll. Jika telah selesai klik simpan template. Lihat hasilnya.

Pasang read more terbaru, pasang read more mudah pada blog, Cara pasang read more pada blogspot, tutorial memasang read more pada blog, Cara mengubah read more dengan kata lain.

Memasang widget GeoCounter widgeo

Jika posting atau artikel anda sudah banyak dan di cari orang banyak, sudah pasti blog anda menjadi rame, jika anda mau mengetahui dari mana asal pengunjung. Disini penulis punya info widget unik yang berguna untuk mendeteksi asal pengunjung yatu widget GeoCounter produk Widgeo. Widget ini memiliki banyak model dan warna yang di sediakan dan tak di perlukan register terlebih dahulu, dan yang menggiurkan lagi yaitu Free, langsung aj untuk mempercepat tahap bisa ikuti caranya berikut ini :
  1. Bukalah situs ini http://www.widgeo.net/, lalu akan tampil halaman.
  2. Dan halaman ini menjadi inti yang anda cari yaitu GeoCounter yang telah terpampang.
  3. Anda pilih yang paling pas atau yang anda inginkan dengan mengkliknya.
  4. Setelah itu akan muncul kotak popup yang mengintruksikan anda untuk mengisi sedikit data, diantaranya :
  • UTC Time Zone, atau unit terminal container anda pilih +7 karena itu utc indonesia.
  • Category, pilih salah satu kategori blog anda,
  • Do you have an adult content?, pilih saja tidak,
kemudian optional informations
  • Start value, isikan nilai atau angka
  • your Email 
  • Blog/website adress
  • kemudian Title
Jangan lupa menchecklist kotak terms and conditions.

     5.  Terakhir klik tombol besar Get Widget, kemudian pasang pada blog anda,


Memasang GeoCounter pada blog, Geocounter gratis, Cara mudah memasang GeoCounter pada blogspot.Geocounter produk Widgeo.

Adsense Indonesia Paid Review Indonesia