Trik Komputer: Google

Tampilkan postingan dengan label Google. Tampilkan semua postingan

Sabtu, 16 Agustus 2014

Make List Player Video Youtube in Post Pages Blogger

AA Koben akan berbagi trick dari web youtube. Mungkin agak mirip dengan trik youtube on blogspot Akan tetapi versi sekarang sedikit ekstrim, namun mudah untuk memiliki ListPlayer, soalnya sudah ada yang membuat :D Dari penulisan susunan kata ListPlayer disatukan, jika kita translate google akan terkena Did you mean: sehingga menjadi List Player yg berarti Daftar Player ;)) Apakah yg dimaksud dengan ListPlayer?

List-Player adalah pemutar video dengan fitur (tempilan) playlist. Sobat dapat membuat, bermain dan berbagi playlist video kalian.

Searching video tambahkan ke dalam playlist.
Menghasilkan Link playlist yang siap untuk berbagi dengan orang lain (pencet tombol Generate untuk membuat link berbagi).

Sekarang tinggal urusan memasukannya ke dalam blog masing-masing! Buat satu halaman post pages baru, ingat ya...POST PAGES bukan halaman post biasa. Kemudian masukan seluruh bumbu berikut...get coded (pencet tombol enter kalau keluar gambar tengkorak ijo) :P

DONE.

Agar simetris dengan tampilan template, sobat harus melakukan snippet CSS dalam bumbu, dan sisipkan kode CSS hasil snippet di dalam tagging<style> . . . . . . . . . </style>Jangan di utak-atik bumbu yg ada, soalnya sudah melewati compressing code, tambahkan saja kode CSS hasil snippet kalian!

DEMO:

Final result List Player Youtube on The Blog. And this is example for sharing is caring via press generate button list player youtube on the blog.

Source: jsdo.it/ionstage/ay8O

Kalau mau berbagi video youtube pilihan hasil generate kalian, pakai link post-pages aku juga tidak apa-apa kok :"> ;))

Happy player list \m/

Kamis, 24 Juli 2014

Add Animation Click Effect use Waves

Datang dari artikel milik google mengenai google material design, yang mana tertulis kata-kata "We challenged ourselves to create a visual language..." dan ternyata responpun berdatangan bak virus penyakit :D Para developer, coderer, scripter ~~whatever the name~~ berlomba menunjukan kabisanya masing-masing! Berikut beberapa contoh hasil karya orang-orang hebat yg terhosting on web codepen codepen.io/search?q=Google+Material+Design.
Setelah melihat karya para maestro kode, dapat kita lihat seksama apa yg menjadi pusat perhatian mereka :-?? Sebagian besar fokus terhadap trick/tutorial animation effect! CMIIW...;)) Berikut salah satu contoh animation click effect inspirasi dari google's material design.

Touch ripple - Close

Pokoknya efek blink-blink buricak burinong seperti itulah! Karena banyak master yg berkreasi mengenai hal ini, maka AA Koben pilihkan buat anda master Fians dari Indonesia?

Take a look: publicis-indonesia.github.io/Waves/Planning code

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
 <html>
  <head>
   <meta charset='utf-8'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
        <link rel="stylesheet" type="text/css" href=".../waves.css" />
 <b:skin>
  <![CDATA[

  ]]>
 </b:skin>
  </head>
<body>  

 <script type="text/javascript" src=".../waves.js"></script>
 <script type="text/javascript">
  var w = new Waves();
  w.displayEffect();
 </script>
</body>
</html>

Masukan kode CSS (waves.css) mau di hosting atau enggak, terserah kalian. Host JavaScript (waves.js) biar cepat rendering.
Beberapa markup HTML waves:

Flat buttons<a class="waves-effect waves-button">Button A</a> <button class="waves-effect waves-button">Button B</button> <input class="waves-effect waves-button" type="submit" value="Button C"> <input class="waves-effect waves-button" type="button" value="Button D">

DIVs<div class="waves-effect waves-block">Plain Box</div> <div class="colored-box waves-effect waves-light waves-block">Colored Box</div> <div class="raised-box waves-effect waves-float waves-block">Raised Box</div>

Images<span class="waves-effect"> <img src="LINK-IMAGE.jpg"> </span> <span class="waves-effect waves-light waves-float"> <img src="LINK-IMAGE.jpg"> </span>

Si yu :-h

Minggu, 10 November 2013

Make Link Share One Google Account be Alive

Seperti yang sudah kita ketahui bersama, perusahaan Google sedang melakukan perombakan besar-besaran pada setiap produknya. Alhasil tampak jelas disana-sini tampilan² yang diremajakan terlihat menjadi lebih fresh. Tengok perubahan tampak depan dari halaman blogger features Satu yang pasti perubahan terjadi juga pada bagian sesi sign in google accounts. Di samping perubahan, penambahan produk jg dilakukan oleh pihak google. Contohnya yaitu google web designer Mungkin sobat sudah pada lebih tahu dari pada saya :P

Old Blogger Features	New Blogger Features

Satu yang mencuri perhatian gue ketika melihat tampak muka sign account google, tepatnya pada bagian bawah nampak 7 buah icon! AA pikir ada link hidup yg akan mengarah kemana. Ternyata memang gambar doang bro :P Koben akan menanamkan link hidup disana dengan mamakai gambar tersebut. Gunanya terserah kalian untuk apaan :))

Jika sobat mau resolusi asli gambar one google, saya sudah buatkan di codepen. Rasakan cdpn.io/BfxGb Kalau mau sedikit imut², berikut ramuan yg mesti di godog.

one-google

Save dan hostingkan gambar tersebut! Koben buatkan inline style CSS nya, urusan penempatan terserah masing²

<div style="position:relative;width:210px;height:17px;margin:15px auto">
    <img alt="" src="HOST-GAMBAR-ONE-GOOGLE" style="display:block;margin:0 0;padding:0 0;border:none;outline:none;max-width:none;max-height:none;" height="17" width="210" />
        <a href="GOOGLE-PLUS-LINK" title="Google Plus" style="display:block;width:14px;height:15px;position:absolute;top:0px;left:196px;">
        </a>
        <a href="GOOGLE-PLAY-LINK" title="Google Play" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:165px;">
        </a>
        <a href="GOOGLE-YOUTUBE-LINK" title="YouTube" style="display:block;width:19px;height:15px;position:absolute;top:0px;left:97px;">
        </a>
        <a href="GOOGLE-DRIVE-LINK" title="Google Drive" style="display:block;width:15px;height:15px;position:absolute;top:0px;left:65px;">
        </a>
        <a href="GOOGLE-MAIL-LINK" title="Google Mail" style="display:block;width:21px;height:15px;position:absolute;top:0px;left:30px;">
        </a>
        <a href="GOOGLE-SEARCH-LINK" title="Google Search" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:0px;">
        </a>
        <a href="GOOGLE-MAPS-LINK" title="Google Maps" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:133px;">
        </a>
</div>

Gantikan tulisan gede-gede tersebut jangan lupa! Semoga bermanfaat :)
Happy blogging \m/

Senin, 16 September 2013

Only Some Information Is Not a Tutorial

Setelah melihat-lihat ternyata lumayan banyak juga update informasi dari Embah Google mengenai beberapa layanan dan produknya. Pertama-tama adalah info automatically share your blog posts to google+ [via Blogger Buzz] Secara serentak setelah diaktifkannya tombol berbagi ke halaman google+, google sudah menceklis secara default pada Settings ► Google+ ► Automatically share after posting Lantas apa perbedaan berbagi otomatis ini dengan Share yg ada pada bagian Posts! Jika kita mau melakukan share to google+ page dengan yg ada pd Posts sesion, maka kita melakukan Add a Comment secara manual. Namun yg otomatis sudah langsung mengambil cuplikan head lines post blog kita (Jika snippet meta tag microdata sudah benar)

Berita selanjutnya datang dari layanan Google Trends. Google sudah membuatkan lebih banyak kateogri dengan mengurutkannya berdasarkan top charts. Open this for trying Google Trends Top Charts Bagi user pengguna chrome browser, info enak berikut akan mempermudah kalian dalam mengedit-ngedit photo the new google+ photo editor
Sedikit dari dunia advertiser cek gi dot bro google affiliate network Yang terakhir adalah berita hangat Google+ Embedded Posts. Ternyata google tiodak mau kalah dengan twitter & facebook ;)) You can read here google+ embedded posts
Contoh

Jika berupa links, maka akan terbuka langsung pada tujuan Beben Koben google+ Google+ badge pun tidak luput dari pembaharuan bro, tengok saja ;)

Jika sobat sudah memasang script//apis.google.com/js/plusone.jsjangan dipasang lagi, tinggal tuliskan saja syntax HTML di area postingan! Coba masukan link post google+ page ke dalam kotak tools sederhana berikut

Bonusnya ini saja oke, coba ganti tulisan yg ada di kotak

query = kata kunci image yg dicari
beben-koben.blogspot.com = blog kalian

Extra bonus:

cdpn.io/vetCA - cdpn.io/xIbnz - cdpn.io/ImfCJ - cdpn.io/rKuCg - cdpn.io/gkwzF - cdpn.io/Bimhg - cdpn.io/rnvkG - cdpn.io/cojza - cdpn.io/mtgLK - cdpn.io/yuzvq - cdpn.io/yIcoH - cdpn.io/wklrG - cdpn.io/jmkfK - cdpn.io/epwdH - cdpn.io/qLHAB - cdpn.io/Fdnlz - cdpn.io/dykhL - cdpn.io/ivtmJ - cdpn.io/inluv - cdpn.io/rzynD
Semoga bermanfaat informasinya :)
Happy blogging \m/

Senin, 29 Juli 2013

Membuat Navigasi Menu Ala Google Plus

Apa hendak di kata mau tak gelem tema kali ini akan berbicara tentang tema menu lagi. Sebelumnya gue sudah berbagi tutorial membuat lists toc menu! Sekarang berbagi cara membuat menu ala google plus punya :-B Bagi kalian yang sering bermain jejaring web google+, pasti tidak akan asing dengan keberadaan menu navigasi sebelah kiri, yg akan muncul setiap kali kita sorot!

Tidak mirip 100% dengan apa yg tampak pada screenshot :"> Gaya, teknik and hasil jadi bisa dikatakan serupa ;)) Main menu diposisikan diam di kanan pojok dengan tinggi height: 4em; Perlu digarisbawahi, menu ini menggunakan trick CSS content

www.w3schools.com/cssref/pr_gen_content.asp
developer.mozilla.org/en-US/docs/Web/CSS/content
www.w3.org/TR/CSS21/generate.html#content
dev.opera.com/articles/view/css-generated-content-techniques/

#main-navigation {
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}

Planning HTML

<div id='main-navigation'>
<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>

Source coded by: codepen.io/joshumax/full/asIfy

Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/

Sabtu, 06 Juli 2013

Google Reader is Discontinued and How to Solve it

