2. Modifikasi CSS Artikel

Ditulis oleh: -
Waduh mas gimana sih homepagenya sih udah jadi tapi kok artikelnya berantakan! Santai aja, kali ini kita akan bahas di artikel khusus ini. Yang akan terjadi jika anda hanya mengikuti tutorial sampai 1.3 CSS artikel tidak akan terlihat indah, karena pada default element .post berukuran 46%.

Pada saat ini masalah hanya ada pada di artikel, berarti akan berkaitan dengan tag conditional blog. Silahkan cari sendiri di google tentang macam-macam tag conditional.

Karena hanya pada artikel kita akan menggunakan tag <b:if cond='data:blog.pageType == &quot;item&quot;'>

Jadi untuk masalah ini, kita hanya akan membuat kode berikut tepat di bawah ]]></b:skin>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.post{margin-right: 10px;
width:100%;
overflow: hidden;
text-align: justify;
border: 0px solid #fff;
background: #fff;
padding: 0px;
float: right;
}
</style>
</b:if>
CSS Komentar nya akan saya berikan yang sudah jadi seperti blog tumpas

Berikan CSS berikut tepat di atas */ ]]></b:skin>
#comments.comments{padding:5px;}
#comments-block{line-height:1.4em;margin:8px 0;color:#999}
#comments-block .comment-author a:hover{color:#cc3a1e}
#comments-block .comment-author{background:#333;font-weight:normal;margin:8px 0 0 0;padding:4px;border-top:1px solid #aaa;border-right:1px solid #aaa;border-left:1px solid #aaa}
#comments-block .comment-body{background:rgb(40, 43, 48);margin:0;padding-top:4px;padding-right:1.8%;padding-bottom:4px;padding-left:1.8%;border-right:1px solid #aaa;border-left:1px solid #aaa}
#comments-block .comment-footer{background:#333;font-size:.8em;line-height:1.4em;margin:0;padding:4px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-left:1px solid #aaa;text-transform:none}
#comments .blogger-comment-icon{-moz-background-inline-policy:continuous;background:none repeat scroll 0 0 #333;border-color:#aaa;border-style:solid;border-width:1px;line-height:1em;padding:0}
.status-msg-hidden{display:none;}
.comment-form{margin:0;padding:0}
.deleted-comment{font-style:italic}
.comments h4{border: 1px solid #BABABA;
background: #eee;
border-radius: 5px;
padding: 5px 10px;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
border: 1px solid #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
.comments{clear: both;
box-shadow: 1px 1px 5px rgba(1,1,1,.1);
background: rgba(245, 245, 245, 0);
position: relative;
border: 1px solid rgba(0, 0, 0, 0.26);
overflow: hidden;
margin: 10px 0;}
.comments .comments-content{font-size:13px;margin-bottom:8px;color:#999;font-family:Arial, verdana, sans-serif;}
.comments .comment .comment-actions a{box-shadow: 2px 2px 5px rgba(1,1,1,.1);
background: rgba(83, 83, 83, 0.53);
position: relative;
border: 1px solid #fff;
color: #fff;
margin-right: 10px;
padding: 3px 8px;}
.comments .comment .comment-actions a:hover{background:rgba(83, 83, 83, 0.53);}
.comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;margin:8px 0;padding:0}
.comments .comments-content .inline-thread{padding:0;margin:0}
.comments .comments-content .comment-thread{margin:0;padding:0}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comments-content .comment-replies{margin-top:8px;margin-left:44px}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:first-child{padding:0;margin:0}
.comments .comments-content .comment:last-child{padding:0;margin:0}
.comments .comments-content .user{font-style:normal;font-weight:bold}
.comments .comments-content .icon.blog-author{background:url(http://2.bp.blogspot.com/-fGqHghV17sw/TyIzFNGl_uI/AAAAAAAAAQY/XpDDAI1dJ3o/s320/author.png);width:16px;height:16px;display:inline-block;margin:0 0 -2px 6px}
.comments .comments-content .datetime{text-align:right;margin-left:6px}
.comments .comments-content .comment-header{margin:0;padding:0px;}
.comments .comments-content .comment-content{background: #fff;
color: #000;
margin: 0 0 8px;
border-bottom: 1px solid #BABABA;
border-left: 1px solid #BABABA;
border-top: 1px solid #BABABA;
font-style: normal;
line-height: 1.5em;
margin-right: -10px;
margin-top: 10px;
position: relative;
-o-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
padding: 10px;}
.comments .comments-content .owner-actions{border:#ccc solid 1px}
.comments .comments-replybox{height:250px;max-width:100%}
.comments .comment-replybox-single{padding:0;margin:8px 0;margin-left:44px}
.comments .comment-replybox-thread{margin:8px 0 0 0;padding:0}
.comments .comments-content .loadmore a{padding:6px 10px;text-align:center}
.comments .thread-toggle{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;rgb(40, 43, 48) ;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.07) inset;cursor:pointer;padding:2px 4px;margin:0;display:block;}
.comments .continue{cursor:pointer}
.comments .continue a{box-shadow: 2px 2px 5px rgba(1,1,1,.1);
background: #f1f1f1;
position: relative;
text-align: center;
margin: 0;
color: #666;
border: 1px solid #fff;
padding: 4px 8px;
display: block;}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:8px}
.comments .comments-content .loadmore.loaded{max-height:13px;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:.3em;padding-right:4px}
.comments .avatar-image-container{box-shadow: 1px 1px 5px rgba(1,1,1,.1);
float: left;
overflow: hidden;
border:1px solid rgba(0, 0, 0, 0.26);
padding: 4px;
max-height: 36px;
width: 36px;}
.tinynav2{display:none;width:100%;margin:0 auto;border-radius:0px;padding:5px 8px;background-color:#393939;color:#eee;font-weight:bold;cursor:pointer;outline:none;}.tinynav1{border-radius:3px;background:#f8f8f8;display:none;width:150px;margin:4px 20px 4px 0px;padding:3px 5px;float:right;border:1px solid #d3d3d3;outline:none;}
.blog-pager-newer-link{float:left;}
.blog-pager-older-link{float:right;}
.comments .avatar-image-container img{width:36px;-webkit-filter: grayscale(1);-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}
.comments .avatar-image-container img:hover{-webkit-filter: grayscale(0%);}
#comment-holder a{color:#fff;}
.comments .comment-block{border: 1px solid #BABABA;
background: #3384cc;
background: linear-gradient(top, #3384cc , #2a79bf);
background: -webkit-linear-gradient(top, #3384cc , #2a79bf);
background: -moz-linear-gradient(top, #3384cc , #2a79bf);
background: -o-linear-gradient(top, #3384cc , #2a79bf);
padding: 5px 10px;
border-radius: 0px;
margin-left:48px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}


Simpan dan Cek perubahan yang terjadi. Selamat anda telah membuat template sendiri tanpa responsive. Silahkan tunggu beberapa saat lagi untuk artikel membuat responsive.

6komentar: