Archive for 2013-04-28
Situs Penyedia Template Gratis
Situs Penyedia Template Blog Gratis sebenarnya sangat banyak, namun pada artikel ini saya tulis hanya sebagian saja, beberapa situs ini menyediakan template Blog yang beragam mulai dari yang simple sampai yang mendetail, tersedia gratis dan bisa anda download, jadi buat sobat yang ingin mengganti template blognya dengantemplate yang lain dari template standart blogger, Sobat bisa mendownloadnya di situs berikut:
- Free templates blog terbaru
- free blogger templates
- Zoom Template
- Blogtemplate4u
- BTemplates
- Free WPthemes
- Joomla2u
Tag :
TUTORIAL BLOG
Mengganti Template Blog
Cara Mengganti Template Blog bagi yang sudah lama di dunia blogging mungkin memang mudah, tetapi buat yang masih newbie seperti saya mungkin agak bingung, jadi pada tutorial kali ini saya akan berbagi tentang cara mengganti template blog. Untuk mengganti template blog, Sobat dapat menggunakan template standart yangdisediakan blogger atau Mengganti Template Melalui Menu Edit Html dengan meng-upload file template dari penyedia template.
Berikut ini cara untuk mengganti template dengan template yang telah disediakan blogger:
Berikut ini cara untuk mengganti template dengan template yang telah disediakan blogger:
- Login ke blogger Sobat. lalu klik Rancangan/Design.
- Klik menu Perancang Template/Template Designer.
- Selanjutnya akan muncul jendela perancang template blogger. Klik pada template yang ingin Sobat gunakan. sebagai contoh saya menggunakanAwesome Inc.
- Pada menu Background, Sobat dapat menentukan warna background/latar belakang dari template yang akan Sobat pakai.
- Menu Adjust widths, untuk mengatur lebar area postingan dan sidebar.
- Menu Layout, untuk menentukan tata letak template Anda.
- Terakhir menu Advanced, pada menu ini Sobat dapat menentukan Font, ukuran, warna, dan background text yang akan di gunakan untuk Page, Links, Blog Title, Blog Description, dll.
- Jika sudah sesuai dengan keinginan Anda, klik APPLY TO BLOG.
Selesai...
Tag :
TUTORIAL BLOG
Trik Mempercepat Loading Blog
Untuk Mempercepat Loading Blog ada banyak cara yang dapat dilakukan, antara lain dengan cara mengkompress kode CSS/HTML biar ukurannya jadi lebih kecil, meng-Edit Template Supaya Valid XHTML, mengkompress Image supaya lebih optimize, dan lain-lain.
Untuk kali ini saya share cara yang lain, yaitu dengan menggunakan kode script yang dicoding secara khusus untuk mempercepat loading blog. dengan menggunakan kode script ini maka browser tidak akan membaca image/gambar di blog, sehingga dapat meringankan beban server dan mempercepat loading.
Berikut tutorial penggunaan kode script untuk mempercepat loading blog :
- Masuk ke akun blogger anda
- Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
- Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
- Beri tanda centang pada Expand Template Widget.
- Cari kode </head> gunakan CTRL + F pada keyboard.
- Lalu letakkan kode berikut di atas kode </head>.<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> $(function() { $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGxPGZkPhba4QA9oQXulo_0rTGZvU3oWRnqygvkMz-YjXs4InFKey8qI1NSqHFefCiCiWOihwok92zj-kjepyC_72JQ28WHurUI5oW-0VNaWVqdN7S6BZQQ0S9aWChyphenhypheniFN4vQhAQYOkk/",threshold : 200}); }); </script> - Terakhir klik Simpan Template.
Sekarang lihat blog Sobat dan rasakan bedanya, semoga bermanfaat...
Tag :
TUTORIAL BLOG
Membuat Gambar Membesar Saat disentuh Cursor
Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.
Cara Membuat Gambar Membesar Saat disentuh Cursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
- Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); } - Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Semoga tutorial singkat ini bisa bermanfaat...
Tag :
TUTORIAL BLOG
Membuat Link Membesar Saat disentuh Kursor
Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.
Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.
Cara Membuat Link Membesar Saat disentuh Kursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode a:hover {
- Ganti kode font-size dengan ukuran yang lebih besar.
Contoh :a:hover {ganti dengan
color:#d2691e;
font-size:10px;
font-style:italic;
cursor:wait;
}a:hover {
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
} - Terakhir klik Simpan Template.
Selamat Mencoba dan Semoga Berhasil...
Tag :
TUTORIAL BLOG