Style Komentar Threaded

Posted by Aulia Syarif Posted on 20.51 with No comments
Baru kemarin kami berbagi tutorial dan berbagi informasi pada fitur Blogger paling ditunggu-tunggu yaitu sistem komentar threaded (Nested). Hampir 75% dari pengguna blogger lebih suka menggunakan template tidak rasmi dan karena fitur ini tidak bisa begitu saja dilawan, oleh karena itu kita perlu beberapa waktu untuk mengeditnya dengan aman dan menerapkan semua kode yang dibutuhkan untuk membuat fitur ini berfungsi dengan benar. Tutorial di bawah ini adalah cara termudah untuk menambah gaya komentar threaded ke blog blogger Anda. Berikut Screnshot komentar threaded yang akan kita rubah menjadi seperti ini

Screnshot di ambil dari blog DonorIlmu
  1. Login di Blogger.com pergi ke Design/Rancangan > Edit HTML Backup template anda terlebih dahulu selanjutnya Klik "Expand Widget Templates"
  2. Template Anda akan mencakup kode CSS berikut secara otomatis yang dimasukkan oleh blogger. 
    <b:includable id='threaded_comment_css'>
      <style>
    .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;
    }
    .comments .comments-content {
      font-size: 13px;
      margin-bottom: 16px;
    }
    .comments .comment .comment-actions a {
      padding-top: 5px;
      padding-right: 5px;
    }
    .comments .comment .comment-actions a:hover {
      text-decoration: underline;
    }
    .comments .comments-content .comment-thread ol {
      list-style-type: none;
      padding: 0;
      text-align: left;
    }
    .comments .comments-content .inline-thread {
      padding: 0.5em 1em;
    }
    .comments .comments-content .comment-thread {
      margin: 8px 0px;
    }
    .comments .comments-content .comment-thread:empty {
      display: none;
    }
    .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 36px;
    }
    .comments .comments-content .comment {
      margin-bottom:16px;
      padding-bottom:8px;
    }
    .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:bold;
    }
    .comments .comments-content .icon.blog-author {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin: 0 0 -4px 6px;
    }
    .comments .comments-content .datetime {
      margin-left:6px;
    }
    .comments .comments-content .comment-header,
    .comments .comments-content .comment-content {
      margin:0 0 8px;
    }
    .comments .comments-content .comment-content {
      text-align:justify;
    }
    .comments .comments-content .owner-actions {
      position:absolute;
      right:0;
      top:0;
    }
    .comments .comments-replybox {
      border: none;
      height: 250px;
      width: 100%;
    }
    .comments .comment-replybox-single {
      margin-top: 5px;
      margin-left: 48px;
    }
    .comments .comment-replybox-thread {
      margin-top: 5px;
    }
    .comments .comments-content .loadmore a {
      display: block;
      padding: 10px 16px;
      text-align: center;
    }
    .comments .thread-toggle {
      cursor: pointer;
      display: inline-block;
    }
    .comments .continue {
      cursor: pointer;
    }
    .comments .continue a {
      display: block;
      padding: 0.5em;
      font-weight: bold;
    }
    .comments .comments-content .loadmore {
      cursor: pointer;
      max-height: 3em;
      margin-top: 3em;
    }
    .comments .comments-content .loadmore.loaded {
      max-height: 0px;
      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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow {
      background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
    }
    .comments .avatar-image-container {
      float: left;
      width: 36px;
      max-height: 36px;
      overflow: hidden;
    }
    .comments .avatar-image-container img {
      width: 36px;
    }
    .comments .comment-block {
      margin-left: 48px;
      position: relative;
    }

    /* Responsive styles. */
    @media screen and (max-device-width: 480px) {
      .comments .comments-content .comment-replies {
        margin-left: 0;
      }
    }
      </style>
    </b:includable>
    Nah kode tersebutlah yang akan kita ganti dengan kode berikut
  3. Jika anda tidak menemukan kode CSS tersebut maka anda bisa menambahkan kode css berikut yang akan di letakan di bawah ]]></b:skin>
  4. Langkah terakhir klik Save Template
Read more »
Label: , , , , ,

Bungkus Sepenuhnya Script CSS

Posted by Aulia Syarif Posted on 19.06 with No comments
Kompres CSS
Terkejut saya saat open source di sebuah blog dengan platfrom dari blogger. Script CSS nya menghilang? Awala pertama memang sedikit bingung, mungkin kalau di teliti lagi sebenarnya tidak menghilang melainkan diringkas menjadi sebuah link yang ber file (dotCSS) yang akan di pangill dalam sebuah HTML. Seperti di blog saya ini script CSSnya tidak keluar, melainkan saya buat pemangilan link file CSS dalam sebuah HTML.Jika anda ingin membuat pemangilan file CSS ini dalam template anda, Saya sarankan agar anda memback up template anda terlebih dahulu.
  1. Login ke Blogger.com Pergi ke Rancangan/Template > Edit HTML 
  2. Potong (Cut) script CSS diantara tengah-tengah kode berikut
    <b:skin><![CDATA[ script css (cut) ]]></b:skin> 
  3. Paste script tersebut dalam sebuah notpad dan simpan dengan nama style.css (selain nama style juga tidak apa-apa asalkan ada .css)
  4. Upload file style.css tersebut dalam sebuah hosting. Jika anda tidak mempunyai sebuah hosting anda bisa mengunakan Google Sites sebagai hosting anda. klik berikut untuk cara Membuat Hosting Dari Google Site
  5. Setelah anda upload tahap selanjutnya membuat script pemanggil, masi pada halaman Edit HTML
    anda ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode dibawah ini
    <link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:skin><![CDATA[ ]]></b:skin>
    </b:if>
    Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.
  6. Terakir klik Save Template dan lihat pada blog anda apakah script CSSnya sudah menghilang pada open source.

Bagi anda yang mempunyai 2 atau lebih script CSS yang berbeda dan hanya berfungsi pada saat di halaman tertentu MISALNYA seperti kode di bawah ini yang berfungsi hanya di halaman post
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style  type='text/css'>
SCRIPT CSS (cut)
</style>
</b:if>
Cara membungkusnya cukup sederhana ikuti langkah 1-4 dan setelah selesai proses 1-4 sampai proses upload anda ganti kode
<style  type='text/css'>
</style>
Dengan kode
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
Sehinga menjadi seperti ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
</b:if>
Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.
Read more »
Label: , ,