Kamis, 30 September 2010

Blog Walking

Baca ini sudah belom sob Script! Jika sudah bagaimana bagus enggak :-/ Karena trik berikut hasil melihat-lihat dari satu web ke web yang lain ;)) ;) maka akan Beben kasih lagi mengenai jQuery Plug-in dari web maknyus WebExpedition18. Coba sobat perhatikan dan tuju pada tag jQuery!!! maka akan terpampang artikel² gaya punya. Coba sobat melongok pada halaman ini langsung WebExpedition18-Tag. List dari artikel jQuery plug-in yg mungkin sobat cari-cari :D Mau membuat pure CSS fish eye menu jampmark. Jika kurang dengan artikel mengenai jQuery plug-in sobat silahkan satroni Roshan Bhattarai's Blog :-? Dasar-dasar blog dari sobat satu kita ini mungkin bisa menjadi tujuan selanjutnya dalam mencari tutorial dasar dalam menghiasi blog sobat Blog Know How.

Blogussion blog tentang blogging yang menyediakan tips yang beredar untuk menjadi unggul dalam berbagai topik. Blog yg didirikan oleh dua orang pemuda ini merupakan salah satu panutan dalam mencari inspirasi ;) Masih kurang juga...deuh ini mah yah Bloggerz Bible tuh atuh ah :)) Happy Blog Walking BW \m/
Sudah yah ;)) :-h

Diposting oleh di Tidak ada komentar:
Label: ,

Rabu, 29 September 2010

Quovolver - jQuery plugin for Revolving Quotes

Blockquote, atau catatan yang bisa ditampilkan secara indah dan gaya :D apabila kita telah memberikan sentuhan² keindahan CSS didalam template blog kita :P Ternyata dengan sentuhan Plug-in jQuery, blockquote ini dapat ditampilkan secara slide (bergantian) dengan menuliskan beberapa syntax blockquote :-? Dengan begitu kita akan memiliki pesan dalam bentuk blockquote jika kita tanam dalam Add a Gadget akan bisa rubah-rubah gitooo... MANTAP!!! GAYA!!! MODERN!!! ayeee \m/ b-) Pada blog ini blockquotenya seperti ini sob ;)) :">
Aku sedang ingin bercinta, karena!!! Karena ada kamu disiniii... Aku ingin (nabok)Dewa 19
Ekstrak file yg sudah di download dan cari jquery.quovolver.js Hostingkan terlebih dahulu script itu di Google Code ;) Jika sudah letakan dibawah jQuery inti atau dibawah kode <head><script type="text/javascript" src="jquery.quovolver.js"></script>Jika sudah letakan script plugin berikut di atas/sebelum kode </body>
<script type="text/javascript">
$(document).ready(function() {
$('blockquote').quovolver();
});
</script>
Kalau sobat sudah ada kode² CSS blockquote didalam template sobat, maka tambahkanlah kode² CSS yg belum ada jadi sbb:
blockquote p {
margin-bottom: 10px;
font-style: italic;
}
blockquote cite {
font-style: normal;
display: block;
text-align: right;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
}
blockquote {
font-family: Georgia, Times, serif;
width: 300px; /* required */
margin: 0 auto;
}
Untuk pemakaiannya (kode HTML) bisa dalam postingan atau juga Add a Gadget ;))
<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #1)</cite>
</blockquote>
<blockquote>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #2)</cite>
</blockquote>
<blockquote>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #3)</cite>
</blockquote>
<blockquote>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<cite>&ndash; Quote Author (Quote #4)</cite>
</blockquote>
<blockquote>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<cite>&ndash; Quote Author (Quote #5)</cite>
</blockquote>
<blockquote>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<cite>&ndash; Quote Author (Quote #6)</cite>
</blockquote>

Quote Rotator

Setali tiga uang, ini trik lainnya guna menampilkan blockquote dengan jQuery tapi dengan metode pemanggian unordered list.
Kode CSS
#testimonials {
width: 100%;
height: 100px;
list-style-type: none;
margin:0;
padding:0
}
#testimonials .slide { }
blockquote {
font-size: 15px;
font-family: Georgia, "Times New Roman", Times, serif;color: #333;
font-style: italic
}
jQuery Script
<script type='text/javascript'>
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(2000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(3000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(3000);
}
});
},3000);
});
</script>
Kode HTML
<ul id="testimonials">
<li class="slide">
<blockquote>"Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio."</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te.</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem.</blockquote>
</li>
</ul>
demo
Wassalam :)
Diposting oleh di Tidak ada komentar:
Label: ,

Javascript and jQuery Plug-in

Pasang mata dan telinga, siapkan stamina dan kreatifitas sobat untuk membaca postingan Beben si bloglang ganteng kalem tea mengenai jQuery plug-in, Javascript, dan artikel gaya lainnya \m/ Kali ini akan menitikberatkan pada jQuery plug-in sob ;) Jujur saja kalau mau memosting mengenai tema tersebut tidak akan ada habisnya Beben bisa bahas :)) Makanya kali ini akan membahas beberapa trik dan tips beserta webnya sekalian :P (jarang-jarang dapet web usefully nih) Sobat dalam memakai trik ini harus sudah punya script jQuery yah. Kalau belom punya mah tidak akan berhasil ;)) Selalu update jika sudah memiliki, kan sudah ada sama si embah google disediain :D

jQuery inti

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
Beberapa trick script jQuery plug-in yg Beben comot dari web The Electric ToolBox. Sebelum memulai harap diperhatikan:
  1. Setiap script plug-in dapat diletakan dibawah bawaan script jQuery inti, atau bisa juga diatas/sebelum kode </body>
  2. Setiap kode HTML diletakan didalam tag <body>...</body> atau bisa juga Add a Gadget ► HTML/Javascript
  3. Setiap kode CSS (internal) letakan sebelum kode ]]></b:skin>
Aturan diatas hanya berlaku bagi blog berbasis blogspot! Karena openingnya panjang maka klik dulu read more guna mengetahui trik²nya yak sob :)) Cek gi dot...

Detecting the browser engine and version with jQueryDetecting the browser engine and version with jQuery

Scriptnya:
<script type='text/javascript'>
$.each($.browser, function(key, val) {
document.write(key + " : " + val + "<br />");
});
</script>Ini akan terlihat seperti:
mozilla : true
version : 1.9.2

Target links to _top with jQueryTarget links to _top with jQuery

Capek dengan membuat link open new windows!!! Tanpa embel² atribut new windows sobat dapat membuat setiap links yg ada terbuka di windows baru dg jQuery plug-in ini.
<script type='text/javascript'>
$(document).ready(function() {
if(top.location != location) {
$('a').each(function() {
if(!this.target) {
this.target = '_blank';
}
});
$('form').each(function() {
if(!this.target) {
this.target = '_blank';
}
});
}
});
</script>

Change the cursor with JavascriptChange the cursor with Javascript

Mau mengganti cursor dengan menggunakan javascript via Add a Gadget ► HTML/Javascript
<script language="Javascript">
function example_change_cursor() {
document.body.style.cursor = document.getElementById('example-cursor').options[document.getElementById('example-cursor').selectedIndex].value;
}
function example_restore_cursor() {
document.body.style.cursor = 'default';
}
</script>
<select id="example-cursor">
<option>default</option>
<option>crosshair</option>
<option>e-resize</option>
<option>help</option>
<option>move</option>
<option>n-resize</option>
<option>ne-resize</option>
<option>nw-resize</option>
<option>pointer</option>
<option>progress</option>
<option>s-resize</option>
<option>se-resize</option>
<option>sw-resize</option>
<option>text</option>
<option>w-resize</option>
<option>wait</option>
</select>
<input type="button" onclick="example_change_cursor()" value="Change Cursor" />
<input type="button" onclick="example_restore_cursor()" value="Restore Default" />
Its look like

This is an example of text that will be shown and hidden.

This is an example of text that will be shown and hidden.

Karena banyak silahkan sobat satroni di halaman berikut ;) Electric Tool Box. Be a creative and see you tomorrow with other trick still on www.electrictoolbox.com
Diposting oleh di Tidak ada komentar:
Label:

Selasa, 28 September 2010

Building Your Own Lightbox with Simple Code

Masih ingat dengan postingan si bloglang ganteng kalem tea sebelumnya mengenai What Are You Doing :-/ dan trik Dropcaps on Comments for Blogger!!! Artikel kali ini masih disekitaran web yg bertemakan "Front-end developer, user experience designer & Jedi" dengan nama webnya yaitu http://kilianvalkhof.com ;)) :D Setelah mengubek-ngubek jatuhlah artikel seleksi untuk dibagikan kepada sobat blogger. Trik kali ini akan membicarakan mengenai lightbox. Lightbox tidak lebih dari trick menyembunyikan sesuatu bisa berupa gambar, frame, flash dsb. Kebanyakan mah sih untuk gambar :D Jika sobat mencari lightbox yg pretty dan gaya mungkin Beben bisa kasih pilihan No Margin For Errors.

Di web tersebut terdapat 3 kategori edan punya mengenai pretty loader, pretty sociable dan pretty photo ;) Selama BW (Blog Walking) dan membaca mengenai trik lightbox ini, ternyata membutuhkan kode² dan script² lumayan banyak sob :-< class="fullpost">

Kode CSS

Selalu letakan diatas/sebelum kode ]]></b:skin> kode² CSS itu yah :)
.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
cursor:pointer;
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
}
Karena Plug-in, sobat harus sudah memiliki jQuery script minimal versi jQuery 1.2.6 Kalau sudah punya versi terbaru jangan dipakai lagi yah :D

Script

$(document).ready(function(){
// add a click event
$(".lightbox").click(function(){
overlayLink = $(this).attr("href");
window.startOverlay(overlayLink);
return false;
});
});

function startOverlay(overlayLink) {
//add the elements to the dom
$("body")
.append('
')
.css({"overflow-y":"hidden"});

//animate the semitransparant layer
$(".overlay").animate({"opacity":"0.6"}, 400, "linear");

//add the lightbox image to the DOM
$(".container").html('');

//position it correctly after downloading
$(".container img").load(function() {
var imgWidth = $(".container img").width();
var imgHeight = $(".container img").height();
$(".container")
.css({
"top": "50%",
"left": "50%",
"width": imgWidth,
"height": imgHeight,
"margin-top": -(imgHeight/2),
"margin-left":-(imgWidth/2) //to position it in the middle

})
.animate({"opacity":"1"}, 400, "linear");

// you need to initiate the removeoverlay function here, otherwise it will not execute.
window.removeOverlay();
});
}
function removeOverlay() {
// allow users to be able to close the lightbox
$(".overlay").click(function(){
$(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
$(".container, .overlay").remove();
});
});
}
Letakan script plug-in itu dibawah tepat jQuery versi yg dimiliki sobat kalau enggak coba letakan diatas/sebelum kode tag </body> Jika akan memosting dan akan dimasukin trik lightbox ini maka dalam penulisan syntax link tinggal menambahkan kode class="lightbox"
<a href="http://LINK-GAMBAR-ATAU-BLABLABLA.GIF" class="lightbox">Link Lightbox!</a>Source by: http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/
Good Luck and see you sob :)

Diposting oleh di Tidak ada komentar:
Label: , , ,

Looks Around

Setelah lama menggunakan jasa blogger, ternyata pihak blogspot terus membenahi feature-feature bagi para pemakai (user/client) b-) Dari waktu ke waktu selalu saja ada yg dibenahi. Terkadang kita melupakan apa yg ada disekitar kita. Cobalah sejenak memperhatikan pada blog sobat untuk lebih selektif lagi dalam segala hal dan perihalnya :-/ Perhatikan jika sobat pertama kali login pada account blog sobat! Jika ada yg update pada jasa layanan blogspot ini, maka selalu ada pengumuman dalam bentuk pemberitahuan secara langsung maupun tertulis.

Jika ada feature masih dalam tahap draft selalu muncul di Blogger in Draft yg akan memberitahukan apa-apa yg akan muncul nantinya resmi di editor blog kita :) Jika ingin mengetahui status blogger sobat dapat satroni Blogger Status. Kalau mau tauk soal buzz menggebuzz ada pada Blogger Buzz. Pesan Beben si bloglang ganteng kalem tea...

Janganlah melihat web/blog tanpa memperhatikan sekitarnya, karena dasar pada setiap links yg tercantum dan terkait didalamnya akan mungkin berguna bagi sobat² dalam mencari informasi dan inspirasi. Tinggalkan bau and jejak kalian dengan cara yg bijak.
Kreatifitas sobat dituntut dalam menyiasati persaingan yg ada di dunia blog ini. Status gadget yg sudah tersedia dan sistem komentar mendukung del, spam, publish or else. Masih perlukah gadget yg lainnya kalau ada di blogger sendiri :-? (aku jg padahal mah pake yg lain) =)) Demikian ceramah yg dapat Beben sampaikan dalam sidang ini. Akhir kata...

Happy blogging and WassaLamu'aLaikum Wr Wb

