............................................Susanto................................................: Blogger

Cara Membuat Read More / Baca Selengkapnya di Blogger

Read More

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<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 rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...

Cara buat Slide Menu horisontal dibawah posting

Menu horisontal ini terletak dibawah posting. Selain lebih fungsional karena letaknya dibawah posting, dilihat dari tampilannya menu horisontal ini memang sangat menarik. Sehingga tampilan web atau blog kita menjadi lebih bervariatif. Selain kelebihan diatas menu horisontal ini saya lengkapi dengan efek slide yang menggunakan fitur transition, agar tampil lebih dinamis.
Slide Menu horisontal ini saya buat dengan menggunakan kode CSS dan beberapa kode HTML tanpa menggunakan kode javascript ataupun jQuery, sehingga menu ini akan bekerja lebih ringan.

LIHAT DEMO

OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

/*widget by noer cara buat web gratis.com*/

ul#menu-slide-cbwg {

margin-left: 15px;

padding: 0px;

right: 10px;

list-style: none;

z-index:999999;

}

ul#menu-slide-cbwg li {

width: 103px;

display:inline;

float:left;

}

ul#menu-slide-cbwg li a {

display: block;

float:left;

width: 100px;

height: 25px;

background-color:#eee;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #aaa;

text-decoration:none;

text-align:center;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

}

ul#menu-slide-cbwg li a:hover{

background-color:#4152A7;

border:1px solid #bbb;

padding-top: 80px;

}

ul#menu-slide-cbwg li a span{

background-color:#4152A7;

border-top:1px solid #fff;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

display: block;

width: 100px;

height: 25px;

font-size:14px;

font-weight:bold;

color:#fff;

}

ul#menu-slide-cbwg li a span:hover{

font-size:14px;

color:#4152A7;

background-color:#eee;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

</style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

Catatan :

Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. Langkah selanjutnya cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

10. Copy kode dibawah ini dan paste setelah kode <data:post.body/>:

Catatan :

Bila sudah menggunakan fasilitas "read more" letakkan kode <data:post.body/> setelah kode yang kedua.
Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas

11.SIMPAN TEMPLATE.

Oh iya.... menu ini juga bisa diletakkan dimana saja seperti tab menu dibawah header.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Cara hanya menampilkan judul posting saja pada halaman depan blog

Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.

Berikut gambar tampilan blog hanya menampilkan judul posting saja :

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode css di bawah ini dan taruh sebelum kode </head> :

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

.post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;}

.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;}

</b:if></b:if>

</style>

6. Simpan Template.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Cara Membuat Link Dalam Satu Halaman

Membuat Link pada halaman yang sama sering disebut dengan nama Link jangkar atau Link anchor. Yang fungsi untuk menghubungkan atau membuka dokumen yang satu dengan yang lain pada bagian tertentu, baik itu dalam satu halaman yang sama maupun dengan halaman yang lain pada bagian tertentu pula.

Dalam penggunaannya Link ini sering dipakai pada daftar isi. Yaitu menghubungkan dari setiap daftar tersebut menuju data atau dokumennya masing - masing yang diletakkan pada bagian tertentu, dihalaman yang sama atau halaman yang lain.

Contoh A : ( Dokumen terdapat pada halaman yang sama )

Cara buat web gratis sangat mudah :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis
Silahkan anda coba klik Link - link diatas.

Contoh B : ( Dokumen terdapat pada halaman lain )

Cara buat web gratis sangat mudah :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis
Silahkan anda coba klik Link - link diatas.

Penggunaan lain, biasanya digunakan pada web yang mempunyai halaman panjang kebawah, atau pada artikel yang sangat panjang. Sehingga link seperti ini sangat diperlukan untuk memudahkan pengunjung apabila ingin kembali pada bagian atas atau bagian tertentu tanpa harus capai menggeser scroll mouse terus menerus.

Contoh :
Silahkan anda coba klik Link dibawah ini :
KEMBALI KEATAS

Cara membuatnya sangat mudah. Bila anda berminat, silahkan anda ikuti langkah - langkah berikut :

A. Ling anchor pada halaman yang sama :

1. Buat ANCHORNAME seperti berikut ini :

Kata ANCHORNAME-1 bisa anda ganti terserah anda, yang terpenting setiap anchorname seperti ID yang harus berbeda nama. Kemudian letakkan anchorname tersebut tepat (diatas atau sebelum) dokumen atau bagian yang akan di tuju. Sebagai contoh, anchorname saya letakkan pada bagian paling atas artikel ini.

Perhatikan penulisan berikut :

<a name="ANCHORNAME-1"></a>Membuat Link pada halaman yang sama sering disebut dengan nama Link jangkar atau Link anchor. Yang fungsi untuk menghubungkan atau ....bla... bla... bla...

2. Langkah selanjutnya, buat Link seperti berikut ini :

<a href="#ANCHORNAME-1">KEMBALI KEATAS</a>

Catatan : Tambahkan tanda "#" sebelum anchorname.

3. Silahkan anda taruh pada bagian paling bawah atau terserah kebutuhan anda.

Contoh :
Silahkan anda coba lagi klik Link dibawah ini:
KEMBALI KEATAS

B. Ling anchor pada halaman yang berbeda, dan Link mengarah pada bagian tertentu :

1. Buat ANCHORNAME seperti berikut ini :
sebagai contoh anchorname saya beri nama "caradapathostinggratis"

2. Langkah selanjutnya, buat Link seperti berikut ini :

<a href="http://www.carabuatwebgratis.com/2011/03/cara-mendapat-hosting-gratis.html#caradapathostinggratis">Cara dapat hosting gratis</a>

ULR http://www.carabuatwebgratis.com/2011/03/cara-mendapat-hosting-gratis.html adalah alamat dokumen yang dituju.
#caradapathostinggratis adalah anchorname (jangan lupa tambahkan tanda "#")
Anda bisa tambahkan kode target="_blank" agar terbuka dijendela atau halaman baru. Caranya anda bisa baca artikelnya "Cara membuat Link Terbuka di halaman Baru"

Contoh :
Silahkan anda coba klik Link dibawah ini :
Cara buat web gratis

OK.... mudah kan ???

Oh ya... (hampir lupa...)

Berikut ini adalah contoh dokumen dari "Cara buat web gratis sangat mudah" pada halaman yang sama :

1. Cara dapat domain gratis
Domain merupakan nama yang kita pakai untuk website kita, misalnya: www.carabuatwebgratis.com . Untuk mendapatkan nama domain kita harus mendaftarkan nama domain pada penyedia layanan pemilihan nama domain. Untuk mendapatkan nama domain tentu kita harus membayar sejumlah uang. Tapi jangan khawatir didunia internet semuanya serba mungkin dan bisa kita lakukan. Sebab tidak semua domain berbayar, ada juga penyedia layanan domain yang gratis seperti co.cc, apalagi seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis.
LANGKAH PERTAMA :
Cara dapat domain gratis, silahkan anda baca DISINI.
KEMBALI KEATAS

2. Cara dapat hosting gratis
Hosting adalah perusahan penyedia ruangan atau space untuk website kita. Supaya website kita bisa dikunjungi orang, maka website tersebut harus mempunyai ruangan dagang. Dan ruangan tersebut harus bisa online agar orang dari tempat manapun bisa mengunjungi website atau toko kita sepanjang ada sambungan internet. Dan untuk penggunaan hosting, saya juga akan memberikan cara yang gratis.
LANGKAH KEDUA :
Cara mendapat hosting gratis, silahkan anda baca DISINI
KEMBALI KEATAS

3. Cara seting domain gratis dihosting gratis

Setelah dapat domain gratis dan hosting gratis, langkah selanjutnya tinggal seting domain dihosting gratis.