Setelah sekian lama menemani para fansnya, Google Reader kini resmi dihentikan (~~discontinued~~) Efek yang paling terasa mungkin kita tidak dapat lagi membaca ria artikel langganan web/blog pilihan di halaman google reader! Singkat cerita link yg tertuju ke halaman GOOGLE READER tidak dapat di akses lagi :-s Layanan yg diluncurkan pada tanggal 7 Oktober 2005 menutup diri tepat pada tanggal 1 Juli 2013 kemarin. Adapun hal-hal yg sering dipertanyakan sbb:

Apa yang terjadi pada data Google Reader kita?

Google Takeout

Apakah akan ada cara untuk mengambil data langganan dari Google di masa depan?

Mengapa Google Reader dihentikan?

official blog

Setelah mengetahui kabar pemberhentian layanan google-reader, apakah tidak ada jalan alternatif untuk menanggulangi itu semua? Ooo tenang saja lagih, masih banyak tawaran layanan serupa di luaran yg lebih hebat dari google reader :))
Buka halaman berikut alternativeto.net/software/google-reader
Menurut survei yg gue dapat, ternyata layanan terfavorit jatuh ke feedly diantara persaingan ketat antara web feed reader services :p

Dengan layanan feedly kita dapat melakukan hal serupa dengan google reader bahkan lebih dahsyat...(Login terintegrasi langsung dengan account google kalian masing²) Hal yg dapat dilakukan tanpa registrasi meliputi membaca tag pilihan dari web pilihan dan add link RSS kemudian membacanya. 4 bentuk tampilan telah tersedia title only view, magazine view, cards view & full article. Kalau cuma judul saja yg terlihat, coba saja yg ini look feed atom rss. Dengan feedly kita juga dapat mengambil tombol berlangganan

My Feed

Kalau mau mencoba search RSS, gue tawarin dari master Amit Agarwal ctrlq.org/rss Satu yg patut dicoba juga fulltextrssfeed.com Untuk urusan sosial feed, Koben kepincut dengan plugins.in1.com/socialist Sebagai bonusnya buat have fun melihat link RSS dengan gaya star wars 3d scrolling text!
Try here: fotcorn.github.io/StarRSS
Download here: github.com/fotcorn/StarRSS
Bonus lagi, trik dan tips buat efek CSS star wars opening crawl dengan kode yg simple & dikit codepen.io/yukulele/pen/KsCIi
Kelupaan contoh keren lagi look RSS Url Narengowda style

Good bye google reader :-h

Kamis, 04 Juli 2013

Google Picker to Explore & Connect Your Content

Seperti yang sudah kita ketahui bersama, blogger blogspot adalah layanan blog gratisan dari embah google. Gmail layanan free email, google maps, google plus dan banyak lagi ya pemiliknya si GOOGLE :p Dengan bertebarannya layanan google ini, sedikit lebih telah menambah perbendaharaan link kita. Salah satu contoh layanan google yg bisa mempermudah dalam berkerja adalah google drive Kehadiran google drive dimana merupakan pengganti dari google docs and google code, tempat berbagi, download & menyimpan file. Semua fasilitas tersebut dapat dinikmati jika seseorang mempunyai account google :d

Satu sandi. Untuk semua produk Google.

Ingin menikmati yang terbaik dari Google? Cukup masuk, anda hanya membutuhkan satu nama pengguna dan sandi untuk membuka kunci berbagai fitur layanan yang digunakan setiap hari, seperti Gmail, Maps, Google+, Apps Google dan YouTube.
Sekarang AA Koben akan berbagi satu google services yg bisa mengefisienkan waktu sodara² dalam kegiatan melakukan explore dari beberapa produk kepunyaan si embah! The product name is google picker api Dengan google picker kita bisa berhubungan langsung dalam satu tempat ke ± 17 google services :) Silahkan buka, download dan save page as berikut...Google Picker Page

Apps .html google picker tersebut menggunakan settingan standar. Jika sobat kepengen lebih privasi, buka pada notepad gantikan script<script src="http://www.google.com/jsapi"></script>menjadi begini<script src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>Isikan YOUR-API-KEY dengan API-Key kalian masing² Untuk masalah variasi script agar dapat lebih maknyus, silahkan dipelajari sendiri di google picker api developer's guide Saya enggak paham :d Mengganti bahasa perhatikan script brktgoogle.load('picker', '1', {'language':'id'});Ganti id dengan kode bahasa masing² Demikian saja tips ringan dari AA, semoga bermanfaat :) Oooo...kalau kalian malas menyimpan apps .html google-picker, simpan saja link ini OnePick :))
Contoh pemasangan layanan google picker ke dalam blog embah google. Variasi action script yg gue pakai: Google documents, Google gambar, Penelusuran video dan Unggah Photo.
Happy google services \m/

Jumat, 24 Mei 2013

Change Google Code Download Service to Google Drive

Sobat kenal dengan layanan google Google project hosting Project hosting di google code menyediakan lingkungan pengembangan kolaboratif gratis untuk proyek-proyek open source. Setiap proyek dilengkapi dengan Subversion/Mercurial/Git repository, issue tracker, wiki pages, dan downloads service. Download dilaksanakan oleh project hosting google code memungkinkan proyek open source untuk membuat file kita siap sedia didownload publik. Sayangnya, layanan download telah menjadi sumber kekerasan dengan peningkatan yang signifikan dalam insiden baru-baru ini. Karena ini penyalahgunaan peningkatan pelayanan dan keinginan untuk menjaga komunitas tetap aman, google akan menonaktifkan service download yg berada di google code.