Diposting oleh di Tidak ada komentar:
Label: , ,

Minggu, 26 September 2010

All About Instants Facility For You

Dengan berkembang sedemikian pesatnya dunia web pada umumnya dan blog pada khususnya ternyata para web-web developer dan juga web-web pencipta aplikasi ingin memberikan kepada para pengguna (user) untuk lebih dapat mengenal lebih dekat hasil dari kreasi mereka dengan menciptakan tools online! Bloglang bilang saja gitu yak :D abisnya enggak tauk tepat apa istilah untuk layanan ini :P Jadi apabila kita mau mengedit-edit, HTML, CSS, script dan lainnya bisa langsung terlihat hasilnya sob b-) :-bd Yang sudah tidak asing lagi mungkin datang dari web W3Schools.

Bagaimana dengan yang lainnya ;)) :D :-" Jangan kemana-mana, ambil kopi kalian dan lanjutkan membacanya karena akan menarik sob apa yang akan Beben si bloglang ganteng kalem tea ini tawarkan \m/
  1. W3Schools List Samples
    2. Kumpulan dari contoh-contoh yg bisa sobat langsung lihat hasilnya dari web tersebut.
  2. MBT HTML Editor
    3. Salah satu HTML Editor buatan sobat kita, pemilik dari weblog www.mybloggertricks.com.
  3. Google AJAX Search API
    4. Generate embed buat map (peta) dari paman kita google.
  4. Google Code Playground
    5. Ingin bermain dengan kode dan script dengan Pick an API, bebas mau buat apa saja disana ada.
  5. Gadgets API
    6. Jika bakat kalian dalam membuat widget via developer tools google.
  6. Google AJAX Feed API
    7. Ingin memiliki berita dari web/blog via RSS Feed XML dan tampilannya seperti di paman google???
  7. Google AJAX Search API
    8. Mau embed video via youtube ada di web/blog secara instant.
  8. HTML5 Playground
    9. Isu HTML5 tidak dilupakan sampai bisa kita juga menikmati secara online dan instant :)
Beben bisa ginih karena melaksanakan postingan ini sob, ide-ide dan strategi dari sini nih What Are You Doing. Bagaimana!!! semoga bermanfaat dan ada faedahnya :)
Diposting oleh di Tidak ada komentar:
Label: , ,

Jumat, 24 September 2010

Dropcaps on Comments for Blogger

Berawal dari melihat-lihat, ya ngebloglang gitooo lihat tampilan web para master² ;)) Kalau ada yg unik, gaya, lain dan nyentrik pasti Beben si bloglang ganteng kalem tea ini bakal anteng tuh satroni web/blog :-" Sobat pasti sudah pada tahu dong dengan istilah dropcaps! Huruf besar pada awal paragraf itu loh yg kayak diblog aku ini :"> Bagaimana kalau trik tersebut kita pakai juga pada awal paragraf tapi di kolom komentar!!! Berawal dari BW gak sangka dapet yg beginian ;)) Okelah kalau yg belom tau bagaimana cara bikin dan menerapkannya dipostingan blog sobat. Secara singkat dan padat saja diulas sebelum masuk pada sesi inti dari artikel ini b-)

Kode CSS

Letakan seperti biasa kode CSS berikut sebelum kode ]]></b:skin> Kalau mau letakan didekat kode .post atau .post-body tergantung pada ID bawaan template sobat masing² aja deh :P bebas...:D
.dropcaps {
color:#999;
float: left;
font-size:80px;
line-height:47px;
padding-top:10px;
padding-right:5px;
font-family: Times, serif, Georgia;
}
Default kode seperti itu, tinggal diatur saja size (ukuran) sesuai dengan kebutuhan ;)) Contoh penulisan ketika waktu memostingnya nih (perhatikan)...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr!
<span class="dropcaps">L</span>orem ipsum dolor sit amet, consetetur sadipscing elitr
Tinggal kasih kode yg berwarna biru itu dalam memsotingnya.
Bagaimana kita menerapkan ini pada kotak/kolom komentar :-?

Kode CSS

Seperti biasa kan sudah tauk diletakan dimana kode ini :D
.comment-content p:first-child:first-letter {
font:3.1em/1em Georgia, Gentium, "Times New Roman", Times, serif;
float: left;
padding:5px 1px 0 0;
color:#f0c;
}
Centang pada bagian:

Tekan pada keyboard secara bersamaan CTRL + F lalu ketikan pada kotak yg tersedia, cari kode berikut
<div id='div-comment'>
Lalu scroll kebawah dikit, dan cari kode seperti berikut ini
<b:if cond='data:comment.author == data:post.author'>
Kalau beda rumusnya pokoknya cari yg mirip seperti itulah sob :D Setelah itu letakan kode berikut ini tepat diatas kode tersebut...
<div class="comment-content">
Cari tag penutup paling akhir (jika ada 2) </b:if> dan letakan tag penutup ini </div> Masih disekitaran kode² disana cari kode
<data:comment.body/>
dan tambahkan menjadi sedemikian rupa
<p><data:comment.body/></p>
SAVE.
Kalau berhasil tanpa embel² penulisan seperti dropcaps pada postingan, ini akan secara otomatis huruf awal dari paragraf akan menjadi besar :-"
Source by http://kilianvalkhof.com
Good luck and happy blogging \m/
Diposting oleh di Tidak ada komentar:
Label: ,

What Are You Doing!!!

Apa yang dilakukan sobat jika mencari sesuatu didunia maya ini :-/ Yang pastinya akan melakukan searching dengan keyword yg bersangkutan apa yg sobat cari tentunya. Bagaimana jika sobat menemukan web/blog keren dan gaya punya :-? Kalau Beben si bloglang ganteng kalem ini akan melakukan tindakan pertama dengan cara menyimpan link web/blog tersebut sob :D Sebenarnya Beben mau mosting apa yg sebaiknya jika dilakukan oleh kita kalau sudah mengunjungi satu blog/web. Disini Beben mengambil contoh tema tentang tutorial.
  1. Lihatlah (sekedarnya) secara seksama tampilan web/blog yg dikunjungi.
  2. Lihatlah pada label/tag web/blog tersebut membicarakan tentang apa saja.
  3. Jangan minder jika blog/web tersebut berbeda bahasa dengan kita.
  4. Cobalah baca satu atau alakadarnya artikel yg ada di web/blog tersebut, tau-tau saja ada yg dicari :)
  5. Selalu simpan link tanpa disuruh link exchange walau di notepad/falshdisc.
  6. Dan lain-lain...
Beben selama ngebglolang kalau sobat perhatikan source artikelnya datang dari mana saja, mungkin akan ngeuh dan terlihat. Tidak terbatas pada blog atau web dari lokal saja sob :D tapi juga interlokal :)) Segitu banyak web/blog bagus, gaya, keren, unik, hebat, ... mana mungkin kita bisa datangin kalau tidak cerdik-cerdik kitanya kan :-" Sebagai contoh web berikut yg beben dapatkan secara tidak sengaja nih ;) ;))

Pada web ini tidak ada sangkut pautnya dengan artikel blogspot (khususnya) Tapi setelah melihat pada tag/label postingannya pada artikel secara keseluruhan, melihat ada label tentang tutorial. Beben coba buka dan lihat isi label postingan tersebut sob!!! Disana aku menemukan mengenai artikel jQuery plug-in, CSS3, animated, dan blablabla :-bd Coba deh tengok kemari www.jankoatwarpspeed.com. Bagus dan gaya, maka aku save deh tuh link di parimbon akuh :D So...bagaimana dengan strategi sobat-sobat dalam menyikapi berkunjung???
Share dong ah ;))

Diposting oleh di Tidak ada komentar:
Label: , , ,
Lokasi: Bandung, Bandung, West Java, Indonesia

Rabu, 22 September 2010

Scrollable Content

Sobat pernah melihat konten yang melayang-layang dan ketika melakukan scroll, konten tersebut akan terus berada pada layar monitor dan tampilan blog/web sobat!!! Pasti tidak paham apa yg bloglang ganteng kalem maksudkan yah ;)) :D Tenang saja kok sob, trik ini merupakan trick Add a Gadget ► HTML/Javascript dalam penerapannya :-" Jadi kalau mau lihat demonya langsung saja masukin nih bumbu²nya ke HTML/Javascript :D Kalau dalam screenshot praktek Beben kayak gini sob...

Yang hijau itu tuh nanti akan scrollable :P Masukan kode dan script pada HTML/Javascript.

Code and Script

<div id="floatdiv" style="position:absolute;
width:100px;
height:280px;
left:10px;
top:0px;
padding:0;
background:transparent;
border:1px solid #555;">

<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name1</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name2</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name3</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name4</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name5</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name6</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name7</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name8</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name9</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name10</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name11</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name12</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name13</a>
</div>


<script type="text/javascript">
<!--
var floatingMenuId='floatdiv';
var floatingMenu=
{
targetX:-115,
targetY:350,
hasInner:typeof(window.innerWidth)=='number',
hasElement:typeof(document.documentElement)=='object'
&&typeof(document.documentElement.clientWidth)=='number',
menu:
document.getElementById
?document.getElementById(floatingMenuId)
:document.all
?document.all[floatingMenuId]
:document.layers[floatingMenuId]
};
floatingMenu.move=function()
{
floatingMenu.menu.style.left=floatingMenu.nextX+'px';
floatingMenu.menu.style.top=floatingMenu.nextY+'px';
}
floatingMenu.move2=function()
{
floatingMenu.menu.style.left=floatingMenu.nextX+'px';
floatingMenu.menu.style.top=floatingMenu.nextY-190+'px';
}
floatingMenu.computeShifts=function()
{
var de=document.documentElement;
floatingMenu.shiftX=
floatingMenu.hasInner
?pageXOffset
:floatingMenu.hasElement
?de.scrollLeft
:document.body.scrollLeft;
if(floatingMenu.targetX<0)
{
floatingMenu.shiftX+=
floatingMenu.hasElement
?de.clientWidth
:document.body.clientWidth;
}
floatingMenu.shiftY=
floatingMenu.hasInner
?pageYOffset
:floatingMenu.hasElement
?de.scrollTop
:document.body.scrollTop;
if(floatingMenu.targetY<0)
{
if(floatingMenu.hasElement&&floatingMenu.hasInner)
{
floatingMenu.shiftY+=
de.clientHeight>window.innerHeight
?window.innerHeight
:de.clientHeight
}
else
{
floatingMenu.shiftY+=
floatingMenu.hasElement
?de.clientHeight
:document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX=function()
{
if(floatingMenu.targetX!='center')
return floatingMenu.shiftX+floatingMenu.targetX;
var width=parseInt(floatingMenu.menu.offsetWidth);
var cornerX=
floatingMenu.hasElement
?(floatingMenu.hasInner
?pageXOffset
:document.documentElement.scrollLeft)+
(document.documentElement.clientWidth-width)/2
:document.body.scrollLeft+
(document.body.clientWidth-width)/2;
return cornerX;
};
floatingMenu.calculateCornerY=function()
{
if(floatingMenu.targetY!='center')
return floatingMenu.shiftY+floatingMenu.targetY;
var height=parseInt(floatingMenu.menu.offsetHeight);
var clientHeight=
floatingMenu.hasElement&&floatingMenu.hasInner
&&document.documentElement.clientHeight
>window.innerHeight
?window.innerHeight
:document.documentElement.clientHeight
var cornerY=
floatingMenu.hasElement
?(floatingMenu.hasInner
?pageYOffset
:document.documentElement.scrollTop)+
(clientHeight-height)/2
:document.body.scrollTop+
(document.body.clientHeight-height)/2;
return cornerY;
};
floatingMenu.doFloat=function()
{
if(!floatingMenu.menu)
{
menu=document.getElementById
?document.getElementById(floatingMenuId)
:document.all
?document.all[floatingMenuId]
:document.layers[floatingMenuId];
initSecondary();
}
var stepX,stepY;
floatingMenu.computeShifts();
var cornerX=floatingMenu.calculateCornerX();
var stepX=(cornerX-floatingMenu.nextX)*.07;
if(Math.abs(stepX)<.5)
{
stepX=cornerX-floatingMenu.nextX;
}
var cornerY=floatingMenu.calculateCornerY();
var stepY=(cornerY-floatingMenu.nextY)*.07;
if(Math.abs(stepY)<.5)
{
stepY=cornerY-floatingMenu.nextY;
}
if(Math.abs(stepX)>0||
Math.abs(stepY)>0)
{
floatingMenu.nextX+=stepX;
floatingMenu.nextY+=stepY;
floatingMenu.move2();
}
setTimeout('floatingMenu.doFloat()',20);
};
floatingMenu.addEvent=function(element,listener,handler)
{
if(typeof element[listener]!='function'||
typeof element[listener+'_num']=='undefined')
{
element[listener+'_num']=0;
if(typeof element[listener]=='function')
{
element[listener+0]=element[listener];
element[listener+'_num']++;
}
element[listener]=function(e)
{
var r=true;
e=(e)?e:window.event;
for(var i=element[listener+'_num']-1;i>=0;i--)
{
if(element[listener+i](e)==false)
r=false;
}
return r;
}
}
for(var i=0;i<element[listener+'_num'];i++)
if(element[listener+i]==handler)
return;
element[listener+element[listener+'_num']]=handler;
element[listener+'_num']++;
};
floatingMenu.init=function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
floatingMenu.initSecondary=function()
{
floatingMenu.computeShifts();
floatingMenu.nextX=floatingMenu.calculateCornerX();
floatingMenu.nextY=floatingMenu.calculateCornerY();
floatingMenu.move();
}
if(document.layers)
floatingMenu.addEvent(window,'onload',floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window,'onload',
floatingMenu.initSecondary);
}
//-->
</script>
Untuk menyelaraskan jarak pinggir terhadap sisi monitor ke konten harap diperhatikan tulisan script yg diberi warna merah dan biru. Selaraskan sampai benar2 terasa pas ya ;)) :"> ;)
Bye bye :-h
Diposting oleh di Tidak ada komentar:
Label: ,