LANGKAH KETIGA :
Cara seting domain dihosting gratis, silahkan anda baca DISINI
KEMBALI KEATAS

4. Cara dapat template gratis
Kita harus memilih bentuk tampilan dan fungsi template sesuai dengan tujuan yang sudah kita tentukan. Silahkan anda bisa lihat, ada ratusan bentuk template yang bisa anda pilih.
LANGKAH KEEMPAT :
Silahkan anda pilih dan download gratis DISINI.
KEMBALI KEATAS

5. Cara Upload Template gratis
Nah bila ketiganya sudah kita selesaikan, maka website sudah bisa kita diakses termasuk olah orang lain dari tempat manapun di muka bumi sepanjang ada sambungan internet. Selanjutnya kita bisa langsung memanfaatkannya untuk menjalankan bisnis atau yang lain sesuai kebutuhan anda.
LANGKAH KELIMA :
Cara Upload Template, silahkan anda baca DISINI
KEMBALI KEATAS

Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.

Transformasi 2D

Transformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk, ukuran dan posisi. Dengan CSS3 transformasi, kita dapat mengubah, skala, putaran, kebalikan, dan elemen peregangan. Sehingga transformasi menimbulkan efek 2D atau 3D.

Dan pada saat ini efek transformasi sudah dukung oleh beberapa browser seperti Internet Explorer 9, Firefox, Chrome, Safari, Opera. Tapi dari beberapa browser yang mendukung efek transformasi ini, memiliki cara yang berbeda pada penulisan kodenya. Berikut perbedaan yang perlu diperhatikan :

Internet Explorer 9 memerlukan awalan-ms-.
Firefox membutuhkan awalan-moz-.
Chrome dan Safari membutuhkan awalan-WebKit-.
Opera membutuhkan awalan-o-.

Sehingga bila kita menginginkan semua browser yang saya sebutkan diatas menampilkan efek transformasi yang kita buat, sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Ok, berikut saya berikan beberapa contoh metode transformasi 2D :

Translate
Dengan metode Translate, elemen bergerak dari posisi semula keposisi lain, tergantung pada parameter yang diberikan untuk posisi kiri (sumbu X) dan bagian atas (sumbu Y) :
<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}

div.Translate#geser
{
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
</style>

<div class="Translate">ini pada posisi awal</div>
<div class="Translate" id="geser">ini posisi kekanan 50px dan kebawah 10px</div>
Berikut hasilnya :

ini pada posisi awal

ini posisi kekanan 50px dan kebawah 10px

Rotate
Dengan metode rotate, elemen berputar searah jarum jam pada derajat tertentu. Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.
<style type="text/css">
div.rotate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}
div.rotate#memutar
{
margin:20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
</style>

<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat/div>
Berikut hasilnya :

ini pada posisi awal

ini posisi 30 derajat/div>

Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar. Dalam hal ini ukuran atau ketebalan border juga ikut berubah.
<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}

div.scale#kecil
{
margin:10px;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}

div.scale#besar
{
margin:60px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
</style>

<div class="scale">ini bentuk awal</div>
<div class="scale" id="kecil">ini diperkecil</div>
<div class="scale" id="besar">ini diperbesar</div>
Berikut hasilnya :

ini bentuk awal

ini diperkecil

ini diperbesar

Skew
Dengan metode condong, elemen berubah dalam sudut tertentu, tergantung pada parameter yang diberikan, untuk horizontal (sumbu X) dan vertikal (sumbu Y) :
<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#C1C7FF;
border:3px solid #aaa;
padding:10px;
}
div.posisi-awal#miring
{
margin:39px;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
</style>

<div class="posisi-awal">ini pada posisi awal</div>
<div class="posisi-awal" id="miring">ini posisi miring kesamping 20 derajat, kebawah 10 derajat</div>
Berikut hasilnya :

ini pada posisi awal

ini posisi miring kesamping 20 derajat, kebawah 10 derajat

Selamat mencoba dan Semoga bermanfaat....