0 Membuat Kotak Iklan 125x125 di Blogspot

Membuat kotak iklan ukuran 125x125 di blogspot - Sekarang kita akan mulai membahas tentang Bagaimana cara membuat kotak iklan di blogger.
 
Untuk membuat kotak iklan ukuran 125x125 kita hanya perlu menambah CSS dan memasukan kode HTMLnya diarea sesuai keinginan anda, untuk hal ini menurut beberapa artikel tentang Iklan yang saya baca, dianjurkan untuk meletakannya widget disidebar agar mudah diliat pengunjung blog anda. Kode yang saya tampilkan ini memang sangat sederhana, cuma sobat dapat memodifikasinya kembali, misalnya ditambah efek hover atau yang lainnya.

Baiklah sekarang coba kita mulai membuat kotak iklan 125 x 125 ini. Berikut adalah langkah-langkahnya:
1. Login ke blogspot lalu dasbor blog.
2. Pilih template > Backup template > Edit HTML
3. Menambahkan CSS di atas ]]></b:skin>

.kotak_iklan {text-align: center;margin-top:10px;margin-bottom:8px;}
.kotak_iklan  img {margin: 0px 0px 2px 2px;padding: 5px;text-align: center;border: 1px solid #e1e1e1;}
.kotak_iklan  img:hover {border: 1px solid #666}

4. Simpan atau save template.
5. Pilih tata Letak > Add a Gadget > HTML/JavaScript
6. Masukan kode dibawah ini:

<div class="kotak_iklan">
<a target="_blank" href="URL Tujuan klik iklan"><img alt="ALT Gambar Iklan" src="URL Gambar Iklan" title="Title Iklan"/></a>
<a target="_blank" href="URL Tujuan klik iklan"><img alt="ALT Gambar Iklan" src="URL Gambar Iklan" title="Title Iklan"/></a>
<a target="_blank" href="URL Tujuan klik iklan"><img alt="ALT Gambar Iklan" src="URL Gambar Iklan" title="Title Iklan"/></a>
<a target="_blank" href="URL Tujuan klik iklan"><img alt="ALT Gambar Iklan" src="URL Gambar Iklan" title="Title Iklan"/></a>
</div>

7. Ganti yang berwarna merah, (saya harap anda tidak buta warna) sesuai dengan kebutuhan.

Saya yakin anda dapat menerapkannya diblog anda masing-masing dan menambah efek sesuai kenginan, Sekian tutorial dari saya semoga tips membuat kotak iklan di blog ukuran 125x125  dapat berguna untuk meletakan iklan diblog anda.

0 Cara Memasang Live Traffic Feed Feedjit di Blog

 

 

Buat para blogger yang masih tahap belajar (pemula) seperti saya, tentunya pengen tahu bagaimana caranya mengidentifikasi para pengunjung pada blog kita dengan menggunakan Live Traffic Feed dari feedjit.

Nah disini saya akan sedikit berbagi tentang bagaimana cara mengetahui identitas yang berkunjung pada blog kita dan cara memasang feedjit  yang nantinya kita akan mengetahui pengunjung dari negara mana, pake OS browser apa seperti mozilla, googel chrome, internet explorer atau opera mini, selain itu kita juga akan mengetahui pengunjung menggunakan windows yang di gunakan bahkan waktu pengunjung saat berkunjung akan terdeteksi dengan detil.

Langsung aja ke topik bahasan.

Sebelumya kita kunjungi dulu Feedjit , lalu pilih feedjit (chose feedjit), yang saya gunakan feedjit free complitely terus klik dan daftar disana.

Setelah daftar, langkah-langkah cara memasang feedjit adalah sebagai berikut :

1. Login ke akun blog sobat.

2. Masuk ke dashboard>>perancang templater>>tambah gadget terserah mau di letakkan dimana, tergantung selera kemudian pilih HTML/Javascript lalu klik tanda (+)

3. Kemudian kopi kode di bawah ini

<script type="text/javascript" src="http://feedjit.com/serve/?vv=724&amp;tft=3&amp;dd=0&amp;wid=e12319ece36467e6&amp;pid=0&amp;proid=0&amp;bc=610673&amp;tc=ffffff&amp;brd1=336699&amp;lnk=f6fccd&amp;hc=91ff00&amp;hfc=6a007a&amp;btn=000000&amp;ww=160&amp;wne=6"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

4. Lalu paste kode tadi dan beri judul terserah anda

5. Setelah itu kemudian simpan

Kemudian lihat blog kita dan akan ada tampilan  Live Traffic seperti yang ada di blog ini

Dan untuk mengetahui identitas pengunjung lebih detil silahkan klik Real-Time view, maka akan tampil jendela baru

Wow! sekarang blog sobat telah terpasang feedjit dan terlihat lebih menarik.
Itulah sekilas cara memasang Live Traffic Feed Feedjit dari saya, apabila ada banyak salah-salah kata mohon maaf yang sebesar-besarnya, terima kasih telah mampir di blog saya.
Semoga bermanfaat.
Salam Blogger,

0 Cara Buat Read More Otomatis Blog

Salam semua..!! Pada kesempatan kegiatan blogging kali ini Cara Buat Read More Otomatis Blog merupakan update berkala Berbagi Kreativitas untuk menutup aktifitas online untuk tema Desain Blog. Tips dan Trik di Blog ini berlaku bagi Anda yang mungkin baru dalam membuat blog, karena template yang di sediakan oleh blogger tidak menyediakan fasilitas Baca selengkapnya secara otomatis pada template default blogger, atau mungkin bagi Anda yang tetap menggunakan template blog kemudian ingin di optimalkan desain template yang sudah ada tips desain untuk Read More Otomatis bisa langsung di terapkan.

Cara Buat Read More Otomatis Keren di Blog

Cara buat read more ini menggunakan gambar sebagai tombol jadi semakin terlihat menarik, bisa disesuaikan sesuai kebutuhan serta cukup mudah dalam membuatnya, tapi tetap harus di perhatikan dengan baik dan ikuti ketentuan yang penulis berikan untuk Anda, berikut adalah langkah-langkahnya.

1. Masuk ke halaman template
2. Backup template sebelum mendesain
3. Edit HTML → proses centang "Expand Template Widget"
4. Tekan Ctrl+F untuk mencari kode </head>
5. Tambahkan kode berikut tepat diatas kode tersebut atau dibawah kode ]]></b:skin>