Mulai hari ini, proyek-proyek yang sudah ada (Project Hosting on Google Code) yang tidak memiliki layanan download dan semua proyek baru tidak akan memiliki kemampuan untuk membuat download. Proyek download tidak ada perubahan yang terlihat sampai dengan 14 Januari 2014 dan akan tidak lagi memiliki kemampuan untuk membuat download baru dimulai pada tanggal 15 Januari 2014. Semua download yang ada dalam proyek-proyek akan terus dapat diakses di masa mendatang.
Jika proyek sobat menggunakan download untuk host dan mendistribusikan file dan memiliki kebutuhan secara periodik membuat download baru, disarankan kita memindahkan link download ke layanan alternatif seperti Google Drive sebelum tanggal 15 Mei 2014. Jika Anda memilih untuk memindahkan file ke Google Drive, lihat artikel bantuan help article.

Sumber: Google open source blog

Oleh sebab itu lekaslah backup seluruh data kita yang berada di google code, dan pindahkan ke google drive #:-S Demikian informasi yg dapat Koben sampaikan, kurang lebihnya tolong dimaklumi. Karena gue juga manusia bukan malaikat ataupun Nabi!

Bonus resource...

+ 60 Most Wanted CSS & jQuery Tutorials
blog.karachicorner.com/2013/05/css-jquery-tutorials
+ 30 Tutorials For Creating Buttons in CSS3
smashinghub.com/tutorials-for-creating-buttons-in-css3.htm
+ Magic Sphere
jsrun.it/salleygarden/h2rp
+ Easily manage all your social network settings
www.blisscontrol.com
+ Try to straighten the sheet
codepen.io/Vampireos/pen/baAJF
+ Flatulent Experience!
codepen.io/bbuk-/pen/nDfdA
+ Slider like Yahoo Weather App
codepen.io/BaylorRae/full/ImGBC
+ 3D Carousel Using TweenMax.js
codepen.io/johnblazek/full/nceyw
+ CSS3 Timeline
codepen.io/P233/full/lGewF
+ Simple comparison slider
codepen.io/thibaudbe/pen/Ejnaf
+ CSS only 3d Macbook Air
codepen.io/neoberg/pen/istyp
+ Full CSS NES
codepen.io/onediv/pen/AsDev
+ css3 proximity effect layout
cssdeck.com/labs/css3-proximity-effect-layout
+ CSS drop water
cssdeck.com/labs/full/css-drop
+ jQuery Range Slider
refreshless.com/nouislider
+ Excelentes Tutoriais CSS3
www.siteparaempresas.com.br/blog/?p=3732
+ 30 Plugins And Tools That Will Improve Your Work And Save You Time
vandelaydesign.com/blog/tools/plugins-save-time
+ Creating a simple jQuery plugin for Pinterest
www.developerdrive.com/2013/05/creating-a-simple-jquery-plugin-for-pinterest
+ bluePen Editor
www.bluepeneditor.com
+ phpFreeChat
www.phpfreechat.net/demo
+ Drop-Down Navigation Responsive and Touch-Friendly
www.osvaldas.info
+ Flat UI Login Form
cssdeck.com/labs/full/flat-ui-login-form
+ Slider manual puro css
codepen.io/Kseso/pen/FmBKp
+ Label.css - Label every thing!
www.usablica.github.io/label.css
+ Easy Responsive Tabs to Accordion
webtrendset.com/demo/easy-responsive-tabs/Index.html
+ 50 Useful CSS Snippets Every Designer Should Have
www.ipixel.com.sg/blog/web-design/50-useful-css-snippets-every-designer-should-have
+ 20 Fresh Tutorials and Examples for Creating Buttons in CSS3
www.psdtohtmlhint.com/20-fresh-examples-for-creating-buttons-in-css3

Semoga bermanfaat :)
Happy walking \m/

Selasa, 21 Mei 2013

Make Clickable Menu Google Search Engine

Setelah menghilangkan beberapa fitur dari tampilan yang ada pada google search engine bersamaan dengan itu hadir juga fitur baru. Contoh fitur yg dihilangkan antara lain screenshoot website, google plus share, link cached, similar and etc. Fitur baru pengganti hadir dengan membawa clickable menu yg isinya terdiri dari link cached, similar and share (yg terlihat cuma itu :d) Link navigasi dipindahkan ke bagian atas tepat di bawah kotak pencarian dan tentunya main navigasi yg selalu ada dimanapun produk google berada :))
Koben mau berbagi cara membuat clickable menu google full memakai CSS. Bila masih belum ngeuh dengan clickcable menu, perhatikan!!!
Before the click

After the click

Itulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO

Cached

Similar

.contshare {
  display: none;
}
.contshare a {
  color: #343434;
  text-align: center;
  text-decoration: none;
}
.wrapshare:active .contshare {
  display: block;
}
.wrapshare {
  position: relative;
}
.contshare:hover {
  display: block;
}
.parrow {
  width: 0px;
  height: 0px;
  cursor: pointer;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #060 transparent transparent transparent;
}
.contshare {
  width: auto;
  position: absolute;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.contshare li {
  color: #343434;
  background: #FFF;
  padding: 5px 10px;
  text-align: center;
  list-style-type: none;
}
.contshare li:hover {
  background: #EEE;
}

Planning HTML

<div class="wrapshare">
<div class="contshare">
<li><a href="#">Cached</a></li>
<li><a href="#">Similar</a></li>
<li><a href="https://plus.google.com/u/0/_/sharebox/dialog" target="_blank">Share</a></li>
</div>
<div class="parrow"></div>
</div>

Aurlah sendiri nominal yg ada, itu hanya kode CSS dasar yang perlu penambahan disana-sini.
Semoga bermanfaat :)
Happy blogging \m/

Kamis, 16 Mei 2013

Blogger Contact Form Gadget Released & Update Google Plus Display

