Welcome to Riky HangOut
Tampilkan postingan dengan label Mencoba Latihan Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Mencoba Latihan Blog. Tampilkan semua postingan

Kamis, 04 November 2010

Cara Membuat Script Selamat Datang

Postingan saat ini akan membagi tips untuk menambahkan greeting script yang berfungsi sebagai salam atau suatu sambutan terhadap pengunjung.
Berikut adalah langkah-langkah menambahkan greeting script:

1. Login ke akun blogger Anda.
2. Klik Rancangan.
3. Elemen Laman.
4. Tambah GadGet
5. Masukan Java Script

Copy kan Kode ini d dalamnya...:
Welcome Greeting Script (Script Selamat Datang)
<SCRIPT language='JavaScript'>alert("Selamat datang di  area Riky HangOut");</SCRIPT>

Good Bye Greeting Script (Script Good Bye)
<script type='text/javascript'> // goodbye alert function goodbye(){
alert('Bagaimana Pendapat Anda Mengenai Riky HangOut? Silahkan Kembali dan Beri
Komentar Anda! Terima Kasih atas Kunjungan Anda!'); } parent.window.onunload=goodbye;
</script>

Question Script (Script Pertanyaan)
<script type="text/javascript"> var yourName = prompt("Siapa nama Anda?", "Nama Anda Adalah"); </script>

5. Ganti tulisan yg warna biru dengan kata kata anda sendiri
6. Klik Save
7. Selesai
Gud Luck....

Sumber  : dari oRang...
»»  read more

Rabu, 25 Agustus 2010

Membuat Arsip Blog model Scroll


 Update, membuat arsip blog menjadi scroll. Trik ini sama seperti model scroll yang lain, contohnya Label Scroll dan Scrolling pada Box Comment. Kita hanya menambahkan script berikut:
<div style='overflow:auto; width:ancho; height:100px;'>
Untuk letaknya apa udah pada tau? Kalo belum, ayo kita lihat caranya:

  1. Login - Layout - Elemen halaman
  2. Buat widget Arsip dengan nama Arsip Blog
  3. Pilih model Hirearchy untuk model ini
  4. Save
  5. Masuk ke Edit HTML - cek kotak Expand Template Widget
  6. Cari 'Arsip Blog'. Selengkapnya begini:

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>

  1. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya
  2. Simpan template Anda dan lihat hasilnya
Semoga bermanfaat!!!
»»  read more

Cek Loading Blog

Untuk mengetahui seberapa cepat blog kita saat dibuka dan apa saja yang membuat sangat lambat, sebenarnya ada banyak cara, mulai dari pengecekan terhadap tampilan maupun pengecekan saat loading.Untuk pengetesan tampilan ada beberapa website yang menyediakan layanan tersebut secara gratis, diantaranya :

1. Untuk mengecek tampilan blog salah satunya Browsershots Layanan yang disediakan adalah memberikan fasilitas screenshot website dalam web browser yang berbeda. Sehingga kita akan tahu bila dari informasi pengunjung blog kita lebih banyak menggunakan Mozilla Firefox (seperti blog ini) maka kita fokus pada web browser dan juga web browser lainnya yang mayoritas dipakai pengunjung blog kita. Karena di Browsershots terdapat pengecekan dari berbagai web browser yang ada (bahkan saya baru tahu ada beberapa nama web browser belum begitu saya kenal) maka kita dapat memberikan keterangan di blog kita bahwasanya weblog ini lebih cepat diakses oleh salah satu dari web browser.

2. Untuk mengecek loading blog bisa menggunakan Pingdom yang secara gratis memberikan fasilitas pengecekan loading. Caranya sangat mudah, tinggal memasukkan URL weblog dan setelah diproses akan ditampilkan waktu loading setiap file (HTML, CSS, gambar, JavaScript, flash dan lainnya) dengan ukurannya. Sehingga kita mengetahui apa saja yang memberatkan loading blog kita.

3. Ada pula yang lainnya yaitu Website Optimization yang juga memberikan layanan untuk mengetes kecepatan loading website. Bedanya informasi yang ditampilkan meliputi ukuran file, total objek, komposisi dan waktu download. Dan juga ditampilkan juga analisis dan rekomendasi untuk mengoptimalkan weblog kita.
»»  read more

Cara Membuat Tombol Show Hidden

Tombol Show Hidden berguna apa bila anda ingin menaruh dengan buka show hidden / buka tutup
dimana ketika tombol tersebut di klik maka akan tampil isi dari tombol tersebut
untuk memasang  Tombol Show Hidden sobat dapat cukup mengganti teks warna merah dibawah ini dengan
apa yang ingin sobat letakkan pada tombol tersebut.
berikut adalah kode untuk membuat Tombol Show Hidden.



<div><div style="margin-bottom: 2px;"><i><b><small>Klik Untuk melihat</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">


disini anda meletakkan artikel / gambar atau terserah anda.
</div></div></div>
»»  read more

Selasa, 24 Agustus 2010

Membuat browser bergetar saat blog di klik kanan

tips ini akan membuat browser bergetar saat blog sobat di klik kanan
masuk ke blog sobat
tataletak==> tambah gadget ==>pilih html/javascript masukkan kode barikut
lalu simpan
<script language="javascript">
<!-- Begin
function shake(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.resizeTo(250,150);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
parent.moveBy(0,i);}}}}

