Trik Komputer: Hack

Tampilkan postingan dengan label Hack. Tampilkan semua postingan

Senin, 08 Juli 2013

How to Easily Fix the Duplicate Meta Tag Description in Blogger

Sebetulnya lagi males mosting di samping tidak ada ide! Lagi seru browsing ke sana-sono melihat-lihat web/blog orang :d Koben ingin berbagi informasi penting seputar meta tag description blogger! Dahulu gue sudah sharing juga 2 buah postingan keren mengenai meta-tag meta tag dinamis buat blogspot & meta tag customizing for seo blogspot, takut kurang silahkan baca sites.google.com/site/metatagforblogger. Masih kurang juga silahkan pelototin versi master O-OM tentang mengatasi duplikasi meta tag deskripsi pada halaman post Mau apapun versi meta-tag-description yg kalian pakai, harap di simak terlebih dahulu postingan AA sekarang. This is will be interesting ;)

Gue mau tanya ada berapa jenis penulisan meta tag deskripsi untuk blogger? Beberapa contoh seperti ini

<meta expr:content='data:blog.pageTitle + &quot; , BLAH-BLEH-BLOH&quot;' name='Description'/>

<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.metaDescription + &quot;, &quot;' name='Description'/>

<meta expr:content='xxx xxx xxx xxx xxx xxx' name='Description'/>

Ada yang lainnya :-?
Mau bagaimana and jenis apapun penulisan meta-tag deskripsi, DELETE saja alias hapuskan semua itu!!! Dengan catatan template kalian tidak menghapus kode tag conditional berikut<b:include data='blog' name='all-head-content'/>Fungsi tagging <b:include data='blog' name='all-head-content'/>

Mungkin para ahli kode tidak tahu bahwa salah satu dari banyak fungsi <b:include data='blog' name='all-head-content'/> adalah untuk mengekstrak dan menampilkan ke dalam browser deskripsi blog yang ada di pengaturan blog. Deskripsi yg ditampilkan meliputi pada home page dan other page kecuali post page.
In Home Page
Pada halaman dashboard pergi ke Settings ► Search preferences
meta-tag-description-blogger

In Post/Item Page
Deskripsi posting yang dalam deskripsi mencari pos ketika pengunjung berada di halaman pos/item kecuali di halaman rumah dan halaman lainnya. post-settings-blogger

SOLUSI
Solusi untuk sebab terjadinya duplikasi meta tag deskripsi atau error meta-tag description sangat sederhana. Hapus code brkt

<meta expr:content='data:blog.metaDescription' name='Description'/> 
or 
<meta expr:content='xxx xxx xxx xxx xxx xxx' name='Description'/>

Cukup dengan pemakaian<b:include data='blog' name='all-head-content'/>Selanjutnya jangan lupa untuk memberikan pencarian deskripsi blog dan deskripsi setiap halaman post kalian. Hal tersebut sangat diperlukan dan kebanyakan dari semua itu akan membuat search engine friendly. Terbaru juga dari master Agus Ramadhani tentang rahasia optimasi meta tag di new blogger Untuk pembuktian dari tutorial ini semua, coba saja lihat source home and post page blog aku! Jika betul sudah pasti memiliki deskripsi yg berbeda, padahal keduanya menggunakan kode yg sama!

Buat apa pakai yg rumit kalau ada yg simpel. Lagian google tidak ngaruh dengan adanya meta tag ini ke popularitas blog di mata search engine :p

Sumber: iLearnZone
Happy blogging \m/

Minggu, 19 Mei 2013

Build Contact Form Widget Blogger into Static Page

Meneruskan petualanan postingan seputar fitur baru contact form widget blogger. Masalah penambahan CSS tanpa harus otak-atik kode syntax kontak blogger bisa sobat baca add style sheets for contact form widget blogger. Trik itu hanya berfungsi jika form contact tampil dalam format full gadget template. Sekarang bagaimana ceritanya jika form kontak widget blogger ingin tampil di area postingan! Untuk perihal ini, post area yang akan kita pakai adalah area post page (blogger static pages). Ket: about pages blogger
Pertama gue lakukan praktek pada blog ini, eh ternyata tidak jalan! Koben lakukan di blog lain ternyata berjalan dengan baik. Mungkin ada terjadi bentrok script :-s Saatnya berbagi bagi sobat-sabit, ikuti langkah² berikut

Pertama-tama lakukan Download full template

1. Masuk ke Layout ► Add a Gadget ► More Gadgets ► Contact Form (read here)

2. Setelah langkah tersebut di lakukan, maka sudah terpasang widget contact form blogger pada template kalian.
3. Buatlah halaman static page baru. post-image

4. Pilih opsi HTML bukan mode Compose.
5. Salin kode berikut

<form name='contact-form'>
<div>Name</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email <b>*</b></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Message <b>*</b></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center;max-width: 450px;width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Kemudian klik tombol Publish.

Beres dengan langkah² di atas, sekarang tinggal urusan kode syntax gadget contact form yg berada di dalam template. Ada 2 buah cara untuk melakukan hal ini.
1. Letakan snippet CSS brkt sebelum/diatas tagging </b:skin>

#ContactForm1 {
display: none !important;
}

Dengan teknik itu, kode syntax kontak bawaan masih ada di dalam template. Langkah ke dua inilah yg sedikit extreme :d
2. Extreme steps edit.
Masuk pada halaman edit template. Pilih opsi Jump to widget ► ContactForm1 ► click expand

Setelah melakukan expand, delete kode berikut seperti yg tampak pada screenshot di bawah ini. post-image

Maka akan terlihat seperti berikut penampakannya.

Dengan begini maka hilanglah kode Contact Form Widget yg selalu tampak pada page layout. Tetapi kita tidak menghapus widget tersebut :))
6. SAVE.
Sobat membutuhkan demo!!! Oke, let see it...Beben ContactResource you can read here
www.makingdifferent.com/how-to-add-blogger-official-contact-form-into-specific-page-of-blogger-blog/
www.bloggerplugins.org/2013/05/create-separate-contact-page-for-blogger.html
Update (CSS customize for contact form blogger by Nitin Maheta)
http://www.makingdifferent.com/top-10-fully-customized-blogger-official-contact-form-widgets/
Happy blogging \m/

Kamis, 02 Mei 2013

Trick for Embed Video YouTube to be More Efficient

Ada tutorial dan trik keren punya mengenai seputaran penerapan embed youtube. Seperti yang di ketahui jika kita mau membawa satu embed full dari web lain pasti memakai syntax iframe! Itulah salah satu fungsi dari atribut iframe. Sekarang apa jadinya jika variabel iframe yang akan kita ambil lebih dari satu bahkan bisa berpuluh-puluh? Satu embed iframe saja file yg terpanggil sebesar ± 400kB. Berikut screenshot prakiraan jumlah size pemanggilan 1 iframe video youtube

Menjadikan beban bertambah berat >:) Oleh karena itu bagi blogger yang blognya berisikan konten embed video terutama dari web youtube, mari cari tahu bagaimana solusinya ;)

Trik berikut khusus embed dari web youtube

Masukan script diatas tag </body>

<script>
//<![CDATA[
var i, c, y, v, s, n;
v = document.getElementsByClassName("youtube");
if (v.length > 0) {
  s = document.createElement("style");
  s.type = "text/css";
  s.innerHTML = '.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor: pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{opacity:.7;left:50%;margin:-38px 0 0 -38px;position:absolute;top:50%;height:77px;width:77px;background:url("PLAY-BUTTON-77x77.PNG") no-repeat}';
  document.body.appendChild(s)
}
for (n = 0; n < v.length; n++) {
  y = v[n];
  i = document.createElement("img");
  i.setAttribute("src", "http://i.ytimg.com/vi/" + y.id + "/hqdefault.jpg");
  i.setAttribute("class", "thumb");
  c = document.createElement("div");
  c.setAttribute("class", "play");
  y.appendChild(i);
  y.appendChild(c);
  y.onclick = function () {
    var a = document.createElement("iframe");
    a.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
    a.style.width = this.style.width;
    a.style.height = this.style.height;
    this.parentNode.replaceChild(a, this)
  }
};
//]]>
</script>

Pasang link image pada kode yg bertuliskan PLAY-BUTTON-77x77.PNG
Markup HTML

<div style="margin:1em auto;width:370px">
<div class="youtube" id="LcIytqkbdlo" style="width:370px;height:278px;">
</div>
</div>

Gantikan ID LcIytqkbdlo dengan ID video tujuan!
DEMO

Urusan script bisa sobat hosting. Begitulah tut's metode embedding lebih efisien untuk video youtube :)

Trick selanjutnya masih seputar embed video youtube. Kali ini bagaimana memulai video youtube dengan waktu yang sudah kita kondisikan terlebih dahulu! Pada umumnya kalau kita memencet tombol play video youtube pasti akan dimulai pada waktu 0 detik. Lantas kalau kita mau memulai dari menit ke 17 bagaimana? Mau tidak mau ya kita tarik tanda laju streamingannya kan! Dengan trik yg akan gue share, sobat bakal bisa melakukan start dan finish sesuka hati :p
JavaScript youtube embed code

<script>
//<![CDATA[
/*
  YouTube Embed Code
  Author:   Amit Agarwal 
  Blog:     www.labnol.org
  Date:     04/15/2013
*/
  
  var node = "youtube-player";
  var youtube = document.createElement('script');
  youtube.type = "text/javascript";
  youtube.src = "//www.youtube.com/iframe_api";
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(youtube, s);
  
  var player;
  var params = document.getElementById(node);
  var startTime = params.getAttribute("startTime");
  var endTime = params.getAttribute("endTime");
  var videoID = params.getAttribute("videoID");
  var playerHeight = params.getAttribute("height");
  var playerWidth = params.getAttribute("width");
  
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(node, {          
      height: playerHeight,
      width: playerWidth,
      playerVars: {'rel': 0, 'showinfo': 0, 'hidecontrols': 1 },
      events: {
        'onReady': loadVideo
      }
    });
  }
  
  function loadVideo(e) {      
    e.target.cueVideoById({ 
      videoId: videoID,
      startSeconds: startTime,
      endSeconds: endTime
    });
  }
//]]>
</script>

Markup HTML

<div style="margin:5px auto;width:370px">
<div videoID="t2MOwQ089eQ" startTime="1333" endTime="1444" height="278" width="370" id="youtube-player">
</div>
</div>

Gantikan videoID dengan ID video tujuan. Isikan startTime waktu untuk memulai dan endTime untuk waktu berhenti.
Jika kurang jelas silahkan kunjungi sumber how to embed youtube videos without increasing page load time & how to embed a part of a youtube video in your website
Thanks a lot Mr Amit Agarwal :)
Happy coding \m/

Minggu, 28 April 2013

Activate Blogger and Google+ Comments System Together

Ada seorang blogger yang melakukan snippet hack terhadap google comments system. Tanpa mesti melakukan pengkatifan Use Google+ Comments on this blog ? kalian bisa mengaktifkan fitur google plus comment. Lebih hebat lagi hack ini mengikutsertakan default blogger comment yang dipadukan dengan teknik toggle Dengan teknik tersebut maka komentator dapat memilih mau berkomentar dengan format komentar google+ atau bawaan blogger ;)

