Make Retweet Button with Bitly.com

999 ► Retweet

Haduh mosting apaan lagi nih, perasaan tidak ada yang full stylish buat di bagi :d Sobat tahu dengan bitly.com Web yg menawarkan jasa guna memperpendek link. Link panjang dijadiin pendek agar tidak terlihat seperti kereta api :p Aplikasi dengan menggunakan API Key dari bitly ini bisa membantu kita. Memendekan link postingan blog dengan memakai bitly! Ternyata link yg sudah jadi pendek itu bisa diteruskan kembali menuju ke web jejaring twitter!!
Jadi jika kawan² memang berminat membuat Easy Retweet Button harus daftar dulu di web bitly.com (biar lebih profesional) :d

Master John Resig sudah membuatkan script retweet sederhana berikut retweet. Lihat script tersebut, perhatikan pada tulisan window.RetweetJS Disanalah kita akan menempatkan KEY API & melakukan settingan gaya tombol re-tweet.
Begitu saja deh informasinya, lebih detil dan jelas silahkan baca di web yg bersangkutan ;;)
Happy coding \m/

jQuery Popbox not like usually Popup

Semakin susah ternyata mencari sumber artikel gaya punya. Apalagi konten yang dibicarakan mengenai tutorial blog, hampir sudah semua terberitakan halah :d Koben akan berbagi trick jquery plugin saja. This is story tell about jQuery PopBox!
Uniknya jQuery popbox terdapat pada hasil akhirnya. Kebanyakan trick yg bernamakan pop-pop itu seperti lightbox contoh. Konten utama akan ditimpa dengan lightbox effect secara full. Kalau si pop-box bergaya simple balloon.

Ini adalah yang dimaksudkan dengan simple balloon!!!

Mari kita bahas struktur pembangun jQuery PopBox.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function(){
  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.buka',
      box           : '.box',
      arrow         : '.arrow_'
    }, options);
    var methods = {
      open: function(event){
        event.preventDefault();
        var pop = $(this);
        var box = $(this).parent().find(settings['box']);
        box.find(settings['arrow_']).css({'left': box.width()/2 - 10});
        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },
      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };
    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });
    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });
    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()});
      $(settings['open'], this).bind('click', methods.open);
    });
  }
}).call(this);
//]]>
</script>

Semoga tidak ada yg menjadi emot ;))

Kode CSS

.popbox {
position: relative;
}
.collapse {
position: relative;
}
.buka {}
.box {
display: none;
background: #fff;
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
position: absolute;
padding: 5px;
z-index: 1;
}
.box img {
width: 100%;
height: 90%;
}
.arrow_:after, .arrow_:before {
bottom: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
}
.arrow_:after {
border-bottom-color: #fff;
border-width: 10px;
left: 10%;
margin-left: -10px;
}
.arrow_:before {
border-bottom-color: #bbb;
border-width: 11px;
left: 10%;
margin-left: -11px;
}

Markup HTML atau cara penulisan.<div class='popbox'>
<a class='buka' href='#'>Your Title Here!</a>
<div class='collapse'>
<div class='box'>
<div class='arrow_'></div>

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

</div>
</div>
</div>Setelah semua bumbu diatas masuk ke blog kalian, saatnya langkah terakhir yakni peletakan script pemanggil jQuery pop-box. Letakin diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.popbox').popbox ();
});
//]]>
</script>

Good luck :)
Sebagai bonusnya, sobat-sabit silahkan jalan-jalan yuk kemari nih ;)
http://jobyj.in/koottam-jquery-plugin/demo.html
http://www.red-team-design.com/interactive-menu-with-css3-jquery
http://webstutorial.com/css3-portfolio-menu/css3 (CSS3 version)
Happy jQuery plugin \m/

Jalan-jalan yuk! Ajib

Kalau dilihat-lihat resource yang ada diluaran sana ternyata kebanyakan larinya yaaa kesitu-situ juga. Masing-masing mengecap ini loh yang terbaik :p Semakin banyak pilihan memang enak, tapi kalau kebanyakan malah bikin pusing juga mana yg harus dibaca terlebih dahulu #-o Dimulai dari http://www.andysowards.com/blog/2012/best-so-far-css3-tutorials-inspirations-resources-of-2012/ kurang lebih ada 14 link tujuan untuk dilihat.
Lebih edan bikin mengantuk jikalau dibabad semua link yg ada tawaran dari web speckyboy mengenai aneka menu and navigation tutorial http://speckyboy.com/2012/04/18/css3-menu-and-navigation-tutorials/ Malah mencengang dibuatnya ;))

Dua artikel teranyar seputaran trik CSS3 from master @hdytsgt, lumayan fresh http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/ & http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only/
Untuk tutorial Animated List View Using CSS3, Koben sudah bikin minimalis kodenya :D

input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 20px;
width: 23px;
}
.control {
display: inline-block;
margin: 0;
width: 23px;
background: #eddfc7;
padding: 3px;
cursor: pointer;
}
.first {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#item-list {
padding: 0;
list-style-type: none;
text-align: left;
}
#item-list li {
display: inline-block;
width: 300px;
vertical-align: top;
margin: 0 0 .3em 0;
padding: 10px;
background: #f3eada;
border-radius: 5px;
box-shadow: inset 0px 0px 20px #e0cba0;
overflow: hidden;
}
#item-list li img {
display: inline-block;
vertical-align: top;
width: 100px;
margin-right: .3em;
}
#item-list li p {
display: inline-block;
width: 180px;
margin: 0;
padding: 0;
}
#item-list .title, #item-list .developer {
display: block;
margin-bottom: .3em;
}
#item-list .title {
font-size: 20px;
}
#item-list .developer {
font-size: 12px;
}

/* Animation start here */

.view-control-1:checked ~ #item-list li img {
opacity: 1;
width: 100px;
visibility: visible;
}
.view-control-1:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-1:checked ~ #item-list li {
width: 300px;
}
.view-control-2:checked ~ #item-list li img {
opacity: 0;
width: 0;
visibility: hidden;
}
.view-control-2:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-2:checked ~ #item-list li {
width: 900px;
}
.view-control-3:checked ~ #item-list li img {
opacity: 1;
width: 100;
visibility: visible;
}
.view-control-3:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-3:checked ~ #item-list li {
width: 900px;
}
.view-control-4:checked ~ #item-list li img {
opacity: 1;
width: 100px;
visibility: visible;
}
.view-control-4:checked ~ #item-list li p {
opacity: 0;
position: absolute;
visibility: hidden;
}
.view-control-4:checked ~ #item-list li {
width: 100px;
}
.view-control-1:checked ~ #item-list li img, .view-control-1:checked ~ #item-list li p, .view-control-1:checked ~ #item-list li,
.view-control-2:checked ~ #item-list li img, .view-control-2:checked ~ #item-list li p, .view-control-2:checked ~ #item-list li,
.view-control-3:checked ~ #item-list li img, .view-control-3:checked ~ #item-list li p, .view-control-3:checked ~ #item-list li,
.view-control-4:checked ~ #item-list li img, .view-control-4:checked ~ #item-list li p, .view-control-4:checked ~ #item-list li
{
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s ease-out;
transition: .4s ease-out;
}

Lumayan dapat ilmu dari meminimalis juga :d

Trik ringan seputaran trick hover come from http://www.impressivewebs.com/mimic-onmouseout-css3-transitions/ Biasanya ketika disorot cursor terlihat efek, eh ini mah malah ketika ditinggalkan cursor baru deh terlihat efeknya ;))

Sama namun berbeda, dulu Koben berbagi simple content slider pure CSS3 look is this http://thecodeplayer.com/walkthrough/make-an-accordian-style-slider-in-css3
Perjalanan terakhir menclok ke satu web CSS, konten berisi kode-kode yang sering kita jumpai namun sulit untuk membuatnya http://css3shapes.com/. Disanalah tempatnya ;) Ex:

Biar lamaan dikit jalan-jalannya ;)) http://www.webhostingsecretrevealed.com/web-design/30-latest-css3-tutorials-you-probably-have-not-read-before/
Met jalan-jalan :-h
Happy coding \m/

Brosho jQuery Plugin For Edit-edit

Buat posting lagi jalan lain untuk mengedit-ngedit template. Sebelumnya pernah berbagi Bookmark JavaScript Shell! JavaScript sederhana namun memiliki fungsi layaknya firebug ;) Sebagai penikmat dari feature jquery plugin apakah bisa kita membuat aplikasi seperti itu? Jawabannya sudah pasti bisa, kalau tidak bisa nggak mosting dong Koben ;))
Karena penggunaan yang cukup mudah, lumayan untuk setting-setting template dan langsung terlihat hasilnya seketika itu juga! Lebih keren lagi, kita bisa langsung mengambil kode-kode CSS hasil rombakan tersebut b-) Apakah kalian tertarik dengan postingan kali ini? Kalau tidak, enggak dibagi sama Koben :p Eh ada satu lagi kelebihannya, posisi editor bisa diposisikan top, bottom, right or left.

Karena bersifat hanya untuk mengedit (sementara) Go to your Dashboard. In Page Elements, click Add a Gadget, choose HTML/JavaScript. Jadi kalau sudah tidak terpakai tinggal delete saja itu si gadget :d
Koben dapatkan informasi ini dari web http://usejquery.com/ Kemarin masih bisa diakses, pas datang lagi sudah ora iso! Ada warning beginong "Ruby (Rack) application could not be started" Download & keterangan jQuery plugin ada pada halaman demo berikut
http://demos.usejquery.com/brosho-plugin/
That is the Brosho jQuery Plugin. Maknyus tidak...

Koben sudah buatkan versi minimize, pada folder brosho-jquery-plugin dengan judul widget.txt Masukin deh via add a gadget Download brosho-jquery-plugin.zip.
Semoga bermanfaat :)
Happy edit-edit \m/

Emoticon jQuery Plugin Suka-suka dari Web Mana!

Sebenarnya saya lagi tidak ada bahan untuk memosting. Walking-walking ke seantero jagat maya raya tidak menemukan yang different style #-o Seleksi punya memilih, tema trick, tutorial, hack, snippet sekarang akan bercerita mengenai EMOTICON :d Walau Koben lihat mungkin sudah tidak relevan lagi bila bercerita seputaran si emot ini :p
Tidak gaya, enggak aneh ora diposting dong :)) Nanti akan saya jelaskan bagaimana membuat emoticon suka-suka mau pakai emotikon dari web mana saja @-) (satu web sih, dan itu juga harus web yg memang khusus konten emotikon) Berawal menclok dari Facebook Style Emotions Jquery Plugin! Dipraktekan untuk dipasang ke blog, ternyata gambar emotikonnya tidak muncul :d Maklum saya tidak mengerti tentang script :(

Praktek punya nekat, saya modifikasi script jQuery plugin yg ada! Hihihi, tak tau bener yg penting jalan :)) Cuma ada satu masalah yg terjadi di sini? Ini emotikon cuma bisa memanggil 1x saja. Koben sudah kasih screenshot ke yg punya project, tapi tidak ada balasannya. Jika master Hompimpa Alaihum Gambreng baca, tolong benerin scriptnya yah :d Siapa saja yg bisa?
Singkat cerita trick ini jadi belum 100% mulus berfungsi. Cuman, bagian komentar kan terpisah-pisah tuh, jadi tidak masalah kalau mau memakai trik ini. Asal jangan sampai 2x sama pasang kode emotnya :d Misalkan begini +_+ +_+ (tuh yg jalannya bakalan satu tuh) Enggak ngerti juga :d
jQuery plugin, lumayan sedikit scriptnya, mudah pemanggilan, dapat kita terapkan semau kita. Alasan itu mengapa Koben ingin berbagi. Sharing is caring :)

Untuk lebih jelasnya silahkan buka halaman demo berikut Facebook Style Emotions Jquery Plugin. Ketikan pada kotak dengan kode emot yg sama lebih dari 1x, kemudian press Post. Apa yg terjadi?

