Wayan Susandiarta: Januari 2014

29 Jan 2014

Membuat Twitter Follower Box di Blogger

Membuat Twitter Follower Box di Blogger yang menyerupai Facebook Fan Box. Plugin ini bukan resmi dari twitter, dan awalnya merupakan plugin untuk wordpress. Code ini dibuat oleh Mark Carey, dan saya coba buat untuk Blogger. Dengan memasang Twitter Follower Box, pengunjung akan lebih tertarik untuk ikut akun twitter anda. Dan ini sangat menarik untuk penampilan blog anda.

Cara Pasang Twitter Follower Box

1. Login ke Blogger
2. Klik Dasbor>Rancangan>Tambah Gadget
3. Pilih wiadget HTML/JavaScript
4. Masukan kode ini

 <!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("kangismetdotnet");</script
type="text><div
style="font-size:10px;margin-top:-8px;"><a
href="http://blog.kangismet.net/2011/11/membuat-twitter-follower-box-di-blogger.html">+ Get This Widget</a></div>
<!-- End Twitter Follower Box -->

5. Ganti kangismetdotnet dengan username anda
6. Untuk merubah ukuran, sesuaikan width dan height-nya
7. Save dan Selesai.
Hasilnya seperti ini :

Apabila ingin menempatkan kode pada template silahkan convert dulu kodenya disini.
Ada saran atau pertanyaan? silahkan isi kolom komentarnya..

(CSS) Mengenal Property Border

Border yaitu garis pembatas sebuah objek teks atau pun gambar. Berder merupakan salah satu property CSS. Penggunaan border dapat diatur dari segi ketebalan (width), warna (color) gaya/bentuk (style).

Property Border

color (warna), bisa menggunakan RGB Color, atauHexadecimal Color
style (gaya/bentuk)
width (ketebalan), menggunakan pixel (px)

Border Style

Syntax untuk border style adalah, none, dotted,dashed, solid, groove, ridge, inset, dan outset.
Supaya lebih jelas silahkan lihat contoh border style berikut kodenya

border: 1px none #0099ff

border: 1px dotted #66ccff

border: 1px dashed #66ccff

border: 1px solid #66ccff

border: 3px double #66ccff

border: 5px groove #66ccff

border: 5px ridge #66ccff

border: 5px inset #66ccff

border: 5px outset #66ccff

Contoh penggunaan dengan RGB Color

border: 8px outset rgb(102, 204, 255)

(CSS) Fungsi OVERFLOW

OVERFLOW sering digunakan dalam kode CSS. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting atau widget, kadang kadang ada yang memakan tempat ke pinggir atau ke bawah. Supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakan syntax overerflow.

Penggunaan kode ini ada beberapa alternatif, yaitu:

overflow:scroll
overflow:auto
overflow:hidden
overflow:display

Sebagai contoh, saya akan membuat objek untuk postingan atau widget. Contoh kode yang digunakan adalah :

<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;">
teks atau gambar di sini</div>

keterangan:
background-color : warna latar belakang
border : warna garis pinggir
padding : jarak dari pinggir garis ke objek
width : lebar
height : tinggi
overflow : silahkan pilih auto, scroll, hidden atau display sesuai kebutuhan.

Hasil overflow:auto

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:scroll

Hasil overflow:hidden

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi oferflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:display

Apabila ada pertanyaan atau saran mengenaiFungsi Overflow, silahkan isi kolom komentarnya gan...

Membuat Pop-up Facebook Like Box dengan jQuery

Membuat pop up Facebook like box dengan jQuery. Untuk menambah penggemar di Facebook, widget ini sangat cocok untuk digunakan. Widget pop up Facebook like box dengan jQuery ini bisa digunakan baik di Blogger atau pun WordPress.

Codingnya dibuat oleh Mohammad Mustafa Ahmedzai pemilik MyBloggerTricks, dan Saya edit sedikit sesuai dengan selera saya. Silahkan sobat edit CSS nya untuk merubah tampilannya. Hasil tampilannya seperti gambar di bawah :

Live Demo

Mungkin ada rekan yang bertanya, apakah widget ini muncul di halaman utama dan postingan?Tidak.
Menurut pembuatnya, kelebihan dari widget ini :

"Widget ini tidak selalu muncul pada tiap halaman atau postingan, melainkan hanya sekali saja untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul selanjutnya 30 hari kemudian, jadi Anda tidak usah khawatir tampilan widget ini akan mengganggu visitor. Widget ini bisa muncul pada halaman utama atau pun postingan, tergantung darimana visitor mengunjungi web Anda. Apabila ingin melihat untuk kedua kalinya, silahkan clear cookies pada browser."

Jadi tidak usah khawatir selalu muncul sob... karena cookie nya sudah di set 30 hari, artinya Anda tidak bisa melihat demo di web saya kedua kalinya, kecuali dengan membersihkan cookies.

Cara Membuat Popup Facebook LikeBox dengan jQuery

1. Login ke Blogger
2. Pada Dasbor anda silahkan tambahkan Widget HTML/JavaScript
3. Masukan kode dibawah ini :

<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
 
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTleXkGTuhZZeqlMITzY1mJmGvFww-imsOlEfA3AkUyg9zMys-w51_Nn0ADSrxMujPt4kO3jo0oS7_wWAs1K__kfb-xuey4EYRgOZ7SZll6b0pqUITWxvHnNN1QYmiNoIZv-br-nD2sA/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTleXkGTuhZZeqlMITzY1mJmGvFww-imsOlEfA3AkUyg9zMys-w51_Nn0ADSrxMujPt4kO3jo0oS7_wWAs1K__kfb-xuey4EYRgOZ7SZll6b0pqUITWxvHnNN1QYmiNoIZv-br-nD2sA/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPpa3ncp6DEU6W5pqTydA7xJYzXQ9pCGp_8JVXodE_BC-WdQnahJ3GzZWWAJRVtOTf0jW2hOB7rN1QTbq64VuMZ6yJvZp2t-_X4E9tC6oSrXgKVdjAW1pD0SEwAFlWrUy2klRzoDOh-w/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65eAm_j2PeIdoFx_5vLSpxLe7NLt16bS37R09NK-_rvhhyhAoFG9iljtHVRnLf4HPPiPwsL0FqJUDtw_6FIx91HaPXccDOSpa4pGCy4a4szAoZuCKInOTFl2mO6Mk7JCAkO6IfgIhV1Q/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRniHJ8mSM6Bl_iLihWDHO4E9zgpWmdZS-d1LwMR0ALActGUm3w0ukATD6e1ju0LDBbqGATrrmt7rLziSCWR-9lBbseUSMqr3CtWY7iK5ugBx8tjXUQtNGndwmlU_grPZL9J8Srt80vyg/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #2266BB;
   font-size: 18px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 3px 3px 3px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->
 
        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.<center><p style="line-height:3px;" >▼</p></center></h3> 
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkangismet.net&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a> and <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://blog.kangismet.net/2012/03/membuat-pop-up-facebook-like-box-dengan.html">Blogger Tutorials</a></p>
</div>
</div>

4. Ganti kangismet.net dengan usename Anda.
5. Save

Edit CSS Thread Comments Blogger

Edit CSS Thread Comments Blogger atau Merubah Tampilan Komentar Baru di Blogger, banyak rekan-rekan blogger yang bertanya tentang cara ini.

Pada tutorial sebelumnya, saya sudah menjelaskanCara Membuat Thread Comment Blogger seperti Wordpress. Ketika kita merubah kepada fitur baru ini, tampilannya masih sederhana dan kurang professional.

Tampilan sebelum diedit:

Setelah diedit:

Untuk mengganti tampilan seperti pada blog saya, silahkan ikuti langkah-langkahnya.

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Silahkan Backup dulu template anda --->Download Template Lengkap
3. Cari kode dibawah ini (untuk memudahkan gunakan Ctrl+F):

Kode:

4. Ganti kode dengan ini:

Kode:

5. Simpan dan Selesai.

Apabila tidak cocok dengan template Anda, silahkan edit CSS sesuka Anda. Semoga tutorial Edit CSS Thread Comments Blogger ini berguna bagi anda.

Bagi anda yang tidak menemukan Kode CSS Threaded Comments pada template, silahkan kunjungi artikel tentang Cara Menambahkan Kode CSS Threaded Comment

Menambahkan Kode CSS Threaded Comment Blogger

Pada postingan sebelumnya tentang cara merubah tampilan komentar baru Blogger atau Threaded Comment (baca: Edit CSS Threded Comments Blogger), saya sudah menjelaskan bagaimana merubah tampilan dengan edit css standar blogspot. Akan tetapi, beberapa rekan blogger ada yang tidak menemukan kode tersebut. Singkatnya ketika sudah berubah kepada sistem komentar threded comment, ada yang otomatis tertanam kode CSS dan ada yang tidak.

Menambahkan Kode CSS Threaded Comments

Mungkin anda pernah bertanya-tanya, pada template saya tidak ada kode CSS untuk threaded comments, bagaimana solusinya?
Bagi anda yang mendapatkan hal seperti itu, silahkan ikuti beberapa langkah dibawah ini:

1. Masuk ke Dashboard
2. Edit HTML
3. Centang Expand Template Widget
4. Temukan kode ini (Gunakan Ctrl dan F untuk mempermudah pencarian):

<b:includable id='feedLinksBody' var='links'>

5. Tambahkan kode dibawah ini tepat sebelum <b:includable id='feedLinksBody' var='links'>

<b:includable id='threaded_comment_css'>
<style>
/*------------- START Blogger Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions 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;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.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: 40px;   font-size:12px; background:#EBF5FE;
}
.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 .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.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: 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;
padding:2px 8px; margin-right:10px;
}
.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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.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;
  }
}

/*------------- End of Blogger Threaded Comments  -------------*/
</style>
</b:includable>

6. Cari kode

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

7. Tambahkan kode dibawah setelah <b:includable id='threaded_comments' var='post'>

<b:include name='threaded_comment_css'/>

8. Save Template.

Cara Menampilkan Script Pada Artikel Blogger

Kita sering berbagi script dalam artikel bloger, untuk rekan-rekan yang merasa kebingungan menampilkan script tersebut (awalnya saya juga kebingungan). Karena ada pesan error.

Contoh: jika kita ingin menampilkan kode </head>, kemudian menulis dengan cara yang biasa "</head>'' maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML.

Ada cara yang mudah untuk penulisan script anda,

1. Klik DISINI
2. Masukkan (Copy-Paste) Script/Kode ke dalam kotak yang sudah disediakan
3. Klik Convert
4. Copy kembali script yang telah di convert
5. Paste di postingan anda.

Enjoy it.....

Blogger Ad Code Converter

Untuk Memasukan kode Adsense ke blog melaluiEdit HTML, anda tidak bisa langsung copy paste. Caranya copy Adsense anda baik Google Adsense, AdBrite, Kumpulblogger, Adsencampatau pun Kode Javascript yang lain, kemudian klikKONVERSI. Hasilnya baru bisa di paste di blog anda.

Konversi & menjadi &
Konversi ' menjadi '
Konversi " menjadi "
Konversi < menjadi <
Konversi > menjadi &g

Membuat Spoiler di Blog

Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler, apalagi pengguna forum-forum seperti Kaskus. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja gan... Pastikan ketika anda menulis postingan, dalam mode HTML, copy kode dibawah ini :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Ini contoh hasilnya

Contoh spoiler:

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbhOnlutUwVme2jcLVjwTyF9h8OqdzwWrFrMVnE9ANVjiu2MBmrglV1IdNJdvxtcdKGqQXUrdhC5LzAwaFadpYfQF9zE4PFvoV_BugTIsK5ShdLkKQ6zHJsYrZbxLcEp4AGA0sd0l6AY/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbhOnlutUwVme2jcLVjwTyF9h8OqdzwWrFrMVnE9ANVjiu2MBmrglV1IdNJdvxtcdKGqQXUrdhC5LzAwaFadpYfQF9zE4PFvoV_BugTIsK5ShdLkKQ6zHJsYrZbxLcEp4AGA0sd0l6AY/s1600/aspire3.jpg" />
</div>
</div></div></div>

Maka hasilnya seperti ini:

Contoh spoiler gambar:

Ditunggu komennya gan....

Membuat Pesan di atas Form Komentar Blogger

Membuat Pesan di atas Form Komentar - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah 1 : Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

tambahkan pada kode diatas :

<div id='threaded-comment-form'>
...kode di atas...
</div>

hasilnya kurang lebih seperti ini :

<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah 2 : Cari kode :

document.getElementById(domId).insertBefore(replybox, null);

ganti dengan kode

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>

/*-- Modifikasi Pesan Komentar--*/
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

Simpan Template.

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan-> Pos dan Komentar, klik Tambahkan.

Tulis pesan sobat pada kolom isian, kemudian klikSimpan Pesan di pojok kanan atas dasboard.

Semoga bermanfaat.