popular artikel: Blogspot Tutorial

Showing posts with label Blogspot Tutorial. Show all posts

Friday, February 10, 2012

Kangen Ya Sama Video Tutorial Saya?

Setelah beberapa bulan absen ngeblog. Sekarang saya sudah mempunyai banyak ilmu yang bisa di share ke para sahabat blogger. Sebenernya sih saya mau berbagi banyak terutama untuk membuat template wordpress dan blogspot.

Saya berencana untuk membuat sebuah situs membersite. Sudah saya siapkan nama domainnya yaitu kuliahblog.com. Nah, Cuma saya ada kendala terutama untuk masalah dana. Ayuk kita bangun bareng2 yuk. Temen2 kan mungkin ada yang punya sedikit uangnya. Saya berharap donasi dari para sahabat untuk membangun situs ini. Rencananya sih saya ingin membuatnya gratis atau sedikit fee untuk sahabat.

Yang mau berdonasi silahkan:

Wiryo Saputra BCA 5271-0197-86
SMS:08990608878

Sehabis donasi jangan lupa kirimkan sms kamu ya. Cos saya akan memberikan kontent exclusive buat yang donasi. Jumlah donasi diharapkan 50 ribu rupiah keatas. 30 Donasi pertama akan mendapatkan konsultasi exclusive. Dan akan di didik untuk menjadi desainer blog sampai benar2 bisa.

Wednesday, July 6, 2011

Cara Membuat Template Blogspot: Pasang Menu Di Template Blogspot

Halo sobat,

Sorry nih agak mundur penjelasannya. Karena saya harus mengolah 5 blog sekaligus. Pada tutorial kali ini saya akan membahas tentang pasang menu di template blogspot. Kita kan kemarin sudah membuat menunya bukan? Kalau ada temen-temen yang ketinggalan, temen-temen bisa lihat disini tutorialnya:http://intuts.blogspot.com/2011/06/cara-membuat-template-blogspot-membuat.html

Setelah udah tau cara membuat menunya. Saya ingin teman-teman memasukannya kedalam blogspot. Tapi sebelum itu saya ingin teman-teman memakai template minima sebagai dasar pembuatan template kita. Bagaimana caranya.

1. Login Ke Blogger.com
2. Pada rancangan pilih Edit HTML.
3. Scroll Kebawah dan lihat pada Template Tataletak(Diluncurkan 2006).
4. Klik dan Pilih Template Minima dan Simpan Template.

Jika teman-teman melakukannya dengan benar, maka akan muncul gambar seperti dibawah ini:

Setelah teman-teman rasa sudah benar. Klik Edit HTML lagi. Lalu tambahkan kode CSS yang sudah kita buat kemarin di atas kode:
/* Header
-----------------------------------------------
*/
Dan hapus kode #menu yang terhubung dengan navigasi agar tidak terjadi pemanggilan ganda. Hasil akhir codenya adalah sebagai berikut.

#menu {
   height: 50px;
   width: auto;
   background-color: #242424;
}
#navigasi {
   float: right;
   height: 50px;
   width: 600px;
}
#navigasi a {
   display: block;
   float: left;
   margin: 0px;
   padding: 15px;
   text-decoration: none;
   color: #FFFFFF;
   font-size: 16px;
}
#navigasi a:hover {
   color: #999999;
   background-color: #333333;
}

Lalu cari kode <body>. Letakan kode pemanggilnya di bawah <body>.

<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="image/logo.png" alt="ilove" border="0" /></a></div>

Ganti alamat logo dengan alamat logo yang sudah di upload. Jadi hasil akhir adalah sebagai berikut.

<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9icYxLJas_Xl3hwE1c2qqAFFT_qfxcIVsLbf9QkkA6Io4wtt0UOD2V3fbqfkMNsOMKmOyxIW-4GuLgjZ3EZ3e0xTxlR6ByeeFi-yP5e17rkV8c84zMk71GUszG136X7WIjgM6Z31O9E/s1600/logo.png" alt="ilove" border="0" /></a></div>

Sekarang Save dan Lihat hasilnya.

Lho kok gambarnya gak dipinggir? Besok akan kita kulik gambar dan menunya. Jadi tetep berkunjung ke blog ini ya. Jangan lupa langganan RSSnya biar gak pernah ketinggalan info.

Tuesday, June 21, 2011

Cara Membuat Template Blogspot: Layout CSS part2