Di awal Koben sudah bilang memodif script. Gue panggil via emot kepunyaan si Yahoo! Pergi deh ke sana untuk melihat source gambar emotnyah Emoticons Yahoo! Messenger and Hidden Emoticons Yahoo! Messenger. Ini yg Koben maksudkan mau memanggil emot dari web mana, asalkan memang kontennya emotikon. Mengapa begini, karena kita akan menggunakan jasa web tersebut guna memanggil gambar emot-emotnya! Singkat cerita, tidak usah mengupload gambar! Hehe...
Gambar emot lebah yahoo! :bz
Ini kalau dalam bentuk link http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/115.gif
Warna merah tersebut sebagai link pemanggil dari web yahoo!
Warna biru (angka-angka) kode gambar emot yg akan tampak.
Pokoknya gitu deh :p Sobat mau pakek web dari mana, perhatikan saja begitu struktur penulisannya.

Structure Emotions jQuery Plugin

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

SCRIPT PLUGIN HERE - Silahkan di download dan di ekstrak

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
$(".post-body").emotions();
$(".comment-body").emotions();
});

//]]>
</script>

Terserah itu mau diletakan dimana. Rekomendasi diatas tagging </body> Script hasil download cari pada bagian $.fn.emotions.defaults
a :
Merupakan link pemanggil emot dari web tujuan.
b :
Kode angka² mrpkn jenis gambar emot yg ada di yahoo!
s :
Kode yg akan kalian pakai dalam memanggil, terserah enaknya mau gimana. Bila mau menambahkan emot pada bagian yg dikehendaki, tambahkan saja$(".comment-body").emotions();
$("UNIQUE-ID").emotions();Pertimbangkan dulu bila emang mau dipakai :d Belum 100% mulus :p

Happy emot \m/

Responsive Bikin Repot

Mengikuti issue-issue bahwa website harus terus dikembangkan performancenya agar support terhadap perangkat selain komputer! Terdengar sedikit pemaksaan sepihak dengan tujuan yang bisa dibilang memang saling menguntungkan :)) Pro kontra selalu ada. Sebagai pemilik blog/web tentu ini menjadi PR tersendiri. Bila perangkat seperti iPhone, iPad atau apapun memang menjadi perangkat utama yg kalian gunakan, harga mati site kalian harus responsive looked ;))
Responsive performance mobile berbeda dengan perangkat lainnya sobat. Blogger telah menanamkan sistem tersendiri guna pemanggilan blognya yakni blogspot agar friendly mobile. Biarkanlah master developer berkerja, kita mah tinggal menunggu hasil akhir saja :d
Seperti kreasi berikut yg diberi nama mobile application framework dibangun memakai MooTools. Apakah itu?

Tools yang berfungsi untuk melihat apakah web/blog kita sudah terlihat seperti yg diinginkan pada perangkat selain komputer. Walau cuma dua device yg ditawarkan, tapi lumayan untuk banding² :p Opensource bos :))
Moobile nama web yg menawarkan jasa tersebut. Oh iyah only work for Safari 5.1.5 or better - Google Chrome 18 or better :D
Setelah membuka webnya, klik option Demo ★ ► See this demo ★ ► kanan atas klik Open. Masukin deh URL tujuan yg mau dilihat :)

         

Ternyata blog saya tidak responsive :d
Ada yg lebih kumplit sob untuk melihat keberadaan si responsive, ini dia Screenqueri :-bd Perangkat meliputi APPLE, iPhone, Samsung, Galaxy Note, Blackberry, LG, Nokia, Motorolla, other @-)

alistapart.com/articles/responsive-web-design
css-tricks.com/css-media-queries
coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website
www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
paulund.co.uk/css3-animated-media-queries
thecssninja.com/demo/css_chameleon
webdesignerwall.com/tutorials/css3-media-queries
webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
webdesignerwall.com/demo/elastic-videos
webdesignerwall.com/demo/adaptive-design/final.html
www.netmagazine.com/opinions/next-chapter-responsive-web-design
responsejs.com
stild.com/code/jquery-responsive-web
xoxco.com/projects/code/breakpoints
bohemianalps.com/tools/grid
masonry.desandro.com
www.queness.com/post/11314/everything-you-need-to-build-a-css3-responsive-fluid-layout
www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
line25.com/articles/responsive-web-design-articles-tutorials-guides
isotope.metafizzy.co/index.html
fittextjs.com
fitvidsjs.com
html9responsiveboilerstrapjs.com
www.grahambird.co.uk/lab/doubletake
adaptive-images.com
www.wookmark.com/jquery-plugin
googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html
googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
www.htmlcut.com/blog/responsive-webdesign-html5-css3-2012.html
www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries
vandelaydesign.com/blog/web-development/turn-any-site-into-a-responsive-site
nmsdvid.com/snippets
www.evolutionarydesigns.net/blog/2012/05/22/what-is-responsive-design
couchable.co/blog/post/using-responsive-css-frameworks-for-faster-development
responsive.gs
frag.rowanmanning.co.uk
necolas.github.com/griddle
daneden.me/baseline
sebnitu.github.com/HorizontalNav
iwantaneff.in/repo/plugins/menu-nav/tiny.nav/index.html
flexiejs.com
webcodebuilder.com/responsive-jquery-plugin-flexslider-feat-kwiks
www.iosscripts.com/iosslider
www.xpertdeveloper.com/2012/08/media-queries-for-responsive-design
johnpolacek.github.com/scrolldeck.js/decks/responsive
mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator
www.splashnology.com/article/45-new-tools-and-services-for-web-designers-and-developers/6150
www.designresourcebox.com/tools-and-jquery-plugins-to-help-you-design-a-website-or-a-web-app-for-mobile
www.freshdesignweb.com/responsive-web-design-tools-and-techniques.html
www.freshdesignweb.com/useful-responsive-menu-navigation-tutorials.html
www.cssauthor.com/45-useful-responsive-web-design-tools-for-web-designers
www.frescojs.com
www.npr.github.com/responsiveiframe
www.themergency.com/footable
www.splashnology.com/article/responsive-web-design-fresh-tools-articles-and-tutorials/7264
www.responsiveimg.com
suprb.com/apps/gridalicious
www.designer-daily.com/20-tools-to-help-you-create-responsive-web-designs-24055
speckyboy.com/2012/11/13/quick-tip-using-css-transitions-in-responsive-web-design
bradfrost.github.com/this-is-responsive/index.html
cardinalcss.com

Apps to Test Responsive Design On

