Dua Modifikasi Threaded Comments Menarik Dan Keren

Tutorial kali ini, insyaAllah saya akan kembali membagikan kode CSS untuk dua modifikasi threaded comment blogger. Modifikasi berikut terhitung sebagai versi ke-3 dan ke-4 threaded comment yang pernah saya posting diblog ini, karena sebelumnya saya sudah pernah membagikan dua modifikasi yang berbeda.

Saya sematkan kata menarik dan keren pada modifikasi threaded comment kali ini bukan tak beralasan, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan berlaku bagi anda pecinta warna. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS border.

Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:

Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini

Cara menambahkan kode CSS modifikasi threaded comment

• Setelah login ke akun blogger anda
• Pada dasbor klik Template --> edit HTML
• Klikk Ctrl+F dan cari kode ]]></b:skin>
• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

Kode CSS Threaded Comment Menarik Versi 3

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Kode CSS Threaded Comment Keren Versi 4

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Untuk demo bisa lihat pada blog personal saya disini. Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.

Source Style CSS Tab Menu Social Media, bag.2

Setelah sebelumnya, sudah siap di download Tab Social Menu bagian pertama : Source CSS Tab Menu Sosial Media.

Sekarang bagian kedua Source Style CSS/HTML Tab Menu Sosial Media. Tab menu untuk meletakkan link media sosial Anda seperti Facebook, Twitter, Google plus, YouTube dan RSS Feed.

Cara menggunakannya, cukup di download pada link yang sudah di sediakan di bawah, lalu buka file dengan text editor Anda. Kemudian pada bagian HTML

<a href="#" target="_blank" style="width:58px;height:23px;line-height:23px;">

Ganti # dengan url profil Media Sosial Anda pada tiap link a

Silahkan langsung di pasangkan di tambah gadget --- HTML/Javascript blogspot Anda dan simpan.

4. Tab Menu Sosial Media 4   ( Lihat Demo | Download Semua File )

5. Tab Menu Sosial Media 5   ( Lihat Demo | Download Semua File )

6. Tab Menu Sosial Media 6   ( Lihat Demo | Download Semua File )

7. Tab Menu Sosial Media 7   ( Lihat Demo | Download Semua File )

Jika ada kesulitan silahkan jangan malu tuk bertanya??

Oke, Enjoy... have a nice day, salam...

Modifikasi Tampilan Widget Label Blogger Style 2

Melanjutkan postingan terakhir saya tentang modifikasi widget label blogger, InsyaAllah tutorial kali ini saya akan menyajikan style berbeda dari widget label blogger dengan bantuan CSS3. Widget label blogger ini menggunakan penyeleksi extensively & cunningly untuk memanipulasi bentuk dengan CSS3 transform. Sedangkan gradien CSS3 digunakan sebagai background. Widget ini awalnya didesain oleh Jakob Cosoroaba, dan tutorial ini mencoba untuk mengkonversikannya agar dapat berfungsi untuk blogger.

Sebelum anda memodifikasi tampilan widget blogger ini, diblog anda harus sudah terpasang widget label dalam tampilan cloud dengan jumlah entri perlabel.

Baiklah berikut langkah-langkah modifikasi widget label blogger style 2.

1. Seperti biasa log ini ke akun anda

2. Pada dasbor klik template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatas kode tadi:

.label-size{
display: inline-block;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
}
.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}
.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}
.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}
.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}
#Label1 {height:210px !important;}

4. Simpan template dan lihat hasilnya pada blog anda!

Demikian tutorial modifikasi tampilan widget label style 2. Jangan lupa cek out modifikasi tampilan widget label blog style 1. Semoga bermanfaat!

Modifikasi Tampilan Widget Label Blogger

Memasang widget label adalah cara yang bagus untuk mengatur konten blog anda. Membuat pengelompokan postingan menjadi lebih mudah dan membuat blog anda terlihat lebih sistematis. Widget label default blogger memang memiliki beberapa modifikasi tapi tidak banyak memberikan pengaruh pada aspek desain.

Pada kesempatan kali ini, insyaAllah saya ingin berbagi desain bertenaga CSS3 untuk memodifikasi tampilan widget label blogger sehingga akan lebih terlihat menakjubkan.

Sebelum anda memulai pastikan bahwa pada blog anda telah terinstal widget label dengan tampilan cloud.

Baiklah tertarik ingin mencoba modifikasi tampilan widget label seperti pada screen shoot disamping? Silahkan ikuti langkah-langkah berikut:

1. Seperti biasa log ini ke akun anda

2. Pada dasbor klik template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatas kode tadi:

<span style="font-size: 15px;">.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;
color:#996633;
text-shadow:0px 1px 0px rgba(255,255,255,.4);
padding:0.417em 0.417em 0.417em 0.917em;
border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index:100;
}
.label-size:before {
content:'';
width:1.30em;
height:1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position:absolute;
left:-0.69em;
top:.2em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;
z-index:1;
}
.label-size:after {
content:'';
width:0.5em;
height:0.5em;
background:#fff;
-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;
border:1px solid #d99d38;
-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;
position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}
#Label1 {height:210px !important;}
</span>

4. Simpan template dan lihat hasilnya pada blog anda!

Demikian tutorial modifikasi tampilan widget label blog. Semoga bermanfaat!

Gratis, Source CSS Tab Menu Sosial Media

Sebenarnya, posting ini nggak di rencanai'in. Ceritanya begini : Waktu itu internet saya bermasalah "nggak mau nyambung", setting sini setting sana, nggak bisa-bisa.

Akhirnya dari pada, suntuk ya khan, kutak katik bikin tab menu pakai CSS3 Menu 3.3  terus gambar-gambar iconnya searching di findicon sama iconfinder.

Wah jadi dech! tab menu sosial media seperti twitter, facebook, google+ (plus) dan rss feed. Dari pada sayang nggak ke-pakai di lelang aja Gratisan, mudah-mudahan bisa berguna buat yang butuh.

Hmmm, memang ada saja cara memanfaatkan waktu, bisa supaya terisi. Sekarang internet dah beres posting dah masuk ke blogger, well enjoy.

<a href="#" target="_blank" style="width:182px;height:31px;line-height:31px;">

Sesuaikan URL sosial media kamu di kode HTML nya rubah kode # dan ganti dengan URL sosial Media Anda!

Nah berikut kode CSS dan HTML tab menu yang lainnya :

1. Tab Menu Sosial Media 1    ( lihat Demo | Download Semua File )

2. Tab Menu Sosial Media 2    ( Lihat Demo | Download Semua File )

3. Tab Menu Sosial Media 3    ( Lihat Demo | Download Semua File )

Seep, gimana?? silahkan di pilih mana yang di sukai, masih ada empat lagi tab menu sosial nerwork medianya, Lihat juga kelanjutanya di Tab Menu Social Bagian ke dua

salam....

Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2

Tutorial kali ini sebagaimana janji saya pada postingan Mengaktifkan Threaded Comments Pada Custom Templates Blogger, bahwa saya juga akan mengetengahkan cara memodifikasi tampilan threaded comments blogger baik modifikasi atau custumize threaded comments yang ada menggunakan penambahan atau edit CSS atau dengan penambahan script.

Mengapa kita perlu memodifikasi tampilan threaded comment yang ada karena tampilan defaulth threaded comments blogger sangat simple seperti image berikut:

 

Maka kali ini dengan sedikit penambahan CSS kita akan merubah tampilan diatas. Ikutilah langkah-langkah berikut:

Modifikasi Threaded Comment Blogger Versi Pertama

• Setelah login ke akun anda, pada sdasbor klik menu template >> edit HTML
• Sekarang cari kode ]]></b:skin> (Gunakan control F untuk memudahkan pencarian)
• Tambahkan semua kode kode CSS berikut diatas kode ]]></b:skin>

Untuk menambahkan border pada kolom komentar tambahkan CSS berikut:

