Berbagi Inspirasi Seputar Dunia Blogger: blogger tips

Ini bukan inspirasi blog watono, tapi kutipan dari http://artistutorial.blogspot.com. info ini adalah tentang bagaimana membuat tampilan komentar blogspot seperti tampilan komentar di wordpress.

Jika sobat tertarik untuk mencoba mengubah tampilan kolom komentar anda, silahkan ikuti triknya berikut ini :

Login ke Blogger anda
Klik "design" / rancangan".
centang "expand widget templates"
cari kode ]]></b:skin>, kemudian letakkan code css berikut diatas kode ]]></b:skin>

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBxskc8od-Df520cQO9DrsJidAVZG7cgyi0Ny3J32Gi1lle1tVoeHGpiY4C8P3L7x4dVJvHegg5GTvgViO8QY5YoWMSQz7DDFeHyxAF6jAzpu26sEPfld56RTeTKGu_TsuSshFBiCHBA/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

Letakan code berikut diatas code </body>

cari kode berikut <b:includable id='comments' var='post'> atau begini :

<b:includable id='comments' var='post'>

Kode yang harus diganti...

</b:includable>

kumpulan kode diantara code diatas (tempatnya ditulisan Kode yang harus diganti..) silahkan anda ganti dengan kode berikut ini :

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'></div>

<div class='cm_pagenavi' id='cm_page'></div>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=154513103004606848&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>

<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>

<div class='cm_pagenavi' id='cm_page_copy'></div>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</b:if>
</div>

ganti yang warna merah dengan ID blog anda!.
selesai. .....(saduran dari Iqbal)

Read Post | komentar (1)

Hello all blogger.... !!
Lama gak nongol buat berbagi inspirasi tentang blogger, hari ini saya kembali lagi menuliskan sesuatu yang masih berkaitan dengan widget / gadget atau kolom yang dibikin miring. Dalam tulisan terdahulu mengenai bagaimana membuat gadget profile menjadi miring, sekarang dalam tulisan ini saya akan memberikan tips bagaimana membuat kolom dibawah header menjadi miring. contohnya ya seperti blog milik saya ini, dimana kolom pencarian dan kolom follower yang dibuat miring dan ditambahkan background yang dapat di ganti sesuai selera.

Untuk kode script HTML dan CSS-nya adalah resmi milik css-trick.com yang saya copy kemudian dimodifikasi sedemikian rupa sehingga seperti kolom dibawah header menjadi miring milik saya ini.

Oke, kita lanjut ke proses kerjanya :
Langkah awal, masuk ke editor HTML blog sobat, kemudian cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat sebelum kode diatas tadi :

.inner-border {
background: url(ISI DENGAN URL GAMBAR MILIK ANDA);
color: #fff;
margin: 15px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: inline;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}

ini adalah kode dari css-trick.com yang telah di modifikasi sedikit. Jangan lupa untuk mengganti tulisan yang berwarna merah diatas dengan background milik anda.
kemudian tambahkan script code miring dibawah ini tepat dibawah kode dari css-trick.com tadi

-moz-border-radius-topright: 90px 60px;
-moz-border-radius-bottomleft: 90px 60px;
border-bottom-left-radius:60px 60px;
border-top-right-radius: 90px 60px;
-webkit-box-shadow: -21px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);

Langkah berikutnya adalah dengan menjepitkan kode berikut ini pada script code kolom dibawah header milik anda

DISINI ADALAH KUMPULAN SCRIPT CODE KOLOM DIBAWAH HEADER MILIK ANDA

</div>

Simpan hasil edit HTML ini dengan mengklik Simpan, kemudian lihat hasilnya.
Itulah cara mudah dan gak neko-neko tentang bagaimana membuat miring kolom di blog anda dengan tambahan background.....
any question, silahkan tinggalkan di kolom komentar!.

Read Post | komentar (1)

Berbagi Inspirasi Seputar Dunia Blogger

About Me

Dilihat Pengunjung

Popular Posts

How To Copy Image without Saving in Image File Hosting ?

Membuat Effect 3-D di Sidebar (Classic 3-D version Watonoe)

Wordpress Comment On Blogspot

Membuat Kolom Dibawah Header Menjadi Miring

Backlink Artikel blog via Only Wire

Chat Here

Berbagi Inspirasi Seputar Dunia Blogger

About Me

Dilihat Pengunjung

Popular Posts

How To Copy Image without Saving in Image File Hosting ?

document.write(ultimaFecha);

Membuat Effect 3-D di Sidebar (Classic 3-D version Watonoe)

document.write(ultimaFecha);

Wordpress Comment On Blogspot

document.write(ultimaFecha);

Membuat Kolom Dibawah Header Menjadi Miring

document.write(ultimaFecha);

Backlink Artikel blog via Only Wire

document.write(ultimaFecha);

Chat Here