responsive.is/foodsense.is
jquerypicture.com
responsivepx.com
www.responsivegridsystem.com
www.responsinator.com
responsive.gs
mrinalwadhwa.github.com/adaptImages
lab.maltewassermann.com/viewport-resizer
mattkersley.com/responsive
dfcb.github.com/Responsivator
designmodo.com/responsive-test
suprb.com/apps/nested
res.ponsive.com
gumbyframework.com
. . .

Hehehe :D

Happy responsive \m/

Easy Make Image Animate GIF or Full Stylish Effect

Postingan sebelum-sebelumnya Koben pernah berbagi tools keren yang entah berada dimana keberadaannya :d Tools dengan sistem drag and drop file sepertinya memang sedang digandrungi saat ini dalam proses bekerja. Contohnya seperti ini sob B.I.R.M.E. (Batch Image Resizing Made Easy) Pelajari, merubah tinggi, lebar dan memberikan efek border langsung ke dalam image! Mudah :))
Dengan variable CSS border image dapat di sisipkan. Tetapi untuk gambar sedikit sulit apabila membuatnya ;)) Pake itu saja...hehehe. Resize percentage juga dapat kita sesuaikan mau berapa persen! Simulasi
Pakai border

Pakai birme (no border)

Karena BIRME tidak opensource, Koben akan kasih yg mirip tetapi sudah open-source Thumbnail generator. Setelah bermain-main dengan tinggi, lebar, quality, border effect pada image, sekarang saatnya mengetahui bagaimana cara membuat efek animasi GIF. Sobat hanya perlu drag & drop-drag & drop klik deh tombol ► Animate
Contoh kreasi Koben

Mau tahu nama webnya!!!

Ini sobat Mothereffing animated gif (sudah opensource) Di balik semua itu, kalian bisa sikat juga open-source lainnya di Mothereffing web developer tools. Dan inilah para kreator baik hati yang telah membuat tools bermanfaat itu H5BP ♥ Open Source :x

Web tools for lazyman

Web tools for lazyman

Setelah gambar dibikin indah, sekarang issue responsive menjadi hambatan tersendiri untuk image ini! Jangan khawatir, script dapat menyelesaikan semua itu, sikat Riloadr: A responsive images loader. Setelah membuka link tersebut, sobat resize-resize deh windows browse kalian? Apa yg terjadi disana pada gambarnya :))
Sekian dan terima kasih, semoga bermanfaat :)
Happy image \m/

Belajar CSS biar Pintar

Dalam belajar bahasa CSS pernah terpikir jika kita memasang height: 0px; tetapi kita berikan padding: 5px; maka akan tetap terlihat sebidang area yang tampak? Variabel overflow: hidden; berperan dalam menyembunyikan tinggi yg ada! Background kita beri warna hitam guna menyamarkan konten yg ada, seolah-olah ada sesuatu disana ;)) Postingan sekarang kita bermain dengan CSS. Kreasi apa saja yang dapat kita buat dengan kode berikut:

.ayanaon {
background: #000;
padding: 10px;
height: 0px;
overflow: hidden !important;
box-shadow: 0 0 3px #000;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.ayanaon:hover {
opacity: 1;
background: transparent;
height: 250px;
}

Markup HTML<div class="ayanaon">

your content here

</div>This is Demo

Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Li mesto esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem. Bi polnju odevijm eda, om dom mensx rukis gladju, delat glosuf vseslavju din mi. Takak ekonom cxasis nad vo, gde li suhju logikju pomocijt. Sos pisat idijm kasxtanju bu, gde tper ekonom verijm ja. To cxtir roksanavoi mne. Vse cxem roditelis bu. Bi dumam gostis vipolnil oni, es sos vozis cxesajut.

Terlihat sederhana memang kode CSS diatas, namun disana variable overflow: hidden; yang sangat berperan. Semakin banyak para master sekarang menuliskan kode-kode, script² atau apapun bagi kita. Namun sobat harus lebih selektif dan perlu mengoptimasi kembali kode² yg sudah diberikan.
Apakah ditelan bulat-bulat coded yg sudah diberikan oleh kalian??? Keselek dong :d

Koben cuma mau berpesan, yuk lebih giat lagi belajar CSS...kabuurrr
Happy coding \m/

Bookmark JavaScript Shell, so Cool

Mungkin sedikit asing terdengar/terasa bila kita memang jarang memakainya. Fasilitas bookmark sering dilakukan dalam menyimpan link bermanfaat. Bookmark dolo ah, nanti bacanya kalau sudah santai! Bagaimana ceritanya sebuah tools dibuat versi book-mark. Tentu akan membantu kinerja kita dalam melakukan satu aktifitas. Tidak semua hal serius dijadikan oleh para kreator bookmarked. Fun and game juga banyak sekarang dibuat versi bookmarknya.
Mirip dengan feature firebug dari mozilla proses kerjanya. Fitur yg ada mungkin tidak sekomplit di sana. Tetapi ukuran filenya yang kecil dibungkus dengan teknik bookmark, Koben yakin sobat-sobat akan senang mengedit-ngedit design template.
Tidak template kepunyaan kalian saja yg bisa diedit-edit, design template orang lain juga bisa :)) (namanya jg bookmark) :d

Koben kasih tauk sedikit dalam membuat syntax link dgn variable javascript.<a href="http://TUJUAN-LINK.COM/HTML/PHP/ASPX/...">Title Link</a>Gantikan isi (tulisan berwarna dengan ramuan script-bookmark) Berikut ramuan ajaib Jash bookmarklet

javascript: (function(){document.body.appendChild(document.createElement('script')).src='http://www.billyreisinger.com/jash/source/latest/Jash.js';})();

Ambil script disini kalau tidak mau capek ;)) Cuma mau berbagi itu saja kok :p Silahkan cari target site mana yg mau sobat edit-edit? Kemudian klik link Jash bookmarklet!

Setelah terbuka, begini caranya ya sob ;)) Klik opsi Mouseover DOM atau press shortcut pada kibor Alt-Shift-X. Click juga opsi CSS Input or press Alt-Shift-S.
Mouseover DOM kita gunakan untuk mengetahui unik ID. Sorot-sorotlah pake mouse dan perhatikan keterangan yg ada? Kotak bagian bawah digunakan untuk menuliskan bahasa CSS. Waktu memosting ini lihat Koben bermain-main merubah background :P