.comment-block {border:1px solid #666;border-radius:8px;padding: 3px;}

Modifikasi reply comments tambahkan CSS berikut:

.comment-actions {

margin-right: -2px;

margin-top: -15px;

font-size: 10px;

text-transform: uppercase;

float: right;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.comment-actions:hover {

background: black;

color: white;

}

Sekarang modifikasi image avatar komentator tambahkan CSS berikut:

.avatar-image-container img{border-radius:20px;background: url("http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/apps/personal.png") no-repeat scroll center center;

}

Sekarang reply button dibawah post komentar tambahkan CSS berikut:

.continue{

width: 45px;

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.continue:hover {

background: black;

color: white;

}

Terakhir modifikasi dropdown reply comments tambahkan CSS berikut:

.thread-count{

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.thread-count:hover {

background: black;

color: white;

}

Sekarang setelah mengikuti semua langkah-langkah diatas, tampilan threaded comments anda akan seperti image berikut:

Modifikasi Threaded Comments Blogger Versi kedua

• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

/*=== Threaded Comments ===*/
.comments .comments-content .icon.blog-author {
background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
background-repeat: no-repeat;
width:38px;
height:20px;
}
.comments .comments-content .loadmore a {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 2px;
}
.comments .continue {
margin-top:2px;
border-top: 2px solid silver;
}
.comments .comments-content .datetime a{
float: right;
font-size:10px;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#FAFAFA url(url comment) top repeat-x;
margin:5px auto 0;
padding:5px 5px;
border:1px solid silver;
}
.comment-actions a {
padding:2px 5px;
margin-right:10px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
font: 11px sans-serif;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
background: #EDEDED;
background: linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
}
.comment-actions a:hover {
text-decoration: none !important;
background: #CCC;
background: linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
}
.comments .avatar-image-container {
margin-left:0px;
}
Catatan:

• Selanjutnya untuk membuat tampilan avatarnya menarik, tambahkan CSS berikut di bawah CSS tadi :

/*=== BOX Avatar dan Blank Avatar ===*/
.avatar-image-container {
box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
-webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
}
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFbdsM664Y2bbj4ObnTGCP_MWmyI-E2iKAj34GoQOmUBciOhQcDIFm5JRLYH_8XTt-q7ln5Je53IJJD8wWEEqkIvdKo0TONFrEXcpbaqw0qswPM5cxd9S7DlKTjjVGt0Bf9wPna3DF6k/s1600/blog-anonim.png);
width:35px; height:35px; border:none;
}
.avatar-image-container img:hover {
transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg);
transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s;
}

• Simpan pekerjaan anda. Maka hasilnya tampilan threaded comments blogger versi kedua ini seperti image berikut;

Demikian tutorial memodifikasi threaded comments blogger versi 1 dan 2. InsyaAllah pada kesempatan lain akan saya posting cara memodifikasi threaded comments blogger dengan penambahan script. Semoga bermanfaat!

Merubah Posisi Sidebar & Main Pada Template Blogger

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Dari gambar diatas kita bisa melihat posisi sidebar berada disebelah kanan, sedangkan kolom utama disebelah kiri. Untuk merubah posisi sidebar dan main menjadi sebaliknya seperti gambar dibawah ini, mudah saja silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Cari kode berikut:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

3. Yang perlu diperhatikan hanya tulisan yang berwarna merah, silahkan ganti dengan kode berikut:

#main-wrapper {
  width: 410px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

4. Simpan template. Silahkan lihat hasilnya pada bagian elemen halaman.

InsyaAllah postingan berikutnya saya akan mengetengahkan trik CSS dan HTML lainnya, yaitu cara menambahkan 4 kolom/ elemen halaman baru diatas footer.

Membuat Effect Hover Pada Image Dengan CSS

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

3. Simpan Template

Sedikit penjelasan dari kode CSS diatas, untuk membuat effect buram atau hover pada image kode yang kita tambahkan adalah "hovereffect" sedangkan "opacity", "filter:" alpha, "-moz-opacity" dan "-khtml-opacity" adalah digunakan untuk membuat effect hover terbaca pada beberapa browser. Seperti:

Properti "opacity" digunakan untuk browser yang mendukung standar CSS3 (sebagian besar browser modern mendukung CSS3).
Sementara "filter: alpha" adalah untuk Internet Explorer,
"-Moz-opacity" adalah untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
"-Khtml-opacity" adalah untuk Safari dan Chrome untuk kompatibilitas ke belakang.
"0.5" dan "1.0" digunakan untuk memberitahu browser kuantitas kegelapan.

Sekarang untuk menambahkan effect ini, sobat harus menambahkan class = "hovereffect" untuk image sobat.

Sebagai contoh biasanya ketika kita menambahkan image kodenya sebagai berikut:

<a href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:

<a class="hovereffect" href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress.

Lihat juga cara membuat hover pada link disini

 

Membagi Header Menjadi Dua Kolom

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:

Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Ganti semua kode diatas dengan kode berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px; 
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

<div id='header-wrapper'>
<div id='header-one'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa  screenshoot  diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini

Mudah saja, berikut langkah langkah membuat background pada titel posts:

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

• kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

• Sehingga keselurahannya menjadi seperti ini:

.post h3 {
  background: url(alamat image anda)repeat-x;
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

• Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul postingan dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

background: #5FB404;

Untuk melihat macam macam kode warna klik disini 

Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
 






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

• Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

.sidebar h2 {

• Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

• Isi tulisan berwarna merah diatas dengan alamat gambar anda
• Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
• Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

• Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!

Untuk mengedit warna font anda bisa lihat kode warna disini

• Simpan template!

Semoga bermanfaat!

Cara Membuat Link Memiliki Ragam Efek Menarik

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:

• Loggin ke blogger
• Klick layout atau tata letak
• Edit HTML
• Cari code berikut:

hover

• Untuk memudahkan tekan ctrl+F, hasilnya akan banyak.
• Setelah ketemu tambahkan code berikut sejajar pada setiap code tadi.

{ color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }

• Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
• Jangan lupa save, simpan template!

Kalau ingin linknya berkedip warna pelangi lihat disini

Membuat Efek Stabilo/ Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini: 
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

<span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini