Followers

11 November 2012

November 11, 2012 - No comments

5jenis gaya threaded comment

Ini adalah untuk ubah gaya threaded comment yang terdapat pada blog anda:


Cara pemasangan

1. Log in ke dashboard-->layout--> Edit HTML

2. Tekan "Ctrl+F" dan cari kod ]]></b:skin>

3. Sebelum/diatas kod ]]></b:skin> paste satu dari mana mana kod pilihan dibawah ni:

Snapshot Threaded Comment 1


Kod
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Snapshot Threaded Comment 2


Kod
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:460px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: white url(http://3.bp.blogspot.com/-UWrv65VFdEI/T0-ZPhajVyI/AAAAAAAAC2I/LdHCRWRXS6g/s1600/light-grid.png);left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 390px;font-family:arial;font-size:10px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background: url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);}

Snapshot Threaded Comment 3


Kod
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: transparent;position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:0px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: transparent ;left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:41px !important;height:40px !important;background: silver;padding: 2px;border-radius:5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;width:42px !important;height:43px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comments .comments-content .datetime {position: relative;right: 0px;top:-15px;font-family:arial;font-size:15px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background:transparent;}

Snapshot Threaded Comment 4


Kod
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:10px;background: url(http://2.bp.blogspot.com/-dw-hSAwxrn0/T0-fYPssihI/AAAAAAAAC2g/_TQ8-9FHeBc/s1600/dashed-single.png) no-repeat 4.3em center;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comment-actions:before {content:"\21AA";}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: white;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .comment-block {padding: 11px !important;}
.comment-thread ol div.continue {display:none !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: silver;padding: 2px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:43px !important;width:42px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .datetime {position: relative;right: 5px;top: 5px;font-family: arial;font-size: 15px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comment-actions.secondary-text {width:400px !important;}

Snapshot Threaded Comment 5


Kod
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: #F8F8F8;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: white;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}

Selesai buat pilihan,klik save template dan lihat hasilnya.

November 11, 2012 - 1 comment

Produk Inspirasi Zombie

1.Selipar Plush Zombie

Sliper terlebih saiz yang berupa kepala zombie
Biarkan ia menjamah kaki korang semasa korang berjalan
Rekaan yang lembut dan selesa


2.Zombie Taman

Replika damar taman bersaiz sebenar
Sangat terperinci dan menyeramkan
31.5 19.5 8 inci


3.Jar Biskut Kepala Zombie

Jar biskut seramik
Buka atas kepala zombie untuk ambil biskut
Mungkin boleh menakutkan anak korang dari ammbil biskut.
Dimensi :Lebih kurang 9" tinggi,7" lebar


4.Penghadang pintu zombie

Kelihatan seperti zombie yang merangkak,tersepit kat pintu
Boleh digunakan pada setiap jenis lantai
Buatan tangan
Bahan: damar urethane dengan getah berketebalan 1/8 " untuk cengkaman yang kuat


5.Pembuka Botol Zombie

Buatan tangan
Bahan: damar urethane dan besi keluli yang teguh
Unik

6.Penggaru Belakang Zombie

Penggaru belakang badan yang kelihatan seperti tangan zombie.Zombie yang baik hati akan meminjamkan tangan mereka kepada orang yang memerlukan.


7.Pemegang Pensel Zombie

6 lubang pada kepala untuk memegang pensel dan pen
Celah belakang leher adalah untuk surat dan kertas
Soket mata bermagnet
Lidah boleh alih berfungsi sebagai bekas untuk barang kecil atau kad bisnes


November 11, 2012 - No comments

CSS Gambar Vintage

Snapshot:


Cara pemasangan

1. Log in ke dashboard--> layout- -> Edit HTML

2. Tekan "Ctrl+F" dan cari kod ]]></b:skin>

3. Sebelum ]]></b:skin> paste kod ni:

/* Vintage Image
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Change by right if you want the images to be aligned to the right */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* red */
background-image:url(http://lh4.googleusercontent.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s000/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

4.Save template.

5.Seterusnya,gunakan kod ini didalam pos jika mahu efek ini pada gambar pilihan

<div class="vintage">
<img border="0" src="URL imej" /></div>
<div style="clear: both;"/>


November 11, 2012 - No comments

Efek Pudar Pada Loading Page

Demo pada blog ini


Gambar hanya sekadar hiasan

Cara pemasangan

1. Log in ke dashboard--> layout- -> Edit HTML

2. Tekan "Ctrl+F" dan cari kod <head>

3. Sebelum <head> paste kod ni:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #f2f2f2; /* Fading Colour */
}
</style>

4.Save template.Sekarang cuba klik pada tajuk pos atau pada nama blog untuk melihat efek pudar.

PERHATIAN!!:Jika inginkan fade effect hanya pada pos dan bukannya sekali pada nama blog/laman utama,gantikan kod

$("a").click(function(event){

kepada

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){