Lebih jelasnya sobat datangin saja halaman Documentation Javascript Command-Line. Koleksi aku ada di Brainy Bookmarklet Links ;)
Happy bookmark \m/

~!@#$%^&*()_+|

Berbagi terus sampe modyar... Master @bdeepu pada artikel gue dulu pernah membahas mengenai Pure CSS notification bar using :target pseudo class! Pemberitahuan sekejap dengan variasi dapat di buka/tutup. Terasa fungsinya fitur ini jikalau dari sobat-sabit ada yang merubah link/nama site. Memberitahukan informasi penting agar pengunjung membacanya? Terserah juga mau dipakai apaan :p
Sama namun berbeda dalam fitur yg disajikan, kembali owner web @webstutorial menggebrak dengan postingan tut'snya CSS3 News Ticker, Notification Like Stackexchange. Fasilitas tutup/buka ready stock, namun yg berbeda disana ditanamkan juga scrolling effect for link layaknya efek pada news ticker! Lezzato.nikmato..perfekto...pusingo :))

Lagi-lagi variabel -keyframes berperan penting dalam menampilkan efek scroll. Setelah Koben praktekan masukin ke editor edit template, ternyata ada sedikit masalah dengan membukanya kembali :D Mungkin karena blog berbahasa XHTML kali ya, dan belum bisa support elemen-elemen kode HTML5 (sotoy mode on)
Berarti kalian harus memadukan trik ini kedua-duanya :)) Namanya juga share site-nya doang kok ;))

http://jsbin.com/imenac

Kabuuurrr... \m/

Latest Cool CSS Trick!

Ketika beres melakukan persiapan dalam memosting, klik tombol publish, postingan pun siap sedia tersaji untuk kita baca. Seorang master tutorial cukup sekali membuat artikel, dan article tersebut cukup menarik buat disimak, tersebarlah secara otomatis oleh para penggila penyebar artikel. Mau itu dalam bentuk di tweet, share via web jejaring, atau dibuat versi sendiri dengan merujuk ke sana :)
Saat sekarang dikalangan para master untuk menyimpan proyek-proyek mereka mungkin berada di web GitHub.com, padahal ada Google Code :d
Contoh master kalau sudah memosting pasti seantero jagat dunia web berbagi mengenai itu Rotating Words with CSS Animations by @crnacura

Demo Rotating Words with CSS

Beben...Koben...Si Bloglang...anu Ganteng...Kalem Tea...\m/

Masih ingat dengan master Hakim El Hattab! Dia mengeluarkan tutorial maknyus punya tentang CSS3 Scroll Effects. Ada 11 efek mengagumkan scroll pada atribut <ul>. Bagaimana dengan ini yang cuma memakai CSS Collection of menu effects?
Koben juga pernah beberapa kali memosting tutorial slider use css tapi ternyata belum ada yg beginian juga Awesome Rotating CSS Image Slider 8-> ^:)^ Semakin hari makin terus dikembangkan dan semoga bisa terus dioptimasikan kode-kode CSS yg memang lumayan panjang itu :d
Segitu saja deh infonya, blogger support adsense tapi masih bingung gimana makainya :))
Happy reading \m/

Salute to the Master of Open Source Dev.

Mungkin sobat sudah baca artikel Koben yang dulu all about CSS! Disana gue koleksi web-CSS dan tools-CSS. Memang tidak komplit tapi lumayan buat referensi. Masih ingat dengan trik membuat sesuatu berada di pojok? Dulu kan manual kita bikin kode²nya, sekarang ada web menawarkan layanan jasa itu loh quickribbon.com.
Singkat cerita Koben cuma mau kasih tau saja, bahwasannya banyak para master-master developer diluaran sana, dengan kepandaian dan kebesaran hati sudah membuat tool-tools keren yg sudah opensource alias gratis tinggal kita sikatin :-" :d Seperti tools berikut yg berfungsi memiliki menggenerated kode CSS3 agar terbaca pada browse utama! Ada yg sudah pada tahu pastinya nih cssFx.js.
Misalkan begini, sobat menuliskan kode border-radius:10px; dan pencet generated langsung jadi support kode untuk opera, mozilla, safari, bahkan IE.

Sebenarnya sudah enak kita tinggal memakai & menikmati hasil jerih payah para master tersebut. Tinggal urusan kita sampai mana sekarang mau berkreasi! Sekarang gimana kalau sobat disuruh bikin beginian just using CSS variable

This is CSS ARROW please. Look is that, very easy make arrow used only CSS now!!! We just click click, and finish it. Easy right!

Dijamin repot kagak bisa kalau macam Koben yg males belajar mah :)) Don't worry bro, you can check this out, the usefully open source by master @shojberg cek gi dot css arrow please. Sudah berapa tuh gue bagi-bagi!
Okay deh, Beben Koben si bloglang anu ganteng kalem tea akan sharing open-source penomenal, boombastis kepada kalian satu lagi. Kenal dengan jsFiddle atau JS Bin? Gimana kalau model gitu memang ada yg bagi-bagi untuk kita? Ini juga kan tidak kalah phenomenal sob HTML Editor Online Opensource :-"

Datang saja ke sini jika sobat mau yang seperti jsFiddle/JS Bin Websanova.com :-bd Jangan terlewatkan semua konten yg ada di sana, RUGI!!! Nama toolsnya yaitu JSNOVA. Koben sendiri kalau tidak salah sudah ada koleksi opensource ratusan buah :)) Sharing with me in prettt...what's you got for share to me :-?
Happy open source \m/

Make Widget Link Use Canvas HTML5 for Blogger

Pertama kali mencoba memasukan attribute canvas di blogger, Koben tulis ya seperti masukin script pada umumnya di atas tag </body>. Eh taunya bukan begitu :D Seorang blogger Indonesia yang lumayan pernah banyak bercerita mengenai HTML5 Canvas ini yaitu master Hendro Prayitno. Namun sayang sudah lengser alias berhenti HTML5 Canvas tutorial.
Unsur <canvas> HTML5 digunakan untuk menggambar grafik, dengan cepat, melalui scripting (JavaScript). Merupakan wadah untuk grafis, dan harus menggunakan script untuk benar-benar menarik grafis tersebut. Mau ngejelasin juga saya sendiri gaptek kalau persoalan script #-o Satu web yang memang keren karya²nya dapat sobat lihat html5canvastutorials.com.
Walau sulit dan tidak mengerti tentang script, selagi ada master yg mau berbagi ilmunya tidak jadi masalah ;))

