Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog

Tutorial Modifikasi Tampilan Widget Notifikasi Komentar Ala Kang Ismet – Halo sahabt blogger indonesia, baca judul nya ajah Modifikasi gitu berarti ada artikel sebelum nya dong?

Sebelum nya saya sudah membuat artikel mengenai Tutorial Memasang Notifikasi Komentar Ala Google Plus Di Blog.

Pada artikel sebelum nya saya sudah menyinggung sedikit mengenai Pencurian / tukang Ngintip Kode HTML dan CSS Orang. Dalam hal ini yang kita bahas adalah Kode CSS dan HTML Notifikasi Komentar ala Kang Ismet 🙂

Siapa itu Kang Ismet ? kalau kamu belum kenal dan belum tahu orang nya silahkan lihat akun Google+ nya (+Kang Ismet).

Artikel ini saya buat bertujuan untuk memberitahukan kepada para blogger bahwa ada Artikel yang Memposting tentang Notifikasi Komentar Ala Google Plus yang mirip sama Ki itu sebenar nya hasil Cloning / Nyuri / Ngintip.

Bagaimana tidak bisa di sebut seperti itu? Coba kamu Perhatikan Kode Pada Artikel yang memposting Notifikasi Komentar ala Google plus dan untuk penampakan widgetnya kurang lebih seperti ini :

“Sebelum Ke topic Mari kita berbincang2 terlebih dahulu 😀 “

Sebelah Kiri Punya Ki dan Sebelah Kanan Modifikasi Punya Saya

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog

Itu saya bisa bilang 100% kode yang dia posting adalah hasil curian. Trus Bagaimana Postingan saya ini ? dapat dari manakah kode CSS dan Kode HTML nya ?

Jawaban nya simpel. saya Ambil dari google 😀 saya tidak akan menyampaikan sumber link nya karna apa ? karna kode CSS dan Kode HTML merupakan hasil curian. untuk Membuktikan nya simak gambar di bawah yah 🙂

Perhatikan Pada Gambar di atas 🙂 itu hanyalah merupakan contoh Artikel yang di posting oleh para Bloggers 🙂 hanya sebagian kecil saja.

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

Kode pada artikel itu pasti di dapat dari kode yang di curi entah siapa orang pertama kita tidak tau 😀 (maaf buat blogger yang ngerasa artikel nya saya ScreenShot Di atas yah 🙂 hanya di jadiin contoh saja).

Pada gambar di atas sudah terlihat jelas ada beberapa Kode CSS dan Perintah JS yang tidak di perlukan dalam Notifikasi Komentar Ala Kang Ismet Seperti Sticky , .thanks-comments pada CSS dan Sticky HTML 7, iframe dkk.

Padahal jika sitcky html 7 itu di pasang maka ketika di blog kita memiliki widget pada status HTML 7 otomatis widget tersebut akan menjadi sticky ketika di scroll.

Nah untuk mengatasi Hal tersebut saya sengaja membuat artikel ini untuk para blogger yang telah terlanjur menggunakan tutorial yang di posting oleh para blogger lainnya tanpa mencantumkan sumber dan isi yang jelas. pada akhir nya akan mengacaukan kode pada template kamu para blogger 🙂

Waah… lumayan panjang juga intermezo nya 😀 Tak apalah itung itung buat mencerahan untuk kita semua 🙂 ngintip sih boleh kalau pun di share / di publish yaah silahkan toh di tulis Source / Resource nya 🙂 Apa salah nya tinggal mencantumkan Link pada Artikel kita 🙂

Untuk Cerita Lebih Lanjut nya bisa baca di sini (http://blog.kangismet.net/2013/11/jadilah-pencuri-pintar.html) “Be a Smart Thief “

Kembali ke topik Tutorial Modifikasi TampilanNotifikasi Komentar Ala Kang Ismet Original, Sekarang kita mulai pembahasan tentang membuat Notifikasi Komentar Ala Kang Ismet 🙂 Sebelumnya saya minta izin dulu kang buat posting Artikel ini yah +Kang Ismet.

Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog

Seperti biasa 🙂 Langkah Pertama, Kita Harus Menambahkan Kode ini Di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Info: Jika kode di atas sudah ada di blog kamu , Silahkan lewati langkah pertama

Langkah Kedua, Tambahkan Kode CSS ini di atas ]]></b:skin> atau </style>