<!-- kode Read More -->
<script type='text/javascript'> 
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 250;
img_thumb_height = 60;
img_thumb_width = 60;
</script>
<script type='text/javascript'> 
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var

c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script>
6. Tekan Ctrl+F untuk mencari kode <data:post.body/>
7. Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script><span class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpVejSqhW94MmAS46QtJY5prfmPjKZgq-xGLosWSuWPaDA_rOyw9id6VqNQigClVsgpJ8CTIQxpwwUmCtEbnH0OL7fGlRvQ0oFRKEloSUwOu2Eo-lJKwGl2EdVIb4kuelvEzM9gF5PIM/s74/readmore_thumb.gif'/></a></span>

Hasilnya akan seperti berikut:

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src='http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

8. Pratinjau dan simpan template selesai. Semoga berhasil sekian dan terima kasih Salam.

Keterangan:

1. Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaikan.

2. Untuk link gambar http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif bisa disesuaikan dengan kebutuhan

3. Summary_noimg = 230; adalah jumlah karakter yang tampil, summary_img = 250; adalah gambar yang tampil di depan konten post jika posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60; adalah tinggi dan lebar gambar yang tambil di depan konten post.

0 Memasang Jam di Blog | Tutorial Blog

Untuk mempercantik tampilan blog, baik itu Wordpress maupun Blogspot, mungkin Anda ingin memasang aksesoris berupa widget jam pada sidebar blog Sobat, Bagi Sobat yang ingin memasang widget jam di Wordpress.com, Silakan baca Memasang Jam di Wordpress. Buat Blogspot dapat Anda ikuti tutorial berikut ini :

• Kunjungi www.clocklink.com
• Lalu klik pada menu Gallery (kita bisa memilih kategori-kategori yang ingin kita pilih), sebagai contoh kategori Digital yang di pilih.
  
• Kemudian klik View HTML Tag.
  
• Akan timbul halaman baru. disitu ada ketentuan-ketentuan yang memakai bahasa inggris, pilih Accept.
  
• Selanjutnya kita diminta memilih warna (color), time zone, serta ukuran jam agar sesuai dengan sidebar blog.
  
• Kemudian Copy kode HTML yang diberikan.
  
• Langkah selanjutnya pasang pada widget HTML/Javascript blog Sobat, jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot

Silakan dicoba Sob, semoga berhasil...

0 Memasang Widget / Gadget di Blogspot | Tutorial Blog Cara Memasang Widget / Gadget di Blogspot | Tutorial Blog

Tutorial ini buat yang masih baru di blogger dan belum tahu cara memasang widget / gadget, kalau yang sudah lama di blogger pasti sudah terbiasa bongkar pasang widget, jadi silakan lewat, he...

Berikut langkah Memasang Widget / Gadget di Blogspot :

1. Login ke Dashboard Blogger Anda, Klik Rancangan / Design.
   
2. Pada Page Element klik Add Gadget.
   
3. Akan muncul window baru untuk pilihan Gadget, Jika Sobat ingin memasang gadget menggunakan kode, pilih Html / Javascript, klik pada nama gadget atau tanda [+] di samping gadget.
   
4. Pada jendela selanjutnya beri judul gadget pada kolom Title, dan Paste kode gadget pada kolom text, Lalu klik Save / Simpan.
   
5. Jika Sobat ingin menggunakan gadget standard blogger, klik gadget tersebut, Sebagai contoh gadget Popular Posts.
   
6. Pada jendela selanjutnya atur tampilan gadget Anda lalu klik Save / Simpan.
   
   Selesai...

Sampai disini Tutorial tentang Memasang Widget / Gadget di Blogspot.
Semoga Bermanfaat...

0 Cara Merubah Cursor Blog | Tutorial Blog

Bagi Sobat yang ingin mengganti tampilan cursor di blog, itu sangat mudah, bagi yang sudah tau, bagi yang belum tau pasti tidak mudah. hehe...

Sebelumnya saya pernah posting tentang Membuat Efek Bintang Pada Kursor, kali ini saya akan berbagi tentang cara untuk merubah tampilan cursor blog, berikut caranya :

1. Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
   
2. Cari kode </head>
3. Letakkan kode berikut tepat diatas kode </head>
   <style type='text/css'>HTML,BODY{cursor:url(&quot;http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif&quot;), auto;}</style>
   Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
4. Setelah Itu Save Template Anda dan selesai...
   

Jika sobat tidak memiliki icon kursor, silakan kunjungi http://www.totallyfreecursors.com situs tersebut menyediakan ribuan icon cursor,pilih icon yang sobat mau..

Dan Sobat juga dapat langsung memasangnya melalui widget HTML/Javascript, berikut caranya :

1. Kunjungi http://www.totallyfreecursors.com
2. Lalu pilih salah satu cursor yang ingin Sobat gunakan.
   
3. Copy kode yang diberikan.
   
4. Lalu pasang pada widget HTML/Javascript blog sobat. jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot

Semoga tutorial ini bisa membantu sobat yang ingin Merubah Cursor Blog.

0 Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

• Login ke dashboard blogger anda.
• Klik Template >  Edit HTML.
• Lalu klik Proceed dan centang Expand widget template.
• Cari kode </head>  pada template dengan menggunakan Ctrl+F.
•  Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
  
  <script src='http://wadah-tutorial.googlecode.com/files/daun.js'/>
• Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

0 Cara Mengganti Template | Tutorial Blog

Tutorial kali ini kita bahas cara untuk Mengganti Template Blog dengan template dari penyedia template gratis, karena selain menggunakan template standart dari blogger, Sobat juga dapat mengganti template blog anda dengan template dari penyedia template, sebelumnya download terlebih dahulu template yang ingin Sobat gunakan, untuk daftar Situs Penyedia Template Blog Gratis, silakan baca di sini : Situs Penyedia Template Gratis.

Berikut tutorial untuk mengganti template dengan template dari Situs Penyedia Template Gratis :

• Download template yang ingin di gunakan.
• Ekstrak file yang di download tadi, karena file yang akan kita upload ke blogger hanya file yang berekstensi .xml.
• Login ke Blogger.
• Klik pada blog yang akan di ganti templatenya.
• Klik pada Template.

• 
• Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
  
• Untuk jaga-jaga backup template Anda terlebih dulu, klik pada Unduh Template Lengkap.
  
• Klik tombol Browse, pilih file template yang tadi telah diekstrak.
  
• Kemudian klik tombol Unggah.
  
• Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Selamat mencoba dan semoga berhasil mengganti template Blog Anda.

0 cara membuat recent post berjalan di blog

Beberapa waktu yang lalu, saya pernah posting artikel mengenai cara membuat/memberi recent post di blog, dimana artikel tersebut memang trik membuat recent post di blog, tapi recent post biasa. Nah, pada kesempatan ini saya akan berbagi artikel yang masih terkait dengan postingan tersebut yaitu trik mensetting recent post bisa berjalan di blog. Banyak cara untuk menampilkan recent post pada blog kita, sehingga blog kita bisa tampil lebih cantik. Selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya, sama halnya dengan artikel terkait atau related post, recent post juga bisa dengan tampilan thumbnail, nah kali ini saya akan memberi tutorial tentang cara membuat recent post berjalan yang pastinya sangat mudah untuk dilakukan.

Lalu bagaimana cara agar recent post dapat berjalan di blog? Ikuti tutorial dibawah ini:

1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Masukan kode berikut ke dalam box HTML/Java Script tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 20;
home_page = "http://id-defice.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

4. Simpan.

Note :

• Url yang berwarna merah ganti dengan Url sobat
• Angka yang berwarna biru jumlah post yang ingin di tampilkan