My Profile

Selasa, 06 Maret 2012

Cara pasang Auto Read More terbaru (Part 2)


(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.


Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

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

<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'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:


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


Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


silahkan disimpan dan lihat hasilnya :)

Keterangan:

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)


Cara buat "Readmore" pada Blogger


Banyaknya permintaan mengenai cara buat readmore membuat saya tetap mengharuskan artikel ini ditulis. walaupun tutorial cara buat readmore sudah banyak ditulis oleh rekan blogger, sayangnya penjelasan yang diberikan kadang tidak mudah dimengerti dan malah membuat bingung, untuk itu tidak ada salahnya saya juga menulis artikel ini sebagai pelengkap agar mempermudah blogger baru bisa lebih mengerti cara membuat readmore serta cara penggunanan kode readmore pada posting.

Mungkin rekan blogger yang baru mulai membuat blog masih bingung apa itu readmore? Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Next", "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah namanya :). Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang panjang. Pengen tau cara buatnya?



Contoh ReadMore :


Pernah menemukan pesan seperti diatas?...jika pernah jangan panik, ini hanya pesan pemberitahuan dari blogger kalau layanan sedang melakukan perbaikan maintenance pada server. pesan ini hanya berlangsung kurang lebih beberapa menit setelah itu akan normal kembali. Semoga informasi ini membantu :)Readmore.. »


Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:

Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"


Langkah Kedua:

Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"


Langkah Ketiga:

Cari kode dibawah ini:
<div class='post-header-line-1'/> <div class='post-body'>

Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual)

Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>



Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>


Lakukan Copy-Paste kode dibawah ini dibawah code diatas

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>


 

Tips: Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut:

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

<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'>Readmore »»</a>
</b:if>

<div style='clear: both;'/>

Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)

Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.


Langkah Empat

Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>


Jangan lupa disimpan :)


Langkah Kelima :

Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">
</div>


ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya.


Sebagai contoh lihat cuplikan kalimat dibawah:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). (Dini rencana text yang akan dipenggal) Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.


Bagaimana cara pemenggalan kode diatas? caranya tinggal kamu lihat 2 kode pemenggalan kalimat dibawah (ingat kode hanya bekerja pada halaman editor posting)

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). <div class="fullpost"> Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.</div>


Jadi hasil posting pada halaman browser akan tampai sebagai berikut:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa dulu ya :). Readmore »»

Selamat mencoba :) happy blogging


Beberapa Trik Membuat Efek Hover




Hey guys,.. saya ingin sharing lagi nie ma teman-teman, mengenai 'Efek Hover' pada Tulisan, warna, dan Image Gambar.
sebelum kita membuat 'efek hover' pada blog kita, utta ingin menjelaskan sedikit mengenai Efek Hover ini,.. jadi disini kita cuma cukup menambahkan kode :hover pada bagian kode css yang ingin kita tambahkan efek hover.

baiklah kita langsung saja membuatnya, sobat perhatikan kode kode berikut :

Jika sobat ingin bemberikan :

-----------------------------------
HOVER PADA JUDUL POSTING
-----------------------------------
Cari kode berikut :

.post h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

-----------------------------------
HOVER TEKS/TULISAN Pada POSTING
-----------------------------------
Cari kode berikut :

.post {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post:hover {
font-size:16px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

-----------------------------------
HOVER PADA BODY POSTING
-----------------------------------
Cari kode berikut :

.post-body {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.post-body:hover {
-----
-------
}

-----------------------------------
HOVER PADA SEMUA IMAGE/GAMBAR
-----------------------------------
Cari kode berikut :

.post img {
border:1px solid #fff;
---------
}

:::Lalu tambahkan kode berikut dibawahnya :::

.post img:hover {
height:70px;
width:150px;
border:5px solid #cccccc;
}

-----------------------------------
HOVER PADA IMAGE/GAMBAR PROFIL
-----------------------------------
Cari kode berikut :

.profile-img {
height:70px;
width:150px;
border:1px solid #fff;
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.profile-img:hover {
border:5px solid #cccccc;
}

-----------------------------------
HOVER PADA TITLE JUDUL SIDEBAR
-----------------------------------
Cari kode berikut :

.sidebar h2 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

.sidebar h2:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}

------------------------------------------------------------------
HOVER PADA TULISAN 'POSKAN KOMENTAR' pada bagian KOTAK KOMENTAR
------------------------------------------------------------------
Cari kode berikut :

#comments h4 {
------
---------
}

::: Lalu tambahkan kode berikut dibawahnya :::

#comments h4:hover {
font-size:25px;
font-family:Tahoma,Arial,Century gothic, sans-serif;
color:#89a8af;
}


KET:::
Jadi inti dari cara memberikan efek Hover'Pembesaran Font/teks' dan 'Perubahan Warna' disini,.
dengan cukup dengan menambahkan kode tambahan :hover { . pada kode CSS sobat yang ingin diberi efef Hover..

Contohnya, misal kita ingin memberi efek 'Pembesaran Font/teks' dan 'Perubahan Warna' pada Judul Header maka kita cari kode berikut :

#header h1{
----
-------
-----
}

setelah ketemu, kita tinggal membuat kode css nya lagi seperti ini :

#header h1{
----
-------
-----
}

lalu kita ganti kode #header h1{ menjadi #header h1:hover { . sehingga menjadi :

#header h1:hover {
font-size:25px;
color:#89a8af;
}

jadi kita cuma menambahkan kode :hover diantaranya.

gimana??? sudah jelas kan,..hehe,.. :) utta' harap teman-teman sudah mengerti,...


Related Posts Plugin for WordPress, Blogger...

HACKING

Terbaru >>

Top Post >>

 

S E R V I C E ' s aLL ShArE Copyright © 2010 Endy_Djubu is Designed by 3nfitry