Informasi terupdate dari pihak blogger and google. Sudah melihat tampilan baru dari halaman google plus Sekarang memakai UI terbaru, yang mana perombakan terjadi pada area menu dan embed chattingan! Menu disembunyikan dan akan terlihat dengan gaya hover. Bagian embed chattingan (di gabung dengan fitur hangout) metode yg dipakai dengan click untuk memunculkan.
Screenshot

New Google+ Page	Hangouts Display	Hangouts Shortcut

Yang kemarin saja belum apal, eh sudah diganti lagi layoutnya ;)) Informasi ke dua datang dari dunia gadget blog, pihak blogger menambahkan widget baru yaitu "Contact Form" In google+ page blogger introduced a new "Contact Form" widget Koben juga sudah tambahin contact form widget dr blogger, sebelah kanan bawah :d

How To Add It

1. Go to the Layout Tab. post-img

2. Click button the Add a Gadget. post-img

3. Click on More Gadgets.

4. Choose the Contact Form Gadget. post-img

5. Save it.

Feature contact form gadget blogger.

> Mengirim pesan teks secara sederhana.
> Belum tersedia dukungan untuk attachment file (kemungkinan di masa depan :p)
> Kustom CSS styles dapat ditambahkan (jika mau dan bisa :d)
> Markup/syntax yg dapat digunakan sama dengan yg ada pada komentar default blogger (<b>, <i>, <a>, or <u> - tidak bisa mengirim HTML file melalui pesan)

Gadget baru ini datang dengan update terbaru google mengumumkan Google I/O 2013 dan sepertinya Blogger masih merupakan bagian integral dari produk google.
Happy googler \m/

Jumat, 19 April 2013

Enable Google Plus Comments in Blogger Customize Template

Hai blogger, baru saja kemarin perombakan terjadi pada bagian html editor template blogger! Sekarang google selaku pengembang blog berbasis blogspot sudah mengeluarkan lagi terobosan terbaru di bagian comments Berikut beberapa link informasi resmi mengenai mergernya comments google+ dengan comments blogger:

Sebelum masuk ke acara bagaimana cara mengaktifkan comments google+ agar berkerja di blog, ada beberapa hal penting yang mesti diperhatikan oleh kita.
[-] Threaded Comments II for Blogspot.
Bagi sobat yg sudah mengkatifkan sistem threaded comment, seluruh kode & javascript tidak akan berkerja lagi.
[-] Emoticon For Blogger.
Hack penanaman emoticon pada sesi komentar akan turn off alias tidak berfungsi lagi.

Mungkin yang terakhir kita akan disibukan dengan harus membersihkan kode-kode CSS dan script yg tidak terpakai lagi di dalam blog kita! Lantas langkah apa yg mesti di lakukan terlebih dahulu sebelum benar-benar memasang comments google+ tertanam ke comments blogger? Kita harus mempelajari untung ruginya dulu ;)
Kerugian
Kehilangan beberapa hack/snippet yg sudah kita lakukan di bagian komentar. Menghilang tampilan comments (Published / Spam) yg ada di dashboard!
Keuntungan
Kolom komentar terlihat baru, terintegrasi langsung ke halaman google+, fitur reply sudah tertanam, tombol g+ sudah ada di dalam bagian komentar, bisa memasukan & melihat link postingan yg kita ikuti, Apa-apa yg terjadi di google+ akan terlihat juga di blog kita! dll :d

Before	After

Kekurangan dari New google+ commenting system

   Google+ ready stock - Untuk membuat komentar di blog, pembaca harus memiliki akun Google. Jika mereka tidak memiliki, mereka akan dipaksa untuk membuat akun Google sebelum mereka dapat mengomentari blog. Pengomentar tidak akan lagi mendapatkan pilihan untuk masuk menggunakan OpenID, atau membuat komentar anonim.
   Pilihan Moderasi - Saat ini, default blogger memiliki opsi untuk menyetujui dan menolak komentar yang ataupun tidak akan tampil di blog. Tanpa mekanisme moderasi yang tepat, maka akan lebih sulit untuk berurusan dengan spammer.
   Widget recent comment - Widget recent comment yang bekerja pada komentar blog mungkin tidak bekerja dengan baik karena ini tergantung pada komentar blogger.
   Update: Sistem komentar baru memiliki beberapa pilihan untuk menangani komentar bernada spam. Google menambahkan secara otomatis dan akan menyembunyikan komentar yang menurutnya spam. Kita dapat meninjau komentar tersembunyi dengan mengklik blue review comments bar. post-image

Kita dapat menghapus komentar dengan meng-klik pada V di sisi kanan komentar. post-image

Keuntungan dari New Google + Commenting System

   Lihat semua diskusi tentang Blog pada satu tempat sekaligus. - Ketika seseorang berbagi posting kita di google +, akan muncul di google plus komentar.
   Pilihan untuk komentar publik atau pribadi untuk Lingkaran mereka - Google + sistem komentar memungkinkan pembaca untuk komentar publik atau pribadi untuk Lingkaran mereka di Google+.
   Melihat Komentar - Pembaca dapat memilih untuk melihat semua komentar, atau hanya komentar atas atau hanya yang dibuat oleh orang-orang di kalangan mereka
   Ada Komentar tidak akan hilang - Tidak seperti komentar Facebook, semua komentar Blogger lama Anda masih akan terlihat di Blog Anda dan jumlah komentar tidak akan hilang.
   Terlihat lebih baik - Sistem komentar baru benar-benar bersih dan terlihat jauh lebih baik daripada standar Blogger.

Cara Mengaktifkan Blogger Comments ke Google+

Langkah mengaktifkan comment google+ terhadap blog pada dasarnya ada dua langkah pokok.

Mengintegrasikan blog kita dengan google plus integrate your blog with google plus.
Hidupkan (turn on) google+ comments.

