Tutorial | Font Baru Dari Blog

Saya bingung harus bicara apa? Blogger benar-benar tau yang di inginkan para penggunanya. Kali ini font keren siap di gunakan untuk untuk para Blogger . Tanpa harus menggunakan font dari luar, para Blogger sudah bisa menggunakannya langsung dari Templates Designer.
Tapi maaf, ini hanya berfungsi untuk pengguna templates aka templates designer. Dan itulah alasan mengapa saya tidak menggunakan font baru ini, karena saya menggunakan templates buatan saya sendiri.
Untuk menerapkan Font baru ini di blog anda cukup mudah.

1. Anda hanya perlu menggunakan templates yang sudah di sediakan oleh blogger di templates designer.
2. Pada templates designer silahkan pilih menu Advanced untuk mengatur Font anda.



Sudah. mudah sekali ya? ya sudah sekian posting dari saya yang singkat ini, semoga bermanfaat saya akhiri Wassalam.

*Untuk Link Exchange akan saya tangani secepatnya, maaf terabaikan akibat lama tidak blogging.

Tutorial | Fungsi Scroll Pada Komentar

Posting kedua saya untuk hari ini setelah sekian lama tidak posting yaitu tentang Cara Membuat Fungsi Scroll Pada Komentar Blog. Sebuah trik sederhana dengan langkah yang sangat simple.

Langsung saja ke Step.By.Step !!!

1. Log in ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode berikut. Kode mungkin berbeda, fokuskan pencarian pada kode warna merah

#comments-block {
border-left: 1px solid #c9c9c0;
margin : 1em 0 1.5em;
line-height : 1.6em;
padding:0 0 0 13px;
}

4. Sisipkan atau masukan kode berwarna merah berikut. Kurang lebih akan jadi seperti ini

#comments-block {

overflow:auto;

height:400px; */ ganti 400px sesuai dengan tinggi yang di inignkan */

border-left: 1px solid #c9c9c0;
margin : 1em 0 1.5em;
line-height : 1.6em;
padding:0 0 0 13px;
}

5. Save Templates

Lihat hasilnya pada posting anda yang sudah memiliki komentar. Oke sekian posting dari saya, saya akhiri wassalam

CSS3 | Membuat Menu Accordion

Akhirnya saya kembali di sini membawa posting baru bertemakan CSS3 dan Accordion, yaitu tentang Cara Membuat Menu Accordion Dengan CSS3. Jika sebelum-sebelumnya saya pernah memposting tentang efek Accordion maka kali ini agak berbeda, kenapa? itu di karenakan jika yang sebelumnya menggunkan JavaScript maka kali ini hanya menggunakan CSS3 saja. Berikut ini adalah DEMO-nya. Langsung saja ke Step.By.Step !!!

1. Login ke blog anda
2. Masuk ke Deisgn > Edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode berikut sebelum kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

5. Save Templates.

Eitsss tunggu tunggu dulu. Proses belum selesai. Setelah anda mengesave templates anda, sekarang  masuk ke Page Elements

6. Sekarang tambahkan tambah gadget dengan klik Add a Gadget
7. Pilih HTML/JavaScript
8. Masukan kode berikut di dalamnya

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
</div>

8. Save

Nah sekarang baru selesai sudah main-main kita hahaha. Jangan lupa comment share and likenya ya makasih hehe

Pemalsuan Admin Pada Komentar Blog

Akhirnya bisa posting juga setelah seminggu lamanya saya menjalankan Ulangan Akhir Semester 1 hehe, sebenarnya besok senin masih sekali lagi. Nah posting kali ini saya terinspirasi setelah saya melihat sebuah blog yang Adminnya berkomentar kasar sekali, padahal blog itu tergolong blog master. Tapi ternyata setelah selidik punya selidik itu bukan Admin yang berkomentar. Walau blog itu menggunakan tampilan komentar Admin berbeda, ternyata itu tidak berpengaruh. Anda mau tau bagaimana caranya menjadi Admin blog palsu? kejadian ini terjadi di blognya Mas Doyok.

Preview

Klik saja untuk memperbesar gambar dan lihat komentarnya itu.

Pemalsuan Admin pada komentar blog dilakukan dengan cara mengisi komentar dengan Name/URL, Nama di isi dengan Nama Admin URL di isi dengan Alamat Blog Admin. Bagaimana cara mencegahnya? Mudah saja, caranya tinggal mengatur pengaturan pada komentar blog. Caranya?

