Kehabisan bahan postingan nih...xixixi. Beben si bloglang anu ganteng kalem tea akan berbagi artikel ringan mengenai merubah tinggi dan lebar sebuah gambar/image. Mendengarnya saja sudah pasti cetek sob bagaimana kita mau merubah width and height satu image :D Tapi secara ciri khas Beben itu unik dan gaya, maka cara merubahnya sekarang juga termasuk full stylish b-) Lihat original titlenya nih sob 100% Client Side Image Resizing Merubah gambar secara praktis dari HD (komputer) dengan bantuan tools ini. Sangkin mudahnya kita tinggal klik...klik...dan beres :D Gayanya disini kita akan menghasilkan juga link image berbasis kode Base64.
Sekedar contoh syntax image base64 sbb
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAADOklEQVQokU3Le0zUBQDA8d8fba5Vc6XTQIi7xiseMyRFOKOTC+7x+90BPpB8NEPBrbLjuB+PHWjclZFunHKAjx7yyJPhQJcM7gCRNbf4h6lQDlsRuwNvExjgFcql9u3fPv9/hHOtbgoK9mAw7sAgGskRs9Hp85DEfCRJwmDKRSeJaEUDBsnEocMlFMjV2L1/IDx9+gS5vAqNLocsMQ/JYERrNLFdzCVLysUkGRBFI3ophxwxF71opOiohZv35xDUWVmkazQcPFjE2ykprNx1M+NtwDfQzK0f6pnqdTJ4vgrfyGXeilGiM+ayTZ3J839CCAvP/0W1XYNaa6TykEjg5nmm+xuY9jp5MNhMR+1efJ4W6iz7mL3bhVaUyBH1dHZeQTjW70MtFmIy5aPaEscBTSptJyxMDXdw56qTvu8d9DTW8n7yem4PXUEy5vOJtRT79V8RbJ5J6rtG0eu1yEd24bAd55TjGC3Or3hwq4MLzloaPz+OraKKUW87WkM+O4st1HimEGweP5FJW9ivU6Fc9yJfV5TyUYyaI3uz8A82UJKfyc7obbiqLXxpKyUhci27TNnUeCYRavomKLafxVVezPK9S5SYNtN56lMC/c3MDDTg660nL/1N3k2KZiXop+xwIYqUDGp6JxEWZSUPj4Yjxq+h5YSV2X4nfu85fJ4mhs6Y8XsbCfx0EZfjM+4PfsPE0CXmKhLw2zYjLMpRhMxhPJHDqEpbz9JIO3UOB85v2/jFN8f4nwE2pW4lMORiYWKYEe9lGrRrWD6tQQjKCoKyggVrGLNyMu79SQTH+/jxYh2/Dbdyu7OR2Tsd+EbaGO9povukmXmLgseuvP/nGKoz44h65SUS160iPuI1vjtpp1CnYn60h9A9N4Eb7WRHhLFkjeWRrERYKY/lrzIFG1e9wJ53Xmdj+GrUiRv4sLgUseAA5spyfh/p5tmYm2nvWeLXrma5TEmwMg6BUABCQT7e/R6FW6M5bf0AU0YCV7taMRe9yhf2MjSpySyOdTIz0MQmxcsQegjP5hH+tkYStLyBVUplX3oSZ8y72ZERwY2fh7nmTKP7ei95adHoksN5PNZBoSqRJTmWR3IU/wHVqy3hifycoAAAAABJRU5ErkJggg==" />Hehehe :D Silahkan kunjungi halaman ini image resize. Sampai jumpa lagi yah :-h
Menclok sekarang ke negeri Chinese lagi sob. Beginilah Beben si bloglang anu ganteng kalem tea jika menemukan sebuah informasi. Kadang dengan sengajanya tanpa persiapan apapun, kadang emang dicari dan menemukannya...pokokek yang gaya punya pasti dibagi-bagi :D Tidak tau web personal atau bukan nih sob yah, tapi setelah mengeksplorenya ternyata web ini menyediakan beberapa jasa dan mungkin bisa kita pakai. Contoh jasa yg ditawarkan antara lain banner untuk page rank! Mengapa Beben kasih tau banner dari web ini? Keren dan imut tentunya dong, serta akurasi terintegrasi langsung dengan PAGE RANK GOOGLE. Contohnya nih...
Setelah banner PR, ada lagi untuk melihat IP, what your IP Address! Example
Imut-imut dan keren toh :-/ :D Karena terpampang dengan bahasa china mengharuskan kita untuk mentranslatenya sob ;)) Oleh sebab itu korek-korek disana rada membuat kepala bikin ter muter sob @-) Okelah, biar kita bisa sama-sama muter coba saja acak-acak di alamat berikut guna ada apa saja disana Easylife. Kalau sudah muter kepalanya, ini ada obatnya berupa jepretan-jepretan photo full artistic cewek-cewek sono sob 3:-O Perhatian khusus 18+ ingat ada yg ngawasin O:-) >> Obat muter1 Click to expand here
Berbagai macam cara untuk mengungkapkan unek-unek di hari kasih sayang ini sob :x Valentine day kalau orang kulon bilang mah :D Sebagai bloglang anu ganteng kalem tea, dimana suka melanglangbuana didunia maya ini, maka cara mengutarakan hari valentine juga harus gaya punya dong (gaya bloglang blogger sejati) ;)) \m/ Seorang cowok kepada kekasihnya identik pasti kasih coklat! Nah kalau Beben kasih love love love ajah yah. Bukan sembarang love loh :-" Bingkisan love ini jika diklik akan tampak sebuah map dan pesan pendek yang tertera dibawahnya :x Pokoknya mah cucok deh bagi petualang dunia alam maya mah ;)) Ensok atuh diklik :">
Perkembangan CSS semakin hari semakin meningkat. CSS3 dengan variabel kodenya bisa menghasilkan tampilan yang memikau pada browsingan. Dari kata menjadi berbalik (rotate), membuat bayangan tanpa gambar, dan lain-lain. Mengingat aktifitas CSS3 ini belom sepenuhnya didukung browsingan, sobat bisa lihat disini CSS Activities, untuk pacuan dan informasinya. Di hari valentine (berlaku bagi negara yg notabene tak pernah merasakan kesengsaraan berkepanjangan) ini cocok banget nih kita memakai trik CSS3 untuk menambah gaya penampilan pada blog tercinta :D
CSS drop-shadows without images.
Membuat bayangan disekitar pinggiran kotak/image murni menggunakan CSS.
CSS Rotation
Membuat efek berputar tulisan/gambar sebagai hasilnya.
VALENTINE DAY
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);Jika sudah mahir bisa dikombinasikan dengan jQuery script, dan menghasilkan karya dengan nama spinning :)
Bagus kan efek spinning, dari acak kadut putar gak karuan pas disorot sama mouse bisa menjadi rapih dan terlihat jelas :-/ Trik ini bisa dipakai pada photo (avatar) pada kolom komentar blogspot Pasang efek spinning pada comment avatar blogspot.
Efek dan style sudah ada, tinggal template valentinenya nih sama Beben si bloglang anu ganteng kalem tea belom dibagi :P
Menu fixed up transparant setelah disorot ada efek warna hitam gelap.
Background image slider (gambar background bisa berganti-ganti) karya WebDevTuts.
Pada artikel Be a Creative II disana Beben si bloglang anu ganteng kalem tea berbagi sedikit bentuk form untuk melihat tampilan blog kita dalam format seperti ini Beben Koben - Poskan Komentar! Dimana dengan tampilan seperti itu, membuat blog kita tampak lebih cepat, sederhana, pokoknya macam itulah :P serta dapat membaca artikel, berkomentar, dsb. Singkat kata jangan pernah ada lagi ngomong blog berat? Kalo memang serius postingannya mau dibaca dan pengen meninggalkan jejak dengan berkomentar maka tak ada alasan lagi...hihihi :-"
Dari sana Beben timbul ide untuk membuat lagi bentuk form sederhana bagaimana kalau setiap All Personal Syntax Link On Blogspot dibuatkan bentuk formnya yak :-? Lumayan kan sob, hanya berbekal mengingat ID blog, kita dapat melakukan aktifitas yg kadang memang tidak memerlukan login ;)) Untuk awalnya Beben membuat form download full template nih sob. Selanjutnya Beben si bloglang akan buat lagi form action for blogspot lainnya kalau memang dapat dibuatkan bentuk formnya yak sob :)
Form aksi berikut digunakan harus dalam keadaan login account sobat. Untuk melihat komentar teranyar/baru masuk ;)
Mengedit dalaman template (Edit Template HTML)
Melihat keadaan status blog sobat.
Jadi form action ini semacam widget admin, tapi dalam bentuk aksi ;)) Form aksi berikut ini, untuk melihat konektifitas web/blog. Utamanya yg menggunakan account google.
Form berikut untuk melihat blog selanjutnya dengan menggunakan blogID sobat. Lakukanlah berulang-ulang, karena blog yang akan terlihat bebeda-beda sob ;)) enyakkkk :D
Supaya bisa melihat postingan dalam form blogger lawas.
Musik merupakan bahasa universal yang dapat menyatukan segala perbedaan larut kedalam satu kesatuan Unity ahaaaaaaaaaiii prikitiw =)) Memasukan embed musik kedalam blog bisa jadi merupakan satu aksesoris keren paten yang mungkin sobat bisa gunakan. Format musik MP3 ini sudah ada yang tersedia dari web-web terkenal dalam bentuk embed loh sob! Antara lain Google Reader MP3 Player dan Yahoo! Media/MP3 Player. Jika memang tertarik dengan layanan ini coba cek dimari http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/ Kadang embed hampir sama dengan frame penulisan kodenya. Yaaa tinggal atur saja mana mo dipakainya ;)
Sekarang bagaimana jika playlist music ini bisa kita dapatkan dengan penampilan layaknya toolbar static. Intinya diem dibawah lah sob itu si list musiknya tuh :D Nama widget ini Streampad jebolan dari famous web AOL.com b-) Perpustakaan musik ini bisa kita kombinasikan dengan 3 account (AOL Music, AIM, dan Last.FM) berbeda. Jadi jika sobat memiliki lists music di 3 web itu bisa langsung dipanggil dengan menggunakan ini sob :) Caranya juga cukup mudah kok sob, tinggal masukin ini si script kedalam mode Add a Gadget ► HTML/Javascript details over here<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-blogger.js&expsec=86400&ver=11"></script>Jika ada yg lainnya bisa share-share yah ;)) Bye bye bye :-h :D
Kayaknya daleman kode-kode blogger blogspot sudah hampir Beben bagi semua. Sebelumnya masih ingat dengan Page Layout Default Blogger dan ini Post Includable Part II. Tentunya postingan ini sudah membuka lebih dalam lagi pengetahuan sobat dalam mendalami kode blogger Struktur Template Blogger Blogspot :) Bagi yang masih memakai klasik template dari blogspot, Beben si bloglang anu ganteng kalem tea juga sudah membuat tabel alakadarnya di Tabel Kode Template Klasik dan Modern. Mau apalagi hayo keperluan untuk membuat template blogger dengan design sendiri :-/ :D Untuk lebih melengkapi keterangan serta tambahan pengetahuan mengenai coded template blogger blogspot ini, Beben akan bagi lagi dari sobat kita yg sudah menciptakan template-template keren b-) :-bd
Kalau sobat jeli dalam membaca artikel² Beben, sobat ini sudah pernah hadir di prodigy of head ini loh Bloggerz Bible ;) Mari kita kuak keterangan versi @bloggerzbible dengan istilah Microtuts Bit and Microtuts Backbone. Keterangan code sobat ini menitikberatkan pada tag <b:skin> dan <b:section> template.
Template blogger blogspot seperti halaman HTML dengan gaya yang sama berulang lagi dan lagi setiap kali membuat posting kecuali kita menerapkan beberapa kondisi kode didalam template kita.
Template blogspot agak sedikit berbeda. Sebuah template blogger menggunakan tag sendiri didefinisikan seperti <b:skin>, <b:if> dll bersama dengan tag HTML seperti <blink>, <div> dll. Tag blogger didefinisikan dalam sebuah file yang mengakses pada dalaman blog saja. File tersebut hanya bertindak sebagai library untuk semua tag blogger. Jika kita melepaskan file tersebut, kemudian tag blogger seperti <b:skin> akan menjadi teks biasa, Tag tidak akan memiliki definisi (fungsi). Mengenai hal ini lebih jauh, sobat bisa kunjungi blogger help di Layouts Data Tags!
Mengenai tag <b:skin>
<b:skin> selalu ditempatkan didalam tag <head> </head> dan diberi tag penutup </b:skin><head> <b:skin>
<!-- CSS Content -->
</b:skin> </head>Tag <b:skin> memiliki properti yang sama seperti <style> pada dalaman halaman HTML. Setiap kali tag kode ini dibaca oleh browser lalu saat memuat tag <b:skin> akan digantikan dengan <style id='page-skin-1' type='text/css'> dan tag penutup </b:skin> digantikan dengan </style>. Jadi tentang memuat lengkap dari setiap halaman blogspot kode di atas akan tampak sbb...<head> <style id='page-skin-1' type='text/css'>
<!-- CSS Content -->
</style> </head>Kalau mau lihat lengkap, klik kanan pada mouse pilih View Page Source (mozilla browse)
Pada template blogspot tag pembuka <b:skin> diikuti oleh <![CDATA[ dan tag penutup </b:skin> diikuti dengan ]]> Kedua kode tersebut mencegah segala jenis kesalahan terjadi saat kita mencoba untuk menyimpan template (biasanya saat pengeditan dilakukan sob) In image
Mengenai Tag <b:section>
Setelah mengetahui beberapa fungsi fari tag <b:skin> kita lanjut yuk sob. <b:section> adalah tag tata letak yang menentukan dari tata letak template blog. Tag ini membantu dalam menciptakan kolom didalam template. Misalnya dengan tag ini kita dapat membuat template dengan satu atau lebih bagian sidebar, footer, kolom dll. Tag <b:section> ditempatkan di dalam body dari template blogger yang berarti selalu ditempatkan di dalam tag <body>. Tag ini merupakan bagian dari header blogger template misalnya navbar, sidebar dll.
Setiap bagian adalah unique yang berarti pada bagian memiliki fungsi sendiri dan diatur dengan attribute id. Atribut id ini tidak bisa diulang pemakaiannya didalam template. Berbeda dengan atribut class, yg bisa diulang-ulang ;)
Contoh kode <b:section> pada Header
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'/> </b:section>Setiap tag <b:section> terdiri dari tag <b:widget> seperti ditunjukkan pada contoh diatas. Setiap kali kita mencentang kotak maka tag <b:widget> ini berkembang dengan sendirinya, dan kita bisa melihat kode dalaman <b:widget>
<b:section> attributes
Pada contoh diatas kita lihat bersama tag <b:section> ada teks tertentu seperti class, id, maxwidgets, showaddelement dan atribut lainnya. Atribut ini menambahkan fitur khusus untuk tag <b:section>. Sebagai contoh jika showaddelement sama dengan no maka "Add a Gadget" pilihan tidak akan muncul dalam halaman "Page Elements" dan jika yes "Add a Gadget" pilihan akan muncul.
Susunan Attribute yang akan muncul pada bagian tag <b:section> akan terlihat seperti berikut...
Id - (Always Required)
Terdiri dari unique id yg terdiri dari huruf dan angka saja (HTML12, List34, dll)
Class - (Optional Attribute)
Nama umum yang sering digunakan didalam bagian navbar, header, main, sidebar dan footer. Dapat ditambahkan nama apapun sesuai kebutuhan.
Maxwidgets - (Optional Attribute)
Bagian jumlah maksimum dari widget. Jika kita tidak menentukan batas, maka dapat menambahkan sebanyak yang diinginkan.
Showaddelement - (Optional Attribute)
Dapat 'yes' atau 'no' dengan 'yes' sebagai default value. Ini menentukan apakah tab Page Elements akan menunjukkan Add a Gadget link atau tidak.
Bekerja dengan tag <b:section>
Menggunakan atribut diatas bagian apapun dapat dibuat untuk melakukan fungsi yang berbeda dalam "Page Elements" tab. Kita dapat menambahkan tag <b:section> bersama dengan atributnya untuk membuat bagian sidebar satu atau dua di sebelah kiri dan yang lainnya di sebelah kanan. Contoh...
Pada contoh di atas telah ditempatkan bagian utama yang mana area posting di antara dua sidebars. Kedua sidebars memiliki id yang berbeda, tapi memiliki class yg sama. Kode CSS yg dipakai yaitu
Hasil layout dari 2 kode diatas jika digabungkan menjadi
Inilah penjelasan singkat mengenai tag <b:section> Mungkin dengan adanya ini semakin terbelalaklah pengetahuan kita mengenai kode-kode template blogspot yak sob :) Sehingga dengan begitu kita akan dapat membuat template untuk memberitahukan kepada khalayak bahwa blog kita sedang dalam perbaikan (maintenace) ;))
Sampai jumpa lagi dengan si Beben bloglang nu ganteng kelam tea \m/