PENTING: Untuk membuat Google plus dan komentar blogger muncul bersama-sama, bahwa postingan harus memiliki setidaknya 1 komentar. Posting yang memiliki komentar 0 akan terus menampilkan sistem komentar default blogger. Ingat: (Tidak perlu untuk aktifkan komentar Google+ dari pengaturan anda! Jika anda telah mengaktifkan menonaktifkannya dulu sebelum menerapkan tutorial ini.mybloggerlab

Langkah pertama

Lakukan terlebih dahulu Download full template

Langkah kedua
Buakalah halaman berikut dan ikuti saja langkah-langkah selanjutnya dari sana. Soalnya takut bentrok sama emoticon jiga gue menjabarkan kode-kode yang ada. Mudah kok tinggal ganti-ganti doang tagging Blogger Xpertise or goes to My Blogger Lab
Jika berhasil sobat tidak kehilangan komentar bawaan dari blogger dan mengkatifkan komentar google+ tanpa harus melakukan setting activate dulu.
Good luck :)

Source keren lagi mengenai membuat sistem komentar google plus dengan teknik API Google Pizcos.net and Ayuda Bloggers

Minggu, 31 Maret 2013

Labels Cloud Blogger use Only JavaScript

Snippet code agar menghasilkan sesuatu yang berbeda tidak ujug² jadi. Banyak master script telah meluangkan waktu untuk hal ini. Dulu sekali masalah hack labels pernah hot dibahas. Berkat jasa master of cloud hack labels blogger mengalami perkembangan begitu fenomenal.
Pernah santer heboh penanaman labels/category blogger menjadi bentuk clouod. Terkenal cloud dengan nama cumulus! Jangan salah sangka jenis cloud terpatok penggunaan embed SWF Berikut jejak-jejak link perjalanan perkembangan label flash animated cloud blogger:

Dengan melihat semua itu, maka dapat ditarik kesimpulan tentang fitur cloud adalah

Fitur cloud harus bisa membuat tulisan dengan berlainan ukuran, ada efek berputar-putar ketika menyorot seperti flash!si bloglang

Kebanyakan hack labels cloud pasti mengikutsertakan embed flash, otomatis menambah kerja loading blog. Koben mau berbagi kembali menanamkan labels cloud for blogger only use Javascript and flash effect absolutely.

Berminat memasang harap lakukan

Download full template

Sebelum melakukan hack ini, lakukan add a gadget ► Labels labels

Konfigurasi labels menjadi form cloud configure-labels

Masukan kode CSS berikut sebelum/diatas tag </b:skin>

#cloud {
    width: 300px;
    height: 275px;
    position: relative;
}
#cloud a {
    color: #000;
    padding: 3px 6px;
    position: absolute;
}
#cloud a:hover {
    background: #999;
    color: #FFF;
    border: 1px solid #333;
}

Panjang dan tinggi atau background bisa kalian atur² menurut kebutuhan. Urusan menempatkan JavaScript, menurut rekomendasi tempatnya sebelum tag </body> Jika tidak jalan, bisa coba ditempatkan tepat diatas kode </head>

Hanya dengan memakai JavaScript sudah dapat membuat cloud berputar-putar seperti flash cumulus. Demikian saja semoga berhasil memasangnya :)
jsdo.it/qiu.lin/wfhN
Happy cloud \m/

Selasa, 26 Februari 2013

Add Infinite Scrolling to Default and Customize Template Blogger

Beben Koben si Bloglang anu ganteng kalem tea mau berbagi info saja nih. Tetapi bukan sembarang informasi tentunya, dan tentunya special untuk kalangan blogger b-) Pertama ketika gue menclok ke alamat blogger spanyol tepatnya di KsesoCss Selain kontennya berisikan artikel tutorial blog, coba sobat lakukan scroll ke bawah blog tersebut? Kalian tidak akan menemukan page navigation yg ada malah terus-menerus di bawa pada konten blog :-/
Hack fenomenal itu diberi nama blogger infinite scrolling ot load more content. Hack ini sendiri setelah gue telusuri ternyata dibagi menjadi 2 kategori pengaplikasiannya¡ Pertama untuk default template blogger, kedua customize template.

Formula infinite scrolling for blogger dibuat sepraktis mungkin, sehingga penerapan ke dalam template tidak begitu rumit. Apalagi yg default template, mudah sekali caranya. Berikut link bagaimana cara menambahkan snippet infinite scrolling to default template blogger:

Snippet infinite scrolling to customize template blogger:

Huy Dinh Quang way 2

Jika pusing dengan kode-kodean tapi kepengen efek endless load page, silahkan baca ini Dynamic Views Ways. Nanti di update listnya kalau nemuin yg baru ;))
Happy blogging...

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

Sabtu, 02 Februari 2013

Hack Labels Tag for Blogger (List & Cloud)

Sebelumnya tata cara membuat template blogger sendiri sudah dipaparkan secara rinci dan gamblang :D Sekarang giliran membedah bagian gadget/widget blogger Sobat sudah pada kenal tentunya dengan widget tags yang ada di blogspot! Secara dasar tagging widget sendiri ditandai dengan kode <b:widget> Basic gadget berjumlah 26 buah, gadget dari pengembang pihak ke tiga 874 biji (Data tertulis, Feb/03/2013) dan customize gadget (~~Error gadget~~, Feb/03/2013)
Lebih jelas keterangan mengenai widget tags silahkan sobat satroni link berikut Blogger Help Koben akan memberi contoh trik & teknik melakukan snippet/modifikasi/hack LABELS gadget blog.
Screenshot

Tampilan labels dibagi menjadi dua jenis yaitu: list and cloud.

Gaya List	Gaya Cloud

Dua jenis default label gadget blogger akan terlihat pada screenshot diatas. Default code/script yang gue maksudkan di sini! Lantas bagaimana penampilan labels tersebut jika kode/script kita snippet/hack ;)

Hack List Labels	Snippet Cloud

