2013 | blog91919
Diberdayakan oleh Blogger.

Translate This Blog

cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3

Diposting oleh | | 7 komentar
Pada posting kali ini blog91919 akan membagikan artikel tentang cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3. Dengan menggunakan cara ini anda dapat dengan mudah mengganti tampilan asli label/tag pada blog anda hanya dengan menerapkan beberapa kode CSS dibawah ini kedalam label blog anda. Dan sekarang mari kita ikuti bagaimana caranya menambahkan kode CSS tersebut kedalam widget label blog anda.
Dan berikut ini adalah tutorialnya.
  1. Login ke account blogger Anda
  2. Klik rancangan = =>Edit HTML
  3. Download template anda terlebih dulu untuk berjaga-jaga jika nanti terjadi kesalahan
  4. Jangan lupa centang pada kotak kecil yang bertuliskan Expand Template Widget
  5. Setelah itu, cari kode  ]]></b:skin>  (tekan tombol ctrl+f untuk mempermudah pencarian)
  6. Kalau sudah ketemu maka masukkan kode berikut ini diatas/sebelum kode ]]></b:skin>
.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: 1; } .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; } #Label1 { height: 210px; } .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; }
Nah demikian itulah turialnya, semoga dapat bermanfaat bagi Anda semua bagi yang ingin mencoba mengeditnya. Terimakasih.

Cara Membuat/Menambahkan Nomor Komentar Pada Blogger Threaded Comment Untuk Blog

Diposting oleh | | 6 komentar
Pada kesempatan hari ini blog91919 akan berbagi tips tentang Cara Membuat/Menambahkan Nomor Pada Blogger Threaded Comment Untuk Blog Anda di dalam kolom/kotak komentar Blogger ( Cara ini hanya bekerja jika fitur balas komentar di blog Anda sudah aktif). Dengan  trik CSS ini Anda bisa menambahkan angka/nomor berurutan seperti ini, misal 1,2,3, dan seterusnya. Anda dapat melihat screenshot di bawah ini untuk lebih jelasnya.
Oke, sekarang kita lanjut ke topik utama.
1. Login ke akun blogger Anda
2. Masuk ke dashboard blogger
3. Klik rancangan lalu klik Edit HTML
4. Download Template Anda terlebih dahulu untuk berjaga-jaga jika nanti terjadi kesalahan
5. Beri centang/checklist pada kotak kecil yang bertuliskan Expand Template Widget
6. Gunakan tombol CTRL+F pada keyboard untuk mempermudah pencarian, kemudian cari kode ]]></b:skin>
7. Jika sudah ketemu, masukkan kode berikut ini tepat dibawah kode ]]></b:skin>
Klik buka untuk melihat kode:
.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left: 10px; padding-top: 3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabUBAKbvwwbAbrxht9wcQyudktMqVyIZBP2iOvyjGVCBq4I25kXtsY7IaRy2L64YYpa2A8G-JrUuaA149Qfy1EM1pfS_4g9LTKdVqV9SURFbc1tv7Sovl9UVMFzxd2UQ8xM2pQ7XEODO-/s1600/comment+bubble2.png) no-repeat; margin-top: 7px; margin-left: 10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }
8. Klik Save dan sekarang sudah selesai.
                                                                  KUSTOMISASI
  • Untuk mengedit posisi angka pada komentar ganti kode padding-top: 3px; dengan angka yang diinginkan
  • Untuk mengubah posisi gambar backgroud ganti kode padding-left: 10px; dengan angka yang diinginkan
  • Untuk mengedit gambar background ganti kode background: url(http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png)dengan url gambar milik anda, tapi dibawah ini saya bagikan beberapa gambar untuk backgroudnya dengan cara klik kanan pada gambar dibawah ini,kemudian klik copy image url dan ganti dengan gambar backgroud dibawah ini.

    how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                
    Sekian dulu dan terimakasih karena Anda sudah membaca artikel saya tentang Cara Membuat/Menambahkan Nomor Komentar Pada Blogger Threaded Comment Untuk Blog ini dan semoga bermanfaat buat Anda.

Cara Membuat Kotak Komentar Facebook dengan Blogger Berdampingan/Sejajar

Diposting oleh | | 9 komentar
Cara Membuat Komentar Facebook dan blogger Berdampingan/Sejajar

  • Login ke account blogger Anda
  • Lalu Klik rancangan lalu klik Edit HTML
  • Download template Anda terlebih dahulu untuk berjaga-jaga jika nanti terjadi kesalahan
  • Beri centang atau checklist pada kotak kecil yang bertuliskan Expand Template Widget
  • Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl+f untuk mempermudah pencarian)
  • Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>
.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}


Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.









  • Kemudian Anda cari kode </head>
    Jika sudah ketemu, masukkan kode berikut ini tepat diatas kode </head>


  • <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
        <script src='http://code.jquery.com/jquery-latest.js'/>
        <meta content='ID FB Anda disini' property='fb:admins'/>
        <script type='text/javascript'>
        function commentToggle(selectTab) {
        $(".comments-tab").addClass("inactive-select-tab");
        $(selectTab).removeClass("inactive-select-tab");
        $(".comments-page").hide();
        $(selectTab + "-page").show();
        }
        </script>


      Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890
    • Kemudian cari kode  <div class='comments' id='comments'>

      Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
        <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
        <fb:comments-count expr:href='data:post.url'/> Comments
        </div>
        <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
        <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
        </div><div class='clear'/>
        </div>
        <div class='comments-page' id='fb-comments-page'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='fb-root'/>
        <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
        </b:if>
        </div>
        <div class='comments comments-page' id='blogger-comments-page'>




      NB: Pada penempatan kode yang ke dua Anda hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.

      Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi.

      Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.
    • Kemudian klik save, dan lihat hasilnya.
     
    Support : Creating Website | Johny Template | Mas Template
    Copyright © 2011. blog91919 - All Rights Reserved
    Template Modify by Creating Website
    Proudly powered by Blogger