// End -->

PopUpURL = "Maaf anda tidak di perbolehkan klik kanan jika anda ingin mengcopy tekan ctrl + c";

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;

if (isIE||isNN)
{
document.oncontextmenu=checkV;
}
else
{
document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
document.onmousedown=checkV;
}
function checkV(e)
{
if (isN4)
{
if (e.which==2||e.which==3)
{
dPUW=alert("Maaf anda tidak di perbolehkan klik kanan jika anda ingin mengcopy tekan ctrl + c");
shake(2);
return false;
}
}
else
{
dPUW=alert(PopUpURL);
shake(2);
return false;
}
}
</script>



<em><script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='*********************'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" color="+color+" size="+size+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script></em>


ganti teks warna Biru dengan keinginan sobat............
Selamat Mencoba...♥♥♥
»»  read more

Membuat readmore Otomatis

Pergi Ke TATA LETAK - EDIT HTML (sebelum mengedit HTML sebaiknya backup dulu template anda)

  • Beri tanda centang pada Expand Template Widget
  • Copy-paste kode javascript berikut tepat diatas kode </head>
  •  <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
    <script type='text/javascript'>
    //<![CDATA[
    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>
  •  Temukan kode berikut <data:post.body/> gunakan CTRL + F pada Browser anda.
  •  Ganti kode <data:post.body/> tersebut dengan kode berikut
  • <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;read more</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>
  • Save Template - Selesai
»»  read more

Senin, 23 Agustus 2010

Efek Bergetar / Berputar pada browser di blog

efek ini akan membuat browser
bergetar jika sobat tertarik berikut adalah cara memasangnya
ni gue copas sie..
biar alo gue lupa jadi g susah" nyarinya lagi...hhehehe

* masuk ke blog sobat
* tataletak
* tambah gadget
* pilih html/javascript
* masukkan code berikut
* lalu simpan


<script>
//Edited
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>
»»  read more

Minggu, 22 Agustus 2010

Membuat Link Berkedip Pelangi

Akan terasa lebih cantik sebuah blog jika dipenuhi variasi warna yang sesuai. Begitu juga pada pewarnaan link2 yang tersentuh pointer apalagi yang berwarna-warni seperti pelangi seperti pada blog ini. Bagi Anda yang merasa tertarik untuk mencobanya, silahkan teruskan bacaan Anda.

Langkah2nya sebagai berikut:

  • Login ke Blogger.com
  • Kemudian Tata Letak
  • Pilih Edit HTML:
  • Centang Expand Widget
  • Copas kode berikut dibawah kode <head>
<script src='http://sites.google.com/site/rasiqzonetwork/javascript/rainbow.js' type='text/javascript'/>
  • Selanjutnya Save Template
Semoga Berhasil...! :)
»»  read more

Membuat Judul Blog Bergerak

Cekidot ga mau lama-lama.........hahahah100x

Langkah Pertama / First Step

  • Seperti biasa langkah pertama silahkan anda login terlebih dahulu.
  • Setelah itu silahkan ke halaman Tata letak - Edit html
  • Lalu beri centang pada Expand Template Widget
  • Setelah itu Download template lengkap untuk menghindari kesalahan.
Langkah Kedua / Second Step

  • Silahkan cari kode <data:title/> dengan menggunakan Ctrl + F.
  • Kode dalam keadan awal
Kode awal
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>

Setelah ditambahkan

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<marquee behaviour='alternate' direction='right' scrolldelay='5' width='100%'>
<data:title/></marquee>   
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>


Langkah Ketiga / Third Step

  • Pada langkah ketiga adalah bagaimana cara memodifikasinya, alo ga ngerti sama modifikasinya derita. masuk ja di sni alo g ngerti
  • Anda cukup mengganti kode yang saya tandai dengan warna merah dengan kode marquee lainnya sesuka hati anda.
Contoh
Jika anda ingin mengganti kode marquee di atas dengan kode yang lainnya anda bisa mengikuti saran ini, akan tetapi jika tidak , jangan diganti.
Hapus semua kode ini
<marquee behaviour='alternate' direction='right' scrolldelay='5' width='100%'>
<data:title/></marquee>

Lalu gantikan dengan kode ini

<marquee direction="down" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="300px">Taruh Text Yang Anda Inginkan</marquee>

Keterangan : Ganti kode hijau dengan kode  <data:title/>.

Alo belum ngerti cara modifikasi baca dulu artikel yang ini .

Keterangan
Kode ini hanya berlaku pada halaman home saja, setelah anda mengklik judul artikel maka judul blog tidak akan bergerak lagi, jika kamu ingin keduanya bergerak silahkan ulangi langkah yang sama pada kode berwarna biru.
»»  read more

Membuat Text Berjalan ( Marquee )

Langsung Belajar..
Tutor nie gue post di sini buat ingetin gue juga biar alo lupa ga susah-susah cari tutornya lagi.....hheheh

Langkah Pertama / First Step

Langkah pertama dalam membuat text berjalan adalah setidaknya sedikit mengetahui tentang kode umum dalam text marquee seperti :

  • Width; Lebar marquee, Satuan bisa pixel atau %.
  • Height; Tinggi marquee, Sauan bisa pixel atau %.
  • Bgcolor; Warna latar belakang marquee, Contoh : putih #fff.
  • Behavior; Perilaku text, Pilihan : scroll, slide, alternate
  • Scrollamount; kecepatan text bergerak, Satuan; 1, 2, 3, makin besar angkanya maka akan makin cepat jalannya
  • Scrolldelay; Kecepatan text bergerak, Satuan  1, 2, 3, semakin besar angkanya maka akan makin lambat
  • Direction; Teks bergerak dari arah mana, Pilihan  left, right, top, dan bottom, up, down
Langkah Kedua / Second Step

Langkah kedua dalam membuat marquee adalah silahkan anda lihat beberapa contoh di bawah ini :

Contoh 1

Taruh text nya di sini

Kode Contoh 1
<marquee behaviour="alternate" scrollamount="4" width="100%"> Taruh Text nya Disini</marquee>
Keterangan Contoh 1

* Tanpa direction berarti arahnya memakai default maka akan dari kiri ke kanan
* Tanpa background berarti warnanya akan menyatu dengan warna background default blog anda.
* Width 100 % berarti lebar 100 dari lebar default. Dapat menyesuaikan diri sesuai dengan lebar default blog.

Contoh 2
Taruh Text nya di sini Inginkan Disini

Kode Contoh 2
<marquee behaviour="alternate" bgcolor="#0000FF" scrolldelay="5" width="400px"><span style="color: white;" direction="left"> Taruh Text Yang Anda Inginkan Disini></span></marquee>

Keterangan contoh 2

* Bgcolor adalah warna background , bisa kalian ganti dengan warna lain.
* Width adalah lebar, disini saya menggunakan pixel sehingga tidak seperti contoh 1 yang menyesuaikan diri dengan lebar post.
* Height adalah tinggi, sebaiknya anda menggunakan pixel pada height.
* Span color adalah warna tulisan anda bisa menggantinya dengan warna lainnya.
* Direction left berarti arahnya terus dari kiri ke kanan tanpa terputus, anda bisa menggunakan right jika ingin arah sebaliknya.


Contoh 3

Taruh Text Turun
Taruh Text Turun
Taruh Text Turun
Taruh Text Turun
Taruh Text Turun



Kode Contoh 3
<marquee direction="down" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="300px">Text Turun<br /> Text Turun<br /> Text Turun<br /> Text Turun<br /> Text Turun</marquee>

Keterangan contoh 3

* Direction down berarti arah datang dari bawah ke atas , bisa diganti dengan up jika kamu mau text turun ke bawah.
* Onmousover berarti text berhenti pada saat cursor diarahkan ke text tersebut.
* Onmouseout berarti text kembali bergerak pada saat cursor tidak diarahkan ke text.