Label bergaya List dijadikan menjadi berurut menurut alphabet. Cloud label dihilangkan count (jumlahnya) Syarat untuk melakukan hack labels ini, kalian harus meng-add gadget labels dahulu.
Setelah itu lihat kode template [TANPA melakukan Expand Widget Templates] cari kode yang seperti berikut<b:widget id='Label1' locked='false' title='Labels' type='Label'>Hapus code tersebut dan gantikan dengan kode berikut...Hack List Labels

<b:widget id='Label1' locked='false' mobile='yes' title='KATEGORI' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<script type="text/javascript">
var root = "<data:blog.homepageUrl/>";
var tagUrl = "search/label/";
var labels = new Array();

<b: loop values='data: labels' var='label'>
labels.push("<data: label.name/>");
</b: loop>

i=labels.length;
while(i > 0)
{
i=i-1;
document.write("<li><a href='"+root+tagUrl+labels[i]+"'>"+labels[i]+"</a></li>");
}
</script>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Cloud Labels Snippet

<b:widget id='Label1' locked='false' mobile='yes' title='KATEGORI' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
var max = 150;
var min = 70;
var showCount = false;
var minCount = 1;

var range = max - min;

var labels = new Array();
<b: loop values='data: labels' var='label'>
labels.push("<data: label.name/>" );
</b: loop>

var urls = new Array();
<b: loop values='data: labels' var='label'>
urls.push("<data: label.url/>" );
</b: loop>

var counts = new Array();
<b: loop values='data: labels' var='label'>
counts.push("<data: label.count/>" );
</b: loop>

function sortNumber(a, b)
{
return b - a;
}

var sorted = counts.slice();
var most = sorted.sort(sortNumber)[0];

for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{

var textSize = min + Math.floor((counts[x]/most) * range);

if(showCount)
{
var count = "(" + counts[x] + " )";
}else{
var count = "";
}

document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>

Kalau bumbu tidak jalan mungkin karena ada yg gue maju²in karena bentrok dengan emotikon. Silahkan kunjungi link resource sumber :D
Resource:
How To Sort The Labels Widget Reverse Alphabetically
A Simple Blogger Tag Cloud Widget
Happy labels \m/

Senin, 26 November 2012

Create Newer & Older Post Blogger Motyar Style

Sambil mengenalkan blog master Syed Faizan owner dari my blogger lab artikel teranyar berbicara mengenai How To Create Floating Older and Newer Post Buttons in Blogger Membuat tombol post baru/lama dengan gaya melayang (float) Kalau mau yang seperti itu silahkan dibaca dan dipraktekan, Koben rasa penjelasan sudah cukup jelas walau dalam bahasa alien :D Biar ada warna baru, namun sudah cukup banyak diaplikasikan juga, gue akan coba share cara serupa tetapi dengan gaya create newer & older post blogger motyar style :))
Belum tahu bagaimana bentuk older/newer master Motyar! ya silahkan lihat dulu Motyar Blog

Selalu BackUp Full Template Sebelum Melakukan Edit Template Sekecil Apapun itu Bentuknya :)

Pada halaman Blogger Dashboard klik icon ▼ pilih opsi Template, Edit HTML, klik Proceed lakukan Expand Widget Templates
Letakan bumbu kode CSS tepat sebelum/diatas tag penutup </b:skin>

.prev-next {
 color: rgba(0, 0, 0, 0.5);
 background-color: transparent;
 border: none;
 top: 0;
 bottom: 0;
 font-size: 40px;
 padding: 0;
 position: fixed;
 margin: 0;
 max-width: 150px;
 min-width: 90px;
 z-index: 5;
}
.prev-next:hover{
 background-color: rgba(0, 0, 0, .06);
}
.sebelum {
 float: left;
 text-align: center;
 width: 9%;
 left: 0px;
 top: 0px;
 font-weight: bold;
 cursor: pointer;
}
.sesudah {
 float: right;
 text-align: center;
 width: 9%;
 right: 0px;
 top: 0px;
 font-weight: bold;
 cursor: pointer;
}

Kemudian cari kode <b:if cond='data:newerPageUrl'> Kalau tidak salah bakal ada 2 biji, yang pertama pilihnya. Soalnya yg kedua opsi mobile bos :)) Mau diganti kedua-duanya silahkan saja ;))

Tepat dibawah kode tersebut pasti akan tampak seonggoh code seperti ini

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

Fokuskan pada code berikut<data:newerPageTitle/> & <data:olderPageTitle/>Gantikan dengan kode<button class="sebelum prev-next">«</button> & <button class="sesudah prev-next">»</button>Final code look like this

    <b:if cond='data:newerPageUrl'>
      <span class='black' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><button class="sebelum prev-next">«</button></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span class='black' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><button class="sesudah prev-next">»</button></a>
      </span>
    </b:if>

Good luck :)
Happy coding \m/

Sabtu, 03 November 2012

Hack Blogger Content using Atom Feed Link

Artikel ini hanya bersifat informasi dan pembelajaran belaka. Jangan di aplikasikan ke blog kalian. Peringatan keras DONT TRY THIS AT YOUR BLOG karena merupakan duplicate content. Hack blogger berbasis blogspot menggunakan google atom feed for bloggers ini sangat mudah (easy level) Singkat cerita hack disini kita akan mengambil postingan/artikel (content posted) pada salah satu blog, untuk dipindahkan ke dalam blog kita. Dengan begini semoga pihak blogger memperbaiki celah kelemahan ini. BEBEN KOBEN TIDAK BERTANGGUNG JAWAB ATAS HACK INI. Semua blogger berhati-hati.

THIS HACK IS FOR EDUCATIONAL PURPOSE ONLY. BEBEN KOBEN TAKES NO RESPONSIBILITY OF THIS HACK.

Cara hack blogger blog:

Cari blog yang akan menjadi sasaran. Ex:WTF-anyblog.blogspot.com
Setelah dapat, tulislah inject JavaScript seperti berikutWTF-anyblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Pastekan di address bar browser, tunggu sampai beres (full opened page)
Save page as dengan ekstension .xml
Buka account blog kalian, Dashboard ► Settings ► Others ► Import blog. Uploadlah file .xml yang tadi.