Setelah blog kita terintegrasi dengan google+, kita akan dapat menggunakan google+ comments. enable-google-plus-comments

Setelah langkah ini dilakukan, kalian akan melihat google+ comment system di blog. Jika tidak muncul, maka harus melakukan tweak template untuk memunculkannya. Jika tidak mau mengubah kode HTML, cara termudah adalah mengembalikan widget templates ke default (kalian akan kehilangan kustomisasi yang dibuat untuk Blog Post Widget jika melakukan ini)

LAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU, TAKUT TERJADI APA-APA BOOO!

Untuk melakukan revert widget templates to default ikuti langkah² berikut
Go to Template > Edit HTML and click on the Revert Widget Templates to default button, select the Blog1 Widget and click on the Revert Selected widgets button.

Jika sobat masih tidak mau melakukan tweak terhadap template, maka jalan satu-satunya adalah melakukan penambahan kode secara manual!

Langkah-langkah mengaktifkan google+ comment system ke dalam custom blogger template

Go to Template > Edit HTML
Klik di dalam template editor window, tekan Ctrl + F dan temukan kode berikut <b:includable id='comment-form' var='post'>
Klik tanda panah untuk memperluas kode widget.
Tambahkan kode berikut sebagai baris berikutnya (tepat di bawah langkah ke 2) KODENYA
Save template.
Pergi ke google+ tab dan aktifkan google plus commenting system.
DONE.

Opsi baru cara mengaktifkan comments google plus...
Cari yang terlihat seperti ini (Press Ctrl + F dan cari threaded_comments or comments) post-image

Ganti tulisan yg diberi tanda dengan<b:include data='post' name='comment_picker'/>Good luck :)
Resource: blogger widgets & blogger how
Happy blogging \m/

Jumat, 22 Februari 2013

Uniqueness Link on Google & Blogger

Ini sangkin tidak ada ide mau mosting tentang apaan, selidik punya teliti kembali AA Koben memperhatikan keunikan yang ada pada hyperlink image blogger! Sebetulnya pernah di bahas, tapi lupa keberadaannya entah di mana ;)) :D Selain mengingatkan kembali tentu ada informasi update dong :-" Nah, sekarang perhatikan susunan hyperlink (URL image) berikut: BCL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXZTYFIwWyd-qfHmaK1Ii6qfXV2k4V4PkdVH29m9-EWrWOVI_1zN5DQs_v_iD1x4VrFxzhABW6sysu3CTROGzT3h0FDs6f9hPCT6Lm0kTTcZw20PUP-JHtMh0aR9PAN_TEUU3EljIDSWq/s1600/Bcl.jpg

JIka di pecah akan begini terlihat

Protocol	Address host	Kode hasil jadi	Ukuran	Nama data
http://	3.bp.blogspot.com	_ALuJjudg6Rg/SsLDnNIueoI/AAAAAAAAAxM/rdLvvu6TBJQ/	s1600	Bcl.jpg

Pecahan link tertulis pada tabel yg tidak boleh dirubah adalah Kode hasil jadi!!! Kode hasil jadi dapat dipasangkan ke mana saja asal tidak dirubah-rubah! Protocol sendiri terbagi menjadi http or https Pada bagian Address host gue baru nemuin beberapa:

lh3 - 6.ggpht.com
1 - 4.bp.blogspot.com
lh3 - 6.googleusercontent.com

Angka yg ada dapat di rubah dengan ketentuan bilangan tersebut. Bagian Ukuran gambar di mulai dari s1 - s1600 detail here Reference Guide Nama data dapat di ganti bebas sesuai dengan kemauan ;) Singkat cerita jadi

Kita bisa memakai URL image picasa/blogger mau dikombinasikan dengan apapun (Protocol/Address Host/Ukuran/Nama data) asalkan KODE HASIL JADI tidak berubah

Mari kita mulai info teranyar keunikan link image hostingan blogger ini :)

Basic link gambar dari google

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXZTYFIwWyd-qfHmaK1Ii6qfXV2k4V4PkdVH29m9-EWrWOVI_1zN5DQs_v_iD1x4VrFxzhABW6sysu3CTROGzT3h0FDs6f9hPCT6Lm0kTTcZw20PUP-JHtMh0aR9PAN_TEUU3EljIDSWq/s323/Bcl.jpg

Ukuran gambar dirubah menjadi 75px BCL

Angka yg ada pada kode ukuran sXXXX menandakan size. Lain lagi bila kita rangkai dengan huruf. Untuk dua opsi berikut gue tidak tauk apa kegunaannya :D BCL

Dengan size sama kita tambahkan dgn huruf c (convert) BCL

Opsi ini bisa kalian tingkatkan sampai berapapun (>1600) Hati² jangan gede² melakukan convert, nanti ngehang kompinya ;)) Dengan jenis link begini kita bisa mendapatkan image dengan resolusi guede :)) Masuk ke sesi selanjut yakni opsional d (donwload)

Open it!

Klik link tsb, tidak akan terbuka image, tetapi minta di Open with/Save File yah :-" Opsi s323-e tidak ada alias Error 404. Cuma sampai option huruf d.
Terakhir keunikan link image blogger dapat melakukan convert format gambar menjadi WebP Dengan syarat browsingan sudah mendukung format itu. Baca² ke developer mozilla, browse ini tidak support :-s Padahal lumayan signifikan perbedaan ukuran yg diconvertnya!
Syntax

Pada kode ukuran s323 tinggal kalian tambahkan s323-rw Dari gambar dengan ukuran 57Kb bisa terconvert (WebP) menjadi 33Kb, atau dari 21Kb jadi 14.5Kb
Terima kasih.
Happy blogging :)

Kamis, 14 Februari 2013

Grab Text Form Action to Google Translate

Aplikasi translate dalam keberadaannya sangat membantu. Tidak dapat dibayangkan mengartikan sebuah artikel dengan bahasa asli yang tertulis ;)) Koben mau berbagi satu tutorial seputar translate (terjemahan)
Begini jadi kronologisnya, grab kata/kalimat kemudian pencet tombol untuk mengkopi dan dilanjutkan dengan memencet tombol translate untuk menuju ke Google Translate Dengan kata lain membuat embed form action translate tanpa harus menuju ke alamat google translate terlebih dahulu :D Grab kata-kata berikut, press to copy button then press trans button.

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an.

Buatlah aplikasi ini di daerah blog yang selalu terlihat oleh pengunjung ;)

<form name="text_form" action="http://translate.google.com/" method="post" target="top">
<textarea name="text" rows="8" cols="60" id="source"></textarea><br/>
<input onclick="CopyText(this.form.text)" type="button" value="Press to copy" name="btnCopy">
<input value="en" name="hl" type="hidden">
<input value="id" name="tl" type="hidden">
<input value="Clear" name="clear" type="reset">
<input value="Trans" name="clear" type="submit">
</form>

<script language="javascript">
//<![CDATA[
    function CopyText(el){
    var selectedText = "";
    if(window.getSelection){
    selectedText = window.getSelection();
    }else if (document.getSelection){
    selectedText = document.getSelection();
    }else if (document.selection){
    selectedText = document.selection.createRange().text;
    }
    if(selectedText != ""){
    selectedText = selectedText.toString();
    el.focus();
    el.value = selectedText;
    }else {
    alert("Select a text in the page and then press this button!");
  }
}
//]]>
</script>

Rubahlah value="id" dengan kode bahasa yang diinginkan Language Codes Read it too

Happy coding \m/

Selasa, 12 Februari 2013

Make Google Text Browser via Google Drive

Kreasi apa yang sudah kalian buat setelah membaca artikel host your file on google drive or google code! Setelah direnungkan ternyata google drive telah dijadikan tempat bersatunya beberapa fitur dari Embah Google. Seacara detil Koben juga kurang tahu apa² saja fitur google yg sudah dimerger ke dalam google drive :-??
Google drive memungkinkan kita menyimpan dan mengakses file di manapun, di web, hard drive, atau di mana saja. Lantas jenis file apa saja yg bisa kita buat dengan akses via google-drive ini?
± ada 114 apps dapat kita akses berhubungan langsung dengan account data google drive kita 8-> 5 GB for free and 25 GB of space (or more!) starting at $2.49 per month ;)) Read here Google Drive Index

Salah satu web yg sering bermain dengan layanan free google adalah web LabnoL.org. Contoh satu aplikasi berikut menggunakan layanan google docs import rss feed using google docs services! Sekarang Koben mau berbagi sebuah aplikasi keren "Make Google Text Browser" Text browser adalah browse yg terinspirasi dari Lynx. Menelusuri web di mana hanya teks yg tampak dan mengabaikan gambar, CSS dan konten lainnya yang tertanam di dalam halaman sebuah site.

Buka halaman demo, masukan sebuah link, apa yg terjadi! Untuk membuat seperti itu, silahkan baca aturan mainnya use google text browser as a proxy server
Bye :-h

Jumat, 18 Januari 2013

Blogku Kembali karena Banjir Besar di Jakarta 2013

Alhamdulillaah saya ucapkan karena 1 blog gue yang terkena banned karena melanggar aturan main kini sudah kembali lagi :) Blog gue yg unyu² dan qiyute Undercover Blog. Blog itu penting keberadaannya karena blog siluman tempat gue blog walking dan berdemo ria >:)
Welcome back ⓤⓝⓓⓔⓡⓒⓞⓥⓔⓡ ⓑⓛⓞⓖ
Koben menganggap waktu kehilangan blog unyu² merupakan satu penderitaan. Penderitaan itu bukan untuk disesalkan, tapi mari kita belajar ikhlas dan lebih intropeksi ke diri masing-masing. Toh kita sebagai muslim & muslimah harus ikhlas dengan segala yang terjadi. Rukun iman sudah berbicara disini (iman kepada qadha dan qadar) Silahkan kalian kaji sendiri apa yang dimaksud dengan qadha dan qadar. Gue cuma mau tekankan 1 point penting dimari, Qadha masih bisa dirubah sedangkan Qadar mutlak adanya :) Allohu'alam.

Rasa syukur karena blog Koben sudah kembali, aku mau coba berbagi kekuatan ikhlas bagi saudara/ri yang sekarang lagi ditimpa cobaan.

Banjir Jakarta 2013

Kuatkan iman, rapatkan barisan, majulah dengan niat lurus, Basmallah mengharapkan ridho Illahi.

Jangan saling menuding, menyalahkan atau apapun. Yuk mari kita semua intropeksi ada apa dibalik ini semua. Berdo'alah kepada Alloh SWT untuk disegerakan mengkuak tabirnya. Amin yaaa Robal'alamin.

Berikut beberapa link yg dapat kalian manfaatkan yg ada di wilayah Jakarta

Google Crisis Response v.ID

Google Crisis Response v.EN

Posko Korban Banjir Pemerintah

Free Zone

Rabu, 16 Januari 2013

The simplicity, speed, and power of Custom Search Engine Google Within your Site