Langkah Ketiga / Third Step

Pada langkah ketiga silahkan pilih, anda ingin memakai code contoh 1, 2 atau 3. Anda tinggal mengcopy code yang telah di sediakan sebelumnya. thx semuanya uwd mau mampir.
»»  read more

Buat Efek Tulisan Berkedip

Tulisan berkedip di postingan blog mungkin menarik buat postingan di blog kita... Bagi kamu yang mau membuatnya ini ada caranya...

  Copaskan code ini dimana  pun anda suka (cara copy pastenya harus pas di dalam Edit HTML )

1. Buat postingan kamu dulu baru klik Edit HTML

<blink>Isi postingan yang berkedip</blink>
2. Nanti hasilnya seperti ini  :

 Isi postingan yang berkedip

 Kalau untuk membuat link bisa seperti ini
  
<blink><a href='http://link kamu/'target='new'>deskripsi link kamu</a></blink>

Nanti hasilnya seperti ini  :

Riky HangOut 
»»  read more

MemBuat Selengkapnya di Posting Blogger

      Sering banget kan.. kita melihat Red More... atau Baca Selengkapnya... pada artikel / postingan.di blog-blog atau Koran-Koran yang sering kita baca setiah harinya. Read More atau baca selengkapnya dimaksudkan untuk menyingkat halaman atau agar halaman utama blog kita tidak telalu panjang dan loadingnya juga biar ngak terlalu lama. Bagi temen-temen yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikelnya, namun jika nanti artikel Anda sudah banyak, baru deh. Butuh untuk membuat read more/baca selengkapnya seperti pada blog saya ini. Karena menu ini sangat praktis dan memberi kesan rapi pada blog kita.

      Nah Bagi pengguna Wordpress, “Read more” tidak menjadi masalah karena sudah ada fiturnya alias sudah ada tag yang disediakan di editor wordpress untuk dipakai secara langsung. Tapi bagi pengguna Blogger, karena tidak ada fitur yang tersedia, makanya butuh sedikit Modifikasi di bagian template bloggernya. Cara membuatnya Giamana ? Blogger sendiri telah menyediakan tutorialnya “How can I create expandable post summaries?” tapi bahasa Inggris untuk orang Indonesia agak susah, he.he.he.. ada beberapa cara untuk membuat read more ada yang panjang, susah lagi buatnya, dan ada juga yang mudah, simple. hasilnya juga sama kok. jadi seperti biasa kita cari yang mudah dan simple aja.. oke. Untuk membuatnya Coba temen-temen mengikuti langkah-langkah berikut ini :
1. Seperti biasa login, pilih Layout (tata letak) kemudian pilih Edit HTML.

2. Kasih tanda cek (centang) pada cekbox "expand widget template".

3. Cari kode berikut di Template blog kamu :

<div class='post-body entry-content'>
<p><data:post.body/></p>

Kamu bisa mencarinya dengan menekan control+F pada keyboard trus masukkan kode diatas.

4. Kalau sudah ketemu, Replace(Ganti) kode tersebut menjadi seperti ini :

<div class='post-body entry-content'><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>

Tulisan "Read More....." itu bisa kamu ubah semaumu, misalnya jadi “Selengkapnya” atau "Baca Selengkapnya" terserah selera aja.

5. Tekan simpan template.

6. Kemudian pilih menu Setting / pengaturan lalu pilih Formatting

7. Pada kotak Template Posting isikan kode berikut:

<span class="fullpost"></span>

8. Kemudian Simpan.

9. Ketika memposting artikel baru, pilih EDIT HTML. Maka secara ostosmastis akan tampak kode di atas.

10. Supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen muculin tulisan menjadi Read More.. yakni ketik (span class="fullpost") isinya berupa sisa postingan sampai selesai (/span). Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan ComposeContoh penulisan posting.

Contoh penulisannya seperti ini.


Ini misalkan awal berita atau artikel atau posingan yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. (span class="fullpost") Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat pembaca meng klik link baca selengkapnya atau link read more..ditutup dengan ketikan(/span)

Hasil akhir postingan anda akan menjadi seperti ini:

Ini misalkan awal berita atau artikel atau posingan yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat pembaca meng klik link baca selengkapnya atau link read more..ditutup dengan ketikan
»»  read more

Followers

 

Copyright © 2015 by Riky HangOut

Fiance Nina Latifah | Powered by Blogger