Percobaan gue pada ~~googlewebmastercentral.blogspot.com~~

Resource by: ~~www.hackersreunited.net~~

THIS HACK IS FOR EDUCATIONAL PURPOSE ONLY. BEBEN KOBEN TAKES NO RESPONSIBILITY OF THIS HACK.

Jumat, 05 Oktober 2012

Make Pinterest Photo Gallery for Blogger

Dua artikel sebelumnya yang berjudul Add Pinterest Button For Blogger dan Add Button Pinterest, Automatic for Image Blogger serasa kurang lengkap bila belum berbagi cara menampilkan gambar dari web yang bersangkutan dengan bantuan dari link feed RSS! Now we talk all about Pinterest
Sobat bisa membuat satu Pages khusus untuk menampilkan koleksi gambar kalian yang berada di web pinterest. Kenapa mesti di pages post (static pages), karena akan melibatkan jQuery plugin script dalam membuatnya nanti ;;) Hack karya @codeitpretty

Details and bumbu dapat sobat peroleh di Pinterest Gadget for Blogger
Sebenarnya di sana sudah cukup jelas dalam pemaparan cara-caranya. Tinggal urusan memperindah yg bisa dilakukan dengan customize CSS. Tetapi jika sobat mau memakai karya Koben, ya tinggal sikat saja :D

Good luck :)

Sebagai pengguna blogger, yang mana hostingan image sudah di tanggung dari pihak picasa! Do you want try it View Image Blogger from Picasa with jQuery - DEMO
Happy pinterest \m/

Kamis, 02 Agustus 2012

PRISM is Awesome New Syntax Highlighter

Apa yang terlintas pada benak kalian jika membaca/mendengar kata syntax highlighter Singkat penjelasan fitur Syntax Highlighter yakni editor teks yang menampilkan teks dengan berbagai warna yg sudah ditentukan. Tujuan pemberian warna tidak lain untuk memudahkan menulis dan membaca bahasa pemograman atau bahasa markup secara visual berbeda :D
Bapak SyntaxHighlighter paling terkenal ialah Master Alexgorbatchev Berbicara syntax highlighter master @leaverou telah membuat Prism Berikut karakteristik Prism Syntax Highlighter:

Ukuran kecil. Inti hanya 1.5KB minified & gzip, yang bisa naik ke 2KB dengan definisi bahasa yang tersedia saat ini (CSS, Markup dan JS)
Sangat extensible. Tidak hanya mudah untuk menambahkan bahasa baru, tetapi juga untuk memperluas yang sudah ada. Yang paling penting, mendukung plugin. Ada beberapa plugin sudah tersedia, dan itu sangat mudah untuk menulis sendiri.
Mendorong praktek penulisan yang baik. Highlighter lain mendorong atau bahkan memaksa kita untuk menggunakan elemen semantik yang salah, seperti <pre> (sendiri) atau <script>. Prism menggunakan satu-satunya unsur semantik benar untuk menandai kode: <code> untuk kode inline, atau di dalam <pre> untuk blok kode.
Full list of features

Theme untuk saat sekarang ada 3 pilihan: default, dark, and funky.

Silahkan sobat kunjungi prism, klik halaman download & lakukan setingan terlebih dahulu di sana :) Baca juga sesi Basic Usage yakni cara penempatan script, code CSS, dan markup penulisan.

Secara sederhana sbb...

Lakukan setingan (pilih theme,Compression level, languages, etc) ► Scroll to down ► Klik tombol download js - download css.
Letakan script tepat diatas kode </body> sedangkan code css sebelum tag </b:skin> Cara pemakaian ketika memosting, sobat hanya perlu menuliskan markup sebagai berikut!<code> --- CONTENT HERE --- </code>
or

<pre>
<code>

--- CONTENT HERE ---

</code>
</pre>

Lihat hasil kerja, good luck :) Thanks Lea Verou

Lea Verou :x
BONUS:
http://gridster.net/
http://jsonenglish.com/projects/flex/
Happy prism \m/

Sabtu, 16 Juni 2012

Make Opening Popup use JavaScript for...

Pasti dari kalian semua pernah melihat saat mengunjungi sebuah blog/web, kemudian tidak lama muncul kotak like box facebook! (((toweweewew)))
Kebanyakan karya hack tersebut memakai script jQuery/jQuery-ui. Add gadget mengenai jQuery Pop-up For Facebook Like Box V2 For Blogger Sekarang bagaimana ceritanya bila pada blog kita tidak terpasang jQuery script! Otomatis keinginan memiliki pop up like-box sedikit sulit untuk terealisasikan :p Masih ada JavaScript bos ;)) Koben akan berbagi cara membuat hal serupa Facebook LikeBox Popup using JavaScript ;)
Jauh berbeda dengan versi jQuery popup, simpel dan tidak banyak variasi tapi mempunyai fungsi yang sama yakni menampilkan konten bla-bla-bla...close!

Seperti itu sobat, konten ditampilkan seolah-olah menghalangi blog. Lalu klik di area kosong guna menghilangkannya ;)
Cari kode </b:skin> tepat sebelum/diatas kode itu masukan kode CSS berikut.

#load_blur { 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
z-index: 100; 
width: 100%; 
height: 100%; 
cursor: help;
position: absolute; 
text-align: center; 
background: rgba(251, 251, 251, 0.3); 
}

Kemudian cari tag </body> sisipkan ramuan JavaScript brkt

<script type='text/javascript'>
    //<![CDATA[
function loaded_blur( mode ) {

    blur_div = 'load_blur';
    var elem = document.getElementById( blur_div );
    elem.style.display = ( elem.style.display == "none" ) ? "" : "none";

}
   //]]>
</script>

