Followers

21 April 2012

April 21, 2012 - 1 comment

Letak Buih Ucapan CSS utk threaded comment


Sila lihat demo

Langkah 1:Pada New Blogger Dashboard---> Klik Drop Down Menu Untuk Blog Anda --->Pilih Template --> Bawah screenshot blog---> pilih "Edit Html" -->Kemudian pilih proceed.

 Langkah 2:Seterusnya,hanya perlu pastekan kod dibawah ini diatas/sebelum kod ]]></b:skin> 

/* Start Comment Style Code */ .comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px} .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left} .comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer} .comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none} .comments .comments-content .inline-thread{padding:0} .comments .comments-content .comment-thread{margin:8px 0} .comments .comments-content .comment-thread:empty{display:none} .comment-replies{margin-top:1em;margin-left:40px;background:#fff} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .comments .comments-content .comment:first-child{padding-top:16px} .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0} .comments .comments-content .comment-body{position:relative} .comments .comments-content .user{font-style:normal;font-weight:normal} .comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none} .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px} .comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none} .comment-content{margin:0 0 8px;padding:0 5px} .comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px} .comments .comments-content .owner-actions{position:absolute;right:0;top:0} .comments .comments-replybox{border:none;height:230px;width:100%} .comments .comment-replybox-thread{margin-top:0} .comments .comment-replybox-single{margin-top:5px;margin-left:48px} .comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center} .comments .thread-toggle{cursor:pointer;display:inline-block} .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed{display:none} .comments .thread-toggle{display:inline-block} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px} .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent} .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent} .avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important} .comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important} .comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px} @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}} /* End Comment Style Code *

19 April 2012

April 19, 2012 - No comments

Buat Expand Imej

Sila lihat demo
Cara Pemasangan

Login ke blogger dashboard-->Klik Design-->Edit HTML

Paste kod di bawah sebelum kod </head>
 
<script type='text/javascript'> //<![CDATA[ /* Expando Image Script 2008 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */ if (document.images){ (function(){ var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20; var expConIm = function(im){ im = im || window.event; if (!expConIm.r.test (im.className)) im = im.target || im.srcElement || null; if (!im || !expConIm.r.test (im.className)) return; var e = expConIm, widthHeight = function(dim){ return dim[0] * cos + dim[1] + 'px'; }, resize = function(){ cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2; im.style.width = widthHeight (e.ims[i].w); im.style.height = widthHeight (e.ims[i].h); if (e.ims[i].d && times > e.ims[i].jump){ ++e.ims[i].jump; e.ims[i].timer = setTimeout(resize, speed); } else if (!e.ims[i].d && e.ims[i].jump > 0){ --e.ims[i].jump; e.ims[i].timer = setTimeout(resize, speed); } }, d = document.images, i = d.length - 1; for (i; i > -1; --i) if(d[i] == im) break; i = i + im.src; if (!e.ims[i]){ im.title = ''; e.ims[i] = {im : new Image(), jump : 0}; e.ims[i].im.onload = function(){ e.ims[i].w = [e.ims[i].im.width - im.width, im.width]; e.ims[i].h = [e.ims[i].im.height - im.height, im.height]; e (im); }; e.ims[i].im.src = im.src; return; } if (e.ims[i].timer) clearTimeout(e.ims[i].timer); e.ims[i].d = !e.ims[i].d; resize (); }; expConIm.ims = {}; expConIm.r = new RegExp('\\bexpando\\b'); if (document.addEventListener){ document.addEventListener('mouseover', expConIm, false); document.addEventListener('mouseout', expConIm, false); } else if (document.attachEvent){ document.attachEvent('onmouseover', expConIm); document.attachEvent('onmouseout', expConIm); } })(); } //]]> </script> <style> img.expando{ margin:10px; vertical-align: top; } </style>
Untuk aktifkan expand image,guna kod ini:
<img border="0" src="URL imej" class="expando" width="100" />
Gantikan URL imej dgn url imej anda

07 April 2012

April 07, 2012 - No comments

Efek Padam Lampu

Sila lihat demo
Cara Pemasangan Login ke blogger dashboard-->Klik Design-->Edit HTML

 Paste kod di bawah sebelum kod </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#oscuridad").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#oscuridad").toggle(); if ($("#oscuridad").is(":hidden")) $(this).html("Tutup Lampu").removeClass("turnedOff"); else $(this).html("Padam Lampu").addClass("turnedOff"); }); }); //]]> </script>
Pastekan kod dibawah sebelum kod ]]></b:skin>
/* Apagar las luces ----------------------------------------------- */ #videoLuces { position:relative; z-index:102; } #apagador { max-width:640px; text-align:left; position:relative; height:25px; display:block; margin: 25px 0 0 60px; } .lightSwitcher { position:absolute; z-index:101; background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png); background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none; } .lightSwitcher:hover {text-decoration:underline;} .turnedOff { color:#ffff00 !important; background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png); } #oscuridad { background:#000; opacity:0.7; /* Opacidad de la pantalla */ filter:alpha(opacity=70); /* Opacidad de la pantalla */ position:absolute; left:0; top:0; width:100%; z-index:100; }
Pastekan kod dibawah sebelym kod </body>
<div id='oscuridad'/>
Save template

Akhir sekali,dimana korang nak letak video,sama ada komponen HTML/Javascript,guna kod ini:
<center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Tutup Lampu</a></div> <div id="videoLuces"> ...Letak kod video... </div> </center>