Halo sobat,

Mohon maaf nih baru posting lagi tentang membuat template blogspotnya. Pada posting kali ini saya akan membuat sidebar atas dari CSS, Sehingga tampilannya akan seperti dibawah ini:

Pada tutorial kali ini saya tidak membuat video tutorialnya karena banyak teman blogger newbie yang internetnya agak lemot jadi tidak bisa melihat tutorialnya. Sebelumnya kita telah membuat ini pada tutorial : Cara Membuat Template Blogspot: Membuat Menu(Video)

Untuk yang kali ini kita hanya menambahkan sidebar atas. Ikutin langkah-langkahnya ya.

1. Buka Dreamweaver Anda.
2. Buatlah sebuah id tags baru dengan nama outer-wrapper seperti dibawah ini:

Mengapa saya membuat outer wrapper? Biar terlihat lebih rapih pada saat dibuka nantinya.
3. Buat New CSS Rule dengan nama outer-wrapper seperti dibawah ini:

4. Ikuti settingan seperti di bawah ini:

Mengapa pada height saya tulis auto? karena saya ingin heightnya akan terus bertambah ketika tinggi yang ada di dalam outer-wrapper bertambah.

Membuat Sidebar

1. Buat id tags sidebar-top. Caranya sama dengan di atas.
2. Lalu buat New CSS rule dengan nama #sidebar-top. Cara sama dengan di atas.
3. Ikuti settingan berikut ini:

Buat border dengan menyetting seperti ini:

Buat Backgroundnya dengan menyetting seperti ini:

Membuat sidebar1, sidebar2 dan sidebar3

1. Buat id tags sidebar1. Caranya sama dengan di atas.
2. Lalu buat New CSS rule dengan nama #sidebar1. Cara sama dengan di atas.
Ikuti setting dibawah ini untuk Type Mengubah warna font:

Ikuti setting dibawah ini untuk memberikan border:

Ikuti setting ini untuk membuat box dengan ukuran sidebar yang sesuai:

Ulangi langkah diatas hingga anda selesai membuat 3 sidebar. Jika ada pertanyaan silahkan tinggalkan komentar anda. Selamat mencoba ya sobat.

Jangan lupa berbagi dengan menempelkan sidebar peduli blogger indonesia di blog anda yang ada pada posting:

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!

Sunday, June 19, 2011

E-Book Cara Membuat Template Blogspot Dibagikan Gratis.

Halo sobat,

Di pagi hari saatnya berbagi, untuk pagi yang cerah ini saya ingin berbagi e-book dari amanda fazani. Walaupun buku ini berbahasa inggris tapi buku ini lengkap pembahasannya yang disertai gambar sehingga mudah di pahami. Mau tau bukunya seperti apa? Cekidot.

Sekarang bagaimana cara mendapatkannya? Gampang banget. Anda cukup pasang aja banner yang ada di posting :

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!

Udah liat bannernya, di pasang deh. Saya gak mau cuma anda yang bisa sendiri, teman-teman blogger juga harus pada tau supaya mereka bisa membuat template mereka masing-masing.
Kalo udah pasang banner gimana?
Tinggalkan email di kotak komentar dan saya akan mengirimkan link downloadnya untuk anda.

Update: Sekarang anda bisa langsung mendownloadnya klik ini.

Cara Membuat Template Blogspot: Membuat Menu(Video)

Halo sobat,

Pasti udah gak pada sabaran nih buat lihat tutorial yang selanjutnya. Pada posting kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Membuat Menu". Kalau bagi blogger professional membuat menu hanya hitungan menit. Tapi kalau newbie belum tentu tau. Oleh sebab itu saya membuat tutorial ini.

Tutorial-tutorial saya nantinya akan menjadikan anda mahir dalam membuat template blogspot. Jadi jangan lupa langganan artikel saya. Biar gak ada yang ketinggalan. Langsung aja deh kita lihat tutorialnya di bawah ini.

Untuk Resourcenya Silahkan Copy Code Dibawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="image/logo.png" alt="ilove" border="0" /></a></div>

</body>
</html>

Untuk resource gambarnya tinggal download aja logo ini:

Nah bagi temen-temen yang ngerasa tutorial ini sangat berguna, Ajak teman-temanmu untuk datang ke blog ini dengan memasang banner yang ada di posting :

