Sebagai bahan modifikasi blog di blogger baru, kali ini akan kita pelajari bersama cara membuat sebuah penampilan berbeda pada judul atau nama blog (Blog Title) dengan memanfaatkan sebuah background gambar (background image) dan beberapa efek seperti misalnya opacity effect (efek transparansi), hover effects, box shadow, text shadow, dan rounded corners. Kelebihan penggunaan background image pada sebuah blog terletak pada kemampuannya untuk menciptakan sebuah tampilan dinamis dengan berbagai variasi pewarnaan, pengaturan posisi bacground serta dimungkinkanya penggunaan sebuah gambar animasi yang membuat blog semakin terlihat atraktif.
Dari kode css yang tersertakan nanti, silahkan sampeyan bisa lakukan pengurangan atau mungkin bahkan penambahan kode supaya bentuk header dari desain yang akan kita buat ini mampu memberikan nilai tambah terhadap tampilan blog. Kode CSS yang akan kita pergunakan untuk merubah penampilan header blog adalah seperti di bawah ini :
Membagi kolom header menjadi beberapa bagian memungkinkan kita menempatkan berbagai widget baru dalam berbagai bentuk dalam header yang menyatu dengan bagian blog title dan deskripsi blog. Mungkin saja sampeyan akan memansang adsense (iklan), slide show, video, image atau bisa saja beberapa teks. Jika penambahan elemen baru ini selesai, semua fungsi penambahan widget dapat dilakukan melalui "Dasboard - Page Elements - Add Gadget".
Tapi apapun juga, dibalik beberapa keluhan di atas, kalau dihitung-hitung, ada untungnya juga bagi blog yang mengambil segmen posting Tutorial dan Panduan BloGGeR BlogSPOT. Apa sebabnya, coba? He ... he ... Jadi punya bahan posting baru, khan?! Repotnya ..., yang kemarin dulupun belum kelar, sekarang harus mulai mengarahkan ke sasaran baru yang tentunya harus kembali menguras kemampuan otak yang sudah mendekati pikun. Ya ada senangnya ... ya ada posingnya juga. Ha ya ...., susah, khan?! yah ..., seperti inilah manusia. Selalu pandai mengeluh dan jarang bersyukur. Lebih parah lagi, begitu udah enak .., lupalah dia sama asal muasal apalagi tetangga dan saudara.
Blog tanpa sebuah background yang kita ambilkan dari sebuah gambar atau image (background-image) sebenarnya nggak masalah juga, tapi sialnya ..., penggunaan background image ini tidak membuat blog semakin jelek tapi justru semakin membuat penampilan blog tambah manis saja. Jadinya ..., apapun juga, untuk membuat wajah blog sampeyan supaya terlihat lebih menarik, bersahabat dan penuh senyuman ramah, tidak boleh tidak sebuah background gambar harus dipergunakan. Nggak ada ruginya, kok. Secuil gambar dengan beban entengpun mampu merubah tampilan kepala blog (header blog). Mungkin sampeyan bisa membayangkan wajah (header) orang yang bangun tidur dengan mata yang masih belum tersiram air (ngeri, ya?! Biasanya di matanya itu, lho. Ada sisa ampas tahu yang mengkilap klo terkena sinar lampu! He ... he ...), sementara terlihat juga di samping kanan atau kiri bibir ngowohnya juga masih ada seleret lukisan berwarna putih kecoklat-coklatan yang terlihat mulai mengering. Ha .... ha .... Seperti itulah wajah blog kalau sama sekali belum tersentuh modifikasi. Wagu tur ora mboys kata orang! He .... he ...
Terbatasnya jenis font yang disediakan blogspot menjadi salah satu titik penting modifikasi dengan cara mengoptimalkan pemanfaatan jenis-jenis font yang tersedia dan mampu diserap blog. Kekayaan jenis font yang dipadukan dengan berbagai efek yang tercipta melalui kode css3 diharapkan semakin memperkaya bentuk penampilan header blog. Setelah di blog ini kita sediakan berbagai bentuk font yang bisa dimanfaatkan untuk menciptakan bentuk gaya teks baru, maka kini tinggal kita bedah cara menggunakannya pada template BloGGeR Baru.
Cara Merubah dan Mengganti Jenis Font pada Judul Blog atau Title Blog untuk Menciptakan Style dan Gaya Tampilan Baru dan Berbeda di BloGGer Baru (New BloGGer Template)
- Login to BloGGer (login ke BloGGer)
- Dasboard (Dasbor) : KLIK link Editing atau Rancangan.
- Design (Rancangan) : KLIK link Edit HTMl.
- Back Up Template (Amankan Template) : KLIK link Download Full Template atau Download Template Lengkap, kemudian lanjutkan dengan menyimpan file template sampeyan di folder PC.
- Find CSS Code (Cari kode CSS) : Cari kode CSS berikut :
Meskipun kalau kita lihat secara utuh, sebenarnya template ini masih perlu banyak perbaikan di sana-sini, tetapi apa boleh buat karena ternyata memang sudah di mulai menjadi sebuah pilihan wajib bagi para blogger. Beberapa bagian yang menjadi sedikit permasalahan adalah loading Posting Mode Edit HTML yang terasa begitu lama, beberapa kode html atau CSS yang sudah disertakan tetapi belum difungsikan, pemakaian background Image dengan ukuran Super Besar dan bahkan ada yang mempunyai beban hingga 247,06 KB (252.988 bytes) pada salah satu background image di Template Awesome Inc (akan memperberat loading blog!) serta beberapa hal lain.
Sebagai langkah awal Panduan dan Tutorial Modifikasi blog BloGGer Baru, kita akan sentuh permasalahan yang terjadi pada penggunaan background image. Panduan ini hanya akan mengupas tentang bagaimana cara merubah dan mengganti background image tersebut sebagai upaya untuk mendapatkan sebuah tampilan maksimal pada background dengan cara memperkecil atau mengganti secara penuh dengan background image baru dengan cara membuat sebuah background image sendiri. Dengan cara ini tentunya akan banyak sekali pilihan bagi sobat-sobat blogger untuk menampilkan background yang paling tepat bagi blog.
Oya ..., perlu aku sampaikan ke sobat blogger semua, saat ini aku juga tengah
Terus terang saja ..., bingung juga aku ketika mau menuliskan judul untuk posting ini. Hayo ..., coba seandainya sampeyan yang posting mo di kasih judul apa? Ho yo .... apa coba? Lha ..., bingung to?! Lho ..., kok malah komat-kamit! Emang ada hantu lewat, ya? Ha .... ha ... rasain, tuh! Biar sama-sama bingungnya! Dah ... sambil mikir judulnya mo di kasih kalimat seperti apa, silahkan sampeyan sambil lihat barangnya. Lihat yang cermat, tuh, pantat si bocah jorok yang sukanya membeledingkan pantat!
Untuk membuat model huruf depan dengan tampilan lebih besar dengan background tertentu, kita hanya perlukan sebuah syntax yang terdiri dari beberapa kode CSS. Penggunaanya tergantung selera dan berbagai bentuk tambahan kode CSS seperti misalnya efek kedip (blink sffects) dan efek bayangan teks (text-shadow), efek transparansi atau efek blur (opacity effects) dan efek background lengkung (rounded corners) bisa dijadikan pelengkap untuk membuat tampilannya semakin "nganeh-anehi". Ho ... ho ... super komplit toh, jadinya. Sampeyan silahkan lakukan modifikasi dengan menambah atau mengurangi kode CSS yang nanti aku sertakan. Misalnya background image-nya mau diganti photo tetangga atau photo simbah juga boleh. Mau dihilangkan juga boleh. Mau diperbesar hurufnya juga bisa. Udah, pokoknya terserah sampeyan mo ditampilkan seperti apa. Yang penting blog tambah keren dan punya tampilan berbeda. Oye ...?!
Cara Memotong Gambar Dalam Bentuk Lingkaran/Bulat/elips :
- Adobe PhotoSHOP : Buka Adobe PhotoSHOP.
- Ambil Gambar : KLIK "File di ujung kiri-atas. Lanjutkan KLIK "Open". Pilih gambar dari folder PC dengan ukuran sedang (lebar atau tinggi berkisar 100px s/d 300px)
- Rubah pemotong : Setelah tool pemotong yang sebelumnya digunakan berbentuk segi-empat ("Rectangular Marquee tool"), maka kita akan rubah menjadi pemotong elips dengan cara KLIK Kanan pada "tool seperti terlihat di samping. Selanjutnya akan terlihat 4 buah tools. KLIK Kiri Mouse pada tool yang berbentuk elips "Eliptical Marquee tool (M)". Setelah tool tersebut di KLIK maka gambar yang terlihat di posisi awal menjadi berbentuk elips.
KLIK Gambar untuk melihat detail posisi setiap tool yang digunakan
.
Bagaimana mengatasi permasalahan Judul Widget ini? Akankan sampeyan juga akan mendiamkan saja dan mau untuk menampilkan setiap judul widget sebagai pemenuh halaman blog semata? He .... he .... kalau mau, ya, syukur ...! Biar tambah ramai blognya. Ramai Judul, he .... he ... Biar orang yang buka pada ketawa, heh ... heh ... sambil terbatuk-batuk, uhuk ... uhuk ... uhuk .... thot .... Ha .... ha ....! Ha ... kalau ketawa terus sambil dibarengi kentut suaranya khan seperti itu. Uhuk ... uhuk ... uhuk ... thot ....!
Yo ... bareng-bareng pada buang kesungai, tuh judul widget! Biar nggak di ketawain pengunjung juga biar nggak jadi sarang judul. Emang dianggap tawon, ya kita?
Cara yang paling tepat untuk menjaga agar posting bisa diterbitkan dalam kondisi "siap tampil" adalah dengan melakukan "SAVE" terlebih dahulu kemudian dilanjutkan "Preview" untuk melihat bentuk hasil akhir posting yang kita buat. Melalui cara seperti inilah beberapa koreksi atau edit ulang segera bisa dilakukan hingga ketika posting diterbitkan maka benar-benar sudah dalam kondisi "siap tayang". Yah ..., ini hanyalah sebuah cara untuk meminimalkan kemungkinan update berulang yang disebabkan karena kesalahan-kesalahan kecil yang "amat manusiawi" dan biasanya terjadi akibat kekurang telitian saja. Tidak menutup kemungkinan sekalipun "SAVE dan Preview" telah dipergunakan akan tetapi beberapa kesalahan masih saja terjadi. Sekali lagi ini hanyalah sebuah upaya dan kita telah mencoba melakukannya .....
Sebelumnya aku sama sekali tak pernah peduli dengan apapun yang namanya counter yang berhubungan dengan rating, popularitas, ranking dan apapun sebutan untuk sebuah peningkatan prestasi ngeblog. Ketakutan dan rasa pesimistis selalu menggelayut diotak ditelan keputusasaan akan sebuah harapan yang sepertinya hanya sebuah angan kesia-siaan. Ya ..., ngeblog dengan rutinitas tinggi, melek sampai pagi dan pekerjaan jadi terabaikan adalah sebuah wujud kecintaan akan dunia blog dan segmen posting yang aku pilih. Tutorial BloGGeR dan Panduan BloGGeR itulah yang jadi pilihanku. Beberapa yang lain tentang masakan, komputer, software, politik dan sastra hanyalah pengisi kejenuhan dan keputusasaan akan harapan yang sering menghantam semangat ngeblog ku. Yah, .... bayangkan
Seperti namanya, Floating PopUp Box, dia akan selalu melayang-layang mengikuti pergerakan cursor/mouse kearah vertikal. Ketika cursor menjelajah halaman blog ke bawah, maka diapun akan mengikuti ke bawah. Demikian pula sebaliknya ketika cursor bergerak ke atas. Box spesial ini dapat dimanfaatkan untuk menempatkan/memuat iklan, gambar/photo/banner/kata sambutan kepada pengunjung blog dan banyak hal lain yang yang mungkin sampeyan inginkan. Karena sifatnya merupakan pelengkap blog yang secara sengaja ditampilkan di setiap halaman blog di tempat strategis, untuk menjaga supaya penampilan blog tidak terganggu, maka floating popup box ini juga dilengkapi dengan sebuah controll untuk menghilangkan box dari halaman blog. Supaya lebih nyentrik dan bergaya, bagian ini (close) kita design dengan memanfaatkan blink effect dan efek marquee. Untuk lebih jelasnya silahkan sampeyan KLIK link demo berikut :
Bagi yang menggunakan "Blogger Template Designer (New Blogger Template)" dan semua template yang sudah menggunakan "Threaded Comment" dan ingin memasang Yahoo smileys/emoticon, silahkan ikuti panduannya melalui link di bawah ini:
Add Emoticons on Blogger Comment Box (Blogger Template Designer).
Javascript :
<script src='http://gubhugreyot-javascript.googlecode.com/files/GRsmileys-nonthreaded.js' type='text/javascript'></script>
Cara menggunakan javascript :
Penggunaan kode HTML navbar tersembunyi atau banyak blogger menyebutnya "Navbar Rahasia" berfungsi untuk membuat kesan seakan-akan navbar tidak ada. Navbar hanya akan terlihat ketika cursor pengunjung blog mulai menyentuh (disentuhkan) pada bagian navbar yang tersembunyi tersebut.
Panduan dan Tutorial BloGGeR Cursor Animasi
He .... he ... he .... Latah juga ini si gubhug reyot. Yang lain pada buat cursor bertabur bintang, eh .... ikutan juga! Ha .... Nggak apa-apa, ya? Emang nggak boleh, he ... Biar saja ..., yang lain khan cuma bertabur bintang! Iya, nggak?! Kalau yang ini lain! Lihat saja tuh judulnya! Masih ada ekornya, khan?! Lha, itu ... Cinta itu khan ikutan judul juga. Emang nggak di anggap belakangnya. Hu ... kasihan, dong! He .. eh ... Yang ini lain, kok. Emang nggak sekedar bertabur bintang si cursor animasi ini. Dia sesungguhnya bertabur cinta beneran. Jadi kalau cursor di gerakkan maka bunga-bunga cinta sampeyan akan bertaburan, berserakan sepanjang jalan. Ya ... sampeyan khan play boy, toh?! Atau play girl?! Tuh, lhoh yang suka gonta-ganti pacar. Yang sukanya sabet sana-sabet sini tuh, lhoh! He ... he ... Jangan marah, ya? Gini, lhoh. Cursor ini dibentuk menggunakan javascript yang di dalamnya didesain untuk membuat sebuah taburan cinta dengan jumlah yang bisa di atur juga. Bunga-bunga cinta ini ketika mulai berjatuhan, maka dia akan berubah menjadi semacam kotak-kotak dengan ukuran yang lebih besar dari bunga cinta itu sendiri. Ketika kotak-kotak itu semakin turun, maka diapun akan berubah lagi menjadi bentuk titik-titik yang jauh lebih kecil lagi. Seremnya kalau cursor ini digerakkan menyamping ke kanan dan ke kiri. Dia akan terlihat menjatuhkan bunga-bunga cinta (waru abang kui, lho!), kemudian seakan-akan dia dikejar-kejar oleh naga yang ganas yang mengikuti kemanapun dia pergi. Hayo .... Serem, nggak?! Mau buat? Yo, ikuti cara membuatnya. Gampang, wis. Teplak-teplek langsung jadi! He ....Meskipun dibeberapa waktu belakangan ini Label Cloud Cumulus mengalami beberapa kendala penggunaan berkaitan dengan matinya sumber pengaktifan tag cloud oleh sebuah situs (dihanguskanya javascript dan file swf oleh halotemplates.s3.amazonaws.com?), namun kini sampeyan tidak perlu khawatir lagi karena kita bisa membuat tag cloud animasi cumulus ini secara mandiri dengan cara mengupload file flash cumulus dan javascript-nya di free swf dan javascript hosting.
.
Mengapa kita perlu untuk membuat tagcloud cumulus yang mandiri :
Penggunaan tagcloud cumulus tidak berbeda dengan yang terjadi padaBagaimana cara lain yang sangat efektif untuk mempercepat atau istilahnya menjaga kestabilan loading blog?
Merotasi gambar mempunyai banyak manfaat untuk seorang blogger. Satu contoh sederhana adalah bagaimana membuat tanda panah pada gambar visualisasi sebuah tutorial yang harus ditata sedemikian rupa sehingga tanda panah tersebut tidak mengganggu apa yang disampaikan. Merotasi gambar juga akan sangan bermanfaat ketika kita membuat sebuah gambar berbentuk
Panduan BloGGeR dan Tutorial BloGGeR Modifikasi Blog - Animasi :
Bagaimana menggunakan gambar animasi yang berisi teks untuk mengganti teks link "Posting Baru" ("New Post"), "Posting Lama" ("Older Posts""), dan "Beranda" ("Front Page") yang terletak di bawah kolom komentar (seperti di blog ini)?Kepriben carane nggawe kategori nganggo backgroun animasi kuwek?
を作成する方法およびインストールアニメーションの背景と種類を
Panduan BloGGeR dan Tutorial BloGGeR Modifikasi Blog dan othak-athik Template :
He .... bener nggak bahasa planet yang aku buat di atas? Sial bener! Masa mo nulis pakai bahasa Inggris saja musti stress duluan. Biar saja ...! Salah juga "ndableg" saja. Niru gaya Thukul Arwana kadang penting juga. "Biar salah asal pede. Paling-paling orang tersenyum sendiri atau ketawa sampai terkentut-kentut. He ..... Nih..., semua gara-gara waktu pelajaran bahasa Inggris malahan ngacir ngerokok di kantin atau malahan nongkrong di "alun-alun". Menyesal sekarang! Mo nulis pakai bahasa Inggris saja musti buka kamus, google translate plus tambah bingung, he ....! Buat sobat-sobat blogger yang masih sekolah aku cuma pesan satu hal saja : Pelajari dengan sungguh2 MaPel bahasa Inggis kalian. Biar nggak menyesal kaya' si gubhug reyot. Bener-bener nyesel, dah! (Percaya, nggak?! Aku lagi nangis ,nich! menyesali goblognya aku berbahasa Inggris. tapi anehnya ... knapa mata malahan melotot sebesar jengkol? airmata nggak keluar, lagi! huh ... heran aku. Takutnya mata malahan melesat keluar, .. he ....)Cara membuat dan memasang kategori dengan background animasi :
- Contoh : Arahkan mata sampeyan
Memperbesar dan memperkecil ukuran gambar (resize) dengan Adobe PhotoSHOP bisa dilakukan dengan 2 (dua) cara, akan tetapi untuk memulai silahkan buka Adobe terlebih dahulu kemudian lanjutkan ambil gambar yang akan dirubah ukurannya. Untuk melakukan pengambilan atau membuka gambar perhatikan langkah berikut
Untuk dapat membuat shoutbox spesial ini sampeyan harus mengikuti tutorial sebelumnya tentang "Cara Membuat dan Memasang Shoutbox" serta ""Cara Membuat Hidden Shoutbox", karena kode baru yang nantinya digunakan masih berkaitan dengan kode pada posting tersebut.
Setelah sampeyan
Pada prinsipnya shoutbox ini akan kita sembunyikan dari halaman blog sampeyan, sehingga yang terlihat hanya sebuah teks dengan bentuk tulisan "Buku tamu". Teks yang berupa gambar (tinggi 145px dan lebar 30px - seperti gambar di samping) ini akan menjadi kunci untuk membuka dan mengumpetkan (menyembunyikan, he ... he ...) si shoutbox supaya kembali ke ...
Cara memasang shoutbox di blog :
Kali ini kita akan belajar cara memotong gambar menggunakan Adobe Photoshop dengan cara berbeda yang lebih teliti sehingga diperoleh akurasi yang cukup baik pada setiap bidang potong. Posting kali ini merupakan kelanjutan posting sebelumnya tentang memotong gambar posting dengan cara yang paling sederhana dan gampang. Pemahaman tentang gambar memang sangat penting berkaitan dengan kebutuhan posting gambar yang hampir dilakukan oleh semua blogger untuk memberikan bentuk visualisasi terhadap apa yang disampaikan melalui kata-kata sehingga makna dan maksud yang disampaikan menjadi lebih mudah dipahami. Ketepatan pemakaian ukuran gambar, selain menjadi kebutuhan vital saat posting, bagi blogger yang melakukan aktifitas diluar blogDETIK, terutama BlogSPOT juga sangat dibutuhkan ketika beberapa gambar difungsikan sebagai pelengkap desain blog. Ukuran yang tepat tentunya akan menjadikan loading blog tetap terjaga dan prima.
Cara memotong gambar menggunakan Adobe PhotoSHOP:
Contoh posting "daftar bertingkat" memanfaatkan "daftar bernomor" dan "daftar berbutir" :
- Gunakan daftar bernomor.
- Dapat dilakukan melalui posting mode "Tulis".
- Dapat dilakukan melalui posting mode "Edit HTML".
- Gunakan kode html "ol" dan "li".
- Gunakan kode html lain untuk menciptakan bentuk teks yang berbeda.
- Dapat dilakukan melalui penggabungan posting mode "Tulis" dan "mode Edit HTML".
- Gunakan daftar berbutir.
- Dapat dilakukan melalui posting mode "Tulis".
- Dapat dilakukan melalui posting mode "Edit HTML".
- Gunakan kode html "ul" dan "li".
- Gunakan kode html lain untuk menciptakan bentuk teks yang berbeda.
- Dapat dilakukan melalui penggabungan posting mode "Tulis" dan "mode Edit HTML".
Kode html untuk membuat daftar posting bertingkat :
- Login ke BloGGeR
- Dasbor : KLIK link Tata Letak.
- Elemen Laman : KLIK link Tambah Gadget.
- Widget : KLIK link HTML/Javascript.
- Copy Paste : Copy Javascript dan simpan di box penambahan widget HTML/Javascript.
- Simpan : KLIK "SAVE/Simpan", kemudian lihat hasilnya dengan membuka halaman blog.
Pingin sedikit hemat energi buat promosi blog? Datang saja ke Submit Express! Gratis , layanan mudah, cepat dan informasi yang disampaikan gamblang. Melalui Submit Express informasi tentang blog kita akan langsung dikirimkan ke Google, Yahoo, AOL Search, iWon.com, Exactseek, Jayde, Scrubtheweb, Entireweb serta sekaligus akan langsung terdaftar pada beberapa Meta Search Engines, seperti Search.com, metacrawler, Dogpile, mamma, C4, Canada.com, ixquick, Infogrid, query Server, WebInfoSearch, 800go dan beberapa yang lain. Mau coba ?! Ikuti langkah-langkahnya seperti di bawah ini :
Panduan proses registrasi di Submit Express :
- Submit Express
Datanglah ke Submit Express dengan KLIK di sini!(http://www.scrubtheweb.com). - FREE SUBMISSION
Lihat gambar di bawah ini :
» Tulis URL blog kalian : http://..... .blogspot.com/
» Next --> KLIK "Next" button. - FREE Website Submission
Perhatikan gambar di bawah ini :
Isi seperti gambar di atas. Alamat email, tanda centang dan tulis karakter kemudian KLIK "submit" button. - Thank you for using Submit Express.
Apabila submit berjalan sesuai harapan (sukses), maka akan disediakan sebuah link dalam bentuk kode html (seperti di blog ini). Copy dan simpan di template kalian.
Contoh KODE :
Cara Login di Google Code
Beberapa hal jelas menjadi keuntungan bagi blogger. Untuk yang postingnya sudah cukup banyak, sebaiknya atur setting dengan angka di atas jumlah posting yang sudah diterbitkan. Pengaturan seperti ini akan memudahkan dan mempercepat blogger dalam
Catatan :
- Sebelum sampeyan lanjutkan, alangkah baiknya aku sampekan terlebih dahulu, bahwa cursor ini tidak kompatible untuk desain blog "BloGGeR Baru" yang di kenali dengan "BloGGeR Dalam Konsep". Memang aneh juga si BloGGeR ini. Masa dari dulu masih dalam konsep terus. Emang nggak ada yang sanggup lembur nyelesaiin. Ah ... emang repot pakai desain yang masih "diproses". Coba saja lihat di ruang posting. Puh ... bikin gemes pokoknya. Masa mo posting di mode HTML saja loadingnya minta ampun. Kurang sesaji, kali, ya ?
- Cursor ini kompatibel dengan semua browser yang ada. Ditanggung bisa dipakai karena aku sendiri dah coba di template blogger "Minima Black" dan tak satupun tercipta masalah.
Cara membuat dan memasang cursor animasi molor-molor :
- Login : Loginlah ke BloGGeR terlebih dahulu dengan menuliskan User Name/ alamat email dan Password (Sandi).
- Dasboard : Setelah masuk di halaman Dasbor, KLIK link "Tata Letak (Layout)".
- Elemen Laman : KLIK di salah satu tempat penambahan widget (Tambah Gadget). Terserah pilih sendiri di bagian sebelah mana "Tambah Gadget" yang mau di KLIK.
- Copy Paste : Javascript di bawah ini di ruang "HTML/Javascript (Widget). Bila ingin lebih jelas tentang bagaimana menambah widget blog, silahkan sampeyan buka dulu di sini, atau yang di sini juga hampir sama saja. Kayaknya saling melengkapi juga klo ada kekurangan.
- Letakkan Javascript hasil download di bawah javascript di atas dengan menambahkan kode :
Javascript Animasi Molor-Molor :
<script language="JavaScript">
var author="gubhug mleyot";
var expandspeed="10"; /* semakin besar semakin lebar */
var collapsespeed="5"; /*semakin besar semakin cepat */
var numimages="10"; /*jumlah gambar molor. Semakin besar semakin banyak */
var distance="50"; /* panjang molor-nya */
var image="http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif";/* gambar pengikut cursor */
var regkey="";
</script>
Download Javascript berikut ini :
Bagaimana kita menyikapi masalah ini? Menampilkan banyak jumlah posting dihalaman utama memang gampang membuat kita puas diri dan mungkin saja membuat pengunjung yang membuka halaman utama akan menganggguk-angguk sambil mengacungkan jempol. Hebat! Hebat! Katanya sebelum membuka keseluruhan posting yang dibuat. Ya , karena kesan yang pertama muncul adalah "betapa banyaknya posting yang telah dibuat". Langkah seperti ini sebetulnya baik-baik saja asalkan sampeyan pintar membuat posting yang benar-benar menarik, yang membuat pengunjung merasa betah dengan bertumpuknya posting blog sampeyan. Apabila hal ini tak terjadi niscaya pasti .... slaaaap .... URL blog sampeyan langsung lenyap dari peredaran. Wuih .... repot nggak?! Sia-sia tenaga dan pikiran tercurah untuk bikin posting. Uang bayar ngenetpun terbuang percuma. Eman tenan, to? Jadi gimana langkah terbaiknya?
Tips untuk memilih jenis file ..
Cara Daftar dan Registrasi di StumbleUpon :
- StumbleUpon : KLIK "Gambar" di bawah ini untuk naik becak ke StumbleUpon.
- Join Lihat di ujung atas sebelah kanan halaman baru (StumleUpon) yang sudah terbuka. KLIK link "Next", kemudian lanjutkan KLIK link "Join StumbleUpon".
- Sign Up : Tuliskan data kalian di bawah teks Sign Up to Explore the web like never before.
- Username : Tulis nama seperti yang digunakan di blog.
- Your email : Tulis lengkap alamat email.
- New password : Gunakan password yang sama seperti di email atau blog.
- Gender : Beri keterangan yang jelas tentang kelamin kalian. Beri tanda pada 2 pilihan yang ada.
- My birthday : Pilih bulan, tanggal dan tahun kelahiran.
- Sign Up : KLIK "Next". Lanjutkan KLIK "Sign Up".
- Prove you are human! :
- KLIK "Next". Lanjutkan kembali dengan
Cursor jam dengan identitas blogger
Tutorial ini dimaksudkan untuk memperjelas cara menambah widget yang berupa javascript, kode css atau xHTML, seperti halnya membuat animasi cursor jam yang dilengkapi identitas blogger. Yah, mungkin saja bagi beberapa sobat blogger hal seperti ini cukup gampang dilakukan, tapi mungkin saja beberapa yang lain mungkin akan terasa begitu sulit dilakukan, hingga sering jengkel sendiri.
Untuk memasang cursor jam yang termuat di posting sebelum ini, coba ikuti detail langkah di bawah ini :
- Login : Lakukan Login ke BloGGeR dengan cara menuliskan User Name atau Alamat Email.
- Dasboard (Dasbor) : Setelah terbuka halaman Dasbor, silahkan KLIK Layot (Tata Letak).
- Page Element (Elemen Laman) :
Halaman yang tersaji di hadapan sampeyan adalah halaman untuk menambahkan widget. Di dalamnya terdapat beberapa kolom penambahan widget, baik di sidebar, footer, header atau main. KLIK Gambar untuk melihat detailnya. - Tambah Gadget :
KLIK pada bagian yang bergaris putus-putus. Silahkan pilih tempatnya mau yang sebelah mana tidak menjadi masalah. - HTML/Javascript :
KLIK tepat di teks HTML/Javascript seperti terlihat di gambar tersebut di atas. Untuk melihat detail gambarnya silahkan "Gambar HTML/Javascript" tersebut di KLIK - Paste Kode : KLIK Gambar untuk melihat detailnya!
Setelah terlihat box penyimpanan KODE HTML/Javascript, letakkan Kode CSS dan Javascript secara berurutan. - Kode CSS di copy kemudian letakkan di antara kode di bawah ini :
Cara membuat cursor jam dilengkapi identitas BloGGeR :
Copy dan simpan kode CSS dan javascript berikut dalam template sampeyan!KODE CSS Cursor Jam :
Ya ..., semua ini gara-gara si Parmin yang kemarin nyerocos minta tolong supaya dibuatkan cara membuat teks yang ada bayangannya. Bagus, katanya! "Wah...., seandainya aku mau nikah, undangannya mau aku buat epek bayang-bayang", kata si Parmin sambil matanya menerawang ke arah rembulan yang terbungkus segumpal mega, "biar pada tahu kalau Parmin nggak kampung amat", mulutnya merenges sambil di sorongkan ke muka ku hingga gigi tongosnya tepat di depan mata. "Kurang Asem...!!!", umpat ku sambil melempar muka ke samping. "Baunya itu, lho! Ampun !" Dan ... Si Parmin hanya tertawa he ... ha .... he ... he ... kaya' kalian sekarang! Ha ......
Contoh text-shadow atau efek bayangan pada teks :
Happy Blogging - This is Tex-shadow
Happy Blogging - This is Tex-shadow
» Happy Blogging «
Happy Blogging - This is Text-Shadow
Cara membuat Text-Shadow :
Cara Membuat Gambar Animasi dan Gambar Avatar atau Photo di tampilkan di Navbar :
- Login to Blogger (Login ke Blogger)
- Dasboard (Dasbor) : Setelah masuk dasbor