Rabu, 30 November 2011

Google Talk Resource for Blogger

Semenjak dimulainya perbaikan kinerja search engine google, langkah tersebut diikuti pula penyatuan-penyatuan produk google guna efisiensi kinerja product google itu sendiri :D Membingungkan kan kata-katanya :)) Contoh jelas tampak terlihat bila sobat perhatikan produk/sarana chating milik google! Thats right http://www.google.com/talk/ google talk or google chat dimana merupakan sarana chattingan kepunyaan aku.
Kenal dengan orkut, gmail, blogger, google plus or produk dimana ketika melakukan login menggunakan account google! Apalagi GTalk sekarang memang dikembangkan ke berbagai form. Mau itu Handphone, Iphone, Ipod dll yg kesemuanya itu saya tidak punya :P

Dengan integrasi berbagai google product ini, ada baiknya kita lebih mengefisiensikan gerak langkah khususnya blogger. Buka account satu biji bisa merambah kesana kemari ;) Jadi intinya nanti kita chattingan bisa ramai² gitooo loh \m/ Download & dapatkan google talk clients disini Google Talk Other IM Clients.
Bagaimana dengan sobat Koben sekalian, sudahkan mengonlinekan G-Talk kalian! Jika pusing dengan feature google talk, satroni saja help forum di Google Talk Help.

Create a Google Talk Chatback Badge

Punya domain sendiri, you can do like it, url customize for loginhttp://www.google.com/talk/service/a/YOUR-DOMAIN-HERE/badge/New

New! One-stop information sharing with Google Sites
Building a site is as simple as editing a document, and you don't need anyone's help to get started.
Check out these example sites: Company intranet, Team project, Employee profile, Classroom

Embed Pop Out Google Talk

<iframe width="100%" frameborder="0" src="http://talkgadget.google.com/talkgadget/client" height="337"></iframe>

Pop Out in Badge Form

<center><a title="Chat with me" href="javascript:void(0);" onclick="window.open('http://talkgadget.google.com/talkgadget/popout', 'bb3n', 'left=0, top=0, width=500, height=350, toolbar=0, resizable=1')"><img src="http://www.google.com/talk/images/gadget_popout.gif"/></a></center>
Kurang source mengenai hal ini, silahkan meluncur ke Your Guide to Instant Messaging semua numplek bukan g_talk saja :))
Semoga bermanfaat :)
Happy instant messaging \m/

Selasa, 29 November 2011

How To Build Custom Fans Facebook

Artikel info kali ini Koben akan membicarakan mengenai bagaimana cara membuat tampilan fan facebook berbeda alias customized. Secara default hanya terdapat pilihan opsi light & dark saja. Sekarang kita akan buat gimana menerapkan supaya tampilan fan-facebook bisa kita sisipkan background dan beberapa customize lainnya. Temanya saja sudah fans FB, ya kalian harus sudah punya dulu dong. Kalau belum punya silahkan baca cara bikin fans facebook.
Sebenarnya Beben cuma mau memperjelas saja tutorial how to build custom facebook fan box :D Biarin sedikit basi juga yah bro and bri ;)) Siapa tahu penjelasan ane lebih masuk ketimbang penjelasan² yang sudah ada :D Pasti source yg aku tawarkan mumpuni punya deh.

Demo Custom Fan Facebook


Perhatikan struktur berikut
<div style="padding:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhanSJw-7Egchc7aIArbrjTq0dil3Cz2EGePtZ6mdaoOD_IL-A2_YglVnqksWsYdQYvx1K0Vo0dTriPRhmIPXrvMGD-YBHafFDMa6_JGXyYGwGdLtTsiw8peCGjJT5yuJNbVikg1i0FnuKD/) repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow:inset 0 0 0px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inset 0 0 3px #333;width:290px;height:205px">

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript">
</script>

<script type="text/javascript">
FB.init("ISIKAN DENGAN KODE
App Secret KALIAN");
</script>

<fb:fan connections="10" css="https://sites.google.com/site/misstemplate88/fanboxstyle.css" height="205" logobar="0" profile_id="ISIKAN DENGAN ID PROFILE KALIAN" stream="0" width="290" class=" FB_fan FB_ElementReady">
</fb:fan>

</div>
Fokuskan perhatian pada tulisan kode berwarna. Kode External Style Sheet itulah code ramuan ajaib agar dapat melakukan hal ini :P Daleman isi coded CSS tersebut bisa kalian rubah lagi apabila warna link kurang sesuai. Ingat hanya warna dan jenis font yg boleh dirubah ya!!!

Coded CSS Facebook Fans Box

/* 
Created by: Miss Rinda
URI: http://rindastemplates.com/
Developer by: Mr Beben
URI: http://beben-koben.blogspot.com/
DO NOT REMOVE MY LINK. YOU JUST ALLOWED TO CHANGE FONT & COLOR.
*/

.fan_box a:hover {
text-decoration: none;
}
.fan_box .full_widget {
height: 200px;
padding-left: 5px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top {
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage {float: left;width: 40px;height: 40px;padding: 0 5px 0 0;margin: 0 0 1px 0}
.fan_box .connect_action {padding: 0 0 0 8px}
.fan_box .connect_action .name {line-height: 15px;font-size: 12px;font-style: normal;color: #000;font-family: Arial,Serif,Tahoma}
.fan_box .connect_action {padding: 0 !important;}
.fan_box .connections {
padding: 0 !important;
border: 0 !important;
font-family: Tahoma;
font-size: 11px;
font-weight: normal;
color: #000;
}
span.total {color: #000;font-weight: normal;}
.fan_box .connections .connections_grid {padding-top: 5px !important;}
.fan_box .connections_grid .grid_item {padding: 0 7px 0px 0 !important;}
.fan_box .connections_grid .grid_item .name {
font-family: Arial,Serif,Tahoma;font-size: 9px;
color: #000 !important;
padding-top: 1px !important;
}
.fan_box .connect_widget .connect_widget_text {padding: 0}
.fan_box .connect_widget td.connect_widget_vertical_center {height: 20px}
.fan_box .connect_widget td.connect_widget_vertical_center a.connect_widget_like_button {margin-right: 7px}
.fan_box .connect_widget .connect_widget_interactive_area {margin: 5px 0 0}
.button_count a.connect_widget_like_button {padding: 2px 4px}
.button_count a.connect_widget_like_button span {line-height: 14px}
a.connect_widget_like_button:hover {text-decoration: none}
.connect_widget_number_cloud {background: #666;border: 1px solid #000;height: 24px;padding-top: 5px;text-align: center}
.connect_widget_like_button .corner {background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/L6P2fymQtet.png);height: 6px;width: 6px;display: block}
.connect_widget_like_button .topleft {top: -6px;left: -3px}
.connect_widget_like_button .topleft .corner {margin: 0}
.connect_widget_like_button .topright {top: -6px;right: 0}
.connect_widget_like_button .topright .corner {margin: 0 0 0 -3px}
.connect_widget_like_button .bottomright {bottom: 0;right: 0}
.connect_widget_like_button .bottomright .corner {margin: -3px 0 0 -3px}
.connect_widget_like_button .bottomleft {bottom: 0;left: -3px}
.connect_widget_like_button .bottomleft .corner {margin: -3px 0 0 0}
.connect_widget_like_button .liketext {color:#000;display:block;padding-left: 17px;background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/L6P2fymQtet.png) -1px -33px no-repeat;white-space: nowrap}
.connect_widget_like_button .fbLikeButtonTrackingPixel {display: inline;height: 0;width: 0}
Hostingkan seluruh CSS diatas. Gantikan link CSS https://sites.google.com/site/misstemplate88/fanboxstyle.css dengan hasil karya kalian masing² :)
Resource by: http://www.rindastemplates.com/2011/06/stylish-facebook-fan-page.html
Bila sobat ingin tahu lebih banyak mengenai custome sekitaran facebook, silahkan mampir disini Daddy Design.

Ekstra explanation:
ISIKAN DENGAN KODE App Secret KALIAN
Go to Facebook Developers and look App Secret

ISIKAN DENGAN ID PROFILE KALIAN
Dibawah App Secret dua jajar, ambil saja deretan angka yg paling dibelakang :D
Semoga bermanfaat :)
Happy FB Fanz \m/

Senin, 28 November 2011

Simpel Content Slider Pure CSS3

Mumpung masih hangat para developer membicarakan tutorial CSS3, sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali tut's mengenai cara membuat Content Slider use CSS3. Before i'll have posted about this tema, you all can check from is this Slider Content use 100% CSS3. Sama trick namun berbeda hasil hayah master @gabromanato selaku owner OnWebDev Blogs kembali menggebrak dengan tutorial terbaru "Pure CSS3 content slider"
Mr. Gabriele Romanato seorang web development dimana karya²nya maknyus bin yahut :x Simpel dalam menjelaskan, disertakan dengan live demo guna mendukung penjelasan postingan bagi yang jelek pemahaman bahasa inggris macam aku :">
Cekgidot...

Markup HTML

<div id="slideshow">

<div class="slide s1">
<img src="http://LINK-YOUR-IMAGE-1.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 1</div>
</div>

<div class="slide s2">
<img src="LINK-YOUR-IMAGE-2.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 2</div>
</div>

<div class="slide s3">
<img src="LINK-YOUR-IMAGE-3.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 3</div>
</div>

<div class="slide s4">
<img src="LINK-YOUR-IMAGE-4.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 4</div>
</div>

</div>
Kode markUp ini disimpan didalam tag <body> template kalian!

Structure CSS

#slideshow {
width: 700px;
height: 330px;
margin: 5px auto;
overflow: hidden;
position: relative;
background: #ccc;
border: 1px solid #000;
}
#slideshow div.slide {
width: 700px;
height: 330px;
position: absolute;
top: 0;
cursor: pointer;
z-index: 1;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#slideshow div.slide img {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 330px;
}
#slideshow div.slide div.caption {
height: 2em;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
line-height: 2;
text-indent: 0.5em;
}
#slideshow div.s1 {
left: 0px;
}
#slideshow div.s2 {
left: 175px;
}
#slideshow div.s3 {
left: 350px;
}
#slideshow div.s4 {
left: 525px;
}
#slideshow div.slide:hover {
left: 0;
z-index: 2;
}
SAVE.

Penjelasan

Perhatikan kode width yg diberi warna. Sesuaikan panjang tersebut dengan dimana nanti sobat akan menyimpan code markpup HTML (dalam tag body). Jika sobat mau simpan, misalkan (outer-wrapper, main-wrapper or unik ID lainnya) maka panjang slideshow sesuaikan dengan itu!

Kode left ada 4 biji. Jumlah panjang yg kalian buat tadi, bagi saja dengan nominal 4. Tambahkan seterusnya dengan kelipatannya. Ini berfungsi agar menciptakan lebar kolom sama ;) Good luck b-)

Demo Via jsbin
Happy slideshow anymore \m/

Minggu, 27 November 2011

Expand Hide for Iframe Blogger Comment

Tutorial ringan akan Koben sampaikan mengenai cara menyembunyikan sesuatu memakai variable Document getElementById() Method. Sebenarnya bisa dilakukan dengan jQuery plugins, bagi sobat yang sudah menanamkan script jQuery didalam templatenya ;)) Tapi tidak semua blogger memasukan si-jQuery kan! Oleh sebab itu Beben Koben si bloglang anu ganteng kalem tea akan berbagi eksperimen bagaimana cara menyembunyikan embed frame komentar blog memakai trick expand check, table, plus sedikit bumbu HTML DOM Objects. Hasil korak korek sana-sini biasa sob :">
Langkah pertama yg musti dilakukan yaitu Expand Widget Templates

Screenshot After Practice

Press on kibot Alt + F or just press F3, then found it comment-editor comment-editor yg berada pada bagian iframe yaaa don't forget that!!!
Setelah menemukan code yg dimaksud, ambil sebundel bagian<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>Simpan dimana dulu kode tersebut, ex: Notepad, Microsoft Word or anything else like that :P Setelah itu, sisipkan ramuan ajaib, menjadi begini penulisannya [..]
<table width="100%">
<tbody>
<tr>
<td>
<label>
<input onclick="javascript:var bPlay=this.checked?'':'none';document.getElementById('komentar').style.display=bPlay;" type="checkbox"/> Checked for Add Comments
</label>
</td>
</tr>
<tr id="komentar" style="display: none;">
<td>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</td>
</tr>
</tbody>
</table>
Done, SAVE :)
Begitulah akhir cerita bagaimana cara membuat expand/hide for blogger comment side.
Semoga bermanfaat \m/

Jumat, 25 November 2011

Toggle Effect Pure Use CSS3

Show hide trick memang tidak ada habisnya buat postingan :)) Pernah dulu juga membahas show/hide pure use CSS for CBOX kala disorot terbukalah anunya :D Feature show-hide hampir serupa fungsi dengan slide in function, appear lost or etc yang dimana pada jQuery kita kenal dengan toggle effect ;))
Datang trik berikut dari lists of my inspiration, the great web simurai talking about toggle button. Hanya menggunakan variable CSS 3 dikombinasikan tentunya dengan kode HTML bisa menghasilkan toggle effect layaknya memakai script :x

Pada pemaparan (demo) disana terdapat pemakaian coded transform: rotate guna memberikan efek pada gambar supaya terlihat berubah/berganti saat kita klik. Beben Koben si bloglang anu ganteng kalem tea melakukan sedikit perampingan kode CSS dengan meniadakan hal tersebut. Soalnya disini menurut aku, yang penting sisi tampil & menghilangnya ketika kita click :D

Demo

demo Toggle Effect Pure Use CSS3
Klik tulisan Buku Tamu sebelah kiri yg berwarna latar belakang pink :D Seperti itulah hasil modifikasi aa oben ;)) Bila sobat berminat, kemon kita lanjutkan tut's toggel efek. Masukan semua ramuan bumbu:
Dashboard ► Design ► Add a GadgetHTML/JavaScript
<style>
.kotak {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
border: 1px solid #555;
width: 350px;
background: #f4f4f4;
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: -webkit-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-moz-transition: -moz-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-o-transition: -o-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
transition: transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
}
/* toggle */
.toggel {
position: fixed;
display: inline-block;
width: 100px;
height: 30px;
border-radius: 10px;
margin: 1px;
background: #FF99FF;
top: 250px;
left: -15px;
}
.toggel a {
position: fixed;
width: 100%;
height: 30px;
text-align: center;
padding: 3px;
}
/* :target - this makes it possible to have different "states" */
#box:target .kotak, .toggel {
pointer-events: auto;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#box:target .toggel .top {
pointer-events: none;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#box:target .toggel .bot {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>

<div id="box">
<div class="kotak">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="350" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe></div>
</div>

</div>
<div class="toggel">
<a class="bot" href="#">Buku Tamu</a>
<a class="top" href="#box"></a>
</div>
</div>
Keterangan:
  • width: 350px;
  • Lebar, sesuaikan dengan lebar CBOX.
  • bottom: 0;
  • Posisi dibawah.
  • right: 0;
  • Posisi ada di kanan.
  • background: #FF99FF;
  • Warna latar tombol.
Silahkan diatur-atur menurut selera :)
Artikel cool lain dari simurai:

http://lab.simurai.com/css/space-cacss/

http://lab.simurai.com/ui/cycle-button/

Bila membaca artikel disana, sobat pasti bisa membuat simple chat kayak aku...nih LESEHAN YUK! :D
Happy blogging \m/

Kamis, 24 November 2011

Nong Poy Photo's the Ladyboy From Thailand

Tidak ada sangkut pautnya sama tutorial blog artikel berikut. Beben Koben si bloglang anu ganteng kalem tea cuma ingin berbagi hasil melancong tak sengaja ke web negara tetangga kita Singapore. Takjub, heran, salut, prihatin, kagum, kok bisa, serta beribu-ribu rasa lainnya merasuki benak pikiran gue jaman jadi edan begini :D
Sobat pernah dengar istilah transgender? Istilah yang dipakai para ahli guna mendeskripsikan seseorang yang merasa, melakukan, berpikir, terlihat beda saat mereka dilahirkan. Pasti sudah dengar/baca siapa saja orang yg meraih "The World's Most Beautiful Transsexual Contest" !!!

Trans Gender sangat erat berhubungan dengan faktor transsexualism juga. Puyeng kelapa merenungi kasus macam gituan bisa terjadi @-) Dengan itu, Beben merasa terenyuh hati seorang yang dulu laki-laki disulap menjadi sesosok perempuan elok nan jelita x_x

Ladyboy Nong Poy from Thailand


Cantik enggak sob, eh cakep tidak, eh ~!@#$%^&*()_+| Baru 10 biji itu photonya, lanjutin sobat, masih ada 58 pic lagi :D
Silahkan buka halaman berikut kalau mau photo lanjutannya ;)) http://singaporetrends.com/sg/2011/11/68-sexy-scans-of-thai-ladyboy-nong-poy/' title='68 Sexy Scans of Thai Ladyboy Nong Poy' class='tooltip' target='new'>68 Sexy Scans of Thai Ladyboy Nong Poy by Singapore and Overseas Celebrities.
Dari negara kita juga ada ternyata :(( http://hot.detik.com/read/2011/11/22/104748/1772667/230/dena-rachman-merasa-terjebak-di-tubuh-laki-laki-sejak-kecil
Jaman oh jaman +_+

Rabu, 23 November 2011

Search Engine For Found You Idea

Mencari sesuatu di dunia maya ini bukanlah perihal mudah. Namun memerlukan sedikit trik dan tips guna mendapatkan hasil akurat, berimbang, berbobot agar hasil dari apa yang kita cari tersebut memuaskan. Beragam cara pasti dimiliki oleh setiap individu guna melakukan hal ini. Beben Koben si bloglang anu ganteng kalem tea akan berbagi dengan metode alami yaitu memakai trick searching via search engine :D
Metode ini dianggap paling ampuh karena dengan mengetikan keyword target maka seketika itu pula hasil langsung kita dapatkan! Pertanyaannya kalau kita sering mencari-cari lewat search engine terkenal ex: google.com, secara tidak langsung akan menghasilkan result yang itu² saja. Begini kasus sederhana yg Koben selalu lakukan.

G U E pasti akan melakukan searching bila sudah tidak ada IDE buat artikel :D Aku hanya ngelakuin 2x search memakai target keyword "blogger hack" dan "tutorial blogger" Itu juga dibolak-balik yg depan ke belakang, yg belakang ke depanin ;) Lama-lama ternyata kesana-sana juga larinya :))
Untuk mensiasati agar tidak kesana melulu hasil searchingan yg kita dapat, Koben mau berbagi macam² search engine full stylish b-) Contoh seperti ini addictomatic search engine and kekuatan 10 search engine! Dah 11 biji tuh ;)) Silahkan mau cari apa saja, bebas tanpa batas, prikitiw. Let's get de done, cekidot

Search engine optimization SEO
Breaking News and Opinion on The Huffington Post
Dhiti Dive

hakia.com
W D LWhat do you love? bingleBingle.nu

Hajuh dah abis, sekian dulu deh...tungguin & bookmark saja halaman ini guna mendapatkan updatenya :))
Happy search \m/

Senin, 21 November 2011

Another Blogger Tips for Stylish Blogger

Kembali bersama Beben Koben si bloglang anu ganteng kalem tea dalam mencari-cari blogger yang secara khusus memberitakan artikel mengenai tutorial, hack, trick, tips or etc ketebelece blogspot. Koben menemukan lagi blogger stylish oke punya, please welcome Yet Another Blogger Tips Blog - YABTB. Teh great blogger and awesome article you can find there b-)
Master script pemilik blog tersebut, Python script :-bd Yang menurut dia mudah, bagi saya sulitnya minta ampun =)) Kita acak-acak satu per satu postingan gaya punya dari sana. Recent comment kreasi yabtb sangat patut diperhitungkan! Karena memakai script yang berisikan auto favicon for avatar :)) Script yg dia buat banyak memakai pemanggilan +window.location.hostname+ sehingga kita tidak perlu lagi capek² pasang link ;))

Return of the Better Recent Comments Blogger


<style type="text/css">
.recent-comment { margin-bottom:10px; padding-left: 24px; }
.recent-comment-admin { background-color: #F4F4F4; }
.recent-comment-ico { margin-left: -20px;margin-top: 4px;float: left;}
.recent-comment-body { padding-right: 4px; font-size: 95%;}
.recent-comment-footer { font-size: 85%; }
</style>
<script type="text/javascript">
// Recent Comments blogger gadget by MS-potilas 2011
// see http://yabtb.blogspot.com

var numRecentComments = 5;
var numPerPost = 2; // max comments per post (to try) or 0
var maxCommentChars = 90;
var maxPostTitleChars = 0; // if 0, use full post title

var txtWrote = 'wrote:';
var txtMore = 'Continue >>';
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM/dd/yy hh:mm]';
var txtAnonymous = ''; // empty, or Anonymous user name localized
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec

var getTitles = true; // false faster
var trueAvatars = true; // false faster
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
var urlMyProfile = ''; // set if you have no profile gadget on page
//
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=16';
var maxResultsPosts = ""; // or for example "&max-results=100"
var maxResultsComments = ""; // or for example "&max-results=300"
// CONFIG END
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
var href;
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href;
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t
var authorUri = ""
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = "http://avafavico.appspot.com/?userid=" + authorUri.substr(bloggerprofile.length);
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="16" width="16" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

var clsAdmin = "";
if(authorUri == urlMyProfile)
clsAdmin = " recent-comment-admin";

var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);

document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('</div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>
Masukkan semua bumbu tersebut ke dalam metode Add a Gadget ► HTML/JavaScript. Done.

Python Application

Example gradient PNG data URI

Try here!
from color (rgb, for example FF0000)
to color (rgb, for example FFFF00)
width, pixels
height, pixels

if not worked you melancong dengan begini saja http://avafavico.appspot.com/?c1=FF0000&c2=FFFF00&h=15&w=25
Untuk avatar begini
avatar
Caranya seperti ini
My Avatar: http://avafavico.appspot.com/?userid=08754225607191914278
Or meluncur disini
Google App Engine Python tool to get Blogger avatar
Pokonya acak-acak saja semua psotingan yg ada disana. Kalau tidak mengerti tanyakan saja kepada si empunya. Ramah kok orangnya, aku saja komentar diajawab terus ;))

Perhatian Koben menclok di hack article about threaded commenting with Blogger native comments. Versi pendahulu bisa dibaca oleh sobat² threaded comments in blogger and next generation Threaded Comments II for Blogspot :D
Sekarang saatnya Beben mencoba membantu menerapkan threaded comments version master MS-potilas ke dalam blog kita.
Pada prosedur yang dipaparkan disana, jika ingin berjalan mulus versi ini, sobat harus mengganti hack berikut Highlight author comments and Reply to comments!

Pusing memang kalau harus menjalani proses panjang itu. Sikat script dibawah ini, masukkan sebelum tag </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[

// Threaded comments for Blogger
// by MS-potilas 2011
// http://yabtb.blogspot.com

var clss = [];
var elements = document.getElementsByTagName("*");
for(var i=0 ; i<elements.length ; i++)
if(elements[i].className=="normal-comment" || elements[i].className=="admin-comment")
clss.push(elements[i]);

var prevAuthor = "";
var prevNode = null;
var authornodes = {};
for (var x=0 ; x < clss.length; x++ )
{
var moved = false;

var width = clss[x].scrollWidth;
clss[x].style.position = "relative";
clss[x].style.left = "0px";

var author = clss[x].innerHTML.toLowerCase().indexOf("%22%3e");
author = clss[x].innerHTML.substr(author+6);

if(author.toLowerCase().indexOf("%3c%2fa%3e") > -1)
author = author.substr(0, author.toLowerCase().indexOf("%3c%2fa%3e"));
else
author = "";

var cmtChild = clss[x].firstChild;
while(cmtChild && !/(^| )comment-body( |$)/.test(cmtChild.className) && !/(^| )comment-body-author( |$)/.test(cmtChild.className))
cmtChild = cmtChild.nextSibling;
var txt = cmtChild.innerHTML;

var elm = null;
var cmtID = txt.toLowerCase().indexOf("href=\"#");
if(cmtID == -1) cmtID = txt.toLowerCase().indexOf("href=\"" + (window.location.href.toLowerCase()).split("#",1)[0] + "#");
if(cmtID > -1) {
var commentid = "x" + txt.substr(cmtID).split("#")[1].split("\"")[0];
elm = document.getElementById(commentid);
}
if(!elm && prevAuthor != "" && x && prevNode)
{
if(txt.indexOf("@" + prevAuthor) > -1)
elm = prevNode;
else if(prevAuthor.length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.toLowerCase()) > -1)
elm = prevNode;
}
if(!elm) {
for(var tmp in authornodes) {
if(txt.indexOf("@" + tmp) > -1)
elm = authornodes[tmp];
}
}
if(elm) {
var ind = 0;
if(elm.style.left != "")
ind = parseInt(elm.style.left);
if(ind < 300) { // max indent
ind = ind + 20; // amount of indent
}
var parNode = elm.parentNode;
var place = elm;
var xpos;

do {
do place = place.nextSibling;
while(place && place.nodeType != 1);

if(place && place.style && place.style.left != "")
xpos = parseInt(place.style.left);
else
xpos = 0;

} while(place && xpos >= ind);

if(place != clss[x]) {
parNode.insertBefore(clss[x], place);
moved = true;
}

clss[x].style.position = "relative";
clss[x].style.left = ind + "px";
width = width - ind;
}
clss[x].style.width = width + "px";
if(!moved) {
prevAuthor = author;
prevNode = clss[x];
}
if(author != "")
authornodes[author] = clss[x];
}
//]]>
</script>
</b:if>
SAVE. Lihat berjalan tidak, kalau mulus, ya sudah sukses :D Jika belum lancar, berarti sobat harus menerapkan hack selanjutnya ;)) Lakukan Expand Widget Templates dan temukan kode<b: loop values='data: post.comments' var='comment'>Setelah ketemu, sisipkan code dibawah ini tepat dibawahnya ya
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/YOUR-NUMBER-BLOG-PROFILE&quot;'>
&lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
<b:else/>
&lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
</b:if>
Cari kode penutup </b: loop> yg merupakan tagging penutup dari<b: loop values='data: post.comments' var='comment'>tepat diatasnya masukan kode&lt;/div&gt;

Jangan lupa ganti YOUR-NUMBER-BLOG-PROFILE
Hampir lupa, sobat harus sudah memiliki tombol replay jika memang mau memakai threade comments ini. Berikut coded reply button for blogger comments<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-NUMBER-BLOGID&amp;postID=&quot; + data: post.id + &quot;&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' target='_blank'>[Reply]</a>Save.Sudah berjalan mulus belom! Bila belum juga, tanya saja ke yg buatnya yah =))
Happy blogging, don't forget to read article on yabtb blog :-bd
Good bye \m/

Minggu, 20 November 2011

Melihat Situs Terkait untuk SEO

Bagaimana kita bisa melihat situs yang terkait dengan blog/web kita secara transparan & gamblang! Master O-Om membuat tools search SERP buat kontes SEO, walau lagi error sekarang :P Mirip dengan itu mungkin kinerja dari java application berikut ini sob. Jadi nanti akan terlihat secara signifikan situs-situs mana saja yang terkait dengan situs kita. Terkait yang benar-benar mengkait loh ;)) "SEO Keyword Graph Visualization" Jadi sebelum memulai proses pembuktian keterkaitan blog kalian dengan situs lain, kalian harus sudah memiliki syarat² seperti berikut:
  1. Pastikan sobat memiliki java versi terbaru, setidaknya Java 1.5
  2. Ketik kata kunci pencarian atau URL pada kotak yg disediakan.
  3. Bila ada konfirmasi "Run" "Do you want to trust the signed applet?" just lets go...
  4. Nonaktifkan popup blocker.
  5. Segitu saja kira-kira.

My Blog Result

Silahkan cek dimari...


Tunggu sampai proses selesai, dan lihat hasil dengan mengeksplore semua menu yg ada disana ;) Semoga bermanfaat :)
Happy kait-kait \m/
Powered by: http://www.touchgraph.com/
Serupa namun berbeda, sobat bisa melakukan search dengan query apapun untuk melihat kesignifikanan yg dicari ;)) Joongel. Ini lagi sob MoreOfit.
Stay tune to update

Sabtu, 19 November 2011

Acak-Acak Not Ecek-Ecek

Sudah lama tak berkunjung ke tempat sobat amazingthings, ternyata artikel disana bertambah gaya punya bin full stylish :)) Setelah mangacak and membaca, Beben Koben si bloglang anu ganteng kalem tea mau bagi artikel keren yg tak boleh terlewatkan begitu saja:
  • http://www.amazingthings.in/2011/09/image-gallery-slideshow-lighboxes-for.html
  • Image Gallery Slideshow Lighboxes For Websites
  • http://www.amazingthings.in/2011/10/html-full-screen-background-animation.html
  • HTML Full Screen Background Animation Using Jquery
  • http://www.amazingthings.in/2011/10/jquery-tricks-and-plugins.html
  • Jquery Tricks And Plugins
  • http://www.amazingthings.in/2011/06/amazing-social-bookmark-widgets-for.html
  • Amazing Social Bookmark widgets for Blogger/Website
Serta seabrek info trik, tips, hack, jQuery etc masih bejibun buat di reading² 8->> Ikuti hasil menjelajah si gue yah :-"

Infinite CSS Slideshow by CSS-Tricks

Master not Hamster!!! WkwkwkwkwkkkkKKKK

Sorot pada image

Do Not Open!!!


Dah ah, sana acak2 sendiri :D amazing oh amazing ;)
Happy blogging \m/

Jumat, 18 November 2011

Making 3D Dynamic Effect for Blogger

Pasti kawan² sudah sering lihat efek 3D menggunakan CSS 3. Ada yang memakai permanen, ada juga yang memakai ketika menghover cursor hover 3D effect. Tapi sobat sudah pada tahu belom nih, bahwasannya effect 3D pada text bisa dibikin menjadi dinamis! Jadi ketika cursor mengarah/didekatkan pada sekoloni teks, maka efek 3D akan terlihat berpindah berlawanan dengan keberadaan si cursor :-/
Okelah kalo begitu, sebelum masuk ke inti permasalahan, ada baiknya sobat melihat live demo apa, bagaimana, efek 3D pada teks itu :D Ce-gi-dot-pret-cess
Ini contoh penggunaan efek 3D memakai CSS3 attribute, guna memunculkan efek menonjol gitooo LOH!!!
Lihat dong tulisannya serasa menonjol or mengangkang, eh mengangkat mksdx -___-'

Terlihat efek bayangan menumpuk dan itulah yang membuat tulisan tersebut serasa terangkat. Sekarang bagaimana cara membuat effect 3D menjadi dinamis? Please look at here to cekidot-pret dynamic CSS 3D text :-bd
Tanpa banyak basa basi busuk, cari kode tag </body> kemudian letakan JavaScript dibawah ini tepat sebelumnya...
<script type="text/javascript">
//<![CDATA[
var text = document.getElementById('Blog1'),
body = document.body,
steps = 7;
function threeD (e) {
var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
shadow = '',
color = 190,
radius = 3,
i;
for (i=0; i<steps; i++) {
tx = Math.round(x / steps * i);
ty = Math.round(y / steps * i);
if (tx || ty) {
color -= 3 * i;
shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
}
}
shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
text.style.textShadow = shadow;
text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threeD, false);
//]]>
</script>
SAVE. Lihatlah hasil akhir :))

Penjelasan

<script type="text/javascript">
//<![CDATA[
var text = document.getElementById('UNIQUE-ID'),
body = document.body,
steps = 7;
function threeD (e) {
var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
shadow = '',
color = 190,
radius = 3,
i;
for (i=0; i<steps; i++) {
tx = Math.round(x / steps * i);
ty = Math.round(y / steps * i);
if (tx || ty) {
color -= 3 * i;
shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
}
}
shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
text.style.textShadow = shadow;
text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threeD, false);
//]]>
</script>
Perhatikan UNIQUE-ID!!! Dengan unik ID yang sobat buat, maka disanalah teks/kalimat harus terTAG. Misalkan kawan mau pakai unik-ID prikitiw
Pemakaian HTML menjadi spt brkt<div id="prikitiw">
BLA BLA BLA BLA BLA BLA BLA
</div>
Jadi efek 3D dynamic tidak akan kemana-mana, hanya sebatas yang terTAG! Oleh sebab itu Koben masukan unikID Blog1 soalnya pada blogger emang itu ID unik pada sesi postingannya :))
Semoga paham lah ;))
Happy 3D effect \m/

Kamis, 17 November 2011

Make Tint Effect for Image Used CSS3

Waktu jalan² ke perancis dapat trik membuat image agar terlihat berefekan tint model di photoshop. Gambar dilapisi warna magenta belekedek sehingga menimbulkan efek warna transparansi. Pusing neranginnya juga sob :)) Sekarang kita bisa lebih jauh menerobos trick tersebut, dengan memadukan variable CSS3 dan hover tentunya agar terlihat lebih cuamiq ;))
Please read it image tint effect with CSS3. Yang sobat perlu lakukan hanya membubuhi variabel CSS 3 berikut
.tint {
position: relative;
float: left;
margin: 10px;
-webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
-moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,255, 0.5);
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover:before {
background: none;
}
.t2:before {
background: rgba(0,0,255, 0.5);
}
.t3:before {
background: rgba(255,0,0, 0.5);
}
.t4:before {
background: rgba(0,255,0, 0.5);
}
.t5:before {
background: rgba(255,0,240, 0.5);
}
.t6:before {
background: rgba(255,102,0, 0.6);
}
Pemanggilan/pemakaian/kode HTML disini memakai attribute tag <figure>
Lebih jauh kreasi yang dapat dihasilkan oleh si figure & figcaption atribut 3D photo rollover effect written by Chris Heilmann.
Sehingga nanti dalam memakainya sobat hanya perlu melakukan tagging seperti berikut<figure class="tint">
<img src="http://your-link-image.jpg" alt="" width="__px" height="__px">
</figure>

Kode HTML

<figure class="tint">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

<figure class="tint t2">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

<figure class="tint t4">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

<figure class="tint t5">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

<figure class="tint t3">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

<figure class="tint t6">
<img src="http://your-link-image.jpg" alt="" width="" height="">
</figure>

Demo Tint Effect Used CSS3

Rabu, 16 November 2011

Anti Right Click Image for Blogger

Iseng dari pada tidak ada postingan ;)) Come from Create a Right Click Function to Save Website Logo Using jQuery go there for look demo and tutorial. Jadi ketika mengklik kanan mouse pada gambar logo yang berada di header, akan muncul peringatan gito sob :D Beben Koben modifikasi, agar setiap klik kanan pada image yang berada pd tagging post template akan muncul kayak gituan juga :)) Bisa dijadikan trick agar image tidak dicuri ;)) Karena plugins maka pada template sobat sudah harus punya jQuery script. Kalau sudah ada jangan dipasang lagi, memberatkan itu namanya :D

Karena sudah dimodifikasi, Koben hanya mengambil script seperlunya saja. Maaf kalau salah, krn bukan ahlinya :">

Structure Jquery Right Click

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.post img').bind('contextmenu',function(e) {
// check if right button is clicked
if(e.button === 2) {
showPressModal();
e.preventDefault();
}
});

$('#shadow, .close').live('click', function() {
hidePressModal();
});

$('a[rel="external"]').click( function() {
window.open( $(this).attr('href') );
return false;
});
});

var logos = '<h2>Mau Maling Gambar yaaa?<span class="close">X</span></h2>';
logos += '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHWmmEpUngBw7DwgpbrSNZfC0qrYPP6DeqY7h8uRvRuhcpFZjnBKeaBTOX7gRmjSwd9PV8fSACdONfswpqJsuEar2YYgn1k3PeX7DqI-If_nb3vrkpr23FCMUmcxzsOM3gFEdkFBoR9M/s150/dont-steal.jpg" style="margin:0 auto;display:block" />';

function showPressModal() {
if($('#shadow').length === 0) {
$('#outer-wrapper').append('<div id="logo-modal"></div>');
$('body').prepend('<div id="shadow"></div>');
$('#logo-modal').hide();
$('#shadow').hide();
if(logos !== undefined) {
$('#logo-modal').append(logos);
$('#shadow').fadeIn();
$('#logo-modal').slideDown();
}
}
}

function hidePressModal() {
$('#shadow').fadeOut(400, function() {
$(this).remove();
});
$('#logo-modal').slideUp(400, function() {
$(this).remove();
});
}
//]]>
</script>
Yang perlu sobat perhatikan yaitu kode .post img dan #outer-wrapper
Kedua coded tersebut merupakan bagian post & image template blogger. Bila unik ID berbeda maka tinggal ganti saja kode tersebut!

Kode CSS

#shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
}
#logo-modal {
position: fixed;
background: #FFF;
width: 300px;
padding: 10px;
top: 0;
left: 25%;
z-index: 10;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#logo-modal h2 {
color: #555;
line-height: 25px;
position: relative;
}
#logo-modal h2 span {
position: absolute;
right: 0;
top: 0;
padding: 0px 5px;
background: #C00;
cursor: pointer;
color: #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Width, background color tinggal rubah² saja menurut kebutuhan ;)
Customize link ancor, sobat bisa melakukan seperti berikut<a href="#" title="" rel="external">
<img src="http://link-image.png" alt="" />
</a>
Dengan membubuhi variabel rel="external" maka akan terbuka new tab windows :)

Demo

Klik kanan pada image yah pakai mouse ;)

Good luck :)
Happy right click image \m/

Selasa, 15 November 2011

Stylish Mega Menu use CSS3

Hasil membaca-baca dari artikel make animated search box use CSS3, terdapat sebuah web link di dalam jaringan CSS radar yakni WeebTutorials. Setelah membabat postingan tutorial yang ada disana, Beben Koben si bloglang anu ganteng kalem tea terpikat dengan 2 tut's menu full stylish b-) Selain itu disana cocok banget bagi kita para newbie untuk menimba ilmu buat nambah² gitooo. Koben kepincut dengan menu tersebut karena unik dan yang lebih menarik full CSS bro :-bd Sorot pada title menu dibawah berikut...

Demo Horizontal drop-down menu using CSS3

Kode CSS

#navBar1{
float: left;
width: 100%;
border: solid 2px #555;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: -moz-linear-gradient(bottom,#BDC7FF, #89F);
background: -webkit-gradient(linear,left bottom, left top, from(#89F), to(#BDC7FF));
-moz-box-shadow: 1px 3px 3px #555;
}
#navBar1 ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
#navBar1 ul li {
display: block;
float: left;
padding-top: 9px;
padding-bottom: 9px;
}
#navBar1 ul li span {
display: block;
}
#navBar1 ul li span a {
border-left: solid #777 thin;
}
.headerList1 a {
border-right: solid #777 thin;
}
#navBar1 ul li a {
display: block;
padding: 5px;
padding-left: 13px;
padding-right: 13px;
color: #eee;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 95%;
}
#navBar1 ul li a:hover {
color: #333;
text-decoration: underline;
}
#navBar1 ul ul {
border-right: solid #505e58 thin;
position: absolute;
top: 47px;
left: 2500px;
background: #CCC;
width: auto;
border: thin solid #57F;
font-size: 70%;
display: none;
}
#navBar1 ul li:hover ul {
position: absolute;
left: 60px;
display: block;
}
#navBar1 ul ul li {
padding: 0;
padding-top: 3px;
padding-bottom: 2px;
}
#navBar1 ul ul li a {
border: none;
color: #555;
}

HTML Coded

<div id="navBar1">
<ul>

<li class="headerList1"><a href="#">Home</a>
</li>

<li class="headerList1"><span><a href="#">TITLE1</a></span>
<ul>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
</ul>
</li>

<li class="headerList1"><span><a href="#">TITLE2</a></span>
<ul>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
</ul>
</li>

<li class="headerList1"><span><a href="#">TITLE3</a></span>
<ul>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
</ul>
</li>

<li><span><a href="#">TITLE4</a></span>
<ul>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
</ul>
</li>

</ul>
</div>
Do you want try it menu full style. Satu menu lagi yaitu stylish CSS3 mega drop down navigation menu! Yuk kita mulai

Jikalau sobat memang tergiur memasang mega menu berikut, maka sobat tidak usah lagi membuat kotak buat kontak, share dan about me :D

demo CSS3 mega menu

CSS Code

#navWrap1 {
border: thin #2e363f solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 1000px;
margin: 0 auto;
}
#navWrap2 {
border: thin #a9c2dc solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #678;
padding: 0px 20px;
}

/* Styling the list */

#navWrap2 > ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 5px;
font-family: Tahoma, Geneva, sans-serif;
}
#navWrap2 > ul > li {
float: left;
position: relative;
}
#navWrap2 > ul > li > a {
padding: 10px 20px 15px 20px;
text-decoration: none;
color: #456;
text-shadow: #8194a8 1px 1px 0px;
font-weight: bold;
font-size: 17px;
display: block;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
}

/* Styling the hover effect */

#navWrap2 > ul > li:hover{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#678', endColorstr='#EEE'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#678), to(#EEE)); /* for webkit browsers */
background: -moz-linear-gradient(top, #678, #EEE); /* for firefox 3.6+ */
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
border-top: 2px solid #cac9c9;
border-left: 2px solid #cac9c9;
border-right: 2px solid #cac9c9;
}
#navWrap2 > ul > li:hover > a {
margin: 0;
color: #CCC;
text-shadow: #555 1px 1px 0px;
}

/* Styling the nested list */

#navWrap2 ul li:hover ul {
display: block;
-moz-box-shadow: 3px 3px 4px #a7a7a7;
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 0px 10px 10px 10px;
}
#navWrap2 ul ul {
display: none;
position: absolute;
left: -2px;
border-bottom: 2px solid #CCC;
border-left: 2px solid #CCC;
border-right: 2px solid #CCC;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#CCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top, #EEE, #CCC); /* for firefox 3.6+ */
width: 420px;
padding: 20px;
}

/* Styling the contents of nested list */

.navListFloat ol {
padding: 0;
margin: 0;
}
#navWrap2 ul ul li {
list-style: none;
}
#navWrap2 ul ul li a {
text-decoration: none;
color: #777;
padding: 4px;
}
#navWrap2 ul ul li a:hover {
color: #456;
}
#navWrap2 ul ul p {
font-family: Tahoma, Geneva, sans-serif;
color: #414141;
font-size: 14px;
}
#navWrap2 ul ul p b {
color: #414141;
font-size: 16px;
}
.navListFloat {
float: left;
width: 106px;
margin: 0px 17px 17px 17px;
}
.navListFloat li {
font-size: 13px;
}
.newsletter > input {
margin-top: 44px;
}
.newsletter div {
float: left;
margin-right: 25px;
}

/* Styling the search form */

.search {
float: right;
}
.searchBox {
float: left;
margin-top: 12px;
height: 23px;
border-top: thin solid #3c444c;
border-left: thin solid #3c444c;
border-right: thin solid white;
border-bottom: thin solid white;
background: #e9e9e9;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #555;
padding: 0 0 1px 3px;
}
.searchIMG {
float: left;
margin-top: 10px;
margin-left: -5px;
}
img {
margin-top: 17px;
border: none;
}
.clear {display: block;clear: both }

Kode HTML

<div id="navWrap1">
<div id="navWrap2">

<ul>
<li>
<a href="#">Home</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Welcome to ABC.com</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#"> About</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">About us</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#">Contact</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Contact</p>
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<form method="post" action="#">
<p>Name</p>
<input type="text" name="Name"/>
<p>Email :</p>
<input type="text" name="Email"/>
<p>Comments :</p>
<textarea name="comments" cols="40" rows="5">
Enter your message here!
</textarea>
<br/>
<br/>
<input type="submit" value="Submit" />
</form>
</li>
</ul>

</li>
<li><a href="#">Portfolio</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Portfolio</p>
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<div class="navListFloat">
<p>Development</p>
<ol>
<li><a href="#">TutSite</a></li>
<li><a href="#">BidBay</a></li>
<li><a href="#">Evideo</a></li>
<li><a href="#">MusicBay</a></li>
<li><a href="#">Network 2.0</a></li>
</ol>

</div>

<div class="navListFloat">
<p>Web Design</p>
<ol>
<li><a href="#">Playsite</a></li>
<li><a href="#">Gamer Station</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

<div class="navListFloat">
<p> Other Projects</p>
<ol>
<li><a href="#">Incognito</a></li>
<li><a href="#">ItSells.com</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

</li>
</ul>
</li>

<li ><a href="#">Social</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Social</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<form class="newsletter" method="post" action="#">
<p><b>Join newsletter</b></p>
<div>
<p>Name</p>
<input type="text" name="Name"/>
</div>
<div>
<p>Email :</p>
<input type="text" name="Email"/>
</div>
<input type="submit" value="Join" />
</form>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<a href="#"><img src="http://link-image-rss.png" alt="RSS"/></a>
<a href="#"><img src="http://link-image-twitter.png" alt="twit"/></a>
<a href="#"><img src="http://link-image-facebook.png" alt="face"/></a>
<a href="#"><img src="http://link-image-stumble.png" alt="su"/></a>
<a href="#"><img src="http://link-image-linkedin.png" alt="in"/></a>
</li>
</ul>
</li>
</ul>

<form class="search" method="post" action="#">
<input type="text" name="search" class="searchBox"/>
<input type="image" src="http://link-image-searchBtn.png" class="searchIMG" />
</form>
<span class="clear"></span>

</div>
</div>
Gantikan link image dengan link hostingan image, disini silahkan ambil bumbu CSS 3 mega menu.
DONE :)
1. CSS3 animated dropdown menu.
2. Sliding Menu Buttons Using CSS3 & jQuery

Cool Sprites overlapped CSS menu using CSS Sprites

Pure CSS DropDown Menu using :target pseudo class

CSS menu, 180 scripts, Plugins and Freebies

Create a Stylish Menu with CSS3 Transitions

Happy menu \m/