ShoutMix chat widget


.

8.15.2011

0 Membuat Read More Otomatis

Read more otomatis (Automatic Read more )
adalah read more atau baca selengkapnya dengan secara otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga akan mengambil gambar thumbnailnya. Klo pake read more / baca selengkapnya yang biasa kan agak repot tuh di saat setiap kali mau New Post / menambah postingan baru kita harus menambahkan kode <span class="fullpost> isi postingan </span> atau <span id="fullpost">isi postingan</span>,, Capeeek Dhe....!!! jaman sekarang mah da basi nieh yang ginian...hehehehe... nah bagi yang gak mau lagi disusahkan oleh read more yang seperti ini sekarang ikutin aja nieh tips dan trik membuat Read more otomatis berikut ini

Ikuti langkah-langkah berikut ini untuk membuatnya
1. Login di Blogger > pada Dasboard pilih Rancangan > Edit HTML
2. Centang / Check List dulu "expand widget templates"
3. Cari kode </head> kemudian copy - paste kode di bawah ini sebelum kode tersebut

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>
kamu juga bisa mengubah kode tersebut sesuai selera
summary_noimg = 430; kode ini untuk memotong / mengatur tinggi tanpa gambar
summary_img = 340; kode ini untuk memotong / mengatur tinggi dengan gambar
img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya
img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

4. Sekarang cari kode
<data:post.body/> , hati-hati ya bagi yang sudah memakai read more yg tidak otomatis, biasanya ada dua kode yang seperti itu, jadi pilih yang pertama. Klo Udah ketemu copy - paste kode berikut lalu ganti dengan kode dibawah ini

<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:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
tulisan read more disana bisa kamu ganti sesuai keinginan. gmn..? sudah blom.?? Hm..klo sudah di SAVE ya..!!!
Sekarang coba liat Blog kamu pasti jadi lebih menarik dan tidak repot lagi klo mo posting. ^_ ^
Trus Bagai mana dengan yang udah pakai read more yang lama?? gman cara ganti dengan read more otomatis ini??
Nah kode yang read more yang lama kan seperti ini (setiap template boleh jadi berbeda lho, jadi hati-hati ya)
<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
lalu hapus kode yang di tebalkan kemudian ikuti langkah 1 sampai 4.
Sekian dulu yah sob smoga bermanfaat, jangan lupa kritik dan sarannya dengan mengisi kotak komentar q Xeps..!!??
GOOD LUCK..!!!

8.13.2011

0 Cara Mengganti Icon Pada Address Bar

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif

0 Cara Membuat Search Engine

Tentu kita semua sudah tahu apa itu Search Engine (hari gini gak tahu apa itu search engine? cape' deeh...). Search Engine adalah ... bla.. bla..bla.. dst.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:

1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

8.10.2011

0 Cara Membuat Efek Animasi Rotate Miring

Pada kesempatan kali ini saya ingin membahas 'Cara Membuat Efek Animasi Miring' maksudnya disini Ketika mouse disorot ke header maka header tersebut bergerak ke posisi normal yang sebelumnya miring. Efek Miring tersebut tidak hanya pada header saja, namun pada semua widget di blog anda seperti Gambar dan Tulisan. contoh bisa anda lihat pada gambar disetiap posting saya, sebelumnya miring kekiri, dan ketika disorot maka akan miring keatas,...

Caranya cukuplah mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3.

Sebelum kita melihat kode CSS nya, disini saya akan memberikan 2 (dua) efek miring yang pertama :

1. efek Miring ke kanan ::



transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)


2. efek Miring ke kiri : :


transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)

KET ::
- Sobat Perhatikan angka yang berwarna merah, itu adalah besar Rotate, jika makin besar angkanya maka akan semakin miring.. intinya itu saja..

Baiklah, setelah kita melihat kode CSS nya. sekarang langsung mencobanya,..

Jadi caranya begini, misalkan sobat pengen memberikan efek rotate miring pada bagian Judul Posting, maka kita cari dulu Kode pada bagian Postinganya  dengan kode seperti berikut :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
}

Setelah ketemu, sobat tinggal memasukkan kode CSS diatas didalamnya sebelum tag penutup }

Maka hasilnya seperti ini :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
}

Setelah cara diatas kita lalukan, coba sobat Priview dulu, setelah ada perubahan, baru sobat bisa SAVE TEMPLATE.

Berikut Hasilnya :

Sebelum Sorot :
http://i56.tinypic.com/10ojj8o.jpg
Setelah di Sorot :
http://i52.tinypic.com/a0e1jp.jpg


Selamat Mencoba..

0 Membuat Chatbox Bergaya Absolute Vertical Sliding Panel



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjMHbpmvX8SAJuHDgRq9bzq26rB9xo8HTe4VweBKoCTh-V4sewoTC3DacR9e44eAuJV4sHxQb5dzMUxi7niXsJRdHPBxkyYmbBhKKAgtC5Q2So-YpOv9hm4_bzaZNK0yDaSMnBn6Pn_oQ/s320/SlidingpanelFixed.jpg

Kali ini saya akan mengajak anda untuk membuat Absolute Vertical Sliding Panel. Apa itu Absolute Vertical Sliding panel? lihat gambar diatas dan perhatikan panel kecil bertuliskan Chatbox dikiri atas. Lalu apa maksud dari Absolute disini? saya beri nama Absolute karena Sliding tersebut hanya akan tetap diam dikiri atas dan tidak akan ikut berpindah jika anda melakukan scroll page blog anda.


Lihat DEMONYA
Lantas bagaimana cara membuatnya?  ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti ini </head>
5. Lalu taruh Script Javascript dibawah ini tepat diatas </head>:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

6. Lalu cari kode ]]></b:skin>, dan letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.panel{position:absolute; top:50px; left:0; display:none; background:#000; border:1px solid #111; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; width:330px; height:auto; padding:30px 30px 30px 130px; filter:alpha(opacity=85); opacity:.85}
.panel p{margin:0 0 15px 0; padding:0; color:#ccc}
.panel a, .panel a:visited{margin:0; padding:0; color:#9FC54E; text-decoration:none; border-bottom:1px solid #9FC54E}
.panel a:hover, .panel a:visited:hover{margin:0; padding:0; color:#fff; text-decoration:none; border-bottom:1px solid #fff}
a.trigger{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 15px; font-weight:700; background:#333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.trigger:hover{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 20px; font-weight:700; background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.active.trigger{background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat}
.columns{clear:both; width:330px; padding:0 0 20px 0; line-height:22px}
.colleft{float:left; width:130px; line-height:22px}
.colright{float:right; width:130px; line-height:22px}
ul{padding:0; margin:0; list-style-type:none}
ul li{padding:0; margin:0; list-style-type:none}

7. Jika sudah, anda bisa meletakkan HTML dibawah ini pada Add Widget di Elemen Laman atau anda bisa meletakkannya diatas kode </body> di edit HTML:

<div class="panel">

Letakkan Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

</div>
<a class="trigger" href="">ChatBox</a>

8. Save Template anda...

0 Cara Pasang Widget Floating ChatBox (Buku Tamu)

http://i53.tinypic.com/2ef8683.jpg
Baiklah pada kesempatan kali ini, utta ingin memberikan trik cara membuat Floating Widget ChatBox(Buku Tamu).yang sudah saya otak-atik kode CSSnya, dimana Widget ini sangat berdeda dari Widget Buku Tamu dari biasanya, karena saya sudah memberikan beberapa efek, diantaranya efek : 'Rotate Miring','Boder Garis Lengkung', dan 'Efek Hover Box'.

sebenarnya saya agak terburu-buru, membuat posting ini, karena ada slh satu teman blogger yg request tuk dibuatin Template ala cewe',secara template sayakan Uniqx Transparent Semuanya, jd kurang bagus, klw cewe' yg make'.hehe,..


Okelah klw bgtu langsung saja, sobat bisa langsung memcobanya diblog sobat.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
.gb_fixed{position:fixed; top:60px; right:0px; z-index:+10}

* html .gb_fixed {position:relative;}
#hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
#hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" /></a>
<span style="font-size: 80%;">
Mau Widget
<a href="http://www.uttafreak-987.co.cc/2011/05/cara-pasang-widget-floating-chatbox.html" target="_blank">
Seperti Ini
</a>
and
<a href="http://www.uttafreak-987.co.cc/2011/04/cara-memasang-chatbox-buku-tamu-pada.html" target="_blank">
Buat Buku Tamu!
</a></span></div>

--> Kode Cbox(Buku Tmu)  Anda Disini <--

</td></tr>
</tbody></table>
</div>

<script src="http://marewainfo.googlecode.com/files/ordinaryhack-floating.js">
</script>
<div class="gb_fixed" style="z-index: +5;">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="http://i1181.photobucket.com/albums/x427/mazkac/chatbox.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>

5. Save.

Note ::
- Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
- Tang berwarna merah ganti dengan kode Cbox.

Jgn Lupa Lihat Juga Widget Buku Tamu Lainnya :

1. 'Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka'
2. ' Buku Tamu Bergaya Absolute Vertical Sliding Panel'
3. 'Cara Membuat Buku Tamu Blog Show/Hide di Bagian Atas'

Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini.

0 Cara MerubahTampilan Kolom Komentar dengan Efek Bubble 2

Artikel kali ini sama dengan postingan sy yg sebelumnya 'MerubahTampilan Kolom Komentar dengan Efek Bubble',cm kli ini sy sdh merubah beberapa tampilannya, seperti memberikan: efek transparent, dan  efek 'over box' pd bagian kotak komentarnya.

http://i56.tinypic.com/xnbw8x.jpg

Jika tertarik ingin membuatnya langsung saja ikuti langkah-langkah berikut.

1. Login ke Account Blogger sobat. masuk ke Tab Rancangan/Design , kemudian pilih Edit HTML.
2. Beri tanda centang pada Expand Template Widget. (jangan lupa backup template anda dengan mengklik link Download Full Template)
3. Cari kode ]]></b:skin> lalu copy code di bawah ini :  ( dan letakkan di atas kode diatasnya.



/* Comment */
#bg_commentblock {color:#fff;width:598px;background:transparent;float: left;padding:10px;margin:0px}
#bg_commentblock li{list-style:none}
div .comment-body a{color:#0080ff}
div .comment-body a:hover{color:#fff}
.comment-body {background:transparent;text-shadow:2px 2px 2px #000;padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}
.comment-body:hover{background:#000; opacity:0.8; font-size:16px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.comment-body-author {background:#666;background:-moz-linear-gradient(top,#fff,#fbefd9);padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}
.comment-list li a{color:#00a}
.sg1 {position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}
.sg2 {position:relative;top:0px;left:5px;border-color: transparent transparent #fff transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}
.commentblock {text-align:left;padding:0;margin:0;}
.commentblock a{color:#666;}
.commentblock a:hover{color:#fff;}
#comment-editor{height:300px;width:618px;margin:0;padding:0;}
.commentlist {margin-top:10px}
.commentlist li {list-style:none;margin-bottom:px;line-height: 20px;padding: 0px;}
.author-name a {color:#ff5500}
.author-name a:hover {color:#fff}

KET::
--> Ubah teks berwarna biru diatas sesuai dengan kalkulasi berikut :
Lebar main-wrapper dikurangi 22px.

--> Contoh, Jika lebar main wrapper anda adalah 410px, maka sesuai dengan kalkulasi diatas, lebar tersebut kemudian dikurangi sebesar 22px.
410px22px = 388px
Hasil tersebut lah yang kemudian harus di gantikan pada teks berwarna biru diatas.
--> Ganti kode berwarna merah dengan kode warna background yang anda inginkan.
--> Ganti kode berwarna hijau dengan kode warna border/garis pinggir yang anda inginkan.


4. Selanjutnya,cari seluruh kode berikut :


<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<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/>
</b:if>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<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:loop>
</dl> 

5. Lalu Ganti Semua kode diatas dengan kode berikut ini :

<dl class='commentlist'><b:loop values='data:post.comments' var='comment'>
<li class='comment' id='li-comment'><div id='commentblock'><div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if>
<a expr:name='data:comment.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/></b:if><div class='author-name'>
<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></div></div><div class='comment-meta'>             
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/></div><div class='comment-body'>
<div class='sg1'/><div class='sg2'/><b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/>
<span class='interaction-iframe-guide'/></p></b:if></div></div></li></b:loop></dl> 

6. Simpan hasil kerja anda. Kini kolom komentar anda sudah lebih cantik bukan ?
 

Semoga bermanfaat.

0 Membuat Efek Img Hover Zoom pada semua gambar Posting

Pada kesempatan kali ini utta ingin memberikan tutorial blogger lagi, setelah lama ngga posting tutor blogger. nah disini saya ingin memberikan 'Membuat Efek Img Hover Zoom pada semua gambar Posting' maksud.y disini Image/gambar pada saat disorot, maka akan menimbulkan efek Pembesaran pada gambar..

Trik ini murni dari efek CSS, LIHAT CONTOHNYA DISINI. perhatikan pada bagian Gambar.

Jika sobat ingin mencobanya langsung saja ikuti langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post img{ (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :



.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px}
.post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s;
-moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
-webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
}

::: Sobat dapat mengedit code CSS diatas sesuka anda,

5. Save Template,..

Sekarang lihat hasilnya.


Selamat mencoba!

0 Uniqx Transparent

Beberapa hari yg lalu saya sempat membuat Template 'UNIQX TRANSPARENT Ver. 1.0.' dan akhirnya selesai juga template ini, dengan melanjutkan ver.1.0 template saya, dan sekarang sudah masuk ke ver.2.0 yaitu 'UNIQX TRANSPARENT Ver. 2.0."...

Berikut Screen Gambarnya :

http://i55.tinypic.com/2u40nk0.jpg

Tampilan Dalam

http://i56.tinypic.com/2cyicm0.jpg

Featured :
2 columns
Right sidebar
3 kolom footer
Blockquote Indah
Full color.
readmore,...
Slider Post.




0 Cara Pasang Box Shadow Hover di Blog

http://i53.tinypic.com/s5ilw2.gif
Baiklah pada kesempatan kali ini utta' ingin share lagi nich,.. mengenai trik CSS pada Box Shadow Hover. biasa utta senang banget bermain-main dengan CSS3, selain memiliki efek bagus, tampilan blog kita juga akan tampak lebih keren pastinya, lihat saja template utta sekarang..keren ngga?? hehe,.. :D

Berikut ini screen Demonya :

Contoh Sebelum Hover :
http://i53.tinypic.com/o5rz7q.jpg
Contoh saat hover :
http://i54.tinypic.com/10dy68l.jpg
gimana??tertarik untuk mencobanya,..
sebelum kita ke tutorial pembuatannya, saya ingin jelaskan, disini utta hanya ingin memberikan trik pemasangan Box shadow hover pada kotak postingan saja,..
dan box shadow ini sendiri dapat dipasang dimana aja, seperti di kotak 'posting','sidebar' 'komentar' maupun pada 'footer', dari kita saya mau pasang dimana...

Untuk lebih jelasnya sobat perhatikan kode-kode berikut ini :

:::Kode CSS sebelum Hover:::


margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;

:::Kode CSS saat Hover:::


border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

KET:
Sobat perhatikan teks yang berwarna merah, itu adalah warna box shadow. dan dapat anda ganti dengan warna kesukaan sobat sendiri.
untuk melihat-lihat warna lainnya Klik Disini.

Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .


.post-body {
margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
}
.post-body:hover {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
}

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

0 Merubah Font Size Of Blog Header

Header atau bagian paling atas dari sebuah blog merupakan tempat meletakkan identitas nama dan keterangan dari sebuah blog. Secara default ini selalu ditampilkan. Jika anda menginginkan tulisan pada header ini disembunyikan dan digantikan dengan background yang telah anda siapkan silahkan baca artikel ini.Ukuran font pada header terkadang terlalu besar dan hampir memenuhi bagian header. Saya pernah mengalami hal semacam ini. Setiap template yang kita gunakan memiliki nilai default tersendiri yang diberikan oleh pembuatnya. Nah, sekarang bagaimana merubah nilai default tersebut pada bagian header?.
Ikuti langkah berikut ini :
1.Login ke Blogger
2.Pilih Tata letak (Layout)
3.Pilih Edit HTML
4.Centang pada bagian Expand Template Widget
5.Cari kode dibawah ini :
Untuk merubah font header :
.headerleft h1 {
color: #FFF;
font-family: Georgia, Times New Roman;
font-size:56px; /–> ganti angka ini
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
display: none;
}
Untuk merubah font keterangan blog :
.headerleft .description {
color: #f3f2e8;
margin-left: 0px;
padding-left: 20px;
font-family:Georgia, Times New Roman;
font-size:18px; /–> ganti angka ini
font-style:italic;
font-weight:bold;
display: none;
}
6.Simpan (Save)

0 Cara Membuat Blog Banyak Pengunjungnya

cara membuat blog itu mudah. Cukup 5 menit, Anda bisa membuat sebuah blog baik menggunakan wordpress, blogspot, maupun dengan hosting dan domain sendiri. Namun pertanyaannya, bagaimana supaya blog kita dikunjungi oleh 5.000 kunjungan per hari?

Nah, artikel ini akan membahas bagaimana cara membuat blog yang bisa mendatangkan 5.000 kunjungan per hari. Tentu saja, kami tidak akan membahas masalah teknisnya, tetapi strategi dan kerangka berpikir agar blog Anda bias menjadi ramai dengan pengunjung.

Cara Membuat Blog Diawali Dengan Targeting

Langkah pertama cara membuat blog agar bisa mendatangkan pengunjung yang banyak, jelas Anda harus membidik target yang banyak juga. Tentu saja disini akan menjadi relatif. Definisi “banyak” bisa berbeda untuk setiap ceruk pasar. Kadang pilihan ceruk pasar bisa mendatangkan ribuan sampai puluhan ribu kunjungan perhari. Kadang juga ada yang “hanya” ratusan kunjungan dalam sebulan. Tetapi untuk produk tertentu, dengan harga mahal dan profit margin yang tinggi, 300 kunjungan tertarget dalam sebulan bisa menghasilkan omset belasan juta.

Positioning Blog Anda

Setelah Anda mengetahui target pasar Anda, maka langkah selanjutnya Anda harus mengetahui kata kunci apa saja yang digunakan oleh target pasar Anda di google atau mesin pencari lainnya. Cara mencarinya bisa dilakukan di Google Keyword Tool, silahkan masukan kata kunci utama Anda, piliha bahasa dan negara, maka Anda akan mendapatkan kata kunci apa saja yang digunakan oleh pengguna mesin pencari (google) dan berkaitan dengan produk/jasa Anda.
Setelah Anda mengetahui kata kunci apa saja, maka Anda harus memposisikan blog Anda untuk menyediakan informasi berdasarkan data kata kunci tersebut. Inilah yang disebut dengan optimasi mesin pencari atau dikenal juga dengan SEO (Search Engine Optimization). SEO pada dasarnya ialah mengedit dan mengatur kata kunci di blog kita. Tujuannya untuk memberikan informasi yang tepat kepada mesin pencari tentang tema blog kita. Jika nanti mesin pencari memeriksa blog kita, dia akan mendapatkan informasi sesuai dengan keinginan kita. Jadi cara membuat blog itu meliputi mengoptimasi blog Anda di mata mesin pencari.

Gunakan Blog WordPress Hosting dan Domain Sendiri

Kenapa Tidak Blog Gratisan?

Yup, Anda tetap bisa mendatangkan pengunjung yang banyak dengan blog gratisan. Namun akan lebih mudah jika Anda menggunakan blog yang berbayar dengan menggunakan wordpress. Kenapa harus menggunakan blog wordpress pada domain dan hosting berbayar (bukan yang gratisan)? Berikut alasannya: Anda bisa menginstall dan memodifikasi blog Anda sehingga bisa melakukan optimasi SEO sebaik mungkin. Banyak plugin-plugin SEO yang hanya bisa diinstall pada wordpress hosting berbayar.
Bagaimana dengan blogspot? Bagaimana pun yang gratisan memiliki keterbatasan. Meski blogspot milik Google, namun tetap saja domain berbayar lebih diutamakan. Sementara blog wordpress dengan hosting dan domain berbayar memiliki keleluasan yang lebih untuk melakukan optimasi SEO. Jadi, cara membuat blog yang dimaksud adalah blog dengan wordpress, domain dan hosting yang berbayar.

Gunakan Hosting Yang Tangguh

Yup, saya memberi tahu sejak awal, sebab pengalaman saya sempat diusir oleh hosting yang kurang tangguh sebab pengunjung yang banyak akan membenani server. Kehadiran blog Anda akan mengganggu pengguna hosting yang lain karena loadnya begitu besar. Saya sendiri menggunakan Hostgator setelah berkali-kali diusir oleh hosting murah. Setelah sekian lama di Hostgator, tidak pernah lagi mendapatkan masalah.
Artinya cara membuat blog juga meliputi cara memilih hosting yang tepat, sebab hosting yang tidak tepat akan menjadikan upaya kita mendapatkan kunjungan yang banyak, menjadi gagal.

Konten Menjadi Sangat Penting

Bukan hanya cara membuat blog yang harus diperhatikan, tetapi juga bagaimana mengisi dan mengelola blog Anda. Sejak bulan Maret 2011, google menerapkan kebijakan baru yaitu memprioritas konten sebagai standar penilaian tehadap sebuah website. Jadi, jika web site Anda ingin mendapatkan kunjungan yang banyak, maka bukan hanya cara membuat blog yang Anda rencanakan, tetapi juga bagaimana mengisi blog tersebut dengan konten yang berkualitas. Berikut diantara ciri-ciri konten yang berkualitas:
  • Bukan hasil copy paste.
  • Pembahasan yang lengkap dan mendalam, memberikan informasi yang cukup bagi pengguna. Minimal terdiri dari 700 kata dan menjadikan pembaca betah membaca blog Anda
Jika blog Anda dianggap tidak berkualitas, maka tidak akan mendapatkan posisi yang bagus (SERP) di google.Selengkapnya bisa baca artikel saya yang lain yaitu: Perkembangan SEO Untuk WordPress

Desain Juga Penting

Selain konten, cara membuat blog juga harus memperhatikan agar blog kita tampil bagus dengan loading yang cepat. Dari segi pemasaran, desain yang bagus itu penting. Jangan membuat blog asal jadi. Kenapa desain harus bagus?
  • Meningkatkan citra bisnis Anda. Bagaimana pun, orang awam masih melihat kemasan. Membeli buku masih berdasarkan cover. Jika blog Anda untuk bisnis, maka desainlah dengan profesional.
  • Memberikan kesan positif terhadap pembaca. Jika Anda sudah memberikan kesan positif, mereka akan betah dan kembali membaca blog Anda.
Jadi, cara membuat blog yang mendatangkan banyak pengunjung meliputi membuat theme (tampilan) yang profesional juga

Cara Membuat Blog Profesional

Jadi, apakah cara membuat blog itu mudah? Yup, tentu saja, membuat blog saja itu mudah. Hanya membuatuhkan waktu 5 menit saja, blog Anda sudah jadi. Namun untuk membuat blog profesional yang mendatangkan banyak pengunjung, Anda harus:
  1. Memiliki kemampuan SEO, mulai dari memilih target (kata kunci) dan mengoptimasi blog Anda dengan kata kunci tersebut.
  2. Memiliki kemampuan desain grafis yang memadai agar blog Anda tampil bagus, memberikan kesan positif kepada pembaca blog Anda dan meningkatkan citra bisnis Anda.
  3. Memiliki sumber daya yang memadai dalam pembuatan konten. Mampu membuat konten yang berkualitas dan teroptimasi SEO.
Jika Anda bisa melakukan ketiga hal diatas seorang diri, silahkan. Namun jika Anda memerlukan bantuan, GlobalPro Bisnis memang hadir untuk membantu Anda membuat blog yang sudah teroptimasi SEO dengan tampilan profesional. Semuanya berdasarkan pengalaman kami, bagaimana cara membuat blog yang kami miliki, mendapatkan 5.000 kunjungan per harinya. Silahkan kirimkan permintaan proposal Anda. KLIK: Proposal. Pilih jasa Wordpres Pro.
OK, sampai disini pembahasan cara membuat blog yang akan memiliki banyak pengunjung.

8.09.2011

0 Cara Mempercantik dan Menghias BLOG

Blog kita akan terasa lebih cantik apabila di isi dengan berbagai hiasan seperti jam, buku tamu, yahoo emotion, tukaran link, beberapa logo, dan juga lain2 sebagainya. sebetulnya hiasan ini bisa kita dapatkan dengan cara mudah karena hiasan ini sebetulnya free, jadi apabila anda melihat blog yang ada hiasan seperti jam atau lain2 anda tinggal menklik saja hiasan itu maka kita akan dibawa ke web penyedia hiasan itu. tapi sebelum kita mengambil hiasan itu sudah pasti terlebih dahulu kita harus melakukan registrasi.
Untuk masalah hiasan saya akan memberikan beberapa contoh saja. karena saya yakin yang lainnya anda pasti akan bisa setelah mempelajari dikit demi sedikit tentang kode HTML yang ada dari hiasan itu.

Memberikan Hiasan Jam pada Blog kita. caranya adalah
:
  1. Silahkan klik link berikut –> http://www.clocklink.com
  2. Jika sudah berada pada situs tersebut, pilih menu Gallery pada sebelah kiri homepage clocklink (atau klik world clock untuk hiasan jam dengan tampilan peta dunia).
  3. Pada menu Gallery silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
  4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
  5. Klik tombol yang bertuliskan Accept
  6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
  7. Set ukuran jam yang anda sukai di samping tulisan size
  8. Copy kode HTML yang di berikan pada notepad
  9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
  10. Selesai
Memasang Buku Tamu pada Blog :
  1. Daftar terlebih dahulu di www.shoutmix.com
  2. Setelah daftar pada kolom yang berjudul style, klik menu appearance
  3. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
  4. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
  5. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
  6. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
  7. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
  8. Selesai
Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
Untuk blogger dengan template klasik :
  • Log in terlebih dahulu ke blogger.com dengan id anda
  • Klik menu Template
  • Klik Edit HTML
  • Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
  • Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
  • Klik tombol Preview untuk melihat perubahan yang kita buat.
  • Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
  • Selesai
Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.
Untuk Blogger baru :
  • Silahkan Login dengan id anda
  • Klik menu Layout
  • Klik Page Element
  • Klik Add a Page Element
  • Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
  • Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
  • Copy paste kode HTML shoutbox anda di dalam form Content
  • Klik tombol Save Changes
  • Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
  • Tekan tombol Save
  • Selesai
Selamat mencoba !
Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :
Untuk langkah-langkahnya hampir sama dengan langkah diatas.
Pasang Statistik atau Tracker
  1. Silahkan klik di sini untuk menuju menuju situs http://www.sitemeter.com
  2. klik tulisan Sign Up untuk melakukan pendaftaran
  3. klik tombol bertuliskan Next
  4. Klik tombol Next lagi
  5. Isi semua tabel yang ada lalu klik tombol Next lagi
  6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
  7. klik tombol Next lagi
  8. klik tombol Next lagi ( cape dech next..next melulu )
  9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
  10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
  11. Silahkan login dengan id anda
  12. Bila sudah login, Klik menu Manager
  13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
  14. Pilih style yang anda sukai, kemudian klik tombol Select
  15. Klik menu HTML Code
  16. Klik tulisan Adding site Meter to a Blogger.com Site
  17. copy semua kode HTML yang di berikan lalu paste pada Notepad
  18. Klik menu Logout untuk keluar dari situs tersebut
  19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :
khusus blog dengan template klasik :
  1. Sign in di blogger dengan id anda
  2. Klik menu TEMPLATE
  3. Klik Edit HTML
  4. Klik Edit (yang ada pada bar menu browser anda)
  5. Klik Find (on this page)… –> untuk mempercepat pencarian
  6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
  7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
  8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai
Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode
…kode site meter…
Untuk blog dengan Template baru :
  1. Login di blogger dengan ID anda
  2. Klik menu Layout
  3. Klik Page Elements
  4. Klik Add a Page Element
  5. Klik ADD TO BLOG pada menu HTML/JavaScript
  6. Tulis Judul site meter anda pada pada isian di sebelah form Title (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
  7. Copy & paste kode Site meter pada kolom Content
  8. Klik tombol Save Changes
  9. Klik Element yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
  10. Klik tombol PREVIEW untuk melihat perubahan yang baru di lakukan
  11. Bila sudah cocok dengan perubahan tadi, klik tombol SAVE
  12. Selesai
Demikian beberapa contoh dari hiasan blog saya yakin teman2 pasti bisa membuatnya dan menjadikan blog teman2 lebih indah apabila ada informasi yang kurang dari blog saya silahkan cek langsung ke sumber informasinya yaitu

  • Buku Tamu
    Bukutamu blog disebut juga dg shoutbox atau tagboard. Sama dengan bukutamu website, tapi bentuknya lebih sederhana. Banyak situs penyedia bukutamu blog gratis yg bisa Anda cari di google dg kata kunci shoutbox atau tagboard. http://shoutmix.comtermasuk penyedia buku tamu blog yg disukai yg servernya cukup stabil.atau Bisa juga di www.Smartgb.com Caranya:
    (a) Daftar di alamat di atas, ikuti semua perintahnya; (b) Setelah selesai, log-in dg id dan password yg sudah terdaftar; (c) Klik menu “Code Generator”; (d) Pilih Full-frame shoutbox; (e) Klik “Generate the Code”; (f) Copy kode HTML yg ada, dan masukkan ke template blog Anda di bagian Sidebar; (g) Klik SAVE SETTING & REPUBLISH. Selesai.
  • Statistic dan Tracker
    Berfungsi untuk mengetahui berapa pengunjung yg datang setiap harinya, setiap minggu, dan bulan dan dari negara mana saja. Selain itu, ia memberi tahu kita lewat mana pengunjung itu datang: lewat pencarian di google atau via blog/situs lain yg memasang link blog kita. Statistic/tracker gratis yg paling terkenal ada dua Sitemeter dan Extreme Tracking. Klik link berikut untuk mendaftar:
(a)http://www.sitemeter.com/?a=newaccount(b) http://www.extreme- dm.com/tracking/?reg Setelah daftar, login dan masukkan kode HTML-nya di blog Anda.

  • Kamus Online
    Kalau blog Anda berbahasa Inggris, Anda bisa memasang Kamus Indonesia-Inggris dan Inggris-Indonesia di blog Anda supaya pengunjung Indonesia yg lagi belajar bahasa Inggris bisa betah nongkrong. Kode HTML-nya bisa diambil di http://kamus.net
  • Jadwal Shalat
    Bagi blogger Muslim, www.islamicfinder.org menyediakan jadwal shalat lima waktu yg bisa ditempel di blog. Anda bisa pilih berdasarkan kota dan negara. Silahkan ambil kodenya di link berikut: http://www.islamicfinder.org/index.php?inl_language

  • Peta Kampung Kita
    Bagi yg ingin melihat nama dan peta kampung kelahiran nempel di blog, silahkan daftar di http://feedmap.net atau bisa juga lihat digoogle earth Caranya,
    (a) masuk ke
    http://feedmap.net; (b) Klik “Explore Blog”, akan muncul peta dunia; (c) Pilih negara Indonesia dg cara klik kanan secara terus menerus mouse komputer Anda dan geser/putar peta dunia tsb. ke kanan/kiri sampai ketemu peta Indonesia. (d) Setelah peta Indonesia ditemukan, perbesar fokus peta dg cara mengklik 2x secara berulang-ulang; (e) Pilih kawasan atau propinsi yg paling dekat dg kampung kelahiran Anda, dan perbesar fokus peta dg mengklik berkali-kali sampai tidak dapat diperbesar lagi; (f) Setelah nama kampung kelahiran atau kota terdekat dari kampung kita tampak, arahkan panah mouse ke kota tsb dan klik kanan mouse; (g) Akan tampil menu “Add Blog”, klik menu ini; (h) Akan muncul kotak, isi alamat blog Anda. Contoh,http://silverains.blogspot.com (jangan lupa pake awalan http://; (i) Klik submit; (j) Apabila berhasil, maka akan muncul tulisan: Thank You! Di bawahnya ada tiga kotak yg berisi kode html untuk BLOGMAP, NEIGHBLOGMAP BUTTON, dan LOCAL BLOGROLL. Copy ketiga kode HTML tsb. dan paste di sidebar blog Anda; (k) Selesai.

0 Cara Mengganti Font Blog Dengan Mudah Dan Cepat

Nah setelah utak utik font blog saya nih, akhirnya selesai juga . Kliatn kan bedanya ? meski gag sebagus dan sekeren blog sobat, lumayan buat nambah design blog saya . hehehehhe .

Kalo yg saya tau sih ganti font dengan 2 cara, Ganti font default dengan mengganti style css dan ganti font dengan menggunakan metode Cufon . Untuk ganti font default dengan style css jenis font tidak terlalu banyak, sedangkan ganti font dengan metode Cufon, banyak banget jenis fontnya karna kita upload sendiri fontnya sob ..

Disini saya akan coba share cara ganti font dengan css,


1. Pertama masuk Edit HTML blog sobat,


2. Lalu cari kode css body {
tamabahin ajah atao ganti jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height). Biasanya kita kesulitan untuk mengatur font-family, font-size, letter-spacing, word-spacing, line-height yg tepat buat blog kita . Tapi tenang ajah karena ada alat bantu online untuk css font style .

Beberapa alat bantu :




Nah gampang kan ? tinggal pilih, generate lalu copy code nya ke dalam body {
Misal : body {
background:#E7E2DA
font-family: "Lucida Console", Monospace;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

}

Kira2 begitu hasilnya .

NB:
font-family: "Lucida Console", Monospace;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

adalah code css hasil generate font .

Untuk Mengatur perbedaan Font antar judul blog dan judul posting, temen2 bisa cari css h1{ untuk judul blog dan h3{ untuk judul posting .

Seperti di atas temen2 tinggal masukin css kode fontnya,
Misal : h3{
font-size:28px;
text-align:center;
font-family: Comic Sans MS;
}


Mudahkan ? untuk ganti font dengan cara cufon . temen2 bisa lihat caranya disini

8.08.2011

0 Cara Mudah Memperbaiki File RAR yang Rusak Dengan RAR Recovery Toolbox

 
 
Rar Recovery Toolbox | 2.08Mb
RAR Recovery Toolbox merupakan alat pulih data dari file RAR yang rusak. Program memindai arsip, mendefinisikan struktur data dan mencoba untuk memulihkan informasi sebanyak banyaknya dari file yang rusak. Menggunakan beberapa algoritma pemulihan berbeda, alat ini meminimalkan kehilangan data dan mencoba untuk memulihkan jumlah informasi semaksimal mungkin.

Juga memeriksa data untuk konsistensi untuk meningkatkan kualitas data recovery. Setelah sesi pemulihan program selesai, hal itu menunjukkan laporan pemulihan penuh. Antarmuka pengguna yang intuitif dan nyaman membuat bekerja dengan program yang mudah dan nyaman bahkan untuk pemula. Proses pemulihan data terdiri dari beberapa langkah yang dilakukan dalam jendela terpisah, sehingga proses pemulihan menjadi lebih nyaman. Selama data recovery program ini tidak memodifikasi arsip rusak; pemulihan file hanya dari arsip dan menyimpannya ke hard disk. Struktur folder tetap file yang sama dan nama folder yang tidak berubah juga.

Fitur utama RAR Recovery Toolbox: - Memulihkan data dienkripsi - Mengembalikan data dari arsip RAR yang dilindungi sandi - Mengembalikan data dari perangkat penyimpanan yang rusak (disket, CD, Zip-Drive, dll) - Bekerja dengan arsip RAR dalam jaringan lokal - Menggunakan beberapa algoritma independen untuk memaksimalkan jumlah informasi Penyebab utama kerusakan pada arsip RAR: - Salah shutdown dari sistem operasi (restart komputer dengan menggunakan tombol RESET, dll) - Aktivitas Virus - Salah kerja perangkat lunak antivirus - arsip ini tidak di-download / disalin dari jaringan sepenuhnya - Beberapa proses program arsip tidak benar. Kecepatan scanning tergantung pada ukuran dari arsip yang rusak. Ikuti link dan gratis download RAR Recovery Toolbox sekarang.