Cara Memodifikasi Threaded Comment Blogger

Hari ini aku baru saja mengubah fasilitas comment biasa menjadi thread comment, artinya comment blogger sekarang ini sudah bisa di reply atau di balas. aku melihat hasil dari thread cemment yang aku buat, tampilannya sangat biasa, jadi saya berniat untuk mengganti CSS nya sampai akhirnya aku browsing, ternyata ada juga yang telah memposting tutorial modifikasi thread comment tersebut. Disini juga aku ingin memposting cara memodifikasi thread comment.

Untuk mengetahui bagaimana tampilan thread comment sebelum dan sesudah di modifikasi, berikut screnshotnya:

Sebelum di modifikasi:
Sesudah di modifikasi:

Caranya sangat mudah, cukup kuti langkah-langkah berikut:
1. Login pada blogger
2. Rancangan
3. Edit HTML dan jangan lupa untuk centang "Expand Template Widget"
5. Cari kode <b:includable id='feedLinksBody' var='links'>
6. Tambahkan kode di bawah ini tepat di atas kode <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>


7. Selanjutnya cari kode <b:includable id='threaded_comments' var='post'>
8. Tambahkan kode di bawah ini di bawah kode <b:includable id='threaded_comments' var='post'>
<b:include name='threaded_comment_css'/>
9. Simpan Template dan lihat hasilnya

Selamat mencoba semoga berhasil.
Sumber CSS by blog.kangismet.net
*****

Cara Pasang Recent Comment (Komentar Terbaru) Dengan Avatar - New

Tutorial hari ini yaitu tata cara membuat Recent Comments (komentar terbaru) with Avatar, tidak seperti recent comment yang kebanyakan kita temui pada blog para blogger.
Cara Pasang Recent Comment (Komentar Terbaru) Dengan Avatar - New
1. Login
2. Rancangan
3. Tambah Gadget
4. Pilih Gadget HTML/Javascript
5. Salin Kode HTML di bawah ini, lalu tempel di kotak HTML.
6. Dan jangan ada yang terlewat ubah dulu http://SNIFAN.blogspot.com, dengan nama blog kalian, lalu SAVE.
7. Lihat Blog.

Kalau widgetnya tidak sesuai dengan sidebar blog kalian, ada beberapa kode yang ditandai miring di bawah ini yang bisa kalian utak-atik biar tampilan widgetnya sesuai dengan ukuran sidebar blog kalian.

Jika kalian tertarik sama widget komentar terbaru ini, silahkan dicoba. Gratis!

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 20,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://snifan-blogspot.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://SNIFAN.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Selamat mencoba semoga berhasil.
Sumber Script : http://snifan.blogspot.com
*****

Tampilan Baru Group Pada Facebook (Beta) telah diterapkan.

Tampilan Baru Group Pada Facebook (Beta)
Nice day, berawal pada saat saya pulang dari kampus, saya langsung membuka akun Facebook, karena berhubung beberapa hari ini saya baru saja membuat group, jadi saya berniat untuk berkontribusi di group dengan mengupload beberapa wallpaper, sesuai dengan namanya "Wallpaper Contest". saya tak menyangka kalau tampilan Group ku ini berubah. kemudian saya tanyakan pada teman yang Online, coba buka group baruku, lihat tampilannya apakah memang berubah, atau cuma saya yang bisa melihat perubahannya. teman saya pun merespon dan berkata pada saya bahwa group saya memang berubah.


Untuk melihat perubahan apa yang terjadi pada group. berikut screenshootnya.






Bila Group Anda belum mendapatkan tampilan seperti ini, mungkin karena pihak facebook masuk membutuhkan masukkan, jadi belum mengapplynya keseluruh group, saya merasa sangat beruntung diberi fasilitas baru ini.


Saya juga sudah memberi masukkan sedikit facebook dengan tampilan barunya, saya menyarankannya bila kita mengaupload gambar pada cover (banner) tolong foto membernya jangan di replace.


seperti itulah sara saya kepada tampilan baru group facebook ini.


Untuk anda yang belum mendapat tampilan baru ini, tunggu saja tanggal mainnya. saya juga berharap agar facebook dapat mengaplynya keseluruh group facebook.

Update 23/02/2012!!!
New Group Facebook, tampilan baru group facebook sekarang telah diterapkan keseluruh group facebook, baik yang baru maupun yang sudah lama.

Untuk lebih jelasnya, silahkan cek sendiri pada group facebook Anda. terima kasih

*****

Cara Mengatur Jumlah Postingan di blog saat Label di Klik

Bissmillah.
Sebenarnya sudah lama sekali aku tahu cara ini tapi saya tidak sempat mempostingnya karena pada dasarya saya juga tidak memakainya, tetapi pada hari ini saya beranggapan baik bahwa tidak ada salahnya aku menulis tutorial berikut, hitung-hitung memberi solusi pada orang yang mencari tutorialnya. tak perlu panjang lebar lagi, langsung saja aku beri tutorialnya.

Ikuti langkah-langkah berikut:
1. Login ke Blogger terus pilih rancangan
2. pilih edit HTML dan jangan lupa untuk memberi centang pada "Expand Template Widget"
3. Cari code berikut.
    expr:href='data:label.url'

4. Setelah ketemu tanmbahkan code berikut tepat disamping kata url + &quot;?max-results=5&quot;
5. hasilnya akan seperti berikut:
    expr:href='data:label.url + &quot;?max-results=1&quot;'
6. Simpan template dan lihat hasilnya.

Selamat mencoba semoga berhasil.
*****

Status untuk minggu ini

Status untuk minggu ini, seperti biasanya saya tak dapat memberikan banyak untuk Anda semua berhubung saya juga mahasiswa yang tidak lepas dari tugas, dimana akhir-akhir ini saya baru saja menjalani final, meski artinya akan ada libur, tapi kegiatan keorganisasian masi tetap harus dijalankan, bukan itu saja, sebelum libur, saya harus menyelesaikan bengkalai serta kompensasi seperti yang diterapkan pada kampus saya.

Akhir kata, assalamu alaikum wr.wb

*****

Tampilan Baru Group Pada Facebook (Beta)

Tampilan Baru Group Pada Facebook (Beta)
Nice day, berawal pada saat saya pulang dari kampus, saya langsung membuka akun Facebook, karena berhubung beberapa hari ini saya baru saja membuat group, jadi saya berniat untuk berkontribusi di group dengan mengupload beberapa wallpaper, sesuai dengan namanya "Wallpaper Contest". saya tak menyangka kalau tampilan Group ku ini berubah. kemudian saya tanyakan pada teman yang Online, coba buka group baruku, lihat tampilannya apakah memang berubah, atau cuma saya yang bisa melihat perubahannya. teman saya pun merespon dan berkata pada saya bahwa group saya memang berubah.

Untuk melihat perubahan apa yang terjadi pada group. berikut screenshootnya.



Bila Group Anda belum mendapatkan tampilan seperti ini, mungkin karena pihak facebook masuk membutuhkan masukkan, jadi belum mengapplynya keseluruh group, saya merasa sangat beruntung diberi fasilitas baru ini.

Saya juga sudah memberi masukkan sedikit facebook dengan tampilan barunya, saya menyarankannya bila kita mengaupload gambar pada cover (banner) tolong foto membernya jangan di replace.

seperti itulah sara saya kepada tampilan baru group facebook ini.

Untuk anda yang belum mendapat tampilan baru ini, tunggu saja tanggal mainnya. saya juga berharap agar facebook dapat mengaplynya keseluruh group facebook.

*****

Spectrum Nokia C2-01 Theme for your phone


Please Download This Theme, I will Make Top Of Download This Month.
Bantu saya dengan mendownload Tema yang saya buat ini, saya mau tema ini menjadi "MOST DOWNLOADED OF THIS MONT", Untuk membantu saya caranya sangat mudah, hanya dengan mendownload tema ini.

Semakin banyak Anda mendownload tema ini, semakin meningkat popularitas saya di Zedge, terutama orang Indonesia, Downloadlah tema saya, siapa lagi yang akan Download kalau bukan kalian semua.

Saya hampir Lupa, Kalau Misalnya Anda Punya akun di Zedge, Mari bergabung di Group saya,
Namanya "Mfc Zedgers", Anda cukup mengsearch group dengan nama Indonesia, pasti ketemu.

Spectrum Nokia C2-01 (zCode : ikalal050)
Kelebihan Tema ini :
- Design : Aero, Elegant
- Animated : 
  - Screen Saver Animasi
  - Startup Animasi
  - Shuting Down Animasi
- Icons : Original From Mobile Nokia C2-01
- Image : All Image Are Replace (semua gambar didalam tidak ada yang default)

Atas bantuan Anda, saya ucapkan terima kasih banyak.

Sekali lagi yang ingin membantu silahkan klik Download dibawah dan jangan lupa untuk comment and rate (vote) my theme.


 *****