Tidak ada kerjaan, mau ngulik lagi males juga :D Ya sudah bagi-bagi template sekarang acaranya ;)) Sengaja Koben pilihkan yang memang dirasa mempunyai style ;) Datang dari master Rethnaraj Rambabu seorang blogger berkebangsaan India dari Kualalumpur Malaysia! Bingung dari mana asalnya nih orang ;)) Alamat blogger dulu disini http://introblogger.blogspot.com/ sekarang sudah pindah ke http://www.bloggermint.com/ Kebanyakan kreasi template blogger masih dipegang sama web-web itu juga sob :)) Kita mulai saja deh yuk acara bagi-bagi template dari arsip blog ini :P Click image for look demo...
Sebelumnya story of menghias navbar blogger ternyata cukup mendapat respon. Maka dari itu kelanjutannya harus diberi sentuhan² seni agar sedikit full stylish ;)) Ide kreasi, Koben dapatkan dari blog kepunyaan master Roxx \m/ Sepertinya dia sedang enjoy ngulik² and membuat template. Komentar malah promosi =)) Hasil kerja dari hack trick sekarang, yaitu menyembunyikan navbar blogger dengan teknik menutupi navbar dengan background. Dibubuhi sedikit ramuan JavaScript, tidak lain untuk membuka si background agar terlihat kembali itu si navbarnya :D Begitu kira² penjelasan yg tidak menjelaskan :P Singkat cerita mirip dengan trick berikut on off navbar! Tapi saat ini, cuman membuka saja, enggak bisa menutup lagi :D Lumayan untuk gaya-gayaan b-)
Langkah pertama silahkan lakukan backup full template. Kemudian tekan Ctrl + F pada keyboard, temukan kode #navbar-iframe Gantikan variabel CSS yang ada dengan yang ini#navbar-iframe { display: block; }Setelah itu tepat dibawahnya tambahkan CSS coded bumbu
Temuin kode </body> tepat diatas/sebelum letakin aji² berikut<div id='hidden_navbar'><img onClick='closeNavbar();return false;' src='http://2.bp.blogspot.com/-PBFoNGJ02b4/TihkiNYR9_I/AAAAAAAABEs/Iy8GGRhULjs/s1600/navbar.png' alt='open' title='show navbar'/></div> <script>//<![CDATA[ function closeNavbar() { document.getElementById("hidden_navbar").style.visibility = "hidden" }; //]]></script>SAVE. Lihat hasil kerja :) Itu bumbu untuk navbar default bawaan blogger, dengan panjang full monitor. Sekarang bagaimana jika tampilan template seperti Beben Koben si bloglang anu ganteng kalem tea, yang mana konten berada di tengah² monitor! Beda dikit pada ramuan CSS-nya doang kok sob ;)
Untuk konten template center/tengah maka kode css ganti dengan yang berikut. Bumbu lainnya mah sama!
Aturlah panjang/width sesuai dengan kebutuhan. Begitu saja kira² postingan kali ini :) Eh kelupaan, background-color: #333; bisa kalian fariasikan menjadi gambar. Tapi harus bisa kode²nya ya :)) Happy navbar \m/
Ketika paman google berbenah merombak disana-sini, antara lain penghilangan suatu layanan, pengggabungan layanana atau apalah berimbas pada kita juga nih. Kita harus pintar² memilih, khususnya gadget/widget yang akan kita gunakan. Sebagai contoh kasus services menimpa google friend connect dan google buzz what next...:P Koben melihat penghilangan layanan² tersebut tidak lain untuk dikombinasikan ke produk teranyar google yakni google+. Memperhatikan gejala² diatas, seperti saya bilang, harus pandai² memilah & memilih pemasangan gadget :D Otomatis google friendconnect dan buzz akan lenyap dari peredaran :-h Bulan april puncak dari semua pengalihan² akan terjadi :-" Berikut beberapa pemberitahuan yg koben temukan
Blogger is getting a new look in April. Upgrade Now.
We're retiring Friend Connect on March 1, 2012. Find out how you can keep in touch with your community.
Friend Connect will be retired March 1, 2012
Google Buzz has gone away, but your posts are yours to keep
Entah apalagi yg menghilang, saya juga kurang berekspedisi :D Ini mosting juga tadinya mau berbagi trik hack tutorial seputaran google friendconnect dari karthik's tech blog. Terus keingetan, cari informasi, eh eh tauknya dong :"> Datangi halaman ini untuk melihat karya² Karthik http://blog.xmlgadgets.com/category/blogger/
Ada yg hilang, tentu ada yg baru juga ;)) Pada posisi login account gmail, sobat pasti akan melihat menu baru di bagian bar navigation! Like it Play NEW Aplikasi buat android, bagusnya lagi saya tidak punya android :D Apeuuu...:)) Walau masih dalam bentuk beta, layanan baru teranyar dari mbah google berikutnya yaitu google account stats! Disana nanti kita akan mendapatkan informasi² seputaran kegiatan yg sudah dilakukan dengan account google milik kita. Info masuk akun (lokasi, platform, browse yg di pakai), info kegiatan email (G-Mail), riwayat web (history search dll) and info google map service.
Masuk dan lakukan login dari sini untuk merasakan fitur account activity. Mengenai google plus hangout sebenarnya ada yg baru, tapi Koben tidak paham cara membuat/memakainya, abisnya script permaenannya euy :( Segitu saja infonya yah, entar di update kalau nemu yg baru ;) Google service is interesting :x Happy blogging \m/
Memperhatikan kembali seputar masalah tentang navbar blog dimana memang sudah banyak dihilangkan keberadaannya. Sebenarnya jika kalian amati dari konten navbar itu sendiri banyak sekali kegunaan disana. Search box, button follow, tombol share (walau cuman ada 2 biji) :P, report abuse, next blog (random blog), new post link, dan design template sudah terpasang di navbar. Read it ada apa pada navbar! Tanpa perlu kita hilangkan (biar tidak melanggar TOS) Koben pernah sharing newest trick for navbar! Sekarang saatnya menghiasai navbar bagi blogger baik yg sudah tidak mendisabelkan fasilitas tersebut :) Disini Koben akan kasih link sharing jejaring, tampak menempel pada navbar :D Lihat screenshot berikut
Ctrl + F seperti biasa, kemudian cari kode #navbar-iframe delete itu, gantikan dengan bumbu ajaib brkt ;))
SAVE. Silahkan tambahkan web apa saja, aku cuma pasang 3 biji web jejaring sosial, gambar jangan lupa pakai yg beresolusi kecil. Yang penting harus didalam tagging <div id='navbar-network'> Navbar itu sendiri sekarang sudah ada ragam warnanya tuh, ada cerdiknya kalian cari gambar yg sama dengan warna navbarnya ;)
Itu kan cuman permainan CSS dengan variable position absolute saja sob :D Kabuuurrr...=)) Happy blogging \m/
Trik simpel seputaran link saat ini cuma lebih menjelaskan kembali! Seperti Koben bilang dengan hadirnya CSS3, maka penulisan, kode, rumusan, syntax, etc juga mengalami penambahan yang lumayan bikin pusing :D Bila kita memperhatikan dengan seksama, seorang developer dalam menuliskan syntax/code terdapat tulisan yg awam kita ketahui. Contohnya seperti ini @media print, content: " ";, :nth-child(even), :nth-child(odd), @keyframes dll. Ternyata tidak semudah membuat gorengan combro memahami atribut baru query CSS3. Lebih jauh kita dapat memadukan antara special character yg sudah di konversi agar terbaca pada format HTML/XHTML. Koben sendiri antara tahu, tapi pusing mempelajari ilmunya :D Satu yg pasti, selagi ada live demo gue ngerti apa yg dimaksudkan oleh developer man :))
Apa kalian pikir alamat email orang keren itu saya tulis dengan menuliskan manual! Oh tidak begitu prosesnya :-/ Itu ditulis memakai CSS dengan pemanggilan syntax HTML.
Dengan cukup menuliskan syntax <p class="email-address"></p>, pada web akan ditampilkan tulisan ganteng.kalem@gmail.com Sekarang coba ganti isi content: (email address) dengan membubuhkan spesial karakter yg jumlahnya ada...:D Hal wajib dalam mengikuti aturan main trik postingan kali ini, browsingan teman² harus sudah support :) Koben terfokus pada cara membuat tooltip dengan memakai CSS. Kebanyakan keterangan tutorial tooltip CSS dalam pemakaiannya menyertakan variabel <span>konten tooltip add here</span> Lihat artikel berikut Sexy Tooltips with Just CSS!
Setelah baca² tema lain dan Koben menemukan alternatif lain dalam penerapan CSS-tooltip tanpa harus menyertakan span span dalam pemakaiannya!! Jadi tidak ribet toh ;) Yuk kita mulai caranya bagaimana, dan apa saja bumbu yg harus di masukan. Pertama-tama tekan Ctrl + F kibor anda, dilanjutkan dengan menemukan code a:hover Kalau sudah ada, tambahkan variable position: relative;a:hover {
YOUR STYLE CODED BLA BLA BLA
position: relative; }Tepat dibawah kode a:hover, tambahkan bumbu rahasia brkt
SAVE. Setiap syntax link yg kalian tulis disertai pemakaian title, akan full stylish terlihat b-) Kreasikan bumbu rahasia dengan menambahkan variabel lain sesuai selera masing² Ganti top: 100%; dengan bottom: 100%; bila posisi judul tidak sesuai kesukaan.
Makanya pernah melihat CSS eksternal full murni sampai gambar memakai CSS? Tidak lain itu dengan metode ini sob. Ya walau huruf font harus khusus juga sih ;)) Bagi sobat yg memang tidak mau menyertakan position: relative; pada a:hover, bila tetap mau menampilkan tooltip akan terlihat kurang sreg posisi si tool-tipnya :-s Oleh karena itu, maka bumbu rahasia yg patut dicoba menjadi begini
Koben patenkan pada posisi pojok kiri atas :P (kalau mau sih itu juga) :)) Kreasi sendiri lah sok :P Demikian tips dari AA Ganteng Kalem membuat tooltips CSS tanpa embel² span :D Thanks: http://css-tricks.com/css-content/ :) Other: http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/ Happy CSS \m/
Rehat dulu dari tutorial blog yang memusingkan kepala @-) Sekarang Beben Koben si bloglang anu ganteng kalem tea akan membawa sobat blogger melihat-lihat master developer beserta kreasinya ;;) Mungkin jauh dari harapan kalian juga sih, soalnya web² berikut Koben dapatkan secara tidak sengaja ketika melakukan blog walking. Kalian lihat²lah ada apa saja disana, jangan hanya datang tanpa melakukan eksplore konten yg ada be a creative ;) Oke langsung saja Koben akan bagi web edan eling, keren bin maknyus in the house yooo \m/ Michael Deal @ MUDCUBE ³ owner web mudcu.be lebih dari 10 kreasi top markotop dibeberkan disana. HTML5 canvas demos, 3D graphics images and animations, open source lightwave 3D object viewer and some oldskool dance music come from Kevs 3D. Master Zoltan have good post about HTML 5, CSS3 and JavaScript on User Agent Man.
Berikutnya mari membabat konten yg ada di Thiemo Mättig :D Open source untuk bermain corat-coret with method Canvas Painter. Koben sendiri sekarang ini lagi anteung² melihat karya² canvas ;)) menakjubkan 8->> Untuk bonusnya aku kasih seputaran trick no right click is anti klik! Coba kalian klik link berikut ini (kalau bisa) wordpress.com :-/ Rahasianya ada pada variabel CSSpointer-events: none;Lebih variasi sedikit, bagi blogger yang memang menanamkan script anti klik kanan silahkan buang jauh² script tersebut. Tanamkan kode CSS berikut pada tag body template kalian
Di sela-sela lagi males mosting (menerangkan), malah banyak sobat yang ingin ini, pengen itu tanpa melihat (bercermin) pada diri sendiri, sampai mana, punya apa, seberapa besar kemauan...untuk memahami, menginginkan, membuat sesuatu! Fenomena heboh Custom 404 Error Pages for Blogger sebagai contoh. Bila dipelajari dengan adem, sebenarnya trik dasar bermain kode CSS saja. Okelah Beben Koben si bloglang anu ganteng kalem tea akan coba terangkan sedetil-detilnya mengenai issue customize your search preferences :) Apakah yang dimaksud dengan 404 error pages (HTTP 404)? read here HTTP 404. Pihak blogger sudah menambahkan kembali satu feature pada dashboard interface baru yakni search preferences. Ada apa saja disana: Meta tags, Errors and redirections, dan Crawlers and indexing. Benar enggak? Tertarik mempelajari hal tersebut, silahkan baca artikel @mybloggertricks settings for blogger 404 error page, redirects and meta tags and from @way2blogging blogger seo is made easy with new search preference option!
Koben akan fokuskan bahas pada urusan "Custom Page Not Found" Yang lain silahkan pelajari masing² :P Secara default (belum diapa-apakan), jika sobat blogger menemukan link pada sebuah blog tidak ada (error, delete) akan ada sebuah pemberitahuan. Like this:
Sorry, the page you were looking for in this blog does not exist.
Sorry, the page you were looking for in this blog does not exist.
Untuk mengetahui hal itu, silahkan kalian bubuhi di belakang link blog kalian masing² dengan embel² apapun (ex: http://beben-koben.blogspot.com/WTF) Default result will be as above! Coba sekarang kamu bubuhkan kalimat pada kotak Custom Page Not Found!
Otomatis tulisan "Sorry, the page you were looking..." akan berganti menjadi Oops! We couldn't Find that :( Kenapa bisa begitu? Sebab pada template blogger sudah tertanam kode<b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable>Coded tersebutlah yg menjadikan tulisan itu berubah tampak. Ngerti? Ini kalau mau melihat dalaman kode CSS-nya
Jelas? Sekarang bagaimana mau meng-customize pesan error 404 itu menjadi lebih full stylish? Mau!
Simpel dan sederhana namun tetap memerlukan ketelitian. Backup template 100% full, OK! Lakukan Expand Widget Templates. Temukan kode berikut<b:include data='top' name='status-message'/>Gantikan semua dengan kode ini<b:if cond='data:blog.pageType == "error_page"'> <b:include name='404-block'/> <b:else/> <b:include data='top' name='status-message'/> </b:if>Kembali temuin kode<b:includable id='status-message'>Tepat diatasnya, taruh code brkt<b:includable id='404-block'> <div id='custom-404-block'> <h2>404</h2> <div>Oops… Page Not Found!</div> </div> </b:includable>Ganti kata² sesuai keinginan! SAVE dulu deh. Urusan CSS kalian bs membuat sesuka hati. Yang penting kembali unik ID harus tepat sasaran :) Contoh#custom-404-block { color:grey; font-size:50px } #custom-404-block h2 { color:grey; font-size:120px; text-align: center ; }Jelas? Tutorial yang datang dari @bloggerplugins lebih hebat, kalian akan tahu bagaimana cara mengganti judul link dari error 404 ini custom 404 error pages for blogger. My Practice
Itu semua belum melakukan snippet kode template apa² yg mau dihilangkan. Singkat cerita snippet begini. Buka blog ini dalam keadaan normal http://vagabundia.blogspot.com/ bandingkan dengan ini http://vagabundia.blogspot.com/2012/03/estaentradanoexiste.html Apa yg hilang! sidebar, footer, and etc right? Itulah snippet CSS :-/ Happy coding
Setelah google mengenalkan search preferences for blogger, otomatis terjadi perubahan disana-sini terhadap kinerja blogger itu sendiri. Yang lagi hangat santer dibicarakan oleh para master blogger yaitu mengenai HTTP 404 atau yg lebih dikenal dengan 404 error page. Banyak sih sebutannya mah, tidak tahu ada berapa, yg pasti tujuannya sama, memberitahukan halaman yg dimaksud tidak ada :)) Sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi yg lagi hangat itu, cara membuat halaman error 404 untuk blogger b-) Mari kita babat kreasi master² dari negara spanyola tentang si error page :D Pertama datang dari master @Ciudad_Blogger, please read (spain language) :P crear página de error 404 en blogger. Hampir kelupaan nih, sobat harus dalam mode updated blogger interface dulu yah (editor baru) untuk melakukan semua hack ini ;)
Selalu backup download full template sebelum melakukan utak-atik kode ;) Expand Widget Templates kalian, temukan kode<b:include data='top' name='status-message'/>Kalau sudah ada is good, kalau belum ada kalian harus menuliskannya dulu :P Pasti sudah ada kebanyakan bawaan default template blog mah. Dalam mode editor anyar klik tulisan Settings ► Search preferences. Pada bagian Errors and redirections sobat pilih & klik Edit Custom Page Not Found. Isikan kode berikut didalam kotak!
<div id="error-404"> <div class="error1-404"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9EorWX1mRKLS2iAPJTdhrSshC8mbeFDm5jypCM-nOwGXZsjkRSNpbYbIDgUsNSgn1cpwtsod_vxlie6Dd26k6XDD7posuw3azv-166fV8cUXqQPO527pdV8f5Bt1-NhYDY1LxtEaLA4/s100/error.png" style="vertical-align:middle"/> OMG!</div> <div class="error2-404">Halaman tidak ditemukan</div> <div class="error3-404">Sepertinya ada kesalahan dengan halaman yang anda cari.<br/>Ada kemungkinan entri telah dihapus atau alamat sudah tidak ada.</div> <div class="error4-404"><a href='http://YOUR-NAME-BLOG.blogspot.com'>Back To</a></div> </div>
YOUR-NAME-BLOG gantikan dengan tujuan link lain, terserah! Save changes. Klik template ► Edit HTML ► Proceed, temukan ]]></b:skin> masukin bumbu CSS brkt
Save template. Ini yg sedikit memerlukan skill masing² dari kalian. Karena UnikID template pasti berbeda-beda adanya. Karena pada bagian ini kita akan memasukan teknik snippet, agar penampilan error page sesuai keinginan. Seperlunya saja bubuhkan variabel pada CSS ;)
Cari kode </head> tepat sebelum/diatasnya letakan snippet code berikut<b:if cond='data:blog.pageType == "error_page"'> <style type='text/css'> UNIK ID TEMPLATE YG AKAN DIHILANGKAN { display:none; } .status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
} </style> </b:if>UNIK ID TEMPLATE YG AKAN DIHILANGKAN biasanya sering dengan kode #sidebar/#sidebar-wrapper/#right-wrapper/... taruhlah disitu. Untuk .status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden bisa kalian pisah² tergantung mau dipasang variabel CSS apaan disana. Ingat apa yg saya tadi bilang (seperlunya)! Contoh penerapan
Lihat hasil kerja :) DEMO http://nombre-de-mi-blog.blogspot.com/error.html Pemilik blog Emilio Cobos berkreasi dengan javascript kepunyaan google, mirip dengan postingan Koben sebelumnya, tetapi sudah dibubuhi bumbu CSS nih sob ;))
Kalau mau pakai hasil kreasinya, sobat hanya perlu melakukan Settings ► Search preferences ► klik edit Custom Page Not Found ► masukin ini semua
Master @vagabundia bereksperimen dengan melakukan penanaman kode di static pages, dibubuhi sentuhan JavaScript redirect, sehingga nanti akan tertuju ke sana :-bd usar error_page para crear páginas de error 404. Bagaimana sobatku, bingungkan!!! :)) Intinya yaaa kalian harus tetap cemungut agal bial pandai menjadi ceolang mastel blogger :D Happy error page \m/
Sudah selesai melihat-lihat dalaman be smart, smarter, to be smartest lol! Apa yang kalian dapat? Sekarang Koben akan berbagi informasi seputar blogger blogspot yang sudah menanamkan feature customize your search preferences. You can read here blogger buzz. Ada apa saja yg ditawarkan paman google sekarang bagi para maniak blogspot :-/ Sebelum masuk ke acara inti, bagi sobat yg mengikuti perkembangan google pasti sudah mendengar-dengar, membaca apa² saja perubahan yg terjadi saat ini. Mungkin berita paling hangat perubahan algorithm query search google :D Untuk menikmati layanan blogger adds advanced webmaster, dashboard blogger lama harus memakai yang baru. Lihat di bagian atas bagi pengguna editor lama, klik tulisan Try the updated Blogger interface untuk melakukan switch ke editor baru.
Pada bagian depan klik ikon bukuIcon Buku ► Settings ► lihat ke sisi kiri pilih tulisan Search preferences. Kalian akan dihadapkan pada 3 menu utama: Meta tags, Errors and redirections, dan Crawlers and indexing. Masing² mempunyai isi, pastikan terlebih dahulu sobat membaca yg diberi tanda ? sebelum mengisi isi dari 3 menu utama tersebut ;)
Isikan dengan menuliskan ringkasan blog kallian bertemakan mengenai apa! Bijaknya samakan isi bagian ini dengan settingan description blog kalian. Matt Cutts Discusses Snippets on YouTube.
Custom robot.txt dan robots header tags kalian harus mengerti dari fungsi masing² fasilitas itu. Soalnya salah mengisikan bisa fatal akibatnya!!! About /robots.txt - Webmaster EDU Google Developers.
Penampilan loading GMAILLoading Gmail sudah berubah juga, interface lama sudah mulai berangsur teralihkan ke model baru. Contoh interface comments lama skrg menjadi begini comments side! Ternyata benar apa yg dijanjikan oleh om google, baruuu semua ;;)
Okelah sob, Koben akan kasih bonus berupa menyisipkan customizing your 404 page berupa widget by google @-)
Note: Because the widget is still an experimental feature, we don't currently provide closest match, alternative URL, and sitemap suggestions for all sites.
Backup download full template terlebih dahulu. Expand Widget Templates ► Cari kode <b:includable id='status-message'> Complete coded terlihat
Hapus semua kode warna merah, sisipkan JavaScript berikut<script type="text/javascript">//<![CDATA[ var GOOG_FIXURL_LANG = 'in'; var GOOG_FIXURL_SITE = 'http://YOUR-NAME.blogspot.com' //]]></script> <script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>Menjadi
Tulisan no posts matching the query akan digantikan dengan kotak pencarian yg mengarah langsung ke search engine google dengan konten pencarian pada blog kita sendiri! Like this my query search "template" on google search! Kalau mau memang mau dipasang, itu Javascriptnya lumayan banyak :D Happy blogging \m/
Salah satu bukti dampak yang ditimbulkan dari auto blogging menggunakan teknik pemanggilan via link RSS memang sangat merugikan bagi pemilik ide! Salah satu kasus sudah menimpa pada Master OCIM dengan satu blognya yakni http://www.blogger-id.com/ Dia mengetahui blognya terkena auto-blogging setelah melakukan search 10 Inspirasi Desain Website HTML5 Terbaik di google :D Pada posisi di atas (versi saya) yang nongol bukanlah web Ocim! Setelah masuk ke halaman yg dimaksud ternyata link² yg ada tertuju ke web dia ;)) Koben sendiri kurang begitu paham juga tentang aturan beginian di aturan mata paman google ;) Satu hal pasti, cerdiklah kita dalam membuat satu artikel! Gaya, ciri khas, penulisan atau apapun sehingga ketika ada pencolongan macam diatas, ketahuan ada bau kita :P Selalu ingat link pengambil, kalau ada link itu jangan masuk kalian yah =)) =)) Semua ada di otakmu ;)
Waktu, pengorbanan, sarana & prasarana memang dibutuhkan oleh seorang bloglang sejati bila memang kalian ingin menjadi pengelana di alam dunia maya ;;) Sudahkan kalian membabad ada apa saja di More Eksplore Get More Skill, Ayeee!!!. 1 bulan kalian bisa melihat semua isi yg ada disana, gue :-bd pada elo. Makanya Beben Koben si bloglang anu ganteng kalem tea suka malas mosting jika sudah menemukan beginian Awesome HTML5 Canvas Animations & Applications! Yang menjadi pertanyaannya sekarang adalah, apakah kalian mengeksplore atau tidak. Minimal cari²lah yg sesuai dengan apa yg kalian cari. Source sudah Koben bagi berapa biji entah lah... Oke lah coba kalian tingkatkan lagi skill dengan membaca HTML5 Snippets. Kretifitas tidak datang begitu saja, kemauan membutuhkan pengorbanan, cerdik dalam bertindak diperlukan dalam melangkah. So...what are you waiting for HTML5 & CSS3 Support, Web Design Tools & Support! Koben cabut \m/
Bila sobat memperhatikan sisi kanan blog ini, ada satu lagi web jejaring yang Koben ikutin. Pure Bloggers merupakan satu social network yang siap menyambut blogger,blog reader, artist, model and etc untuk masuk & bergaul dengan member disana :D Fitur yg ditawarkan masih sama dengan kebanyakan web jejaring sosial yg ada. Namun disini memang dititikberatkan bagi para blogger dari seluruh dunia b-) Selintas macam facebook, bau-bau twitternya juga ada, dan yg pasti banyak ceweknya :"> Silahkan di acak² saja kalau memang berminat joint. Diterangkan juga kalau belum lihat susah mau ngejelasinnya ;)) Dashboard bisa di customize sob, macam template editor blog ;;) Contoh hasil produk dari sana nih :-"
Bosan main facebook lari ke sana =)) Untuk bonusnya Beben Koben si bloglang anu ganteng kalem tea akan berbagi trik bagi sobat yg tidak mengaktifkan komentar blognya! Suka ada tuh sobat-sabit tidak mengaktifkan box comments. Like this
Sobat pasti sudah kenal dengan atribut button. Button/tombol biasanya selalu kita jumpai di form action variable. Secara garis besar button dikelompokan menjadi 3 jenis. <button type="button|submit|reset"> Atrribute yg bisa kita pakai meliputi disabled, name, type dan value. Syntax HTML ditulis begini <button> . . . </button> Isikan di tengah dengan title, maka akan menjadi Kalau divariasikan dengan teknik CSS-inline, sobat bisa membuat tombol lebih full stylish ;)Keterangan singkat bisa dibaca HTML <button> Tag Apakah pernah mencoba dari kalian membubuhi att. button ini dengan sebuah image! Memang tidak sering kita jumpai pemakaian syntax button di dalam postingan. Namun apa salahnya setelah membaca artikel ini nanti kalian akan jadi familiar menggunakannya yah :D Mari kita mulai bereksperimen ria dengan dipadu kode CSS agar lebih terlihat ngejreng :P.butt { padding: 3px; text-align: left; font: 13px Verdana, Arial, sans-serif; }Koben membuat coded CSS standar untuk button. Kalau panjang kodenya nanti pusing, jadi terserah deh kalian mau menambahkan apa disana. Yang terpenting jangan salah menyimpan kode CSS itu tepat diatas tag ]]></b:skin> Menyisipkan gambar yaaa di tengah² penulisan syntax button! Like this:
Image pakai resolusi yg 16x16 px saja. Bayangkan ada berapa image pada windows! Hohoho...kalian bisa buat apa saja terserah :))
<button class="butt"> <img src="http://link-your-image-here.png" width="16" height="16" alt="" /> TITLE </button>
Sudah membaca postingan sebelumnya tentang javascript untuk menyembunyikan konten? Koben punya satu lagi yg mirip dengan itu. Tetapi kalau ini apabila sudah dimunculkan yg tersembunyinya, tidak akan bisa di tutup lagi :D Letakkan JavaScript berikut diatas tagging </head> atau </body>
Mengangkat kembali topic trick seputar hide is sembunyi ala bloglang! Pada pembahasan sebelumnya sudah Koben sharing is care beberapa cara menyembunyikan sesuatu dengan trick in the pret full stylish :D Tidak jauh² dari itu, pada kesempatan malas ini gue akan kembali berbagi lagi dengan tema serupa hide show. Karena sangkin banyaknya trick sembunyi²an ini, timbul satu pertanyaan mau pakai yang mana? Cerdiknya ya...satu bumbu namun bisa dipakai di setiap keadaan ;) Dengan bantuan sedikit sentuhan JavaScript, teknik menulis inline style, maka terjawab sudah masalah persembunyian. Kinerjanya mirip dengan yg saya pakai pada blog ini yaitu dengan teknik collapse/expand [+/-] Contoh: Click to expand here
Untuk sobatku tercinta akan Koben kasih dengan tehnik cukup menyorot link (bukan klik) maka akan terlihat apa yg tersembunyi ;) Masukan Javascript sebelum tagging </head> atau bisa juga dicoba diatas tag </body>
<script type='text/javascript'> //<![CDATA[ function showBox (is){ document.getElementById(is).style.display="block"; } function hideBox (is) { document.getElementById(is).style.display="none"; } //]]> </script>
Beres deh. Sudah tertanam sekarang senjata menyembunyikan konten di blog kalian ;;) Pemakaiannya yg harus sedikit membutuhkan ketelitian! Karena menggunakan attribute ID (unik ID) maka jika mau memakai lebih dari satu, harus berbeda ID-nya ;) Apalagi tidak memakai id, ya tidak akan jalan nantinya sob =)) Begini syntax penulisannya<a href="javascript:void(0)" onMouseOver="showBox ('UNIQUE-ID');">YOUR TITLE</a>
</div>Kode style="" pada CSS merupakan gaya inline, yg mana bisa kalian tambahkan variabelnya sesuka hati :P UNIQUE-ID <--- Satu penulisan syntax terdapat 3x pengulangan UNIQUE-ID! Untuk 2x, 3x, ... harus beda itunya entuh...mengerti kan :) Contoh:
Semakin susah saja menemukan artikel unik, gaya punya, berbeda dan full stylish :-s Okelah walaupun sukar mencari resource oke bgt, Koben akan berbagi satu web yang mungkin bisa menambah ilmu kita Script Tutorials. Silahkan kalian acak² yg ada disana :D Beben Koben si bloglang anu ganteng kalem tea akan mengangkat salah satu postingan dari @AramisGC yakni mengenai CSS3 vertical multicolor 3D menu. Menu ini backgroundnya bisa bergonta-ganti warna, serta dengan sub menu yang begitu dinamis :x Koben sedikit berkreasi dengan membuatnya menjadi bergaya fixed menu ditambah dengan variable opacity agar terlihat makin maknyus :D Jadi begini...itu si CSS 3 vertical multicolor 3D menu seolah-olah menghilang, namun ketika disorot akan terlihat jelas nantinya ;)) Demo
Si bloglang anu ganteng kalem tea akan coba berbagi trick serupa memakai CSS dengan sedikit sentuhan variable DHTML. Walau tidak sama, namun seperti itu penampakan hasil trik ini :D Koben buat dengan kode sudah seminimal mungkin nih ;) Karena memakai atribut fixed, maka harus diperhatikan posisi ketinggian!
Markup HTML
Penulisan syntax HTML bisa kalian pasang sebelum/diatas tagging penutup </body> Kalau pusing Add a Gadget saja pilih opsi HTML/JavaScript.
SAVE. Lihat hasil kerja :) Hal² yg perlu diperhatikan!!! Atur width/height yg terdapat pada var .c1, .c2, dan .c3 Panjang dan tinggi itu merupakan efek ketika hover (nongol) :P Tambahkan panjang yg sudah dipatok dengan nilai nominal margin (margin: 5px 0 0 45px;)
Sekedar berbagi the great information hasil Koben walking in the prettt. Resource di luaran menawarkan berita² tidak terhingga untuk kita simak. Apalagi jika menemukan konten yang sesuai dengan yang dicari. Bakalan bisa anteung terus menjelajah sampai ke dalam-dalamnya :D Informasi pertama datang dari adipoli jQuery image hover effects Adipoli adalah plugin jQuery sederhana yang digunakan untuk menghasilkan efek pada image dengan ragam hover yg cantik². Lanjut ke Backstretch jQuery plugin yang memungkinkan kita untuk menambahkan gambar latar belakang dinamis untuk setiap halaman. Background dengan image bisa gonta-ganti gitooo. Mau melihat-lihat seputaran efek slider tidak kurang ada 11 effect yg ditawarkan! Tepat sekali kalian mendatangi ke halaman berikut WOW slider :-bd
Tidak kalah style dengan efek slider si WOW, sobat mungkin mau melihat info Exposure jQuery plugin. Eksposur adalah sebuah plugin gambar tampilan untuk JavaScript jQuery. Dirancang dengan tampilan memukau, fully customizable viewing experiences, dan dapat menangani jumlah gambar dengan resolusi besar. Benar² membuat ngiler karya developer ini :) Makannya apaan bisa membuat kreasi yg begitu hebat BGT :P Patut ditengok jg awkward showcase jQuery plugin! Awkward showcase di claim bukan slider konten biasa. Tapi bisa melakukan lebih dari sekedar slide konten. Sebagai contoh kita dapat menambahkan tooltips, memungkinkan thumbnail, mengaktifkan ketinggian dinamis dan banyak lagi. Sudah berapa biji tuh informasinya ;)) Bonus Koben kasih ini deh camera slideshow ;;)
Sobat masih ingat dengan trick cloud zoom on the blog? The last information i'll share about it.
Tjpzoom ialah sebuah script image magnifier dengan tawaran² kelebihan yg patut di lihat tjpzoom. Enam tampilan zoom yg dapat kita rubah (default, smart, natgeo, roundfun, purity & relative) Terdapat pula turning on/off buat zoom script. Maknyusss deh pokokke :)) Click and hold right pada mouse gerakan maju-mundur dan kiri-kanan dapat melihat hasil efek zoomernya :-O Semoga bermanfaat \m/
Variabel CSS3 memang memberikan sentuhan² baru. Dari biasa, kemudian dirangkai dengan variabel lain bisa menghasilkan suatu kreasi, bahkan animasi yang tidak kalah dengan sentuhan bumbu script :D Bahkan issue hangat CSS4 akan segera menyusul @-) Dahulu penulisan var. CSS tidak mengenal atribut >, content: "";, border-radius, ^, dsb :P Masih ingat slider used css3, spinning and slider CSS3, atau bahkan lupa dengan simple content slider pure CSS3! Memang apabila kita ingein bermain CSS harus sedikit banyak kode², agar hasil akhir terlihat sesuai dengan apa yg diinginkan ;) Kembali hadir trick CSS3 Only Image Slider.
Trick tulisan menggunakan efek css3 apalagi sudah Koben bagi² berapa biji disini? Dengan daya kreasi kalian, pasti sudah dapat membuat karya edan bin gelo tea =))
Beben Koben tidak akan menjelaskan semua trick diatas, akan tetapi Koben akan bagi satu web dengan artikel maknyus². Walau baru sedikit postingan yg ada di sana, tidak akan rugi bila kalian ingin melihat-lihat apalagi mempelajari trik yg ada! Penjelasan terpapar dengan jelas, link download diberikan, demo sudah ada juga ;;)
Form action, box search, kotak pencarian atau apapun itu namanya tetap saja mempunyai fungsi untuk mencari konten yang dicari! Versi advanced search box, style yg lain silahkan acak² sendiri di kotak pencarian blog ini :D Singkat cerita cuma mau berbagi bermain kode seputaran form action saja kok ;)) Mari kita mulai acara bermain-main namun mendapatkan pelajaran. Jangan belajar sambil bermain, yg didapat nanti keteledoran dalam bertindak ;) Focus, seriously but still calm down..relax! Jangan dipaksakan, karena segala yg dipaksakan akan terasa menyakitkan :D Coba sobat sekarang ngupil dengan kasar dan dipaksain telunjuk masuk ke hidung! ENAK nggak!!! Default code tanpa disertai variabel CSS apapun...
Variable placeholder dapat menggantikan fungsi onfocus or onblur! Sekarang kita coba sisipkan dengan beberapa sentuhan CSS standar untuk memperindah penampilan.
<form action="http://YOUR-BLOG.blogspot.com/search" method="get" target="top"> <input name="q" class="search" placeholder="Search here..." /> </form>Pada tagging <input> kita sudah memasukan 1 unik ID dengan nama class search. Masukin bumbu border coba ke kode CSS! Ingat penulisan kode border tidak harus selalu border: px/em solid,dashed,dotted color (border: 3px solid #000) Look is this
Belum lagi varibel margin, padding, text effect and etc yg bisa kalian pakai dalam memvariasikan gaya sesuai selera :)
Semua sudah ada rumus/kode/bahasa/language masing² untuk bermain kode² CSS. Tinggal sampai mana kemauan kita untuk belajar memahaminya :) Koben kalau malas bin jenuh kayak ini gini. Detail menerangkan namun tetap menghasilkan kreasi full stylish b-) Kalau harus diterangkan terus secara detail, sementara sudah banyak resource web rujukan, kapan saya berbloglang ria untuk mencari ilmu dibagi-bagi kepada sobat sekalian :)) Semua ada di otakmu. Happy codding \m/
Fitur cube dimana mengaplikasikan variable CSS 3D transform ternyata sedang mendapatkan perhatian hangat dari para pengembang mozilla browse ;)) Artikel sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi cerita seputaran berita informasi update hasil walking in the pret kesana kemari :P Firstly gue akan berbagi info hangat datang dari dev. web @9lessons Master Srinivas Tamada telah membuat semacam flipboard aplikasi guna mengakses blog/web karena tersandung masalah aturan firewall Websense. Proses kerja yakni membaca data RSS Feed Google API dikirim ke api.thequeue.org untuk menampilkan URL dirubah ke versi text @-) Kalian bisa membaca di 9lessons blog untuk lebih jelas, demo dan tentu download scriptnya ;)) Koben juga sudah buat dan disimpan karena memang bermanfaat sekali untuk bereksplore ria in the pret Get URL Easy To Read :D
Kabar ke dua datang dari google+ platform blog! Bila sobat memperhatikan sekarang tombol g+ sudah diperbaharui menjadi full stylish b-) Check out the new looked:
Before you’ve +1’d
After you’ve +1’d
Jadi seperti warna bendera negara kita yah :x Mirip tapi tak sama :)) Panduan google+ platform.Kabar terakhir datang khusus bagi moziller tentang CSS 3D transform Dev Derby. Here video version CSS 3D cube transformation.
Aplikasi buat android, bagusnya lagi saya tidak punya android :D Apeuuu...:))
Masuk dan lakukan login dari sini untuk merasakan fitur 
Icon Buku
Loading Gmail
Kabar terakhir datang khusus bagi moziller tentang CSS 3D transform Dev Derby. Here video version
#navbar-iframe {
background-color: #333;
display: block;
}
#hidden_navbar {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 100%;
}
#hidden_navbar img {
float: right;
margin-right: 7px;
margin-top: 7px;
cursor: pointer;
}