/*Notifikasi Ala Kang Ismet Publish By Xkomo*/

#show-total {
  position:fixed;
  top:8px;
  right:288px; /*Atur Posisi Counter -jumlah- Komen*/
  z-index:999;
  cursor:pointer;
    float:right;/*posisi counter Right or Left*/
}
  .total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold;
  }
#notif {cursor:pointer;}
#notif:before {
/*Gambar lonceng pertama*/
  content: url('http://2.bp.blogspot.com/-wNOnRbS7rfM/UoZYxuLVMkI/AAAAAAAAGFI/CEqcJwQXOfc/s1600/lonceng2.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:999;
  transition:all 0.4s ease-out;
}
  #notif:hover:before {
  opacity:1;
}
  #notif2 {cursor:pointer;display:none}
#notif2:before {
/*Gambar lonceng kedua ketika active or di klik */
  content: url('http://2.bp.blogspot.com/-wNOnRbS7rfM/UoZYxuLVMkI/AAAAAAAAGFI/CEqcJwQXOfc/s1600/lonceng2.png');
  border:1px solid #b6b5b5;/*garis bawah pada komentar*/
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;/*atur posisi lonceng (harap atur posisi lonceng pertama juga jika ingin merubah ini dan sblik nya) ubah left untuk di kiri*/
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #notif2:hover:before {
  opacity:1;
}
#cm-wrapper {
  width:300px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
/*posisi segitia di atas notifikasi*/
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;/*ubah right untuk di sebelah kanan*/
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#cm-scroll::-webkit-scrollbar{margin:2px; padding:1px; width:10px;background:orange}/*ubah ukuran dan warna scroll luar*/
#cm-scroll::-webkit-scrollbar-thumb{margin:2px;padding:1px;background-color:black}/*ubah ukuran dan warna scroll bagian dalam*/
#comments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-top:1px solid #28313b;
  border-bottom:1px solid #111;
  margin-right:10px;
}
.cm-outer code {
 color:#a6a658;
    font-size:11px;
}

  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}

Langkah ke Tiga, Silahkan Tambahkan Kode HTML ini Di atas </body>

<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
  home_page: "http://www.xkomo.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class='total-show'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};
//]]>
</script>
  <script src='https://googledrive.com/host/0B77n4VRgB0aJY2F4ZGtIWnVkZTQ' type='text/javascript'/>

Perhatian: Silahkan Duplicate Js ini ! untuk menghindari jika suatu saat Link Broken

<script src='https://googledrive.com/host/0B77n4VRgB0aJY2F4ZGtIWnVkZTQ' type='text/javascript'/>

Ganti : home_page: “http://www.xkomo.com” Dengan URL Blog kamu 🙂

Selesai sudah Tutorial Memasang Notifikasi Komentar Ala Kang Ismet Original 🙂 untuk Modifikasi Warna Kamu Bisa perhatikan kode berikut

/* Background Kotak Notifikasi */
#cm-wrapper {
width: 300px;
position: fixed;
top: 61px;
right: -381px;
z-index: 999;
background-color: rgb(25, 32, 40); /* warna background*/
padding: 15px 13px 25px 15px;
color: rgb(102, 102, 102); /*warna tulisan*/
font-family: Arial, Sans-serif;
border-top: 8px solid rgb(255, 108, 96);/*ganti warna ini orange ini untuk bagian atas */
transition: 0.5s ease;
}
/* background Pada Bagian Komentar Blogger*/
.cm-outer li {
padding: 7px 10px 12px;
list-style: none;
clear: both;
position: relative;
border-top: 1px solid rgb(40, 49, 59);
border-bottom: 1px solid rgb(17, 17, 17);
margin-right: 10px;
}

Untuk Pertanyaan silahkan tulis di kolom komentar saja ya 🙂 Semoga Artikel saya ini bisa bermanfaat dan memberikan pencerahan untuk kita semua.

Source CSS & HTML Code: http://blog.kangismet.net

References: http://dte.web.id