0 Membuat Read More Otomatis

Posted by Andre Pandet Rank Khoerai Jquery, Widget | 1 -

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

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

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 :

Setelah di Sorot :

Selamat Mencoba..

0 Membuat Chatbox Bergaya Absolute Vertical Sliding Panel

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)

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.



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.
410px – 22px = 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.