Selasa, 21 September 2010

New Recent Comments Widget 2.0 (Blogspot)

Recent Comments ini mungkin bisa dibilang yang paling ekstrim buat blogger nih \m/ Bagaimana tidak!!! kita bisa melihat komentar yang awal-awal gitoh :)) Selain itu feature yg ditawarkan cukup banyak juga sob. Blogger memang telah memberikan widget satu ini kok. Dashboard ► Design ► Add a Gadget ► Lihat kolom sebelah kiri dan klik ► Featured ► scroll kebawah, cari Recent Comments. Itu cara tercepat dan termudah ;)) Jika sobat mau melihat demonya silahkan kunjungi blog berikut http://sri-ramana-maharshi.blogspot.com/ lalu lihat pada sebelah kanan blog. Global Feature of Widget
  1. Widget ini dapat disesuaikan (customizable) dan mendukung internasionalisasi (terdapat 2 versi pemanggilan inggris dan jerman)
  2. Widget ini sebuah pencarian cepat pada semua posting dari blog dan menyimpan judul blog. Alasannya adalah, dengan komentar blogger default tidak mengandung judul pos yang sesungguhnya, tapi seperti judul pseudo, yaitu nama file dari file html pos.
  3. Widget ini mencari semua posting yang tersedia dari blog bahkan dengan ratusan dan ribuan posting. Rupanya blogger memiliki batas atas posting dalam satu feed di 500. Oleh karena itu berulang kali script membuat panggilan ke feed di blog dengan lebih dari 500 posting. Pencarian ini hanya terjadi sekali pada waktu buka dari script. Telah diuji pada sebuah blog dengan lebih dari 1300 posting dan berjalan baik dan cepat...
  4. Tampilan dan nuansa dari widget quite slick and Web2.0 ish.
Itulah beberapa feature dari pembuatnya sob disamping masih ada lagi menurut bloglang mah :D

Download

  • Download script dan kodenya Download
  • Ekstrak/UnZip file tersebut.
  • Buka rcc.html file dalam editor teks seperti notepad windows. [Jangan gunakan format teks aplikasi seperti Word atau OpenOffice, aplikasi ini dapat merusak kode]

Installation

  • Cari dan ganti YOURBLOGNAME dengan nama blog sobat. Cari pada bagian // user defined variables
  • Script ini multibahasa dan menyesuaikan diri dengan bahasa: Jerman, Inggris (default) atau bahkan pengguna yang ditetapkan oleh kita! Cari pada // user defined language="user"
  • Terdapat kode CSS guna menyesuaikan warna latar, link, atau huruf dll.
  • Salin semua kode dan script Add a Gadget pilih HTML/Javascript
  • Save.
Sobat sudah memiliki widget recent comments extreme \m/ :D Beben si bloglang ganteng kalem telah buat juga dan hasilnya akan tampak seperti:
Screenshot | Script & Code
Source by: Review Of Web.
Diposting oleh di Tidak ada komentar:
Label: ,

Border for Image, Flexible Boxes

Artikel gaya untuk CSS3 Border for Image jatuh pada postingan kali ini. Seperti gaya pada blockquote Post Here for Blockquote, serta hover pada image Hover Image for Blogger. Sekarang bagaimana membuat CSS3 Border Images for Beautiful, Flexible Boxes. Dengan kata lain kita akan bermain border (batas, pinggiran) menggunakan sebuah gambar dan gambar nanti akan bisa diisi dengan kata-kata setelah disentuh dengan sedikit ramuan dari kode² CSS3 (fleksibel) Kalau kata² keterangan diatas membingungkan, mari kita langsung cek ke tekape saja :D

Hanya dengan menggunakan salah satu dari gambar beresolusi kurang lebih 75 x 80 tersebut sobat dapat menghasilkan seperti berikut! Result1 and Result2 How Does It Work? :D

LIVE DEMO

Sudah lihat kan bagaimana aksi dari trik ini :-" Bumbu-bumbu yg kita butuhkan disini meliputi gambar yg tentunya sudah harus ada. Jika menginginkan seperti tampak pada LIVE DEMO gambarnya sobat dapat melakukan upload disini dan lalu dihosting Pics.

Kode CSS

.border-image-example {
border-width: 45px;
-webkit-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
-moz-border-image: url(bg-pawprints-lines.jpg) 45 repeat;
border-image: url(bg-pawprints-lines.jpg) 45 repeat;
font-family: Arial, Helvetica, sans-serif;
color: #222;
width: 320px;
margin: 30px 0 30px 20px;
float: left;
}

p {
margin: 0;
padding: 0 0 12px 0;
line-height: 1.4;
}
Tulisan berwarna biru ganti dengan gambar yg disuruh upload tadi.

Kode HTML

Kode ini dipakai dalam penulisan nanti pada postingan sobat.
<div class="border-image-example">
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental.</p>

<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
</div>
Sobat hanya tinggal memakai kode tag yg diberi warna hijau. Jika sobat tidak mau memakai paragraf <p>...</p> sobat tinggal menghapus pada kode CSS yg diberi warna merah. Lihat source pada live demo jika mau kode2 yg lainnya ;) :D

 Original Article 

Good Luck :-bd
Diposting oleh di Tidak ada komentar:
Label: ,

Senin, 20 September 2010

All About CSS

Semakin lama semakin banyak saja nih sob ilmu bagi pengguna web, khususnya blogger seperti kita² ini b-) Bertebaran banyaknya web developer menuntut si bloglang ini untuk mengkoleksi dalam bentuk postingan ;)) Untuk saat ini Beben akan berbagi WWW developer CSS. Koleksi ini meliputi artikel, tools, trik dan tips, etc yg ada hubungannya dengan CSS. Apalagi sekarang lagi booming²nya CSS3 ;)

Web & Article

Mungkin list ini akan diupdate selama Beben masih dikandung hayat :)) Untuk toolsnya siap ah digoyang mang...:X

Tools

Meliputi untuk mengkompres (compressor), merapihkan, membangun CSS yang kita miliki secara online :)Ini juga akan terus diperbaharui loh!!! Jika sobat ingin tauk koleksi Beben dalam mempelajari HTML bisa kunjungin postingan aku HTML in my post dan untuk urusan !ping dapat ditemukan di !ping. Kalau ada keluhan dan resah gelisah melanda kontak-kontak ini bisa sobat gunakan Contact Blogger. Bagi-bagi di kotak komentar yah sob :D kalau ada lagi \m/
Diposting oleh di Tidak ada komentar:
Label: , ,

Minggu, 19 September 2010

Interaction Design & Strategy

Setelah beberapa kali Beben memosting tentang artikel gaya punya mengenai trik dan tips untuk mempercatik blog, ternyata si bloglang ganteng kalem ini menemukan satu web yang benar-benar menulis artikel gaya-gaya punya sob :-bd Mungkin hampir memenuhi apa yg sobat cari untuk bergaya-gaya dengan CSS, Plug-In, Animation, Effect, Buttons, Image Slider, Tools, Javascript, dan lain-lainnya sob #:-S \m/ B-) :-bd Pasti sudah penasaran yah apa nama webnya sobat²ku :"> :D :-" Sudah diberikan dengan penjelasan support browsingan dan live demo juga @-) Disini sobat tinggal pintar-pintar saja menerapkannya di blog. Beben cuma kasih tauk saja web dan tutor design doang :P

ZURB | ZURB Playground

Bagi-bagi dong kalo punya rujukan yg lainnya yah :)

Diposting oleh di Tidak ada komentar:
Label: ,

Jumat, 17 September 2010

CSS3 Hover Image for Blogger

Untuk memperbesar sebuah object (gambar) kita dapat menanamkan trik yang beraneka ragam (Ketikan keyword pada kolom search "ZOOM") Bagaimana jika trik memperbesar gambar ini menggunakan trik Hover. Dengan perkembangan browsingan sekarang yg support terhadap CSS3 memungkinkan kita bisa memperbesar gambar ketika cursor menyorot pada gambar tersebut :D Kabar dari web ternama Dynamic Drive membuat artikel mengenai CSS3 Hover Image Gallery :) Dengan kode² CSS3 ini kita akan berkreasi nih sob ;)

Keren kan sob :">

Kode CSS

Letakkan kode CSS diatas/sebelum kode ]]></b:skin>
.hoverimage img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hoverimage img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
Kode yg berwarna merah itu biasanya sudah ada pada bawaan template sobat masing² jadi kalau mau tidak dipakai jangan ditulis lagi (itu jarak antara image) Sobat juga bisa meletakan kode CSS3 tersebut itu pada tag post-body bagian (tag) image sobat!

Kode HTML

Kode ini dipakai dalam memostingnya sob ;) pada sesi menulis link syntax pada gambar :D
<div class="hoverimage">
<img style="cursor:pointer; cursor:hand;width: 205px; height: 92px;" src="http://4.bp.blogspot.com/_ALuJjudg6Rg/SriMX9T6FtI/AAAAAAAAAp8/JfVamkVFAX4/s320/BlahBlehBoh.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5384207697744369362" />
</div>
Tinggal memakai kode pemanggil yang diberi warna biru itu :)

Save

 Source & Demo 
Diposting oleh di Tidak ada komentar:
Label: ,

Rabu, 15 September 2010

Accordion using Only CSS for Blogger

Banyak jalan menuju roma sob ;) Banyak trik dan teknik guna memberi ruang bagi content blog kita yg semakin buanyak :D Salah satunya dengan trik tab versi jQuery olug-in atau mau lebih ekstreme etc tab :-" Jalan menuju roma sekarang yaitu bagaimana membuat ruang konten bagi blog dengan menggunakan Accordion using only CSS. Banyak sih artikel mengenai cara membuat accordion diblog, dan sampe² dibikin jadi templatenya accordion template for blogger :-bd Kalau tidak simpel, unik, dan gaya mana bloglang Beben si ganteng kalem mau berbagi :D :"> Here's screenshot for accordion using only CSS yg sudah dipraktekan dalam blog :-bd

Kode CSS

Seperti biasa kode CSS selalu letakan diatas/sebelum kode ]]></b:skin>
.accordion {
background: #EAD5A4;
padding: 1em;
width: auto;
margin: 2em auto;
}
.accordion h3 {
margin: 0;
}
.accordion .section {
border-bottom: 1px solid #ccc;
padding: 0 1em;
background: #F9F5D5;
}
.accordion h3 a {
display: block;
font-weight: normal;
padding: 1em 0;
}
.accordion h3 a:hover {
text-decoration: none;
}
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
}
.accordion :target h3 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target h3 + div {
height: 75px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
Untuk warna background silahkan disesuaikan dengan selera masing² disini dan disini ;))

Kode HTML

Letakan dalam Add a gadget ► Javascript/HTML pada halaman Page Elements.
<div class="accordion">
<div id="one" class="section">
<h3><a href="#one">Heading 1</a></h3>
<div><p>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.</p>
</div></div>
<div id="two" class="section">
<h3><a href="#two">Heading 2</a></h3>
<div><p>Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.</p>
</div>
</div>
<div id="three" class="section">
<h3><a href="#three">Heading 3</a></h3>
<div><p>A pesar de estar extraído de ese escrito, el texto usado habitualmente es: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
</div>
</div>
<div id="four" class="section large">
<h3><a href="#four">Heading 4</a></h3>
<div><p>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.</p>
</div>
</div>
<div id="five" class="section">
<h3><a href="#five">Heading 5</a></h3>
<div><p>Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.</p>
</div>
</div>
Ganti tulisan lorem al estar en un prat pret prot itu dengan kontent yang dikehendaki :)

Save

Sobat sudah menambah ruang bagi konten dengan trik accordion using only CSS :)
Original article | Live Demo

Pure CSS3 accordion

Pure CSS3 accordion
Wassalam :)
Diposting oleh di Tidak ada komentar:

Selasa, 14 September 2010