Ada kabar singkat dari Custom Search Blog bahwasannya saat sekarang kita dapat membuat google custom search secara simpel, cepat dan memiliki power oke punya. Kesederhanaan dan kecepatan adalah dua prinsip yang di cintai saat ini di Google. Sangat gembira mengumumkan tata letak CSE baru yang menampilkan hasil pencarian dalam overlay mode, yakni di atas konten apapun pada halaman kita.
Custom Search Engine (CSE) yang sekarang sangat simple, cepat mempunyai power bukan dalam bentuk hasil akhir saja, namun membuatnya pun sangat mudah, cepat dan full-stylish b-)
DEMO new CSE layout

Silahkan kunjungi halaman berikut untuk membuatnya ya Create a Google Custom Search Dibawah ini contoh hasil customize dengan CSS sederhana

<div style="width:260px">
<gcse:search></gcse:search>
</div>

<script>
//<![CDATA[
(function() {
  var cx = '010449103265333969281:0yytyxbtqgc';
  var gcse = document.createElement('script'); gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
//]]>
</script>

<style>
div.cse .gsc-control-cse, div.gsc-control-cse {
background-color: transparent;
border: none;
}
.cse input.gsc-search-button, input.gsc-search-button {
border: 1px solid #666;
background-color: #555555;
background-image:none;
}
div.gsc-selected-option-container {
max-width: 50%;
padding: 0;
}
div.gsc-option-menu {
width: 200px;
}
div.gsc-option-menu-item {
width: 155px;
}
td.gsc-search-button input.gsc-search-button {
border-color: #333;
background-color: #21416b;
background-image: none;
}
</style>

Gantilah angka/huruf pada kode var cx
Dadah :-h

Resource by: googlecustomsearch.blogspot.com/2013/01/a-simple-yet-powerful-custom-search.html

Senin, 15 Oktober 2012

Import RSS Feed using Google Docs Services

Memang tidak salah menclok ke Digital Inspiration Technology Blog Salah satu web termahsyur yang di jadikan sumber inspirasi para blogger seantero jagat. Bagaimana tidak keren, mau mencari tutorial atau artikel mengenai seputaran teknologi blog and inspirasi info digital ada di sana! Yeah master Amit Agarwal @labnol owner dari labnol.org Penjelasan begitu singkat dan berisi bahkan tidak jarang disertai dengan live video. Sayang kontennya berbahasa inggris, jadi rada merepotkan si Koben dalam menyikat artikel yang ada ;)) Tapi tidak apa-apa nggak masalah :P
Sobat mas bro mungkin pada tidak ngeuh jika halaman dari project master Amit Agarwal ada disini The Programmer's Library, Code Snippets, Scripts, Video Tutorials and Programming Books Yang paling membantu pasti proyek berikut Blogger Sitemap :D Itu baru proyek2nya yg dibuat untuk membantu kita, belum lagi artikel² maknyus punya yg harus kita hajar :))

Koben akan berbagi satu postingan menarik yg ada disana, yaitu mengenai ImportFeed RSS in Google Docs Tutorial Membuat link Feed RSS di google docs (Google Drive) Mau link FeedRSS dari web/blog mana saja bisa kalian pasangkan nantinya!Seperti itu hasil jadi import feed RSS in google docs :) On YouTube Google Docs for Feeds Sudah jelas sebenarnya keterangan yg diberikan, tapi kalo loading bahasa asing sedikit membuat nyut-nyutan :D

Langkah-langkah dalam pembuatan make feed in google docs.

Buka halaman Google Drive.
Click tombol Create di sebelah kiri, pilih opsi Spreedsheat.
Tuliskan link Feed tujuan pada Col A1. Ex:http://feeds.feedburner.com/beben-koben
Kemudian pada Col A2 (tepat cell dibawah langkah pertama) ketikan syntax berikut =importfeed(A1,"items title",false,5)
Pada Col B2 tulis =importfeed(A1,"items url",false,5)
Pada Col C2 tuliskan =HyperLink(B2, A2)
Lakukan hal serupa (langkah ke 6) sesuaikan dengan Col yg kalian buat.

Sobat dapat melakukan eksperimen lebih pada text editor disana dengan merubah huruf, warna huruf, posisi dsb. Google docs akan berubah secara otomatis ketiak RSS Feed mengalami perubahan.
Syntax tuliskan dalam format iFrame

<iframe style='display:block;margin:10px auto;width: XXXpx;height: XXXpx' frameborder='0' src='YOUR-LINK&single=true&gid=0&range=B1%3AC6&output=html' scrolling='no'></iframe>

Silahkan sobat baca-baca di labnol web tutorial keren full stylish lainnya ya :) How abou this RSS Feed Search Engine
Happy coding \m/

Kamis, 09 Agustus 2012

Google Participate in The Olympics London

Perhatian dunia olah raga sekarang sedang terpusat pada pesta terakbar olah-raga yang lebih dikenal dengan nama Olympiade. Pesta yang diselenggarakan setiap 4 tahun sekali guna menampilkan para atlet di setiap negara untuk menjadi yg terhebat dan memperoleh medali emas. Tuan rumah Olimpiade tahun 2012 jatuh di negara London

Olimpiade Musim Panas 2012, secara resmi bernama Games of the XXX Olympiad atau Olimpiade London 2012, dilaksanakan di London, Inggris, Britania Raya mulai tanggal 27 Juli sampai 12 Agustus 2012. ...Wikipedia

Silahkan sobat baca di situs resmi London 2012 Olympics buat membaca segala informasi ter-up-to-date. Terus apa maksudnya Koben postingkan artikel macam ginih patut! Ternyata embah google diam-diam turut berpartisipasi dengan acara pesta akbar sport ini loh sobat-sabit ;))

Silahkan sobat main-main cabang olahraga yg disukai :) Itung-itung nunggu buka puasa :))
Happy olympiade \m/