E-book Tutorial Blogspot Tingkat Lanjut

5/14/2018 E-book Tutorial Blogspot Tingkat Lanjut - slidepdf.com

http://slidepdf.com/reader/full/e-book-tutorial-blogspot-tingkat-lanjut 1/10

MENAMBAHKAN READ AND MORE

ATAU BACA SELENGKAPNYA

:

1. Akses atau klik www.blogger.com.

2. Selanjutnya pilih menu Tata Letak dan klik menu Edit HTML

3. Maka akan keluar tag Edit Template. Langkah selanjutnya

centang atau tandai Expand Templates Widget

4. Masukan kode dibawah ini, sebelum tag </head> atau tepat

sesudah kode } ]]></b:skin>. Untuk mencari biar lebih mudah

kode tersebut tekan Ctrl – F pada kyboard.

<style>

<b:if cond='data:blog.pageType == "item"'>

span.fullpost {display:inline;}

<b:else/>

span.fullpost {display:none;}

</b:if>

</style>



5. Seperti nampak pada gambar dibawah ini

6. Selanjutnya mengatur supaya postingan/tulisan terpotong. Cari

kode <p><data:post.body/></p>. Tambahkan kode dibawah

ini, tepat dibawahnya :

<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'> Read More..</a>

</b:if>

7. Seperti nampak pada gambar dibawah ini:



8. Setiap kali akan posting harus pada EDIT HTML, bukan pada

Compose/Tulis. Supaya tulisan terpotong, biar nampak read

more muncul, ketikan kode <span class="fullpost">, sisa

postingan sampai selesai ketikan kode </span>.

9. Contoh:

Mungkin kita boleh berfikir seperti itu, akan tetapi kita

sudah sedikit mendapatkan jawabanya yaitu pertama, sebagai

rumah atau tempat tinggal ini menandakan dengan jaringan atau

networking kita akan mendapatkan manfaat. <span

class="fullpost">

Kedua, sebagi tempat berlindung dengan jaringan kita

akan belajar berlindung sebab jaring laba-laba sangat lengket dan

pekat. Ketiga, jaring-jaring itu membentuk lingkaran tidak

beraturan bahwa konsepsi jaringan setidaknya mengajarkan

bagaimana kita berhubungan dengan orang lain tanpa membeda-

bedakan. Keempat , lihat jaring-jaring itu terikat kuat pada setiap

sisinya sehingga mampu tegak berdiri, mengisyaratkan kita harus

tanggung jawab (sense of responbility) dan mampu menjaga

hubungan baik (the lookout for carefully relationship). Pada

akhirnya laba-laba itu tidur dengan pulas ditengah rumhnya,

maka hal tersebutlah yang kita harapkan melalui hubungan atau

ikatan menjaga tali persaudaraan, khusunya persaudaraan sesama

muslim). </span>

10. Maka hasilnya akan terpotong seperti ini:

Mungkin kita boleh berfikir seperti itu, akan tetapi kita sudah

sedikit mendapatkan jawabanya yaitu pertama, sebagai rumah

atau tempat tinggal ini menandakan dengan jaringan atau

networking kita akan mendapatkan manfaat.

11. SELAMAT MENCOBA.....



MEMBUAT MENU HORISONTAL





4. Masukan kode dibawah ini, Cari kode ]]></b:skin>, kalau sudah

ketemu copy kode HTML tersebut dan taruh diatasnya. Untuk

mencari biar lebih mudah kode tersebut tekan Ctrl – F pada

kyboard.

/*credits : http://sanggarilci.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5; /* Garis Bawah*/

line-height:normal;



}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px; /*Posisi Menu*/

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/ blackleft.gif ")

no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background:

url("http://kendhin.890m.com/menu/ blackright.gif

") no-repeatright top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */



#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}

Seperti gambar dibawah ini:

5. Tulisan yang Dicetak Tebal bisa kamu ganti dengan gambar-

gambar warna dibawah ini. Misalnya jika kamu memilih warna

kuning maka kodenya menjadi:

background: url("http://kendhin.890m.com/menu/ yellowright.gif ")

no-repeat left top;

background: url("http://kendhin.890m.com/menu/ yellowright.gif ")

no-repeat right top;



Kode warna-warna:

blackleft.gif blackright.gif

greenleft.gif greenright.gif

redleft.gif redright.gif

unguleft.gif unguright.gif

yellowleft.gif yellowright.gif



blueleft.gif blueright.gif

whiteleft.gif whiteright.gif

6. Memasang Tag Halaman (sastra, opini, profil dan lain-lain). Cari

kode <div id="content-wrapper">. Semua pemasangan

tergantung dari template yang digunakan. Selanjutnya copy kode

HTML berikut tepat diatasnya :

<div id="tabshori">

<ul>

<li><a

href="http://sanggarilci.blogspot.com"><span> Home</span></a></l

i>

<li><a href="http://sanggarilci.blogspot.com"><span>Trik-

Tips</span></a></li>

<li><a href="http://sanggarilci.blogspot.com"><span>Free

Template </span></a></li>

<li><a

href="http://sanggarilci.blogspot.com"><span> Kamus</span></a><

/li>

<li><a



href="http://sanggarilci.blogspot.com"><span> Profile</span></a></

li>

</ul>

</div >

Ganti http://sanggarilci.blogspot.com dengan link yang kamu

tuju. Link tersebut bisa berupa alamat blog lain atau link

postingan kamu. Untuk mendapatkan link postingan caranya klik

kanan pada judul postingannya trus pilih "copy link location"

(untuk mozilla firefox).Kemudian text yang dicetak tebal bisa kamu ganti dengan text

yang kamu suka. Text tersebut adalah text yang muncul di

tombol/menu

Seperti nampak gambar dibawah ini:

7. Kalau sudah terpasang klik SIMPAN. Selesai sudah....

8. Bagaimana hasilnya. Lihat sekarang....

9. SELAMAT MENCOBA



MENAMBAHKAN MARQUE ATAU TEKS BERJALAN





4. Pasang kode dibawah ini tepat diatas menu horisontal/jeniskategori atau dibawah kode <div id="content-wrapper">.

<marque align=’center’ direction=’bottom right’ height=’4px’Onmouseout=’this.start { } ’ onmouseover=’this.stop { } ‘scrolldelay=’400’Width=’100’>SELAMAT DATANG DI WEBLOG NEGERIKEGILAAN (Menebar Cinta Menerangi Semesta)

</marquee>

Nampak seperti gambar dibawah ini:

5. Kalimat yang dicetak tebal diatas bisa anda rubah seperti

kemauan anda. Ok....SELAMAT MENCOBA

E-book Tutorial Blogspot Tingkat Lanjut

Documents

Transcript of E-book Tutorial Blogspot Tingkat Lanjut