Art of Buttons

Button atau lebih dikenal dengan tombol memang banyak ragam dan gayanya. Dari membuat memakai jasa online free button, sampai kita berkreasi sendiri (photoshop) \m/ Si bloglang Beben ganteng kalem :D seperti biasa mau berbagi bagaimana membuat button/tombol ini pure 100% menggunakan CSS (CSS3) b-) Dengan kreasi dan kreatif kita, sobat akan dapat membuat tombol yg gaya punya di jagat alam blog ini SexyButtons :D

Contoh Button  Contoh Button

Lebih keren dalam screenshot :P

Itu screenshot BonBon Buttons dan Starbursts Buttons b-) Silahkan baca dan download di BonBon Buttons and MatthewJamesTaylor. Happy enjoy with Art of Buttons :P
Bye bye :-h :) 85V9C7B2EVYU
Diposting oleh di Tidak ada komentar:
Label: ,

Senin, 13 September 2010

SELAMAT HARI RAYA 'IDUL FITRI 1431 H

Beben Koben si bloglang ganteng kalem mengucapkan:
MINAL 'AIDIN WAL FAIDZIN MAAFKAN LAHIR DAN BATHIN
SELAMAT 'IDUL FITRI 1431 H


Diposting oleh di Tidak ada komentar:
Label: ,

Collapsed Image with Jquery and CSS for Blogger

Sebagai bloglang ganteng kalem harus selalu odar-ider mencari postingan yg unik, gaya, dan simpel dalam penerapannya ;)) :D Postingan kali ini kembali mengenai jQuery plug-in nih sob ;) Pasti sudah pada tauk deh apa yg Beben maksudkan. Trik satu ini wajib memakai script jQuery dalam pemakaiannya. Jika tidak ada, maka trik ini tidak akan berjalan alias gagal :)) Sekarang trik jQuery plug-in ini jatuh pada bagaimana kita akan membuat "Collapsed Image with Jquery and CSS" Jadi keterangan singkat dan mungkin bisa memperjelas akan trik ini, membuat gambar yg beresolusi besar dengan tampilan mini dan bisa di collapsed (full image) tentunya dg menggunakan jQuery :D

Untuk melakukan trik ini sobat sudah harus punya script
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Kalau sudah punya kita abaikan saja, dan masuk ke tahap selanjutnya. Letakan script jQuery plugin berikut setelah script diatas disebut atau diatas/sebelum tag </body>

Script plug-in

<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{
$(".showhide").hide();
});

//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});

//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','150px');
$(".hidelink").hide();
$(".showlink").show();
});
});
</script>
Untuk kode CSS seperti biasa sob, letakan sebelum kode ]]></b:skin>

Kode CSS

.imagebox
{
display:block;
position:relative;
overflow:hidden;
width:100%;
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#555 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:15px;
left:0;
line-height:15px;
padding-left:5px;
position:absolute;
width:100%;
text-align:center;
}
Sudah beres urusan menanamkan script dan CSS pada template sobat. Sekarang pemakaiannya dalam postingan sobat tinggal melakukan penulisan pada gambar (image) menjadi sbb:
<div class="imagebox" style="max-height:100px;">
<img  style="width:100%" src="http://image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>
Simpan kodenya kalau tidak mau hilang/lupa dengan melakukan...
Settings ► Formatting ► Scroll kebawah tepat pada bagian ► Post Template Save deh kodenya :D Jadi sobat tinggal mengganti/memasukan link gambarnya saja ;)) ;)
Good Luck :)
Diposting oleh di Tidak ada komentar:
Label: ,

Sabtu, 11 September 2010

T H R

Mungkin blog satu ini penyedia tutorial bagi pemula dan pengembang bagi blogger. Artikel mengenai hacks, tips, tutorial, widgets dan templatenya lumayan gaya punya :D Penjelasan dan resource dari blog² pendahulu juga sih postingannya ;)) Salah satu karya templatenya yaitu magnesiumize yahut punya sob :x Ada slide headlines, postingan berupa gambar terpampangnya, dan 4 footer. Kayaknya cocok untuk bagi pecinta :-/ Beben si bloglang ganteng kalem :D
screenshot
Kalau untuk masalah artikel dr blog tersebut, silahkan sobat baca-baca pada menu yg sudah disediakan

Di pojok kiri bawah ada template² lain yg keren dan gaya punya juga loh sob ;)) ;)

Jika pada umumnya slider/slideshow yg sobat lihar ada satu sisi, dan sisi yg lainnya itu penjelasannya!!! Maka sobat harus melihat yang berikut ini, dimana terdapat dualSlider terbungkus rapih dalam 1 script :D b-) dualSlider :-bd

Untuk bonusnya ini Beben kasih link tujuan untuk mencari widget-widget buat blogger:

Tunjangan Hari Raya :)) :-h
Diposting oleh di Tidak ada komentar:
Label: ,

New Stats Gadgets for Blogger

Kabar singkat dari Blogger in Draft yang telah meluncurkan Blogger stats. Sudah ada dan bisa dilihat pada bagian "Stats Tab" (paling kanan dekat View Blog) Setelah diriliskannya status live pada blog ini, ternyata blogspot terus mengembangkannya menjadi "New Stats Gadgets" Mungkin sobat kenal dengan Site Meter? Seperti itulah blog stats ini sob. Gile bener nih makin dimanjakan saja blogger sama si embah ;))

Selain dari yg sudah yaitu "Popular Post" eh ada bonusnya status blog. Karena masih didalam mode draft, jadi jika sobat yg sudah tidak tahan ingin memasang diblognya ya silahkan saja masuk lewat Blogger in Draft. Terima kasih :-h :)
Diposting oleh di Tidak ada komentar:
Label: ,

Jumat, 10 September 2010

Small and Simple Slideshow jQuery

Sobat mungkin sudah tidak asing dengan feature slider/slideshow :-? Yes, yang suka gonta-ganti itu tuh macam gak disuruh-suruh tapi bisa ganti sendiri. Kalau di blog aku ini ada pada home page bertitle Headlines :-" Slider/Slideshow ini banyak macamnya sob, ampe puyeung @-) Coba sekarang sobat ketikan di box search dengan keyword "jQuery slider" bakal kebuka seabrek-abrek dah. Itulah slider sob namanya ;)) :)) b-) Bloglang ganteng kalem ini berhasil menemukan slider simpel banget dengan plug-in jQuery WebDezine. Dipostingan tersebut sudah dipaparkan secara rinci bagaimana membuat small and simple jQuery slideshow :)

