Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?

Who’s Online

There are no users currently online

Categories

  • Android (10)
  • Apps (33)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (29)
  • Event (17)
  • Game (3)
  • Internet (17)
  • Laptop (71)
  • OS (8)
  • Peripheral (21)
  • Personal (260)
  • Publisher (3)
  • Review (23)
  • Smartphone (52)
  • Social Media (6)
  • Technology (145)
  • Tips (66)
  • Travel (5)
  • Tutorial (125)
  • Unboxing (17)
  • Video (33)
  • Web (17)
  • Windows (5)
  • Wordpress (14)
  • YouTube (9)

Subscriptions

  • Febri Tri Harmoko
  • Ahmad Imam Arifin
  • Al Annas
  • Ampera 94
  • Arif Sutarlie

Recent News

  • Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
  • Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
  • Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark
XKOMODOTCOM
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM
Home Web Blogger
TUTORIAL MODIFIKASI TAMPILAN NOTIFIKASI KOMENTAR ALA KANG ISMET

[Modifikasi] Tutorial Notifikasi Komentar Ala Kang Ismet Original

Febri Tri Harmoko by Febri Tri Harmoko
9 years ago
in Blogger, Tutorial
1
0
ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia
209
VIEWS
ShareTweet

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.

RelatedPosts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

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 🙂

Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog
Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog
Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog
Tutorial Modifikasi Tampilan Notifikasi Komentar Di Blog

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 😀 (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
Tags: BlogCodingCSSHTMLWidget
ShareTweet
Previous Post

Tutorial Pasang Notifikasi Komentar Ala Google Plus Di Blog

Next Post

Download Complete Script Mouse Macro X7 a4tech No Recoil QuickScope QuickChange Auto Move / Ready (AWP SG AW GB)

Febri Tri Harmoko

Febri Tri Harmoko

Just content creator

Related Posts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
Android

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

February 1, 2023
11
Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

February 2, 2023
35
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

November 19, 2022
451.9k
Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android
Video

Tutorial Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android (VPN/DNS Pribadi) – 100% Pasti Berhasil!

February 2, 2023
75
Cara Setting VPN Gratis di Windows (PC / Laptop)
Tutorial

Cara Setting VPN Gratis di Windows (PC/Laptop)

October 5, 2022
39
Cara Setting VPN di Android Tanpa Aplikasi Tambahan
Internet

Cara Setting VPN di Android Tanpa Instal Aplikasi Tambahan 100% WORK!

September 30, 2022
510
Next Post
Download Complete Script Mouse Macro X7 a4tech AWP SG AW GB

Download Complete Script Mouse Macro X7 a4tech No Recoil QuickScope QuickChange Auto Move / Ready (AWP SG AW GB)

Cara Earn Token Ninja Saga Lewat SupersonicAds dan TokenAds

Cara Earn Token Ninja Saga Lewat SupersonicAds dan TokenAds

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist