memasang shout box tersembunyi 20

malam semua ..... hadu... padahal mata udah cpe' nie .. tapi harus nungguin ade yang belum pulang les .... dari pada bengong nungguin mending posting aja .... kali ini saya ingin coba berbagi bagaimana cara memasang shout box yang bisa di sembunyikan/hiden di samping layar. ini sangat berguna untuk menghemat space di blog kita contohnya ... sbb :



kalau tertarik untuk memasang trik yang ini langsung saja ikuti langkah berikut ini :

• masuk ke account blogger

• langsung ke tata letak - elemen halaman ( buat sebuah gadget HTML/java script )

• masukan cod dibawah ini :

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


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpS-24ztR1qctvquNx7H13Yhyphenhyphenok4KCYMyGqwoc1FsbZvAD7Rpfn1zViguJdWu3P0P3XpRIkRGTOnWrW65fkEAs5Sc9pYLV1_xkM3jBdLBj5I-3gIFSJXrUTGqkPnvBMm51fGmeHA7LbQfR/s128/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>


<div id="gb">


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


<div class="gbcontent">

< Letakkan kode Shoutbox Anda disini >


<div style="text-align:right">
<a href="http://muhamadhaidirali.blogspot.com">
[ Toturial blog ]
</a>|<a href="javascript:showHideGB()">
[ x close ]
</a>
</div>


</div>

( ubah code yang berwarna merah dengan code shout box anda )

• simpan

memasang iklan melayang plus tombol close 10

ilmu baru lagi nie ...... kali ini saya ingin berbagi ilmu yang saya dapat dari O-om.com kepada anda yang ingin memasang iklan melayang dengan button close seperti blog saya ini.



jika anda ingin menerapkan pada blog anda langsung saja ikuti langkah langkah beikut :

• log in ke blog anda

• langsung menuju ke tataletak - elemen laman - buat sebuah gadget HTML/java script

• masukan code dibawah ini :

<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>

• simpan

coba anda lihat blog anda sekarang.... bagai mana?

dapatkan penghasilan dari kumpul blogger .com 5

kumpul blogger adalah situs yang tepat digunakan jika anda ingin memperoleh penghasilan sendiri dari sebuah blog, karena pogram PPC ( pay per click ) pada kumpul blogger merupakan salah satu program yang terbaik di Indonesia dan sudah banyak memiliki member.
bagi anda yang mempunyai blog berpengunjung cukup banyak jangan sia - siakan kesempatan ini karena jika anda bergabung sebagai publisher dengan memasang sebuah iklan dari kumpulblogger dan di klik oleh salah satu pengunjung anda maka anda akan mendapatkan upah sebesar Rp.350.00/kliknya , bayangkan jika sehari saja iklan anda di klik oleh 10 pengunjung maka perharinya anda akan mendapatkan upah sebesar Rp.3500,00, perminggunya Rp. 24.500,00, perbulannya Rp.105.000,00 dan pertahunnya Rp. 1.260.000,00
bukankan itu jumlah yang sanga besar jika di ingat kerja kita hanya menyediakan space di blog kita sebagai tempat menaruh iklan..... jika anda tertarik untuk menjadi publisher langsung saja daftarkan blog anda dengan cara :

• klik disini

• Klik register lalu masukkan email anda, cukup email saja yang diminta tidak ada yang lain. Simpel kan. Passwordnya diberikan otomatis lewat email.

• Kalau udah silahkan check email anda, lakukan verifikasi dan ingatlah selalu password yang diberikan KumpulBlogger. karena akan digunakan jika ingin Login.

• Kembali ke menu KumpulBlogger dan login dengan memasukkan email dan password yang diberikan ke form yang berada di pojok kanan atas.

• Setelah login akan muncul beberapa pilihan, Silahkan klik edit profil anda, profil anda diisi dengan data lengkap anda beserta nomor rekening. Jangan sampai salah imput karena akan digunakan dalam proses pembayaran.

• Setelah anda mengedit profilnya, tambahkanlah blog anda, klik Tambah Blog di navigation menu.
  

• Kembali ke Navigation menu, sekarang anda tinggal mengambil script iklan yang nantinya dipasang di blog anda. Ada beberapa pilihan, untuk memasang di blog klik Script Text Advertising untuk Blog anda. Script ini berbentuk text jika anda ingin yang berbentuk banner klik Script Mini Banner untuk Blog anda. Setelah masuk pilihlah satu satu bentuk tampilan yang anda suka ada javascript horizontal, javascript vertical, iframe horizontal, iframe vertical. Aturlah tampilan iklannya dengan mengklik link setting themes dan tampilan iklan. Berikanlah warna yang sesuai dengan warna blog anda. Supaya kelihatan serasi dan tidak mengganggu tampilan blog anda sendiri.

• Setelah mengcopy kode script iklannya, maka pastekanlah di blog anda. Buka blog anda, masuk ke tata Letak, tambah elemen halaman. Ingat pasanglah di tempat strategis yang mudah dilihat pengunjung seperti di sidebar.

selain sebagai publiser sebuah iklan anda juga bisa mendapatkan uang lebih jika anda bisa mengajak blogger lainnya untuk menjadi memmber di kumpulblogger melalui refferal link anda, dan upahnya sebesar Rp. 50,00 per klik.

menyimpan iklan di bawah postingan 28

ngga usah basa basi lagi..... langsung saja kita mlai cara untuk menampilkan iklan di bawah postingan....

sebelumnya kalian harus mempunyai link iklan terlebih dahulu mesalkan saya memakai ling dari one dolar ptc yang memberikan $1 setiap klik pada membernya :

codenya seperti ini :

<a href="http://www.onedollarptc.com/index.php?ref=haidir32"><img src="http://www.onedollarptc.com/banners/banner2.gif" border=0></a>

dan akan tampil seperti ini :



jika anda sudah memiliki code iklan tersebut ikuti langkah2 berikut ini :

• signin ke accont blogger anda ( tata letak - edit HTML - beri tanda centang pada "expand widget".

• cari code <data:post.body/>

• letakan code iklan anda tepat setelah code tersebut...

contoh :

<data:post.body/>


<a href="http://www.onedollarptc.com/index.php?ref=haidir32"><img src="http://www.onedollarptc.com/banners/banner2.gif" border=0></a>

• simpan

pasang iklan / banner blog ini 2

haduu... lagi pusingnie nyari tambahan... bingung... rata rata setiap situs yang saya kunjungi yang menyediayan pay per klik, pay per post maupun adsense harus memiliki ATM bank BNI atau bank MANDIRI namun saya cuma punya ATM di bank MUAMALAT...

setelah berjelajah lumayan lama saya menemukan banyak sekali situs-situs yang menyediakan space yang di fungsikan untuk memasang iklan bagi siapa saja yang berminat di area blognya dengan patokan harga yang berfariasi sebagai imbalannya..

setelah melihat itu saya pun berinisiatif untuk memasang/ menyediakan space di blog saya dengan patokan harga sewa Rp.10.000/bulan.. dan saya berharap banyak yang tertarik dan berpartisipasi pada blog ini...



saya disini menyediakan 2 macam pembayaran ...

1. via transfer pulsa

isi form di bawah ini :

image must dimension 125 x 125 px

Your Name
Your Email Address
number handphone
link banner to
link banner image
Image Verification Please enter the text from the image: [ Refresh Image ] [ What's This? ]

2. via rekening bank MUAMALAT

isi form di bawah ini :

image must dimension 125 x 125 px

Your Name
Your Email Address
number phone
link banner to
link banner image
Image Verification Please enter the text from the image: [ Refresh Image ] [ What's This? ]

sistem pemasangan iklan:

• setelah anda mengisis salah satu form yang saya sediakan di atas dengan otomatis saya akan menerima email data yang anda masukan di dalam fom tersebut.

• setelah saya menerima email yang berisikan data tersebut saya akan langsung menghubungi nomor hp anda hanya dengan via sms yang berisikan bahwah saya telah menerima data yang telah diisi oleh anda serta no handphone ( bagi via transfer pulsa ) atau no. rekening ( bagi via transver rekening bang MUAMALAT )
  
• setelah anda menerima sms tersebut dari saya, anda secepatnya melakukan transfer pulsa ( via transfer pulsa ) atau transfer uang ( via transfer rekening bang MUAMALAT)
• setelah anda selesai mengirim... anda beri laporan kepada kami bahwa anda telah mengirim pulsa/dana sebesar Rp.10.000
• saya akan langsung mengeceknya jika berhasil saya akan langsung memasang banner/iklan anda di blog saya...
  

saya ucapkan terima kasih kepada anda yang telah berpartisipasi dengan memasang iklan di blog ini

simpan javascript di code.google.com 3

kali ini saya akan coba untuk menulis tentang sebuah tempat hosting gatisan yang baru saya gunakan pada postingan yang ini namanya google code, yang sebelumnya menggunakan yahoo geocities...... saya juga belum tahu banyak tentang google code ..... disini saya hanya menyajikan cara untuk menyimpan/mengupload code javascript yang akan di gunakan misal di widget - widget blog seperti daftar isi atau yang lainnya... berikut caranya :

• login ke account google anda
• klik link di bawah ini untuk mendaftar ke google code

CREAT A NEW PROJECT

• Isilah Kolom registrasi yang disediakan dan pada Isi kolom yang telah disediakan, untuk "Version control system" dan "Source code license" bisa diisi sesukanya kita. Jangan lupa isi juga “LABEL” agar Tombol CREATE PROJECTnya muncul dan kita tekan tombol CREATE PROJECT tsb .

• lalu clik tab DOWNLOAD
• klik new download - klik browse - upload file .js
• isi form label sesuka anda
• klik tombol submit file
• selesai

semoga berhasil.....

memasang total comment di samping title post 4

alhamdulillah bisa posting lagi.......... kali ini saya akan menyampaikan kembali trik yang telah di berikan o-om.com untuk menampilkan total comment di samping title post yang telah saya terapkan dan berhasil ....

lihat gambar di bawah ini :



caranya tidak sulit ko anda cukup masuk ke tataletak - edit HTML - kemudian beri tanda centang pada "Expand Template Widget". cari kode seperti dibawah :
<a expr:href='data:post.url'><data:post.title/></a>

letakkan script dibawah ini tepat di bawah kode tersebut :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5qjYqlOQubx37U4AfTR_L3vZMyRpqul-KskTVCLgnHKPgGvx-F8So0PuYLYlRmjbBirzT5F46DlDMwJjrs9UdBMURtMCFYik6hhG31XuYTZapLb1hicDo7aC9MBaoQyKZdVT6cdqLLu6/s400/icon_comments.png'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a> </b:if>

lalu simpan.....

memasang auto readmore plus image 0

setelah berseluncur lumayan lama akhirnya saya menemukan tutorial yang mantap nie untuk di posting memasang auto readmore plus image thumbnail yang saya temukan di o-om.com....

read more kali ini beda dengan readmore yang sbelumnya saya posting disini ..... yang ini ga' perlu lagi ngatur-ngatur seberapa banyak kata yang akan di postkan sebelum memposting... readmoe yang ini udah otomatis meng-cute artikel yang akan anda posting dengan jumlah kata yang anda inginkan.... thuk contohnya seperti yang saya terapkan pada blog ini atau lhat gambar dibawah ini :


jika anda tertarik langsung saja anda ikuti langkah - langkah berikut :

• langsung saja menuju tata letak - edit HTML - cari code </head>
  
• letakan script di bawah ini tepat sebelum code </head>
  <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)
  
  (C)2008 by Anhvo
  
  visit http://en.vietwebguide.com to get more cool hacks
  ********************************************/
  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>

• lalu langsung saja simpan dan beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah : <data:post.body/>
  

• ganti code tersebut dengan code dibawah ini : <b:if cond="data:blog.pageType != &quot;item&quot;">
  <div id="&quot;summary&quot; + data:post.id"><data:post.body></data:post.body></div>
  <script type="text/javascript">createSummaryAndThumb("summary<data:post.id/>");</script>
  <span class="rmlink" style="float: left;"><a href="data:post.url">READ MORE - <data:post.title></data:post.title></a></span>
  </b:if>
  <b:if cond="data:blog.pageType == &quot;item&quot;"><data:post.body></data:post.body>
  
  </b:if>
  
• langsung saja simpan dan lihat hasilnya....

catatan :

• var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

• summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

• summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

• img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

• img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

widget login blogger 13

widget login blogger ini berfungsi untuk mempermudah kita untuk masuk ke account blogger anda tanpa harus masuk ke halaman utama blogger . . . gimana anda tertarik..... ? langsung saja ikuti langkahnya . . . . ?

+ masuk ke account blogger anda -> tata letak -> elemen halaman
+ buat sebuah widget HTML / javascript
+ masukan code dibawah ini kedalam kotak widget

<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <input id="Email" tabindex="1" value="" name="Email" size="15" type="text"/></label></div><p><div><label for="Passwd"> PassWord: </label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="15" type="password"/></div><br/><center><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></center></p></form><center><span style="font-size: 80%">Widget edited by <a href="http://www.muhamadhaidirali.blogspot.com">muhamad haidir ali </a></span></center>

+ simpan

Meningkatkan traffic website dan blog lewat Facebook 22

Mau tau caranya ?

Jika belum banyak teman-teman Anda yang kemudian tertarik datang ke blog atau website Anda, sepertinya Anda perlu:

1. Perbaiki data profile di Facebook.
Tidak perlu ragu mencantumkan blog atau website di profile Anda. Sesekali undang para teman-teman anda untuk datang ke blog atau website Anda.

2. Beriklan di Facebook.
Bila ada dana, bisa dicoba beriklan di Facebook untuk mempromosikan bisnis Anda. Terkadang Facebook juga menyediakan kupon iklan.

3. Buat group untuk mengumpulkan rekan dan kawan yang memiliki hobi, kegemaran, organisasi, atau letak geografis yang sama.
Sebagai contoh seperti grup Online Entrepreneur Indonesia dan Facebook Semarang Community.

4. Manfaatkan RSS
Anda dapat menggunakan aplikasi “Blog RSS Feed Reader” di Facebook untuk berbagi link RSS. Anda bisa mengimport keseluruhan isi postingan di blog ataupun ringkasannya. Pilihan lain bisa dijajal juga “NetworkedBlogs”.

5. Lakukan personal branding di Facebook
Targetnya sederhana saja, paling tidak kawan-kawan Anda di Facebook tahu siapa Anda. Apakah Anda seorang guru, apakah Anda seorang pebisnis, dll. Untuk itu manfaatkan maksimal profile Facebook Anda dan isi dengan benar. Biarkan mereka tahu siapa Anda dan apa pekerjaan Anda, sehingga bila mereka ada yang ingin ditanyakan berkaitan dengan hal yang dikuasai, mereka akan menghubungi Anda.

6. Pertahankan dan jaga hubungan.
Kirimkan private message untuk memperkuat hubungan Anda. Memberikan gift pun tidak ada salahnya Anda lakukan. Intinya jaga hubungan dengan kawan-kawan Anda agar langgeng dan kalau bisa ditingkatkan.

Dengan melakukan langkah-langkah di atas traffic website dan blog Anda akan meningkat pesat dan pada akhirnya memajukan bisnis Anda. Selamat meraih yang lebih besar lagi ..


sumber : http://bisnislancar09.blogspot.com/2009/06/meningkatkan-traffic-website-dan-blog.html

memberi kotak scroll pada komentar blog 5

haduu.hh... malam ini pising banget nih banyak tugas yang numpuk, saya kira setelah UKK semua tugas di sekolah akan terlepas , ternyata dugaan saya salah malah sebaliknya banyak tugas yang belum terselesaikan hingga saat ini . untuk melepas kepusingan saya coba ngeblog dan menuliskan postingan ini untuk anda .

dan kali ini saya akan memberi tahukan kepada anda bagaimana memberi kotak scroll pada komentar blog . ya.... mungkin tips kali ini akan sangat membantu untuk blog - blog yang banyak memiliki penggemar yang sering memberikan commentar pada setiap postingan blognya ..

untuk memberikan kotak scroll pada komentar blog anda tak perlu cara yang berbelit belit anda hanya perlu melakukan

• sigin ke account blog anda ...langsung aja ke tata letak -- > edit HTML ( beri tanda centang pada expand widget )
  

• lalu cari code seperti ini :

<dl id='comments-block'>

• pastekan code di bawah ini tepat di bawah code tadi :

&lt;div style='border: 1px double; width:100%; height:250px; overflow:auto;'&gt;

code yang berwarna biru merupakan lebar kotak scroll
code yang berwarna hijau merupakan tinggi dari kotak scroll

• seteh itu anda tarik scroll kebawah sedikit ajah akan menemukan code seperti di bawah ini :

<dl id='comments-block'>
<div style='border: 1px double; width:98%; height:250px; overflow:auto;'>
<b:loop values='data:post.comments' var='comment'>
<dt>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/> @ <a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</dt>


<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
</b:loop>

</dl>

anda hanya perlu menambahkan code </div> tepat diatas code yang berwarna merah

• simpan.

bagaimana hasilnya .... ?

Merubah wara link 1

kali ini kita akan coba membahas bagaimana cara merubah warna link baik yang sedang aktif maupun tidak . sebelumnya saya pernah memberikan bagaimana cara merubah link menjadi berkedip namun cara yang ini sangat berbeda dan lebih sederhana sebagai dan hasilnya akan seperti yang ada pada blog ini link akan berwarna orange ketika link aktive , mau tau bagaimana caranya ? ikutisaja langkah berikut :

• cari code berikut ini

a:link {
color:#000000;
text-decoration:underline;
}
a:visited {
color:#3c78a7;
text-decoration:underline;
}
a:hover {
color:#faac58;
text-decoration:underline;
}

mungkin akan sedikit berbeda pada setiap template cari aja yang mirip

kode yang berwarna merah merupakan warna link dalam keadan none active
code yang berwarna biru berupakan warna dari link yang active
code yang berwarna hijau merupakan link yang sudah pernah di kunjungi

• jika anda angin merubah warna link pada blog anda , yang harus anda lakukan ialah mengubah code yang berwarna tersebut dengan script warna yang anda inginkan , jika bingung mencari code script warna klik aja disini

• jika sudah langsung aja simpan .

membuat daftar isi otomatis 10

untuk mengawali postingan ini saya ingin memberi tahu bahwa sebelumnya saya pernah memposting bagaimana cara membuat daftar isi di blog namun karna terdapat diantara pembaca mengatakan bahwa cara tersebut terlalu merepotjkan jadi saya mencoba untuk memberi cara baru untuk membuat daftar isi di blog.

kali ini anda tidak perlu repot - repot lagi mempaste copy data atau link karena daftar isi yang saya berikan kali ini akan secara otomatis ter update ketika anda mempotingkan artikel baru!!! ... bagai mana anda tertarik ... !!!! jika ya langsung saja ikuti langkah dibawah ini :

• anda harus sigin terlebih dahulu lalu menuju tata letak --> element halaman

• buat sebuah elemen baru pilih HTML/javascrip

• pastekan code di bawah ini didalamnya :
  

<div style="border: 1px solid #000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://haidir35.googlecode.com/files/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://muhamadhaidirali.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>

code yang berwarna biru harus anda ganti dengan alamat blog anda
code yang berwarna merah merupakan tinggi kotak daftar isi

• simpan

Mengecek status no atau dofollow 6

sebelumnya saya telah memposting bagai mana cara untuk merubah status blog yang semula nofollow menjadi dofollow.. nah kali ini saya akan memberi tahu cara untuk mengecek status blog apakah sudah dofollow apakah belum namun cara ini hanya berlaku bagi pengguna mozilla firefox ..... dan beginilah caranya ..:

• anda haruns meng-add addons nodofollow " link nya sudah tersedia di bawah "

https://addons.mozilla.org/en-US/firefox/addons/versions/5687

• install addons tersebut

• jika sudah selesai restart mozilla firefox
  

cara menggunakan :

anda tinggal mengklik kanan pada halaman blog anda dan pilih menu nodofollow maka akan muncul semacam teks blok berwarna, coba anda lihat comment yang ada di blog tersebut dan apabila teks blok tersebut berwarna ungu maka text tersebut mendukung dofollow namun jika text blok berwarna merah berarti blog tersebut belum mendukung dofollow :

nofollow:


dofollow:

berubah menjadi " Dofollow " 4

entah mengapa pagi- pagi sekali saya terbangun... dan tiba - tiba perut saya sakit, nyeri ...dsb ternyata saya ingin BAB.. hehehe tapi setelai itu saya tak bisa tidur lagi .. namun karna itu saya membuat inisiatif untok menyalakan komputer dan langsung ngeblog ...

pagi = pagi sekali saya coba ngeblog dan mencari - cari artikel tentang ngeblog .. dan saya mendapatkan sebuah artikel yang membuat saya penasaran yaitu merubah blog " nofollow " menjadi " dofollow " . saya pun mengerti bahwa blog dofollow merupakan blog yang memberikan back link geratis pada setiap blogger yang memberi comment pada postingan blog tersebut dan langsung saya ikuti langkah - langkahnya seperti berikut

• login keblog anda dan langsung menuju ke tata letak --> edit html

• cari code <a expr:href='data:comment.authorUrl' rel='nofollow'>

• lalu hapus code yang berwarna biru

• cari lagi code <a expr:href='data:backlink.url' rel='nofollow'>

• hapus lagi code yang berwarna biru

• simpan

begitulah caranya untuk membuat blog kita menjadi " dofollow ", sayapun telah menerapkan cara ini pada blog ini . setelah itu sayapun mengantuk dan pergi tidur.........

Gambar di samping judul posting 3

ternyata tdak begitu sulit loh ya.. walaupun sedikit pusing untuk mengedit-edit atau modifikasi blog...

baru baru ini saya menggunakan trik baru yaitu memunculkan gambar sebelum judul postingan ....... seperti yang anda liat pada blog ini terdapat gambar seperti di bawah ini..

di depan judul postingan ...caranya cukup mudah, namum pertama tama anda arusmenyiapkan sebuah gambar ukuran sesuaikan dengan keinginan anda tapi saya menyarankan untuk menggunakan ukuran yang tidak terlalu besar seperti 40 X 40 px. setelah itu anda uploud.

langsung saja ... pada intinya..

• cari code seperti dibawah ini
  

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>

• jika sudah ketemu tambahkan kode berikut tepat di atasnya

<img src='http://www.geocities.com/q_mistique/favi2.png'/>

code yang berwarna biru erupakan url tempat anda menyimpan gambar.

• maka keseluruhan code akan menjadi seperti ini :

<img src='http://www.geocities.com/q_mistique/favi2.png'/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>

gambar di comment admin 4

untuk trik kali ini tidak jauh berbeda dari trik sebelumnya "Comment admin berbeda warna" hanya saja kali ini kita akan memunculkan gambar dibawah comment admin... saya akan coba nntuk memberi gambar dibawah ini pada comment admin :

caranyapun tak berbeda jauh baca dulu artikel ini lalu ganti code ;

.comment-body-author {
background: #ffffff;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}

dengan code :

.comment-body-author {
background: #ffffff url(http://www.geocities.com/q_mistique/comment.png) bottom right no-repeat;
border:1px dotted #000000;
margin:0;
padding:0px 0px 80px 20px;
}

code yang berwarna merah merupakan warna background
code yang berwarna biru merupakan url tempat anda menyimpan gambar
code yang berwarna hijau merupakan warna border

maka comment akan tampil seperti di bawah ini

Comment admin berbeda warna 6

nah kali ini saya akan membahas sebuah trik agar comment admin atau pemilik blog berbeda dengan comment dari pengunjung.. jika penasaran langsung saja kita bahas..

yang pertama masuk ke tata letak -- > edit html " beri tanda centang pada 'Expand template widget' "

• cari code ]]></b:skin> lalu taruh code dibawah ini diatas code tadi
  

.comment-body-author {
background: #ffffff;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}

code yang berwarna merah merupakan warna background
code yang berwarna biru merupakan kode bordernya

jika bingung mencari code warna lihat disini

• lalu cadi code <dl id='comments-block'> dibawah code tersebut anda bisa ngliat code seperti di bawah ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

anda hanya perlu menambah kan code yang berwarna biru tepat seperti contoh diatas..

• simpan template...
  

New style translator flag 4

sebelumnya saya pernah menuliskan sebuah cara untuk memasang translator di blogger namun banyak yang bilah kalau model translator seperti itu terlalu setandar akhirnya saya mencari lagi dan menemukan yang seperti ini :

Google Translate

jika anda tertarik anda bisa mengopi kodenya di bawah ini :

<center><a href="http://pinginbelajar.blogspot.com/2009/05/translate-versi-google.html" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<div style="overflow:no; width:100%px; height:100%px; padding:5px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>
</div>

<div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" style="cursor: pointer;margin-right:3px"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>
</div>
</div>

kode yang berwarna biru merupakan kode warna untuk backgroundnya.

widget total post 1

widget ini memang sangat simpel yang berguna untuk menampilkan jumlah keseluruhan posting kita di blog , berikut cara memasang nya :

1. login ke acount blog anda
2. lalu langsung aja ke tata letak --> elemen halaman
3. buat elemenbaru --> html,javascript
4. copas code di bawah ini kedalam elemen baru yang telah di buat

   <script style="text/javascript">
   function showpostcount(json) {
   document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
   <script src="http://muhamadhaidirali.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

5. simpan
   jangan lupa ganti code yang berwarna merah dengan url blog anda