Hentongerz

Notifikasi Komentar Ala Google+ Plus Keren

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitqadC_Mc5XiABAWcUxYrdkMXWDsmz7h0SuU2JFlEwLXd63err-ig7ERHoGGIyyqWDAv0DKjqq-lUBforblcvMX0_Q23Trtn6ILO4tlFgvcWkDyjpu3kBJkPDjAYQSACYcaoqPIuqwfs7/s1600/notifikasi-komentar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Notifikasi komentar ala Google Plus" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitqadC_Mc5XiABAWcUxYrdkMXWDsmz7h0SuU2JFlEwLXd63err-ig7ERHoGGIyyqWDAv0DKjqq-lUBforblcvMX0_Q23Trtn6ILO4tlFgvcWkDyjpu3kBJkPDjAYQSACYcaoqPIuqwfs7/s1600/notifikasi-komentar.png" title="Notifikasi komentar ala Google Plus" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Notifikasi Komentar ala Google Plus</td></tr>
</tbody></table>
Jumpa lagi bro, ini ane mau posting 'Cara Membuat Notifikasi Komentar ala Google Plus', ini ada hubungannya juga dengan '<a href="http://hentongsekai.blogspot.com/2015/03/cara-modifikasi-notifikasi-komentar-ala.html" target="_blank">Notifikasi ala Kang Ismet ( Keren )</a>'. Tapi, Notifikasi ala Google Plus ini adalah yang utama / dasarnya, sebelum menjadi Notifikasi ala Kang Ismet. Untuk yang lebih keren, silahkan kunjungi > <a href="http://hentongsekai.blogspot.com/2015/03/cara-modifikasi-notifikasi-komentar-ala.html" target="_blank">Notifikasi ala Kang Ismet</a> <. 
 
<h3>
Tutorial Instalasi</h3>
 Biasakan Login Blogger. 
 Pergi ke Template > HTML. 
 Copy + Paste kode JQuery berikut, diatas </head> 
 
<pre class="numbered" data-codetype="JQuery"><code class="xml"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></code></pre>
<div class="informasi">
Jika sudah mempunyai JQuery di blog ente, lewatin langkah diatas.</div>
 Selanjutnya, simpan kode CSS berikut, diatas kode ></b:skin> atau </style> 
 
<pre class="numbered" data-codetype="CSS"><code class="css">/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
 position:fixed;
 top:14px;
 right:0;
 width:188px;
 text-align:left;
 z-index:9999;
 cursor:pointer;
}
.total-counter {
 background-color:#d11919;
 color:white;
 padding:1px 4px;
 font-family:Arial,Sans-serif;
 font-size:11px;
 border-radius:5px;
 font-weight:bold;
}
#notif {
 position:fixed;
 top:20px;
 right:180px;
 z-index:9999;
 height:22px;
 width:19px;
 opacity:.4;
 cursor:pointer;
}
#notif:hover {
 opacity:1;
}
.close-notif {
 position:fixed;
 top:92px;
 right:20px;
 z-index:9999;
 cursor:pointer;
 display:none;
}
#cm-container {
 width:355px;
 position:fixed;
 top:67px;
 right:0;
 z-index:9999;
 background-color:#e5e5e5;
 padding:60px 20px 10px 20px;
 color:#666;
 box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
 text-align:left;
 border:1px solid rgba(0,0,0,.2);
 background-clip:padding-box;
 display:none;
}
#cm-container:before {
 content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60KN13VLLBnLi2UcMhBAetjFO68w3CTEE-Lj_HFBl0IcjZKCVNXslD5F4lkFsEs94fLBTYCfCbXyt1E0JDmviV_jZcX6ZQt3nUHSvDmoUjlmGab7B4p-29SgPhZmZy_mWuTtzz716R1M/s1600/arrow-notif.png');
 position:absolute;
 top:-14px;
 left:196px;
}
#cm-container:after {
 content:"Komentar Terbaru";
 position:absolute;
 top:22px;
 left:150px;
 text-align:center;
 font:normal 14px Arial;
 color:#333;
}
.cm-outer {
 margin:0 auto;
 padding:0;
 font-size:11px;
 text-align:left;
 font:normal 12px Arial;
}
.cm-outer ul{
 margin-bottom:5px;
}
.cm-outer li {
 padding:9px 10px 14px;
 list-style:none;
 clear:both;
 position:relative;
 border-radius: 3px;
 box-shadow: 0 1px 2px rgba(0,0,0,.2);
 background-color: white;
 margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
 display:block;
 float:left;
 background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-763N9TBAn94b6Gsk5r-WLweZscOwRR8eZPodKFZG3unI3DfGanJm7YRRYyZbeV1oL0olTvBaJAbR6IZcKdqSti2X2nsUC7VVnDP4u2BwOi4ovARc1y0AP666sdthXQUNdMg-TBghLxs/s1600/anon80.png') no-repeat 50% 50%;
 overflow:hidden;
 border-radius:3px 0 0 3px;
 position:absolute;
 top:0;
 left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}</code></pre>
 Simpan kode berikut, diatas kode </body> 
 
<pre class="numbered" data-codetype="XML"><code class="xml"><div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6p3JOqQZ-65wk980xhvBO-QFUREDYuj_hP7gXN2pEs2QQle2xoESbLO5soSvvXv1kjdfZS0s-KuLZYJ6EjI_wbYiI3iXj_hkYMacZt-kyOv_8t1XBGHxmq2CnLzdGvntEwJSYWBJuddM/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZOxwYUq8BviiKFplbDrO13uBMVc-fYJRSemAl7rp373dAaiZ2niZDJlHYAWMbuKsOSRK0AAFj91GZOSSWOeVQ-sX4_w5HbNvuq1QOzInewybTe5GCNUY-mSoM2vcVm-U8kHgVOxRxzA/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
 home_page: "http://hentongsekai.blogspot.com",
 max_result: 6,
 t_w: 80,
 t_h: 80,
 summary: 40,
 new_tab_link: true,
 ct_id: "cm-container",
 new_cm: " Komentar Baru!",
 interval: 30000,
 alert: true,
 alert: function(total) {
 document.getElementById("cm-total").innerHTML = ''+total+'';
 document.title = '(' + total + ') ' + originalTitle;
 }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/></code></pre>
 Untuk memindahkan posisi CSS, silahkan pelajari di artikel berikut > CSS Position dan Value < 
Berikut ini Demo : 
 
<div style="text-align: center;">
<ul class="tombol">
<li><a class="demo" href="http://testerajacoy.blogspot.com/2013/11/notifikasi-komentar-ala-google-plus_14.html" target="_blank"></a></li>
</ul>
</div>
<div class="clear">
</div>

Notifikasi Komentar Ala Google+ Plus Keren

Notifikasi Komentar ala Google Plus Jumpa lagi bro, ini ane mau posting 'Cara Membuat Notifikasi Komentar ala Google Plus', ini ...

Selengkapnya »

Cara Pasang Meta Tag Super SEO Friendly Maknyuss 100%

Cara Pasang Meta Tag Super SEO Friendly Maknyuss 100%

Meta Tag Seo Friendly Sebelum melangkah bagaimana cara pemasangan Meta Tag, ada baiknya kita bahas apa itu Meta Tag dan untuk apa mesti ...

Selengkapnya »

Download Template Sevida v1.7 - Responsive SEO Premium Magazine Template for Blogger Free

Download Template Sevida v1.7 - Responsive SEO Premium Magazine Template for Blogger Free

Sevida Responsive Premium Magazine Template Template Sevida ini dibuat oleh Satan MKR Design, ternyata saya juga baru tau kalau Designe...

Selengkapnya »

Cara Membuat Tombol Demo dan Download ala Kang Ismet

.button{float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both}

.button ul{margin:0; padding:0}

.button li{display:inline; margin:0; padding:0}

.demo{border:none; -moz-border-radius:2px; -webkit-border-radius:2px; 
border-radius:2px; padding:8px 80px !important; background:#E55E48; 
color:#fff !important; text-align:center; text-shadow:0 0 1px 
rgba(0,0,0,0.3); -webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); 
-moz-text-shadow:0 0 1px rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px 
rgba(0,0,0,0.3); transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

.download{border:none; -moz-border-radius:2px; 
-webkit-border-radius:2px; border-radius:2px; padding:8px 80px 
!important; background:#5FAAE3; color:#fff !important; 
text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.3); 
-webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); -moz-text-shadow:0 0 1px 
rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px rgba(0,0,0,0.3); 
transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

.demo:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}

.download:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}</code></pre>
 Simpan Template. 
 
 Kemudian coba buat Entri atau Laman ( Terserah anda ) baru. 
 Beralih ke Mode HTML. ( Disebelah kanan Compose ) 
 Copy kode dibawah ini, dan Paste. Klik Pratinjau dan lihat hasilnya. 
 
<pre class="numbered" data-codetype="HTML"><code class="HTML">  <div style="text-align: center;">

<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear"></div> </code></pre>
<h3>
Keterangan</h3>
 Silahkan ganti kode yang bercetak miring berwarna merah untuk Link DEMO. 
 Silahkan ganti kode yang bercetak miring berwarna biru untuk Link Download. 
 
Credits : 
http://xpress-community.blogspot.com/2013/08/cara-membuat-tombol-demo-dan-download.html

Cara Membuat Tombol Demo dan Download ala Kang Ismet

Demo and Download Button Kali ini, saya akan memberikan 'Cara Membuat Tombol / Button ala Kang Ismet'. Banyak sekali para Blogg...

Selengkapnya »

Cara Membuat Syntax Highlighter Language Auto Detection dengan Penomoran

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDS8oFpI2TzmY2sHFJ_mTT-EIA4_BN9jhEvY-MP46Nl_kXJCpxX4rJO3MKQm9ugMuuWLyoGq8g2_ciWDoQaPMi17I5-j-DBw96B7YCmYEWOMVisvYeTiCmTRhkaKbIqQs7gnPNObNjTyC/s1600/auto+detect.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Syntax Highlighter Numbered" border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDS8oFpI2TzmY2sHFJ_mTT-EIA4_BN9jhEvY-MP46Nl_kXJCpxX4rJO3MKQm9ugMuuWLyoGq8g2_ciWDoQaPMi17I5-j-DBw96B7YCmYEWOMVisvYeTiCmTRhkaKbIqQs7gnPNObNjTyC/s1600/auto+detect.png" title="Syntax Highlighter Numbered" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Highlighter Language Auto Detect With Numbering</td></tr>
</tbody></table>
 
Kali ini, saya akan memposting Syntax Highlighter lagi, sebelumnya saya juga sudah memposting Syntax Highlighter yang berisi 3 Fitur. 
 
Syntax Highlighter kali ini, adalah Syntax Highlighter yang berisikan penomoran secara Otomatis, dan Pewarnaan kode Otomatis, ntar lihat punya saya sama kok, seperti Syntax ini. 
 
<div class="warning">
Jangan Menggunakan Syntax Highlighter lebih dari 1, jika sudah punya Syntax Highlighter sebelumnya, silahkan hapus terlebih dahulu Syntax Highlighter tersebut.</div>
Struktur penggunaan / pemanggilan setiap kode Syntax Highlighter berbeda-beda. Contohnya lihat dibawah : 
 
JavaScript => data-codetype="JavaScript", code-class="Javascript" 
HTML => data-codetype="HTML", code-class="HTML" 
JQuery => data-codetype="JQuery", code-class="JQuery" 
XML => data-codetype="XML", code class="XML" 
CSS => data-codetype="CSS", code class="CSS" 
 
<h3>
Cara Pemasangan Syntax Highlighter Language Autodetection</h3>
 Masuk ke Blogger Template, klik Edit HTML. 
Copy Paste kode dibawah ini, tepat diatas kode ></b:skin> atau </style> 
 
<pre class="numbered" data-codetype="CSS"><code class="CSS css">pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
} </code></pre>
Kemudian, Copy + Paste kode Javascript dibawah, Tepat diatas kode </body> 
<pre class="numbered" data-codetype="JavaScript"><code class="Javascript javascript"><script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
//]]></script> </code></pre>
atau lebih praktis, Copy kode dibawah ini, dan Paste diatas kode </head> 
<pre class="numbered" data-codetype="JavaScript"><code class="undefined"><script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/> </code>
</pre>
 Simpan apa yang sudah dikerjakan. 
 
 Untuk memanggil / menggunakan Syntax Highlighter ini di postingan, silahkan pakai kode dibawah ini dengan jenisnya masing-masing. 
<pre class="numbered" data-codetype="HTML"><code class="HTML xml"><pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre> </code></pre>
Silahkan lihat hasilnya di postingan anda, kurang lebihnya silahkan berkomentar. Semoga bermanfaat... 
 
Credits : 
http://defandaky.blogspot.com/2014/06/syntax-highlighter-language.html