Karena awal ketertarikan dimulai dari http://www.hacktweak.co.cc melihat ada yg gonta-ganti sendiri dan ternyata itu terakreditasikan dengan FeedBurner. Perhatikan sidebar kanan atasnya sob (jika blon dirubah sih) ;)) Itu yg mau Beben bagi buat para sobat dan followerku tercinta :x oke oke oke :)>- Jika sobat enggak mau capek ya tinggal ambil saja kode Headline Animator pada halaman feedburner sobat :)) Jadi deh slideshow no cape-cape!!! Langsung deh yuk kita buat bagaimana versi pluginnya [..]
Dashboard ► Design ► Page Elements ► Add a Gadget ► HTML/Javascript
Masukan deh ini bumbu-bumbunya...

<div id="slide-show">

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

<script type="text/javascript">
var x = 2;
function slideSwitch() {
x += 1;
if (x > 5) {
x = 1
}
$("#slide-show .feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0});
$("#slide-show .feedburnerFeedBlock ul li:nth-child(" + (x) + ")").animate({opacity:1});

}

$(document).ready(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

<style type="text/css">
#slide-show .feedburnerFeedBlock ul {
margin:0 0 10px 0;
padding:0;
color:#000;
position:relative;
}
#slide-show .feedburnerFeedBlock {
height:80px;
overflow:hidden;
}
#slide-show .feedburnerFeedBlock ul li {
text-align:left;
position:absolute;
top:0;
left:0;
height:80px;
margin:0;
padding:0 0 10px 0;
background:#999;
color:#fff;
font-weight:bold;
}
#slide-show #creditfooter {
display:none;
}
</style>

<script src="http://feeds.feedburner.com/beben-koben?format=sigpro" type="text/javascript"></script>
</div>
NB:
#Script yg diberi warna merah jika sudah ada dan minimal versi jquery/1.3.2 tidak usah dipakai.
#Tulisan yg berwarna biru itu ganti dengan link address feedburner sobat :)
#Lihat deh hasilnya :)
Sobat sudah memiliki slideshow berupa headlines postingan yg terakreditasi dengan feedburner sobat b-) :-bd
Bye bye :-h
Can find it too here:
http://www.webdezine.co.cc/2010/09/automatic-jquery-content-slider-for.html
http://hackspc.com/create-a-unique-headline-animator-from-feedburner-using-jquery/

Ini mungkin simpel juga nih sob Snook.ca :D
Diposting oleh di Tidak ada komentar:
Label: ,

Template Oh Template

Gema takbir kemenangan masih berkumandang, di hari fitri ini mari kita buka lembar baru dengan goresan-goresan penuh dengan keikhlasan :-" :"> Baju baru Alhamdulillah, tidak baru tak apa-apa, masih ada baju yang lama. Tidak berlaku dengan template ya sob ;)) Untuk tampilan lebih fresh dan fitri juga ;)) beben bawain deh oleh-oleh hasil nge-bloglang (itung² THR) :))


Thesis Blogussion
Keterangan
Koleksi template buat bisnis Collection Of Premium Business Blogger Templates.
Template oh template, makin banyak makin pusing milih-milihnya :))
Bye :-h
Diposting oleh di Tidak ada komentar:
Label:

Sabtu, 04 September 2010

Make Tabs Using jQuery Plug-in

Banyak benar kegunaan script jQuery plug in ini sob. Mungkin sobat juga sudah pernah melihat dan menyaksikannya di web developer :D Kali ini Beben sibloglang mau berbagi hasil ngebloglang :P "Create Animated Tabs using JQuery and CSS" Tau dong tabs :-/ yg berderet bisa mengirit tempat pada template kita sob ;) Di Prodigy ajah ada 2 biji tabsnya sob ;)) Lihat gambar yg ada dikiri tuh...kekekekkk. Untuk melakukan trik ini sobat harus memiliki jQuery minimal versi jQuery 1.2.6 Jadi jika sobat sudah memiliki yg lebih dari itu tidak usah dipasang lagi (ingat selalu hal ini)
Script rekomendasi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/></script>

Kode CSS

Letakan seperti biasa sebelum kode ]]></b:skin>
.b, .c{ display:none;}
#badan em{ font-style:normal; font-size:36px;}
.buttons{
border-bottom:solid #d1c8b8 4px;
display:block;
padding:8px;
width:60px;-moz-border-radius: 1em 3em 1em 3em;
border-radius: 1em 3em 1em 3em;
text-align:center;
margin:1px;
background:#4b7975;
text-decoration:none; color:#FFFFFF;
float: left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#badan {
background:#919b9d;
text-align:justify;
overflow:hidden;
color:#fff;
padding:20px;
-moz-border-radius: 1em 3em 1em 3em;
border-radius: 1em 3em 1em 3em;
height:200px;
width:260px;
}
#wrap{
text-align: left;
overflow:hidden;
width:auto;
height:380px;
}

jQuery plug-in

Letakan script berikut diatas tag </body>
<script>
$(document).ready(function(){

$("#first-tab").addClass('buttonHover');
});

function navigate_tabs(container, tab)
{
$(".b").css('display' , 'none');
$(".c").css('display' , 'none');
$(".a").css('display' , 'none');

$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');

$("#"+tab).addClass('buttonHover');
$("."+container).show('slow');
}
</script>

Kode HTML

Untuk bagian ini letakan didalam tag <body> atau juga bisa Add a gadget HTML/Javascript ;))
<div id="wrap">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
<br clear="all" />
<div id="badan" align="center">
<div class="a">
<em>Beben</em> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br />Thanks!
</div>
<div class="b"><em>E</em> psum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.
</div>
<div class="c"><em>L</em> i Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&aacute; de un nov lingua franca: on refusa continuar payar custosi traductores.
</div>

Save

Untuk lebar dan tinggi sesuaikan pada kode CSSnya saja ya sob :)

Create a Neat Content Box with Tabs using CSS & jQuery

Kode CSS

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}

Kode HTML

<ul class="tabs">
<li class="active" rel="tab1">Title1</li>
<li rel="tab2">Title2</li>
<li rel="tab3">Title3</li>
<li rel="tab4">Title4</li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
YOUR CONTENT 1
</div>

<div id="tab2" class="tab_content">
YOUR CONTENT 2
</div>

<div id="tab3" class="tab_content">
YOUR CONTENT 3
</div>

<div id="tab4" class="tab_content">
YOUR CONTENT 4
</div>

</div>

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
//]]>
</script>Resource by: Entheos.

demoHappy creatifity b-)

Diposting oleh di Tidak ada komentar:
Label: ,
Langganan: Postingan (Atom)