1. Log in ke Blog anda
2. Pilih menu Settings/Pengaturan
3. Lalu pilih lagi menu Comments/Komentar
4. Lihat pada bagian "Who Can Comment?" lalu pilih "Registered Users" atau "Pengguna Terdaftar"
5. Save Settings

Nah dengan menggunakan cara ini orang yang berkomentar di blog anda hanyalah orang yang memiliki Account email saja dan mencegah pemalsuan komentar Admin. Terserah anda mau menggunakan cara ini atau tidak. Sekian dari saya saya ucapkan terima kasih wassalam

SEO | Optimasi Judul Posting di Blog

Masih dalam Label yang sama, yaitu SEO hahaha, sebenarnya sekilas saya sudah pernah posting ini di Cara Membuat Templates SEO Friendly, tapi itu hanya sekilas yaitu dengan mengganti tag h3 menjadi h1. Kali ini saya mencoba membahasnya lebih detail. Pertanyaan yang mungkin muncul adalah kenapa judul Post harus di optimasi? bagaimana caranya? oke akan saya jelaskan.

Search Engine sangat menyukai tag h1, h2, dll (begitu katanya), tapi tidak h3. Nah di Blogger ini sudah menjadi dafult bahwa judul post memiliki tag h3. Itulah kenapa kita haru mengoptimasikanya. Cara mengoptimasinya cukup mudah.

Masuk ke Blogger > Design > Edit HTML > Centang Expand Widget Templates

• Sekarang cari kode CSS berikut (Mungkin isi berbeda, fokuskan pencarian pada yang berwarna merah) dan ganti yang berwarna merah h3 menjadi h1

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

• Masih belum selesai, sekarang cari lagi koe yang berwarna merah h3 menjadi h1

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

• Sekarang Save Templates

Saya rasa sekian posting saya ini. Saya mengharapkan komentar dari anda untuk kritik dan saran, juga menerima ucapan lainya. Saya akhiri terima kasih Wassalam

SEO | Optimasi Image di Blog

Lagi lagi dan lagi. Memang jika kita membahas tantang SEO tidak akan ada habisnya, sebab setiap harinya selalu saja ada tips dan trik baru tentang SEO. Kali ini saya akan membahas tentang tips dan trik SEO yang berhubungan dengan gambar. Iyap, cara mengoptimasi Image pada blog. Kenapa images harus di optimasi? iya itu agar blog kitapun teroptimasi dengan baik, sebab semakin bagus kualitas blog kita makan semakin baik jua reputasi blog kita di Search Engine. Lalu bagimana cara mengoptimasi image tersebut? mudah saja, berikut tips dan trik seputar SEO untuk optimasi Images :

1. Memberi nama gambar sebelum di Upload.
Sesuaikan nama gambar yang akan anda upload sesuai dengan kebutuhan. Misal gambar doraemon, berarti sebelum di Upload beri nama gambar doraemon anda doraemon. Karena dengan ini ketika orang-orang yang sedang browsing tentang doraemon terutama pada bagian gambar maka gambar kita jugaakan termasuk ke dalamnya dan jika gambar kita masuk maka otomatis blog kita tempat gabar itupun akan masuk, walaupun ini tergantu rateing anda di Searh Engine.

2. Jangan memaksa ukuran gambar.
Jangan memaksa ukuran gambar di sini maksudnya adalah jika anda memiliki gambar yang berukuran lebar x tinggi 500px x 400px (contoh) jangan di paksa menjadi 400px x 300px. Hal ini dapat memperlambat loading gambar itu. Jadi biarlah gambar apa adanya (original size)

3. Memberi tag Alt.
Ini dia yang paling penting, pertama, dan terutama jika berhubungan dengan optimasi images. Alt sendiri bisa di artikan sebagai deskripsi gambar anda, dan jika seandainya gambar anda tidak terload (tidak muncul) maka Alt inilah yang akan muncul. Hal lainya adalah jika anda menggunakan gambar di awal paragraf posting anda, jika anda menggunakan Alt yang cocok maka posting anda akan terindeks oleh Search Engine sesuai Alt anda. Untuk peletakan Alt bagi yang tidak tau

<img src='gambar anda' alt='alt / deskripsi gambar anda'/>

Hanya ini yang bisa saya sampaikan, atas kekurangannya saya mohon maaf di mohon komentarnya sebagi kritik dan saran atau ucapan lain yang ingin anda sampaikan terimakasih wassalam.