Masih di dalam tag <body> guna penanaman markup HTML. Mau di bawah code <body> atau di atas </body> bisa juga Add a Gadget ► HTML/Javascript :d

HTML Configure

<div id='load_blur' onclick='loaded_blur();' title='click anywhere to enter'>

-------------- ADD YOUR CONTENT HERE --------------

</div>

Content dapat di isikan terserah mau bla-bla-bla apaan sesuai keperluan.
DONE.
Masukkan bumbu di bawah ini pada kotak add a gadget guna langsung meng-add ke blog kalian!

Happy popup \m/

Sabtu, 09 Juni 2012

Generator Text For Facebook Chat

Walau tidak ada sangkut pautnya dengan tutorial blog, namun tema facebook cukup lumayan buat update postingan ;)) Ada satu hal yang membuat Koben menggelitik dari layanan chat facebook. Dalam melakukan chattingan kita dapat mensisipkan emoticon berupa teks dengan ragam bentuk dan gambar-gambar (mungkin seluruh gambar dapat dijadikan emotikon) @-)
Satu web yang memberikan jasa guna melakukan tindakan tersebut yakni Facebook Chat Codes Maker! Sidik punya selidik, trik membuat text pada area facebook chat menjadi gambar ternyata dapat dilakukan dengan jQuery script ;) Koben sudah aplikasikan di sini Generator Text Full Stylish for Facebook Chat. Bagi sobat yg memang berminat mau seperti itu, gue punya beberapa tawaran serupa nih.

Datang dari blogger farixsantips, membuat 3 jenis generator teks facebook-chat.

Struktur Penulisan Kode

<style type="text/css">
.form {background:white; border-radius:5px; border:2px solid #777; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25);width:330px;padding:10px}
.input {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff}
.input:focus {background:#ffffe0}
.type {width:200px}
.output {width:295px}
.button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #555; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)}
</style>

<script src="ADD-SCRIPT-HERE.JS" language="javascript"></script>

<form class="form" name="code">
<input class="input type" name="type" size="63" type="text" placeholder="Write here..." />
<input class="button" onclick="change();" type="button" value="Change!" />
<input class="input output" name="output" onclick="select();" size="63" type="text" />
</form>

Gantikan ADD-SCRIPT-HERE.JS dengan salah satu JavaScript berikut ini

Rainbow Color

Green Color

Block Color

Simpan deh mau dijadiin postingan ataupun gadget, or .html :) Point terakhir ekstension html Koben sudah bikinkan juga bagi sobat-sabit ;))

Sikat mas brooo FacebookGeneratorText.zip in Ziddu. Dengan proses yg sedikit ribet dalam berchatting ria, namun lihatlah pada arsip message facebook kalian! Dengan begitu data yg biasanya teks biasa akan berganti dengan kode-kode sleketep :D Sangkin tidak ada kerjaan sampai mosting yg beginian =))
Bonus:
http://designresourcebox.com/jqfloat-js-jquery-plugin-that-creates-floating-animations/
Happy codding \m/

Jumat, 11 Mei 2012

Add Button Pinterest, Automatic for Image Blogger

Sebenarnya lagi empet mosting. Mati lampu, bahan buat memosting hilang semua belum tersimpan :( Sial banget bin sue apes! Ternyata tidak enak juga kalau cuma jadi penerima itu ;) Tidak tahu alasan apa Beben Koben si bloglang anu ganteng kalem tea ingin berbagi trick snippet jQuery, cara bagaimana memasang tombol pinterest otomatis untuk gambar. Kalau kebanyakan membahas adding pinterest pin it button, Koben mah pasang tombol pin-it automatic for image! Setelah melakukan blog walking in the pret, paling sederhana gue nemuin pinterest buttons on every image in a Blogger/Blogspot post using jquery (may be)
Bila kepengen memakai yg itu, sobat-sabit tinggal melakukan perubahan (menyesuaikan) UNIQ-ID '.entry-content img' dengan unik ID bagian postingan blog kalian. Biasanya sih .post, .post-body,...etc.

Sederhana memang, namun kekurangan trik ini adanya keikutsertaan pemanggilan //assets.pinterest.com/js/pinit.js dan tata letak tombol yg keberadaannya kurang sreg (harus diatur sendiri/manual, kalo ngerti itu jg) ;)) Terlebih-lebih hasil akhir yang merubah tombol menjadi sebuah iframe mode :p Karena JavaScript itu tadi tuh kayaknya ;)) Melongo & melihat ke Pinterest Web memang image kebanyakan yang di sharing!
Bagaimana versi aku...:">
Terinspirasi dari situs www.maf.org setelah melihat image disana kok ada yg terasa unik. Kok ada tombol pin-it di gambarnya yach? kata seorang pengunjung bertanya...Gimana cara buatnya dong Om, tunjukin kemari yah :))
Screenshot setelah melakukan uji coba!

Langkah pertama, pastikan template anda memiliki script jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Jika sudah ada, lanjutkan memasukan plugin jQuery berikut. Penempatan boleh dibawah script jQuery inti, atau dapat dicoba tempatkan sebelum tag </body> (Recommended)

<script type='text/javascript'>
//<![CDATA[
// surround each image with div class='pinned'
$('.post img').each(function() {
    if ( ($(this).height() > 105) && ($(this).width() > 205) ) {
        $(this).wrap("<div class='pinned' />");
    }
});
// grab each image div with class of .pinned
var each_image = $('div.pinned');
// iterate through all divs
each_image.each(function() {
    var pinned_height = $(this).find('img').height();
    if ($(this).find('img').hasClass("imageLeft") == 'true') {
        $(this).addClass('imageLeft');
    }
    if ($(this).find('img').hasClass("imageRight") == 'true') {
        $(this).addClass('floatRight');
    }
    //if (pinned_width > 205 && pinned_height > 105) {
        // dynamically add span and empty pin button
        $(this).append('<span class="pin"><a href="" target="_blank" class="pin-it-button" count-layout="vertical" title="Pin it On Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUoap48m7I3FJRnEGMq25gdNETrezqT3uABicToQoah1gK-yT1_R4RYFD6VT_M-6WOZS0XsmHZBJO8WyaPZ8YxsX_Ub4XcILrFz3e7c5fYI2wnLYfbrC36Ol4vmQGRs8x7IaJx9M6h64dK/s1600/pinterest.png" /></a></span>');
        $(this).find('.pin').css('marginRight', '2px');
        $(this).find('.pin').css('marginTop', pinned_height - 22);
        // cache variables
        var $this = $(this),
        // cache this
        image_source = $this.find('img').attr('src'),
        // grab image src
        web_title = $(location).attr('href'),
        image_height = $this.find('.pinned').height(),
        // grab current page title
        description = $this.find('img').attr('alt'),
        // grab img alt text
        slug = $this.find('a.pin-it-button');
        // find the Pinterest link
        // modify Pinterest href with new image details
        if (image_source.indexOf(".com") == -1) {
            image_source = window.location.protocol + "//" + window.location.host + image_source;
        }  
        slug.attr('href', 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '');
    //};
});
//]]>
</script>

Perhatian:

$('.post img')
.height() > 105)
.width() > 205)

Cari kode </b:skin> sisipin CSS berikut

.pinned .pin {
opacity: .7;
position: absolute;
margin-left: -45px;
}
.pinned .pin:hover {
opacity: 1;
}

SAVE mas brooo.
Saya tidak paham mengenai script²an, kalau ada yg salah tolong koreksi. Modal JS Bin and praktek doang gue mah, berhasil tapi :d Jangan lupa mengisikan atribut ALT pada image, karena itu akan terphrase menjadi TITLE ke pinterest web! Good luck :)

Demo

Perhatikan pojok kanan bawah pada image!
Happy pinterest button \m/

Kamis, 12 April 2012

Trick Snippet Syntax <b> & <i> on Comment Blogger

Mau berbagi trick melakukan snippet CSS. Mari kita ganti istilah snippet disini dengan menyuntik ;)) Yang akan disuntik sekarang kode bawaan blogger di sekitar komentar. Pada sesi kotak komentar pihak blogger secara default sudah memberikan 3 buah biji syntax yg dapat kita tulis. <a>, <i> dan <b> Artikan dulu satu² <a> ialah syntax link. <i> gaya tulisan miring italic. Terakhir <b> bold memberikan efek tebal pada tulisan. Biasa saja memang bila belum diberi sentuhan bumbu ajaib. Lain cerita jika sudah terkena suntikan bumbu ala Bloglang :))
Disini kita akan bermain-main kode CSS tingkat ecek² Sehingga dapat mudah di ikuti oleh sobat sekalian (kalo ngerti) :d Hal pokok yg musti dilakuin untuk melakukan suntikan gaya, kalian harus menemukan unik ID paragraf pada sesi komentar blog kalian masing²! (semoga saja sama) <- gaya b-)

Koben akan kasih tau teknik mudah mencari unik-id di seluruh site yg ada di jagat raya. Teknik ini merupakan salah satu jurus yg akan membuat kalian menjadi seorang master CSS =))
Buka satu halaman postingan blog kalian yg ada komentarnya. Bagi yg biasa memakai Firebug is Bugzilla Feature by Mozilla bisa juga ;) Special technique for FF versi teranyar and google chrome. Grab tulisan komentar (hold left click on mouse, grab) kemudian right click on mouse, pilih tulisan Inspect Element (Q)

Mozilla Inspect Element

Google Chrome Inspect Element

Baru menjelaskan cara gimana mengetahui unikID. Belum masuk ke sesi penjelasan snippetnya :d Pada screenshot diatas kita dapat mengetahui bahwasannya isi komentar blogger di tagging dengan memakai id-unik <div class="comment_body">
Cari kode ]]></b:skin> masukin deh sekarang bumbu suntikan snippet untuk komentar blogger! Nanti dulu, disini Koben bilang kan kelas CSS ecek²! Gue disini cuma masukin style effect textnya doang ya :d Dan itupun cuma untuk syntax <i> dan <b> ;)

.comment_body b {

--------- coded style here ---------  

}
.comment_body i {

--------- coded style here ---------  

}

Uniquee ID
Syntax
Mau mencoba ramuan text effect Koben!

.comment_body b {
text-shadow:1px 1px 0 #dd0000, 2px 2px 0 #dd0000, 3px 3px 0 #dd0000, 4px 4px 0 #dd0000, 5px 5px 0 #dd0000, 6px 6px 0 #fe6230, 7px 7px 0 #fe6230, 8px 8px 0 #fe6230, 9px 9px 0 #fe6230, 10px 10px 0 #fe6230, 11px 11px 0 #fef600, 12px 12px 0 #fef600, 13px 13px 0 #fef600, 14px 14px 0 #fef600, 15px 15px 0 #fef600, 16px 16px 0 #00bc00, 17px 17px 0 #00bc00, 18px 18px 0 #00bc00, 19px 19px 0 #00bc00, 20px 20px 0 #00bc00, 21px 21px 0 #009bfe, 22px 22px 0 #009bfe, 23px 23px 0 #009bfe, 24px 24px 0 #009bfe, 25px 25px 0 #009bfe, 26px 26px 0 #000083, 27px 27px 0 #000083, 28px 28px 0 #000083, 29px 29px 0 #000083, 30px 30px 0 #000083, 31px 31px 0 #30009b, 32px 32px 0 #30009b, 33px 33px 0 #30009b, 34px 34px 0 #30009b, 35px 35px 0 #30009b;
font-family: comic sans ms,arial,sans serif;
color: #fff;
padding: 0pt 2px;
}
.comment_body i {
text-shadow: -1px -1px 0pt rgb(34, 34, 34), 1px -1px 0pt rgb(34, 34, 34),-1px 1px 0pt rgb(34, 34, 34), 1px 1px 0pt rgb(34, 34, 34);
font-family: comic sans ms,arial,sans serif;
color: red;
padding: 0pt 2px;
font-style: italic;
}

SAVE.
Koben cuman masukin gaya text-shadow doang disana. Silahkan sobat kreasikan lebih full stylish sesuai dgn kemampuan :)

Trik snippet sederhana, namun menjelaskannya and bikin image screenshotnya menyita waktu :)) Semua aku lakukan demi sobat tercinta agar menjadi master CSS :)
Demikian saja deh, postingan ini merupakan cikal bakal cocok atau tidaknya kalian menjadi seorang master blogazine, CSS, coderer, or WTF names =))
Koben cabut...
Happy snippet \m/

Selasa, 10 April 2012

Add Timeline To Blogger (Easy Way)

Timeline ini mendukung pemanggilan data dari sumber yang berbeda. Dibangun untuk mendukung Tweets media dari Twitter, YouTube, Flickr, Vimeo, Google Maps dan SoundCloud. Membuat spreadsheet Google atau JSON.Keuntungan dari kita memilik resource terbaik tidak lain untuk belajar lebih giat. Tengok saja blogger² yang kebanyakan konten blognya memuat source² good master Assad Syaifullah Harahap salah satu contohnya, atau mungkin yang ini Functionn Blog :d
Jika sudah menemukan macam gituan, Beben Koben si bloglang anu ganteng kalem tea suka lupa dengan yg namanya blog walking :-" Ta' babad dulu semua :)) Trend tampilan dengan gaya timeline sedang melanda saat ini. Satu dari sekian banyak script timeline, mari kita jatuh pilihan pada Timeline © vérité.co
Kenapa pilihan jatuh ke sana, sudah Open Source tentunya dan yang tidak kalah penting karena master Emilio Cobos Álvarez sudah memaparkan penerapan timeline ini pada blogger :d You can read here Timeline del blog :-bd

Kata dia, saya cuma menambahkan beberapa baris script saja disana. Masalahnya bukan itu, bagi kita yg tidak paham tentang script (~~kayak aku ini~~) tetap saja kagak bisa mengaplikasikan pada blog =))
Bagaimana cara pemasangan timeline pada blog, dengan pemanggilan data memakai JSON! Mau paham tinggal belajar sendiri, tinggal pake yuk mari lanjut :p Bijaknya buat terlebih dahulu satu postingan statik (stand-alone pages) biar cepat dan mudah :)) Masukan semua bumbu berikut

Jangan lupa ganti YOUR-BLOG

http://jsbin.com/erolol

Kabuuurrr...
http://tutorialzine.com/2012/04/timeline-portfolio/
Happy timeline \m/

Senin, 09 April 2012

Scroll Hidden use jQuery Plugin

Setelah disibukan oleh hack threaded comment terbaru, gonta-ganti sana-sini dan ternyata berjalan, walaupun ada bentrok dengan script snippet yg lainnya :D Sampai kelupaan cari bahan postingan karena menerapkan hack tersebut pada dua blog saya ;))
Sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi trick jQuery Plugin seputaran something on float. Kalian sobat mungkin pernah melihat link share dengan keadaan fixed, jika di scroll diam di tempat. Kalau posisinya pas dan tidak mengganggu pemandangan tidak ada masalah! Jika posisi keberadaannya terlalu ke tengah, tentu saja akan mengganggu penglihatan si pengunjung ;) Untuk mengakali itu semua, mari kita buat pemecahannya dengan full stylish :p

Pertama-tama backup Full Download Template kalian. Cari kode ]]></b:skin> tepat diatasnya masukin bumbu CSS berikut

#outnav {
position: fixed;
left: 0;
top: 99px;
z-index: 9999;
}
#outnav .contain {
margin: 0 auto;
width: 75px;
}
#outnav ul {
height: auto;
list-style: none outside none;
padding: 0;
width: 75px;
}
#outnav ul li {
display: inline;
float: right;
margin: 5px 10px;
}
#outnav a {
background: transparent;
color: #FAFAFA;
float: right;
height: 30px;
}

Perhatikan unik ID atribut CSS, jika ada yg sama pada template kalian, silahkan ganti saja ;) Karena trick jQuery plugin, harus ada script inti<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Jangan di pasang bila sudah ada!

Markup HTML

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() !== 0) {
      jQuery('#outnav').fadeIn();
    } else {
      jQuery('#outnav').fadeOut();
    }
  });
//]]>
</script>

SAVE.
Dengan begitu saja kalian sudah mempunyai trik apabila kita scroll ke atas, maka akan menghilang. Lakukan scroll mouse pada demo

http://jsbin.com/ikawox

Apakah cuma segitu!!! Oh nooo, kurang style dong ah :)) Kemon lanjut...

Versi pertama cuma hidden ketika kita sudah melakukan scroll sekali saja. Dan itupun masih terlihat sesuatunya (link share)! Gantikan jQuery pluginnya saja oleh sobat dengan ini ya

<script type='text/javascript'>
//<![CDATA[
$(function() {
   $(window).scroll(function(){
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0)
 $('#outnav').stop().animate({'opacity':'0.2'},500);
 else 
 $('#outnav').stop().animate({'opacity':'1'},500);
 });
 $('#outnav').hover(
function (e) {
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0){
$('#outnav').stop().animate({'opacity':'1'},500);
 }
 },
function (e) {
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0){
$('#outnav').stop().animate({'opacity':'0'},500);
  }
 }
 );
});
//]]>
</script>

DONE.

http://jsbin.com/ekuges

Silahkan mau pakai yg mana ;;)
Happy jQuery \m/