Rabu, 03 Oktober 2012

Cara Membuat Buku Tamu Melayang

Klik Di Sini untuk Merperjelas Gambar/ Memperbesar

Kali ini saya mau post lagi tentang Blog tutorial, yaitu tentang cara memasang buku tamu melayang, contohnya seperti di atas, jika anda berminat Langsung saja ke tutorialnya ya !!

1. Daftar dulu ke CBOX
2. Sign in ke blogger dan silahkan Login dengan Account Anda
3. Pilih Rancangan/Tata letak
4. Pilih Page Elemen/Elemen Halaman
5. Klik Add a Gadget/Tambah Gadget
6. Lalu pilih "HTML/JavaScript"
7. Kemudian Copy-Paste kode di bawah 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('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #00FF00;
background:Transparent;
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 SHOUTMIX/CBOX ANDA DI SINI


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

_______________________________________________________________________

Note :
- Yang Berwarna Hijau Itu Gambar Buku Tamunya
- Yang Berwarna Biru Ganti Dengan Kode Cbox Kamu

8. Selesai Deh, Cukup Mudah Bukan ?? Kalo Masih Ada Yang Bingung Komentar Aja :p

Senin, 24 September 2012

Cara Membuat READMORE Otomatis di Blogspot (UPDATE)

Cara Membuat Readmore Otomatis di Blogspot. Kali ini zona-klik ingin sharing kepada sobat bagaimana cara membuat readmore otomatis (auto read more) di blogspot. Mungkin telah banyak yang membahas cara ini di blognya masing-masing, tetapi tidak ada salahnya zona-klik mempublishnya.

Dengan adanya readmore otomatis, homepage blog kita akan terlihat rapi dengan ketentuan tinggi dan lebar yang bisa di atur dengan mudah, juga menampilkan thumbnails gambar di sampingnya.

Sebelumnya zona-klik minta maaf jika cara penyampaian di artikel ini kurang dipahami dan dimengerti oleh sobat blogger, karena itulah kemampuan dan pengetahuan zona-klik membahas cara membuat readmore otomatis di blogspot.

Tanpa perlu panjang lebar bercerita, alangkah baiknya langsung ke TKP, cekidot.........
PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis diatas kode 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)

(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>
KEDUA, cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>
ganti kode tersebut dengan kode di bawah ini :
<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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...


KETIGA, klik save template

Untuk melihat hasilnya coba buka halaman home page blog sobat, jreng...jreng...jreng... readmore otomatis telah tampil dan blog sobat terlihat lebih menarik sehingga menimbulkan daya tarik tersendiri bagi pengunjung.

Senin, 03 September 2012

kalender


Cara Membuat kalender di Blog

Apabila anda ingin menambah atau mempercantik blog anda dengan kalender maka anda pasti akan mencari situs yang menyediakan widget kalender bagi blog anda. Agar tidak terlalu bingung mencarinya, saya berikan situs yang menyediakan widget kalender yaitu http://www.free-blog-content.com,dan All the calendars in the World - Calendar Widget. Untuk cara instalasi, silahkan ikuti langkah-langkah berikut !
  1.  Tata Letak
  2.  Tambah Gadget
  3.  Klik menu Edit HTML
  4.  Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk   berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula.
  5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan, mau di sidebar atau di manapun boleh.
  6. Klik tombol Simpan Perubahan Template
  7.  Selesai.

alert

Sudah pernah lihat belum alert welcome yang ada pada blog-blog di luar sana gampang kok caranya asal anda sabar dan simak secara teliti hehehe... Begini sobat blog pertama anda mesti berdoa dahulu agar berjalan dengan baik hehehe... Silahkan login blog anda kemudian menuju TKP edit menu tambahkan gadget pilih HTML/javascript kemudian copy code dibawah ini dan save





<center><script language="JavaScript">alert("Selamat datang di blog madiun cool")</script></center>



Ganti kalimat yang berwarna putih dengan kalimat yang ingin anda tampilkan.
Jangan lupa disave.
silahkan dicoba semoga bermanfaat trik yang saya berikan jangan lupa tinggalkan komentar sebelum pergi.

lencana facebook

Membuat Lencana Profil Facebook untuk blog - Jika blog anda ingin dipasangi lencana Profil Facebook ikuti saja tutorial berikut, gunanya memperkenalkan Frofil Facebook anda di blog pribadi anda. Anda tinggal memasang Widget  pada sidebar blog anda. Jangan panjang lebar langsung aja peraktek :

1. Login ke facebook anda
2. Klik menu Profile
3. Lihat pada bagian kanan klik "Tambahkan lencana ke situs anda"



4. klik tulisan create badge
5. kemudian akan muncul halaman yang berisi:
--> layout : silahkan pilih vertikal atau horizontal tergantung space pada blog anda
--> Image : Javascript untuk aplikasi blogspot dan image untuk semua blog
--> Items : Silahkan pilih item yang akan anda masukkan ke widget profile facebook and
--> Kemudian Save

6. Kemudian akan muncul kode scriptnya, silahkan dicopy paste ke element halaman blog anda dengan cara seperti biasa Layout-->Add Gadget-->Javascript/HTML-->Save


Beragam lencana pilihan yang disediakan disana, diantaranya : Lencana profil, lencana suka, lencana foto, lencana halaman. Terserah lencana apa yang mau anda pasang, jangan lupa atur setingan yang telah disediakan disana.

tanslator

Membuat Google Translate Bendera (Flag Icon)

Kali ini saya akan menjelaskan cara membuat google translate bendera (flag icon) ,sebelumnya saya juga telah memposting  cara membuat translate google di blog  pada posting sebelumnya , fungsi dari google translate adalah untuk menerjemahkan isi dari posting blog ke bahasa pengunjung blog yang dimengerti , seperti yang ada pada bagian sidebar blog ini , untuk cara buat translate google bendera ini sangat mudah .

Cara buat Google Translate Bendera


Fungsi nya tetap sama untuk menerjemahkan , tapi cara buat google translet bendera ini juga bertujuan mempermanis / memperindah tampilan blog anda
tutorial nya cukup sederhana

translate bendera
 Translate Bendera


Sebelum kalian membuat google translate bendera ini silahkan masuk ke blog anda --> biasa tambah gadget --> tambah javascript --> lalu copy paste kode ini

<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDZAcDtW_ICvFrnskjWNmI-Hs1g_Rk4qpu3yy2MgH1Lk1-JRe12Ipso294b73zZDkumx_TTM3PrDU3G0t5unRYpo5ytQiUjJLbanUbTyHOgGjMemUEXMpU4AC55Yw9wgjzTJIRcWp84EA/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKrZGas4vZV99fobgyYDQ4-oAGdii1xw2X-C9eUdqr06ch44sgeVQasTTd3ZLWkAhLISjBCYTSefVwV7goM78JW-c66FkIKpHrTSjuvkGXl5zMfXLmS8xY1dQzxQi2fTiwZn-O-srN8qHf/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfSjWhSeEA9y3yNNv6tC_Zk7nb0Klxu27cw2Co3TD2Zj-yrly0sJHbBN4chTgNgdMiPkv4lep3JZenJPWXmtk426Q2Z4TOlHAnd2iz2M_JrLUGV6K5gJDE5c0ojuu0Xqu-ufhaSWs01VW2/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jDAYsAwoRkD8OvCNDGRIrAYY-Fe_5AXUIKAm5vHHG2WMU1lhTXaBpyFhdQqTJ-TgSS2WRPKzvAsTNdo4wSsWhYrcSAU9XS0ch01rz_MaZOmYCznLuImQ0l2A0hc5A4o-jWJ8vsE9eR9D/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYP4jlAlcgSL0cfp1TQMLELVfKkCRaPTwNMoYi5qWjeyg0hDdNOWFZ3nmEWHLgIgD93um0DulCs-36IXEcV8cwmX5XkdWNIK2J1J_tLFp8I34lGRM-T285W7ccudIkmOaz7zIMjBbhdcWJ/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Na0Gq8bcW78M3kRa2Uc8jn6ZLiDO09ULUbHhimGw4x55ZJXvvm3HwnuXid9DeveTB1xgKsRxwuigiSlD4HvWz72HuJhg7TyJh3ZFDhROzjYLVMnugjV-DkY-rKvfTBiAk7w1O6o19DHe/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xWM1JSsDztqw7JzBNyofaKLnA1vmV7sWL2q1n2Umzshfgrui4EzWu1sXqTPPwB4wWL-U4oS-QUSnG2XSyVd81cfEzMgQOEmP0RVvKMqzu5-IZKPGvYTFsZQS_ZbcMHiHO-qFEm8vNWeV/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3dLasS_AnSo7dDmyzlpM13_jSsjk_AlYUNt_qk36OZCpA_C0-vsDsBkVnn3F3j4BMP0_QVvQn7PZU0au5pug3xMQWwKxm2P6Z4k3ocQaz8AAKyn8jRzQbU7gWEWTQLmLf-z_WKCp_QL9_/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSvJoLxAhdUyGZRPdaRLu29LTJrfzQ8VzCluhBjI58W62OYkiMRxcuu5XcnJf2P2Nre9mtgykmT3G5gpVqFRZENQhDZzag1OZZ-ktoDC5zYZiBpHome7OoPgZDRqc9XHidsDgcypxGw-7/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1TUg2Jbf0wKMfqn9nr-r3DNKDthK69aZbWjUHQaRaxxJEmcDwBich70eOfqkq-nHVR3pHleWGA8aL7qxqTTbttrR9I60osjO7fEKxMUOL_QC3gGig_X5dsCFZnYXpdasEPirLIBEdmnP5/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YDgIyqCRpQrBpV_wAgIJezL7uy-IYKvpT4x3Wo1wwXuqeOj2JymIsycQLLNtXYtN_DLxnhK95CCzcIrUYzkuh0n4P-7_WGdHotxMZEhAiBFHFPbiN2Wvt45g25WDHZ9du3OG_j6MlWdK/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="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" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9-zWzD2GqDFu2Mse4DBN1aadccItv9yWObMiUBK0c5W-PKrOsimeJEfT40Pz-6Maoo7rMAvvSMnrDH8hKEJU9pyGdcRXbXiqloZ11vhiFTMfvIdyNwTICqTB3P3WgIe850ujvYhOK2lxH/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a href="http://juntenxblog.blogspot.com" title="translate widget"/>Translate Widget</a> by Google </div></div>
 

whose amung us

nampaknya menjadi salah satu widget wajib blogger saat ini. Hampir semua blog dan website memasangnya.
Dengan widget ini pengunjung dapat melihat berapa orang yang sedang online saat itu di blog atau website. Saya pasang widget whos amung us. Selain itu, masih banyak situs lainnya yang menyediakan widget user online.
Anda dapat mencarinya di google dengan keyword "user online widget" atau "user online status" atau "user online". Silahkan pilih widget dari situs mana yang akan anda pasang pada blog anda.

Secara umum, widget ini sangat mudah dipasang. Biasanya anda diharuskan mendaftar dulu untuk membuat akun. Proses pendaftaran pun sangat mudah, cukup dengan email saja. Bahkan ada yang tidak memerlukan pendaftaran. Setelah itu anda akan diberikan script user online status yang siap untuk dipasang. Nah, selain user online status dari whos.amung.us masih ada lagi yang lain seperti radarURL.com, whosread.com, 24counter.com, widgetbox.com, histas.com, dan banyak situs lainnya.

Oke, misalnya kita pakai user online status dari whos.amung.us karena widget ini termasuk yang terbaik dan teraman dari widget user online status lainnya yang ada di internet. Sekarang cara pasang widget nya seperti ini :

1. Login ke blogger dengan id anda. Setelah itu tinggalkan sebentar
2. Kunjungi situs whos.amung.us
3. Klik Showcase pada daftar di sebelah atas
4. Klik Color Me lalu klik color wheel
5. Halaman berikutnya, pada Already have a map, or our widget? klik button No
6. Berikutnya silahkan pilih widget color dan font color. Akan ada preview untuk melihat widget. Sesuaikan dengan desain template blog anda.
7. Jika sudah, kembali ke blogger
8. Klik Tata Letak --> HTML/Javascript
9. Copy kode widget Whos Amung Us ke HTML/Javascript
10.Klik Simpan dan Selesai
Selamat Mencoba