Pasang Banner Ini Jika Anda Peduli Blogger Indonesia.Wajib Dibaca!
Jangan lupa tinggalkan komentarnya ya.

Saturday, June 18, 2011

Cara Membuat Template Blogspot: Layout CSS Part1

Halo sobat,

Sorry nih hari ini agak maleman postingnya, pada tutorial kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Layout CSS Part1". Jika anda ingin membuat template blogspot pasti yang anda butuhkan pertama kali adalah layout css.

Nah saya udah buat video tutorialnya untuk anda. Isi dari video tutorial ini adalah untuk membuat outerwrapper, header, sidebar, menu dan posting.
Video tutorialnya adalah sebagai berikut:

Lanjutannya:

Untuk sourcenya anda bisa mengambilnya di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="outer-wrapper">
<div id="header">
    <div id="logo">Content for id "logo" Goes Here</div>
    <div id="banner">Content for id "banner" Goes Here</div>
</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="content-wrapper">
    <div id="posting">Content for id "posting" Goes Here</div>
    <div id="sidebar">Content for id "sidebar" Goes Here</div>
</div>
</div>
</body>
</html>

Semoga tutorial yang saya berikan bermanfaat, Besok kita buat sidebar bawah dan juga menu. Jangan sampai ketinggalan ya.

Thursday, June 16, 2011

Cara Membuat Template Blogspot: Dasar Dasar CSS.(Video)

Halo sobat,

Seperti yang telah saya janjikan, hari ini saya akan merelease postbook "Cara Membuat Template Blogspot". Sebelum melangkah jauh dalam pembuatan template blogspot. Anda wajib mengerti tentang CSS. Oleh sebab itu pada pembahasan yang pertama dalam postbook saya, Saya akan membahas tentang "Dasar Dasar CSS".

Tanpa ada CSS anda tidak bisa membuat template dengan desain yang rapih dan juga cepat di akses. Langsung saja ke tutorial.

Dalam CSS ada dua tag yang digunakan dalam membangun template css yaitu ID Tags dan Class Tags. Apa bedanya? Saya akan membahasnya dibawah ini:

Id Tags CSS

Id tags pada CSS biasanya menggunakan tanda "#" pada awalan selector. Contohnya adalah seperti dibawah ini:

#contohid{}

Untuk pemanggilan selector tersebut biasanya menggunakan id="selector" seperti dibawah ini:

<div id="contohid"></div>

Class Tags CSS

Id tags pada CSS biasanya menggunakan tanda "." pada awalan selector. Biasanya penggunaan class ini pada selector yang sudah di kelompokan. Kalau pada blogspot kita akan menemui banyak tags jenis ini. Contohnya adalah seperti dibawah ini:

.contohclass{}

Untuk pemanggilan selector tersebut biasanya menggunakan class="selector" seperti dibawah ini:

<div class="contohclass"></div>

Sekarang saya lanjutkan ke Command CSS. Apa itu?

Command Css

Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:

Untuk mempermudah anda dalam belajar, save gambar tersebut ke komputer anda.

Untuk penggunaan Command CSS saya akan memberikan simulasinya seperti dibawah ini:

Copy gambar tersebut supaya anda bisa melihat simulasinya.

Ini video tutorialnya biar anda lebih jelas:

Source Tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style></head> <body> <p>Ini paragraf.</p> </body> </html>

Supaya anda lebih jelas lagi tentang penggunaan css, Datang lagi besok pada postingan tentang "Membuat Layout CSS Untuk Blogspot", ada video tutorialnya juga lho. Jangan lupa tinggalkan komentarnya ya.

Cara Menghias Form RSS Feedburner Anda.

Halo sobat,

Sorry banget nih kemaren gak posting, karena saya harus mendatangi wisuda pacar saya. Pada posting kali ini saya akan sharing tentang "Cara Menghias Form RSS Feedburner Anda". Banyak nih temen-temen blogger saya yang ingin tau bagaimana cara menghias formulir langganan rss supaya menarik para pembaca untuk mendaftar di feed mereka.

Saya akan membuat formulir feedburner seperti dibawah ini tapi dengan versi yang berbeda. Lihat contohnya dibawah ini:

Untuk membuat kotak langganan seperti diatas, langkah pertama yang harus anda lakukan adalah

1. Login ke Blogger.com
2. Pilih Rancangan>>Elemen Halaman.
3. Pilih Tambah Gadget pada sidebar.
4. Copy paste code dibawah ini:

<div id="langganan"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!</p> <p>Masukan Email Anda:</p> <p><input id="alamat" type="text" name="email"/></p><input type="hidden" value="intutsblogspot" name="uri"/><input type="hidden" name="loc" value="en_US"/><input id="tombol" type="submit" value=" " /></form></div>

Ganti kata yang dihuruf tebal merah dengan id feedburner anda. Setelah anda insert dan anda save maka hasilnya akan seperti ini:

Saya sudah membuat 3 Id tags CSS pada html disana yaitu: langganan, alamat dan tombol. Sekarang saya ingin anda menghiasnya dengan CSS dengan memasukan kode dibawah ini tepat diatas kode yang saya berikan tadi:

<style type="text/css"> #langganan{} #alamat{} #tombol{} </style>

Fungsi dari ketiga kode diatas adalah untuk memanggil id yang telah saya tuliskan pada kode HTML. Sekarang saya akan menjelaskannya satu persatu. Jika anda lihat dengan detail, kode
<div id="langganan"></div>
berada diluar form yang menandakan bahwa besar area untuk form anda bisa ditentukan dengan memberikan kode tambahan pada id="langganan".

Saya akan menambahkan kode width untuk menyetting lebar. Dan kode height untuk menyetting tinggi. Lihat kodenya seperti dibawah ini:

#langganan{width:350px;height:150px;}

Sekarang tampilannya akan menjadi seperti dibawah ini:

Sekarang saya akan menambahkan border dan background pada tag langganan.

#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;}

Maka hasil tampilannya akan seperti dibawah ini:

Sekarang saya mau tambahkan padding dan font-size supaya rapih:

#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;padding:5px;font-size:12px;}

Hasilnya sekarang akan seperti ini:

Nah udah jadi nih sebagian, Langkah selanjutnya adalah mengedit kotak email dan juga tombolnya. Tambahkan float dan juga position.

#alamat{float:left;position:relative;} #tombol{float:left;position:relative;}

Perubahannya akan seperti ini:

Sekarang saya ingin menambahkan background pada tombol seperti ini:

Maka saya akan menyetting tombol seperti dibawah ini:

#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}

Tampilannya akan seperti dibawah ini:

Tombol sekarang sudah kelar, Tinggal rubah textnya seperti dibawah ini untuk menyesuaikan dengan tombol:

#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}

Hasil akhirnya akan seperti dibawah ini:

Kode hasil akhirnya adalah seperti dibawah ini:

<style type="text/css"> #langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;text-align:left;padding:10px;font-size:12px;} #alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;} #tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYUgCUhWDtQDcW2W3ejW8rN0RNb1b6QbU8LNitqqurXH-i_x-BWwvpPrEZO74HZ6vkE1Wl7BifbZJygnDoQN5xbZC7qHb1A0K7O0tXgLCRIRb-JD2OvAB6I1OroVoga0vpG1VZfzuqGU/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;} </style> <div id="langganan"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda! Masukan Email Anda: <input id="alamat" name="email" type="text" /> <input name="uri" type="hidden" value="intutsblogspot" /><input name="loc" type="hidden" value="en_US" /><input id="tombol" type="submit" value=" " /></form> </div>

Sekarang udah kelar deh. Untuk yang lainnya silahkan berkreasi sendiri ya. Karena kalau saya posting semua akan sangat panjang. Jangan lupa tinggalkan komentarnya.

catatan: Jika perletakan tombol kurang sempurnya, anda bisa menyempurnakannya dengan menggunakan top(posisi atas),bottom(posisi bawah),left(kiri), dan right(kanan).

Monday, June 13, 2011

Persiapan Untuk Membuat Template Blogspot.

Halo Sobat!

Capek nih abis pulang kuliah tapi masih semangat buat posting. Hari ini saya mau berbagi tentang "Persiapan Sebelum Membuat Template Blogspot". Sebelum membuat template blogspot yang akan saya share pada tanggal 17 Juni 2011 sampai dengan selesai. Saya mau kasih tau dulu kepada anda bahwa ada yang perlu dipersiapkan untuk membuat template blogspot.

Apa aja sih?

1. Notepad ++/Dreamweaver.

