$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Hi Bloggers :)
    Weeh ... Baca judul nya ajah Modifikasi gitu berarti ada artikel sebelum nya dong ? :D Haha ...
Nah ... 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 #hemm...
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 bloggers bahwa Artikel yang Memposting tentang Notifikasi Komentar Ala Google Plus yang mirip ama 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 kalau hasil nya kurang lebih seperti ini :
"Sebelum Ke topic Mari kita berbincang2 terlebih dahulu :D "

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original
Sebelah kiri Punya Ki dan Sebelah Kanan Punya saya :)

     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 :D 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 :)
[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original
 [Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

     Perhatikan Pada Gambar di atas :) itu hanyalah merupakan contoh Artikel yang di posting oleh para Bloggers :) hanya sebagian kecil saja ... Kode pada artikel itu pasti di dapat dari kode yang di curi entah siapa orang pertama kita tidak tau :D (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 bloggers yang telah terlanjur menggunakan tutorial yang di posting oleh para bloggers  lainnya tanpa mencantumkan sumber dan isi  yang jelas. pada akhir nya akan mengacaukan kode pada template kamu para bloggers :) :keren
 
waah ... lumayan panjang juga yah intermezo nya :D Haha... 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 :) :keren ...
Untuk Cerita Lebih Lanjut nya bisa baca di sini (http://blog.kangismet.net/2013/11/jadilah-pencuri-pintar.html) "Be a Smart Thief "

Back to Topic :)
sekarang kita mulai pembahasan tentang membuat Notifikasi Komentar Ala Kang Ismet Original :) yah
Sebelum nya saya minta izin dulu kang buat posting Artikel ini yah +Kang Ismet  .

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 :keren
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 didiskusikan di kolom komentar saja yah :) Semoga Artikel saya ini bisa bermanfaat dan memberikan pencerahan untuk kita semua :wee

Warning : Dilarang Copy Paste Artikel Ini Tanpa Mencantumkan Sumber Kesini :)
Sumber Kode CSS & HTML : http://blog.kangismet.net
Resource : http://dte.web.id
Original Article By Blog X Komo

COMMENTS

BLOGGER: 38
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: [Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original
[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original
[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original
http://1.bp.blogspot.com/-i0y45-5Ut1s/U2QAD6bIIDI/AAAAAAAABes/_gxXs0POyME/s1600/capture-20140504-032807.png
http://1.bp.blogspot.com/-i0y45-5Ut1s/U2QAD6bIIDI/AAAAAAAABes/_gxXs0POyME/s72-c/capture-20140504-032807.png
BLOG X KOMO
http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy