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/