Begitu banyak kreasi html5-canvas dibuat, namun sedikit sekali yg bisa kita ambil untuk menghiasi blog! Beben Koben si bloglang anu ganteng kalem tea nemuin satu nih sob :p Master @MahmoudAdly seorang blogger. Dia membuat HTML5 canvas profile widget. Apakah itu? Penjelasannya begini saja...
Link profile dibuat dengan latar belakang bergambar, di beri efek melayang dan gambar sayap, sehingga terlihat terbang. Ketika gambar link diklik, maka akan jatuh sebuah telur! Telur jatuh harus tepat ke dalam sarang. Jika tidak masuk, maka link tidak akan terbuka.
Begitu kira-kira :d
Berbentuk widget maka teknik yg digunakan adalah Add a Gadget ► HTML/JavaScript ;)) Begini hasil modifikasi Koben

http://jsbin.com/ilofoh

Pada nara sumber script telah diberikan. Disini tingal kreasi kita sendiri bagaimana menhias-hias (merubah-rubah) script canvas yg sudah ada itu. Rubah gambar, tinggi, dan lebar saja sob :)) Jangan rubah isi scriptnya...LoL

Dari isi script var globalFPS sampai var waveSpeed sangkut paut dengan urusan height, width, speed, jarak horizontal and vertical. var profilesArray tempat meletakan gambar icon profile, link tujuan, dan image telur jatuh. Segitu saja setting-settingannya.
Tentukan terlebih dahulu tema gambar latar belakang, tinggi dan lebarnya! Ini sangat penting karena menyangkut nanti pada lebar dan tinggi canvas pada hasil akhir. Icon profile terserah, yg penting kecil saja antara 16px - 32px. Ukuran ikon akan berpengaruh pada letak posisi sayap!

Jika sudah yakin dengan segalanya, maka tinggal kalian hostingkan isi script. Jadi pas dimasukan ke HTML/Javascript akan berbentuk

<canvas width="250" height="400" id="canvas">
Oops! Your browser does not support HTML5 canvas.
</canvas>
<script src="http://HTML5-CANVAS-PROFILE-WIDGET.js"></script>

Bila mau bermain-main dulu sebelum yakin buka editor HTML. Simpan pada kotak kiri dengan format tulisan<canvas width="250" height="400" id="canvas">
Oops! Your browser does not support HTML5 canvas.
</canvas>

<script type='text/javascript'>

--------- ISI SCRIPT ---------

</script>Lanjut klik tombol Preview. Jadi enak kan nyettingnya ;)
Apabila tinggi canvas 300px & lebar 425, icon size 16px cocok, tinggal sikat saja tuh yg Koben di jsbin.com. Kalian tinggal hostingkan saja deh scriptnya :d Sudah lulus error :))
Happy canvas \m/

Make Search Box Ala Web Disqus

Tidak sengaja awal melihat box search kepunyaan web DISQUS. Pada home page tidak terlihat, tetapi seperti Koben bilang tidak sengaja masuk ke bagian halaman dokumen! Disanalah gue melihat seonggok kotak pencarian full stylish b-)
Saran Koben, sobat buat account disana, walau tidak memasang embed comment, tapi fitur yang ditawarkan dapat berguna. Satu contoh yg terasa banget yaitu comments activity kita, selama meninggalkan komentar pada web/blog yg menggunakan embed komentar disqus. Kita dapat melihat link² dimana kita sudah menuliskan komentar ;) Enggak masang comm. embed saja merasakan manfaat, apalagi kalau masang :d ℓєєємммðððттт...:))
Duh malah keasyikan cerita, lupa mau berbagi cara membuat kotak komentar versi disqus :D Unik kotak pencarian disqus ini terdapat tampilan photo/avatar di bagian kiri.

Dibutuhkan 2 buah image, right click ► Save Link As...

1. Image 1
2. Image 2

Masukan bumbu CSS berikut dengan metode Add a Gadget ► HTML/JavaSCript.

<div id="cari">
<div id="avatar">
<img src="http://PHOTO-AVATAR.jpg" alt="" />
</div>
<form method="get" action="http://YOUR-BLOG.blogspot.com/search">
<input type="text" name="q" id="searched" class="box" placeholder="Search the docs..." />
<input class="btn" title="Submit Search" type="button"/>
</form>
</div>
<style>
#search {
    float: left;
    padding: 10px 0 12px 15px;
    margin: 10px 0 0 8px;
    color: #7c7c7c;
    font-weight: bold;
    background: none;
    width: 150px;
    font-size: 13px;
}
#avatar {
    padding: 13px 0 0 12px;
    float: left;
}
#avatar img {
    width: 32px;
    height: 32px;
}
.btn {
background: url('http://Image 2.png') no-repeat;
    position: relative;
    top: 19px;
    left: 9px;
    cursor: pointer;
    border: 0;
}
#cari {
    height: 57px;
    width: 256px;
    background: url('http://Image 1.png') top left no-repeat;
    margin: 0 0 20px;
}
#cari input {
    border: none;
}
#cari input:focus {
    border: none;
    -webkit-box-shadow: none;
}
.box {
    background: #fff;
    border: 1px solid #c7c7c7;
    overflow: hidden;
}
</style>

Jangan lupa ganti link image. Image photo resolusi (75 x 75 pixels)
Hasilnya akan seperti ini

http://jsbin.com/ohumup

Ingat, karena ini menggunakan image yg sudah dipatok tinggi dan lebarnya, maka jika sobat mau sesuai dengan template harus bikin sendiri gambarnya :D
Happy search \m/

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/

10 Amazing Template My Choice

Tidak ada kerjaan melongo ngeliatin template keren². Kubuka satu² template tersebut, tengok yang gaya punya, untuk dijadikan postingan sekarang :)) Biasa berbagi bahagia, share is care to be happy gito loh :d Sangkin banyaknya berbagi informasi template full stylish sampe lupa sendiri Koben mana yg belum :"> Silahkan diacak-acak saja di arsip blogku ini! Tapi kalo tidak salah link postingan lists template top markotop ada di sini bos Look for Template Para Blogger ;) Monggo di open atu² webnya pasti nemuin template idaman kalian ;)) :-"
Koben punya style, tidak sengaja kok menclok di web ini. Ya karena gaya gue memang berbeda toh :))

Free ProStyle Blogger Template

Free ProStyle Blogger Template adalah desain template bertemakan theme background kayu dengan desain sederhana dan slider untuk fitur posting, warna coklat dengan kombinasi hitam untuk latar belakang utama, ads space ready, 2 kolom dan 3 kolom pada footer.

Free Bussiness Solutions Blogger Template

Free Bussiness Solutions Blogger Template adalah bisnis desain profesional template blogger 2 tema tipe warna dengan desain minimalis dan slider untuk posting fitur, warna putih untuk latar belakang utama, tema yang sangat baik untuk situs pribadi, 3 kolom dan sidebar kanan untuk layout dasar.

Free Unlimited Hosting Blogger Template

Free Unlimited Hosting Blogger Template adalah blogger template gaya magazine dengan menu desain yang stylish. 2 kolom blogger template dengan sidebar kanan, footer 3 kolom, slider haccordion konten, pagination ready add, seo dioptimalkan, dan banyak lagi. Ini template yang dirancang untuk bisnis atau blog terkait teknologi cocok tentang review hosting.

Free Mangos Blogger Template

Free Mangos Blogger Template adalah gaya magazine blogger template yang diadaptasi dari WordPress Theme ke Blogger dengan template desain gaya minimalis. 2 kolom dengan sidebar kanan, 3 kolom footer, otomatis menampilkan slider konten, iklan siap, SEO dioptimalkan, menu dropdown, posting ringkasan dan banyak lagi. Template ini dirancang untuk semua jenis blog Google!

Free Flexor Magazine Blogger Template

Free Flexor Magazine Blogger Template adalah gaya magazine blogger yang diadaptasi dari WordPress Theme ke Blogger template dengan warna dasar abu-abu. 2/3 template dengan sidebar kanan, 4 kolom footer, otomatis menampilkan slider konten, iklan siap, pagination untuk blogger siap, SEO dioptimalkan template, iklan siap, tabview siap, posting ringkasan dan banyak lagi.

Free Stylify Blogger Template

Free Stylify Blogger Template adalah desain template blogger yang bagus dengan desain template minimalis. 2 kolom dengan sidebar kanan, 4 footer kolom, pagination untuk blogger siap, SEO dioptimalkan, desain template bersih, widget related post, komentar membalas siap, dan banyak lagi. Sudah auto responsive looked loh ;)

Free CPanel Blogger Template

Free CPanel Blogger Template adalah gaya magazine blogger template dengan desain bagus. 2 kolom blogger template dengan sidebar kiri, 3 kolom footer, fitur slider konten, pagination untuk blogger siap, seo dioptimalkan blogger template, dan banyak lagi.

Free Blogazine Book Blogger Template

Free Blogazine Book Blogger Template adalah desain template blogger yang bagus dengan gaya Blogazine. Sidebar tidak ada, 3 kolom footer, template disain yang rapi dan minimalis, dan banyak lagi. Template ini dirancang untuk blog pribadi!

Free Premium Proposal Theme Blogger Template

Free Premium Proposal Theme Blogger Template adalah nice looking blogger template dengan gambar latar belakang dapat diubah. Ini adalah 2 kolom blogger template yang kiri sidebar, footer 3 kolom, iklan siap, posting ringkasan otomatis, dan banyak lagi. Template ini dirancang untuk blog pribadi!

Ini yang terakhir nih, lagi hot-hotnya dengan issue responsive performance :)) Not pay, it's free :x Screenshot templatenya gini aja yah :D

BONUS

Happy template \m/

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src="http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js"></script>
<link href="http://veritetimeline.appspot.com/latest/timeline.css" rel="stylesheet"></link>
<script type="text/javascript">
function loadTimeline(){
window.TimelineConfig = {
// if we want the first page had a special image:
// window.TimelineConfig = { 'URL_imagen' chars: 500 }
}
document.getElementById('timeline').style.display = "block"
var time = new VMM.Timeline("100%","500px");
$.ajax ({
dataType:'jsonp',
url:'http://YOUR-BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20',
success:function(data){
time.init(bloggerTimeline(data))
}
});
}
</script>
<style>
#timeline{
display:none;
height:auto;
position:relative;
border:3px solid #eee;
box-shadow: 0 0 10px rgba(0,0,0,.6);
border-radius:15px;
margin: 0 auto;
margin-bottom:20px;
}
#timeline a{
background-color:transparent;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
.boton{
display:inline-block;
cursor: pointer;
color:#515151;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
text-decoration:none;
font-weight:600;
border:1px solid #CCC;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#F9F9F9;
-webkit-box-shadow:0 1px rgba(255,255,255,.2) inset;
-moz-box-shadow:0 1px rgba(255,255,255,.2) inset;
box-shadow:0 1px rgba(255,255,255,.2) inset;
padding:3px 10px;
}
.boton:hover{
background:#e3e3e3;
color:#515151;
}
</style>
<div id="timeline"></div>
<p class="grupo-botones" style="text-align:center">
<span onclick="loadTimeline()" class="boton">Open Timeline</span>
<span onclick="document.getElementById('timeline').style.display='none'" class="boton">Close</span>
</p>

Jangan lupa ganti YOUR-BLOG

http://jsbin.com/erolol

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

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

<div id='outnav'>
<div class='contain'>

<ul>
<li>
<a href='http://www.delicious.com/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYvaw6AFKDWNExy9B-YfHtUia4t0uEU43oEpndg3839OzvXZN2HO4fsm4UheSJ7LHW_Jlj5EOeiIwatcu32KsVfUTMGy-MwtJLzU9cwoyiObcArk4uDpp4qtJYQBwS50BWgyTlO1COAjU/s1600/Delicious.png' title='Follow us at Delicious'/></a>
</li>
<li>
<a href='http://digg.com/raezen' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zv7oUd57b4ZpSs-_HrcemO1w1mAqg1jG9XSjp1_bilvI3ixBzKVEGKiuoE2n2HPFTxcwwVj7xk43lo3s2jQTr-QLd35yBAQu5C8oyK3-exl2-juXMvp1KhOSWLSAXpzlhg-GYmTmLzU/s1600/Digg.png' title='Follow us at Digg'/></a>
</li>
<li>
<a href='http://www.facebook.com/pages/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieWGm3NQMRu6ovBGoKflB9DVkHU1H-hzh5gnJclAW9PavuIzbUo2QxjQlrGxxrVVvlfC4YLjgSqTUI3yD0Zf95yWH49zyXmulP0Z-pJfc2d3MIGy0-Lh_Mz0LWUsg7QCGyg-nWJsNC8Vo/s1600/Facebook.png' title='Follow us at Facebook'/></a>
</li>
<li>
<a href='http://www.stumbleupon.com/stumbler/YOUR-ACCOUNT/' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi282T-5QgHTcq5ZD5OFBP4Rh925St9FjFZ-70s1BF0-Twb42xEKbb-f1iVzvxpxfgBFS5yzHiKMlasGV_8IXkkkz_yqfODYk5bHIJgHd-ca_TO5q_mbYb8-d9jRKtyNCY8g0n3qKv3E_Y/s1600/StumbleUpon.png' title='Follow us at StumbleUpon'/></a>
</li>
<li>
<a href='http://twitter.com/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTluKVgV7bhZPomVFBGYH1R_pnAZt6W82flE3emhZ8zmbn9p_FUmT5FoCmXOSJCyEukuQVxjlK5722_3-Z9_lvu4xaXCAeZekXySIh66BrQ5JT7CnJ1mdMlbGdMGfo3vRS28fqQWfq-4/s1600/Twitter.png' title='Follow us at Twitter'/></a>
</li>
</ul>

</div>
</div>

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/

Lastest Hack Threaded Commenting System for Blogger

Artikel hack bermanfaat berikut merupakan kelanjutan dari threaded comments ii for blogspot dan penggabungan salah satu fitur pasang emoticon di threaded system comments kalau secara keseluruhan bisa dilihat disini threaded comment :D Satu dayung dua pulau terlampaui ;)
Master @tiennguyentweet owner bloggeritems telah berbaik hati membuatkan snippet hack fenomenal tahun ini www.bloggeritems.com/2012/04/vinaluv-multi-level-threaded-commenting.html <- sudah tidak ada addressnya!!! dan diberi nama VinaLuv. Manis sekali nama kreasinya :x :"> cinta vina :p
Berbeda dengan versi sebelumnya, versi sekarang lebih edan eling bin top markotop :-bd Dasar master Tien Nguyen membuat new threaded commenting system, dikarenakan sistem threaded comment blogger yg kurang perfecto :D Konon blogger memakai proses pemanggilan full FEED untuk menampilkan konten komentar. Kinerja blog jadi melambat! Memiliki dua tingkatan reply (only 2 levels of depth)

Lantas keunggulan apa yg dimiliki VinaLuv multi level threaded commenting system dibandingkan kepunyaan blogger!!! Berikut beberapa feature Vinaluv's:

• Fast speed when load.
Tidak memanggil (load) full feed.
• Better SEO.
Mengatur ulang komentar dari HTML asal. Tidak memanggil komentar dengan script dari fullfeed.
• Mult-level of depth.
Sobat dapat mengatur berapa tingkat komentar yang diinginkan.
• Embedded comment form.
Pemanggilan kotak komentar reply tidak berbentuk popup, melainkan seperti bawaan dari blogger. Selonjor langsung di tempat.
• Highlight admin comments.
Sudah dipasangkan kotak komentar author berbeda dengan komentar pengunjung.
• Support emoticons.
Emoticons sudah dipasang juga :d
• Auto replace some link.
URL YouTube dan Image akan lansung tampil berupa ifram video dan gambar langsung di kotak komentar. Like it adding more formats to the comments area!
• Professional Layout Design.

Enak banget deh pokoknya versi sekarang mah. Caranya juga cetek sekali, kalian tinggal masukin URL blog kalian pada kotak yg tersedia ;)

Get codeView demo

Tidak usah berbuat apa-apa lagi! Setelah script terambil, sobat lakukan Expand Widget Templates
Dua langkah selanjutnya harap diperhatikan...

Temukan kode berikut<b:include data='post' name='threaded_comments'/>Sobat mungkin akan menemukan lebih dari 1 biji. Tidak masalah, don't worry, gantikan semua dengan ini<b:include data='post' name='comments'/>Sudah tergantikan semua, kemudian cari kode <b:includable id='comments' var='post'>Scroll ke bawah cari sampai menemukan taging penutupnya </b:includable>

Delete semua isi yg ada di sana. Gantikan dengan script/kode yg Koben suruh ambil di web si empunya proyek ;;) Visualisasinya begini

<b:includable id='comments' var='post'>

<style type="text/css">
#comments h4 {
font-family: Arial, Helvetica, Garuda, sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 20px;
color: #666;
text-shadow: 0 0 1px #CCC;
display: block;
width: 100%;
border-bottom: 1px dotted #CCC;
padding: 20px 0 5px 0;
margin: 0;
}
. . .    . . .    . . .

</style>
<div class='comments' id='comments'>
<a name='comments'/>

. . .    . . .    . . .
. . .    . . .    . . .
. . .    . . .    . . .

<script type='text/javascript'>
<b:if cond='data: post.numComments != 0'>
var Items = <data: post.commentJso/>;
var Msgs = <data: post.commentMsgs/>;
var Config = <data: post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[

. . .    . . .    . . .
. . .    . . .    . . .
. . .    . . .    . . .

//]]>
</script>

</b:includable>

SAVE.
Sobat dapat lakukan perubahan lambang emoticon pada sesi //Config emoticons declare Kalau CSS, ya sudah pasti di sesi <style type="text/css">
Saya telah pasang hack komentar Vinaluv ini di BEN Tools. Tips dari Koben, hilangkan semua kode CSS komentar yg ada pada template kalian. Toh sudah ada yg baru. OKAY!!! Kesemuanya itu didalam perintah include. Jadi pas dicari, eh kemana nih kok gak ada :p Ya harus centang template dulu :d Good luck :)
Happy threaded \m/