Nah software ini nanti sangat diperlukan untuk mengkode blogspot anda, terutama untuk CSS dan HTML. Sehingga anda bisa lebih mudah membuat kode yang rapih untuk blogspot anda. Saya sangat menyarankan kepada anda untuk menggunakan Dreamweaver, mengapa? Karena banyak fitur yang dapat mempermudah kita dalam membuat template hanya dengan klikan mouse.

2. Firebug.

Firebug ini nanti buat memastikan apakah template kita ini sesuai atau tidak setelah dijalankan di browser. Kalau tidak kita bisa mengeditnya dengan tool addon dari mozilla ini.

3. Coreldraw/Photoshop.

Nah untuk software yang satu ini anda wajib punya, kenapa? karena dengan software tersebut kita bisa mendesain blog kita lebih bagus dan hidup. Kalau bisa harus ada dua-duanya, karena nanti saya akan mengajarkan anda membuat logo dengan Coreldraw, sehingga terlihat lebih professional.

4. Paham Sedikit Bahasa CSS, Javascript dan HTML.

Untuk masalah ini kalau banyak yang belum mengerti saya akan berikan tutorialnya step by step sehingga anda bisa lebih mengerti.

Nah bagi anda yang belum mempersiapkan point-point di atas mulai dari sekarang di siapin deh. Cari di mbah Google apa aja yang dibutuhkan. Jangan lupa tinggalin komentarnya ya jangan cuma baca doank.

Sunday, June 12, 2011

PostBook: Cara Membuat Template Blogspot.

Halo sobat,

Sorry nih, postingnya agak maleman karena saya harus belajar dulu buat ujian. Mungkin ini posting yang nantinya akan dicari-cari oleh teman blogger. Kenapa? Karena saya membuat "PostBook: Cara Membuat Template Blogspot". Mengapa saya namakan postbook, karena buku yang saya sajikan nanti kepada teman-teman adalah berupa posting. Penasaran sama PostBooknya, Lihat tampilan Cover depannya ya.

Mengapa saya membuat postbook?

Kalau membuat e-book pengalaman saya setelah anda baca maka e-book tersebut pasti akan di delete. Kalau bentuk postbook, pasti ilmu ini akan terpakai oleh blogger-blogger newbie yang pada bermunculan.

Apakah postbook ini gratis?

Postbook ini tidak diperjual-belikan alias gratis, saya memberikannya melalui posting untuk anda. Yang paling penting adalah, anda cukup langganan feed kami dengan memasukan email anda pada formulir langganan yang ada di sidebar kanan.

Apa yang anda dapatkan?

Walaupun ini gratis tapi bukan sembarang gratis, saya akan memberikan full tutorial step by step dengan gambar dan juga video. Nah bagi anda yang mempunyai reseller hosting/server hosting yang mau menyumbangkan spacenya untuk gambar-gambar untuk memperlancar penerbitan postbook ini silahkan hubungi saya. Karena saya akan menampilkan logo hosting anda sebagai sponsor blog ini. Lumayan kan dapat traffic nantinya dari blog ini.

Kapan postbook ini diluncurkan?

Saya akan memposting postbook ini mulai tanggal 17 Juni 2011. Jadi jangan ada yang ketinggalan ya untuk belajar membuat template blogspot dari blog ini.

Nah bagi temen-temen blogger yang merasa informasi ini penting untuk disebarkan, sebarkan deh biar semuanya pada bisa buat template blogspotnya masing-masing bukan cuma download atau pake template buatan orang lain.

Friday, June 10, 2011

Cara Merotasi Text Dan Gambar Dengan CSS.

Halo sobat,

Pada hari ini saya akan sharing tentang "Merotasi Text Dan Gambar Dengan CSS", mungkin ketika datang ke blog saya anda akan bertanya-tanya, itu gambar dibuat miring atau dimiringi dengan javascript. Sebenarnya gambar tersebut murni dari editan CSS.

Bagaimana sih caranya? Ikutin saya ya:
Saya buat sebuah kode css dengan id tags rotasi seperti dibawah ini:

#rotasi{
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}

Setelah itu saya coba panggil css tersebut:

<div id="rotasi">Percobaan Rotasi 35 Derajat</div>

Nah kalau anda sudah pernah lihat cara membuat autoreadmore dengan thumbnail, anda bisa memodifikasi tampilan gambar tersebut dengan merubah cssnya seperti dibawah ini:

.thumb img {
float: left;
margin: 0 10px 10px 0;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}

Catatan: Tutorial ini akan terlihat hasilnya jika di lihat dari firefox. Untuk IE silahkan tambahkan kode.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Angka 0 untuk 0 derajat, 1 untuk 90 derajat, 2 untuk 180 derajat, 3 untuk 270 derajat.

Sekarang lihat hasilnya di blog anda, semoga bermanfaat.

Cara Pasang Animasi Text Blogroll Dengan Javascript.(Bukan Marquee)

Halo Sobat,

Mungkin kebanyakan dari anda bingung mau pasang blogroll marquee tapi bikin website lambat, nah saya punya solusi nih buat anda yang mau pasang blogroll yang gak boros tempat dan bisa mempercantik tampilan website anda.

Saya menamainya Animasi Text Blogroll. Terus tampilannya bagaimana? Jika anda melihat kotak Follow Me pada blog saya, dibawah ada kata teman. Nah tampilannya akan seperti itu. Lalu caranya gimana?

Gampang kok. Ikutin ya.

1. Masuk ke Blogger.com.

2. Terus Klik Design>>Page Element.

3. Klik Add a Gadget Pilih HTML/Javascript.

Masukin deh kode ini:

<script type="text/javascript"> var imgsa = new Array("Intuts","Habil","Kompas","Cayun"); var lnksa = new Array("http://intuts.blogspot.com","http://nsxcrew.blogspot.com/","http://kompas.com","http://tanpa-isi.blogspot.com/"); var alta = new Array(); var currentAda = 0; var imgCta = 4; function cyclea() { if (currentAda == imgCta) { currentAda = 0; } document.getElementById('adLinka').innerHTML = imgsa[currentAda]; document.getElementById('adLinka').href=lnksa[currentAda] currentAda++; } window.setInterval("cyclea()",10000); </script> Teman : <a style="font-size:12px;color:#003366;font-family:verdana;" href="http://intuts.blogspot.com" id="adLinka" target="_new">Intuts</a>

Lihat kata var imgsa itu bisa anda ganti dengan nama teman blogger anda, sedangkan var lnksa itu untuk link teman anda. Saya beri contoh seperti ini.

var imgsa = new Array("sobat1","sobat2","Sobat3","Sobat4"); var lnksa = new Array("http://sobat1.blogspot.com","http://sobat2.blogspot.com/","http://sobat3.com","http://sobat4.blogspot.com/");

Pada kata:

var imgCta = 4;

Sesuaikan dengan link yang ingin anda tambahkan. Kalau ada 4 tulis 4 kalau ada 5 tulis 5.

Sesuaikan kecepatan tampilan dengan menyetting window.setInterval("cyclea()",10000);

Nah sekarang udah tau kan, Jika di copas jangan lupa tampilin sumbernya ya. Hargai apa yang sudah saya buat dengan menampilkan sumbernya.

Thursday, June 9, 2011

Auto Read More Dengan Thumbnail Baru(Tanpa Javascript)

Halo sobat,

Membuat blog dengan Auto Read More pastinya lebih asyik dibandingkan dengan mengklik jumplink setiap kali memasukan post. Tutorial yang saya buat mungkin berbeda dengan yang diberikan para master lain. Karena kebanyakan para master menggunakan javascript.

Lho! emangnya kenapa kalau pakai javascript? Ada beberapa kelemahan.

1. Memperberat Loading Blog.

2. Jika browser tidak mendukung javascript, posting akan berantakan jika di akses.

Untuk menangani masalah itu, saya akhirnya menemukan cara untuk membuat Auto Read More Tanpa Javascript. Ikuti ya caranya:

1. Login Ke Blogger.com.

2. Klik Rancangan>> Edit HTML>> Expand Template Widget.

3. Cari kode seperti dibawah ini:

<data:post.body />

4. Ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'> <br/> <data:post.body/> <b:else/><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> <data:post.snippet/> <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if></b:if>

5. Simpan Template.

Biar bagus tampilannya, tambahin deh kode CSS seperti di bawah ini:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Taruh sebelum kode:

</b:skin>

Source: http://www.bloggerbuster.com(Jika anda melihat di sumber asli pada halaman static anda juga akan ada readmore. Kode diatas sudah saya modifikasi dari sumber aslinya. sehingga tidak akan ada readmore pada halaman statis anda)

Selesai deh, semoga bisa menambah gaya blogspotmu, Tinggalin komentar donk kalau tutorial ini berguna.