Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Friday, August 19, 2016

Cara Pasang Sitemap Responsive Di Halaman Statis Part 2

thumb




Hai Sahabat Blogger , kali ini saya mau update postingan terbaru tentang cara pemasangan sitemap pada blog dengan CSS baru , ini saya dapatkan dari kompi ajaib dan dari template bawaan ini .

saya hanya sekedar sharing 😂 , nah untuk itu mari kita buat 😃

Pertama kita buat halaman dengan judul Sitemap lalu switch ke HTML Mode.

Untuk Lebih Rapih pilih setting dan centang tekan enter untuk baris baru .

Lalu Pastekan Kode HTML Di Bawah ini.
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://agieltriono.blogspot.co.id';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
ganti https://agieltriono.blogspot.co.id dengan Link Website Kamu .
Lalu Klik Publish.

Selesai



Semua CODE yang saya tulis pada artikel ini bersumber dari website tetangga , dan free license
Read more

Sunday, August 14, 2016

Membuat News Feed Dengan Efek Marquee

thumb


Hai Selamat Sore 😃 . Kali ini saya mau share cara pasang News Feed Di blogger buatan saya sendiri dengan efek Marquee.
lumayan bagus dan responsive kok 😃
sekarang kita mulai tutorial nya yuk 😉 .

Untuk Preview :
thumb

Keren kan ? 😃
Oke Pertama Kalian Harus Instal Bootstrap dahulu di template sobat
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

nah sekarang kita cari kode ]]></b:skin> dengan cara CTRL + F , lalu taruh CSS di bawah ini tepat di bawah kode ]]></b:skin>

<style type='text/css'>
/* News Feed */
.centered{text-align:center;}
.breaking-feed{display:block;color:#fff;background-color:#03a9f4;margin-left:21%;width:50%;height:auto;box-shadow:1px 1px 9px #000;}
.breaking-feed:before{float:left;margin:0;content:'NEWS';color:#fff;margin:3px;-webkit-animation:blurFadeInOut 6s ease-in infinite;-moz-animation:blurFadeInOut 6s ease-in infinite;-ms-animation:blurFadeInOut 6s ease-in infinite;animation:blurFadeInOut 6s ease-in infinite;}
.news-loop{white-space:nowrap;cursor:pointer;background-color:#fff;margin-top:3px;color:#000;width:91%;position:relative;}
.news-content{cursor:pointer;display:block;text-decoration:none;color:#000;}
.news-content:hover{cursor:pointer;display:block;color:#000;}
.news-loop:before{content:'|';border-color:#000;position:absolute;margin-top:-2px;z-index:9999999;opacity:1;}
.news-loop:after{content:'|';border-color:#000;position:relative;float:right;margin-top:-20.3px;z-index:9999999;opacity:1;}
.news-loop p{color:#f00;display:block;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;}
.news-loop a{text-decoration:none;}
/**/
@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0 0 40px #fff;-webkit-transform:scale(1.3);}20%,75%{opacity:1;text-shadow:0 0 1px #fff;-webkit-transform:scale(1);}100%{opacity:0;text-shadow:0 0 50px #fff;-webkit-transform:scale(0);}}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0 0 40px #fff;-webkit-transform:scale(1.3);}50%{opacity:0.5;text-shadow:0 0 10px #fff;-webkit-transform:scale(1.1);}100%{opacity:1;text-shadow:0 0 1px #fff;-webkit-transform:scale(1);}}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0);}50%{opacity:0.4;-webkit-transform:scale(2);}100%{opacity:0.2;-webkit-transform:scale(5);}}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg);}100%{opacity:1;-webkit-transform:scale(1) rotate(0deg);}}
/**/
@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0 0 40px #fff;-moz-transform:scale(1.3);}20%,75%{opacity:1;text-shadow:0 0 1px #fff;-moz-transform:scale(1);}100%{opacity:0;text-shadow:0 0 50px #fff;-moz-transform:scale(0);}}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0 0 40px #fff;-moz-transform:scale(1.3);}100%{opacity:1;text-shadow:0 0 1px #fff;-moz-transform:scale(1);}}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0);}50%{opacity:0.4;-moz-transform:scale(2);}100%{opacity:0.2;-moz-transform:scale(5);}}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg);}100%{opacity:1;-moz-transform:scale(1) rotate(0deg);}}
/* Text Animation */
@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0 0 40px #fff;transform:scale(1.3);}20%,75%{opacity:1;text-shadow:0 0 1px #fff;transform:scale(1);}100%{opacity:0;text-shadow:0 0 50px #fff;transform:scale(0);}}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0 0 40px #fff;transform:scale(1.3);}50%{opacity:0.5;text-shadow:0 0 10px #fff;transform:scale(1.1);}100%{opacity:1;text-shadow:0 0 1px #fff;transform:scale(1);}}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0);}50%{opacity:0.4;transform:scale(2);}100%{opacity:0.2;transform:scale(5);}}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}
</style>

Sekarang tambahkan ini di widget HTML atau Dimana Pun Kalian Suka :) Lebih bagus di atas </head>
<div class="centered breaking-feed">
<marquee class="news-loop" onmouseover="this.stop();" onmouseout="this.start();"><p><script src="http://www.NAMABLOG.com/feeds/posts/summary?orderby=published&max-results=100&alt=json-in-script&callback=newsly"></script></p></marquee>
</div>
<script type="text/javascript">
  function newsly(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0, 90);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '&nbsp;&nbsp;<i class="news-art">New !</i>&nbsp;<a title=' + postTitle + ' href=' + postUrl + '>&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-flag"></span>&nbsp;&nbsp;&nbsp;' + postTitle + '</a>';
      document.write(item);
    }
  }
</script>

Sekarang Simpan Template Dan Liat Hasil Nya
Read more

Tuesday, August 9, 2016

Widget Chat Messenger Show Hide Dengan Effect Drag Move

thumb




Hai Selamat Siang 😃 , jumpa lagi dengan Topik Tutorial , dan kali ini saya mau bagi sedikit cara pasang Widget Messenger Dengan Effect Show Hide Dan Dengan Effect Drag Move.
Kalian Dapat Menaruh Nya Dimana Pun Kalian Suka

Recomended Taruh Di Halaman Statis Saja Agar Tidak Mengganggu Kinerja Blog Sobat.
Yuk Kita mulai 😃

Pertama Buat Halaman Kosong Terserah Mau kasih judul apa .

buat suatu ungkapan atau image untuk mempercantik halaman , dan tambahkan Kode Dibawah pada halaman yang kalian kelola.
<style>
/* chat */
.chat_box{background:#fff;width:270px;height:435px;position:fixed;bottom:0px;right:14px;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000;display:none}
.pesan_chat{text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px}
.chatheader{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor:pointer;background:#3a5897}
.pesan_chat p{color:#616161;font-size:14px;margin:10px}
.close-chatfb{position:absolute;top:0;right:0;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7}
.close-chatfb:hover,.maxi-chatfb:hover,.mini-chatfb:hover{opacity:1}
.round.hollow{margin:40px 0 0;}
.round.hollow a{border:2px solid #2c4584;border-radius:35px;color:#2c4584;font-size:23px;padding:10px 21px;text-decoration:none;font-family:'Open Sans',sans-serif;}
.round.hollow a:hover{border:2px solid #138be6;border-radius:35px;color:red;color:#000;font-size:23px;padding:10px 21px;text-decoration:none;}
.popup-box-on{display:block!important;}
</style>
<div class="chat_box" id="qnimate">
<div class="chatheader">
Messenger Agiel
</div>
<div class='close-chatfb' id="removeClass">
&#215;</div>
<div class="pesan_chat">
<p>
Hai! Kamu bisa kirim pesan ke Admin di sini, jangan lupa LIKE Agiel ya... Terima kasih.</p>
<script type='text/javascript'>
//<![CDATA[
document.write('<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
//]]>
</script>
</div>
</div>

<center>
<h2>
Kalian Mau Chat Dengan Admin ?</h2>
</center>
<div class="round hollow text-center">
<a href="#" id="addClass"><span class="fa fa-facebook"></span> Open Messenger </a>
<script>
//<![CDATA[
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
 $(function() {    $( "#qnimate" ).draggable({ containment: "window" }); });
</script>
<script type="text/javascript">
  $(function(){
$("#addClass").click(function () {
          $('#qnimate').addClass('popup-box-on');
            });
          
            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })
</script>

Ganti Dengan Plugin Page Kamu.
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Selesai 😃


Bisa Di Taurh Dimana Pun Kalian Suka



Inspirate By : http://www.kompiajaib.com/
Read more

Sunday, July 31, 2016

Menyisipkan kode di komentar Blogger

thumb





Selamat Pagi 😀. saya mau bagi tutorial cara menampilkan Kode Prism atau syntax Highlighter di komentar yang agak terbilang terlarang .
ya memang . tapi bagaimana lagi di saat ini kita butuh itu untuk memudahkan komentator mekspresikan diri nya di komentar dalam tanda kutip "NO SPAM" .

oke berikut tutorial nya.



Pertama yang harus kita lakukan adalah menambahkan jquery dan stylsheet terlebih dahulu.
Taruh di atas <b:skin>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Lalu Tambahkan Jquery di bawah kode ]]> </ b: skin>

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

Lalu cari kode <div class='comments' id='comments'> ,kode yang pertama bukan yang kedua.
lalu tambahkan kode di bawah ini diatas <div class='comments' id='comments'> .

<b:if cond='data:blog.pageType != "static_page"'>
    &lt;div class='panel panel-info'&gt;
      &lt;div class='panel-heading'&gt;Meletakan Kode Di komentar&lt;/div&gt;
      &lt;div class='panel-body'&gt;
Untuk menyisipkan kode, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;code&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt; atau &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;pre&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan gambar, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;image&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan judul, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b rel=&amp;amp;quot;h3&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan catatan, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b rel=&amp;amp;quot;quote&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menciptakan efek tebal gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menciptakan efek huruf miring gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt; &amp;lt;/br&amp;gt;
&amp;lt;/br&amp;gt;&amp;lt;/br&amp;gt;
&amp;lt;a class=&amp;quot;btn btn-primary btn-xs&amp;quot; data-toggle=&amp;quot;modal&amp;quot; data-target=&amp;quot;#myModal&amp;quot;&amp;gt;Parse&amp;lt;/a&amp;gt;

&amp;lt;!-- Modal --&amp;gt;
&amp;lt;div id=&amp;quot;myModal&amp;quot; class=&amp;quot;modal fade&amp;quot; role=&amp;quot;dialog&amp;quot;&amp;gt;
  &amp;lt;div class=&amp;quot;modal-dialog&amp;quot;&amp;gt;

    &amp;lt;!-- Modal content--&amp;gt;
    &amp;lt;div class=&amp;quot;modal-content&amp;quot;&amp;gt;
      &amp;lt;div class=&amp;quot;modal-header&amp;quot;&amp;gt;
        &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;close&amp;quot; data-dismiss=&amp;quot;modal&amp;quot;&amp;gt;&amp;amp;times;&amp;lt;/button&amp;gt;
        &amp;lt;h4 class=&amp;quot;modal-title&amp;quot;&amp;gt;Html Parser&amp;lt;/h4&amp;gt;
      &amp;lt;/div&amp;gt;
      &amp;lt;div class=&amp;quot;modal-body&amp;quot;&amp;gt;
&amp;lt;style scoped=&amp;quot;&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
code{font-family:Consolas,Monaco,&amp;#39;Andale Mono&amp;#39;,&amp;#39;Courier New&amp;#39;,Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{border:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px &amp;#39;Courier New&amp;#39;,Monospace;border-radius:4px}
.button-group{float:none;margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#0ea6d8;cursor:pointer;font-family:&amp;#39;Open Sans&amp;#39;,Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
button:active{background:#0095c6;}
button[disabled],button[disabled]:active{background:#0095c6;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
&amp;lt;/style&amp;gt;
&amp;lt;textarea id=&amp;quot;codes&amp;quot; placeholder=&amp;quot;Tulis/paste kode di sini lalu klik &amp;#39;Konversi&amp;#39;&amp;quot; spellcheck=&amp;quot;false&amp;quot;&amp;gt;&amp;lt;/textarea&amp;gt;

&amp;lt;/p&amp;gt;
&amp;lt;div class=&amp;quot;button-group&amp;quot;&amp;gt;
&amp;lt;button id=&amp;quot;cvrt&amp;quot; onclick=&amp;quot;cdConvert();this.disabled = true;&amp;quot; disabled=&amp;quot;&amp;quot;&amp;gt;Konversi&amp;lt;/button&amp;gt;&amp;lt;button onclick=&amp;quot;cdClear();&amp;quot;&amp;gt;Bersihkan&amp;lt;/button&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;ul id=&amp;quot;wrapin&amp;quot;&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt1&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;amp;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;amp;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input id=&amp;quot;opt2&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;#39;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;#039;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input id=&amp;quot;opt3&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;quot;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;quot;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt4&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;lt;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;lt;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt5&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;gt;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;gt;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
function cdClear() {
    var wtarea = document.getElementById(&amp;#39;codes&amp;#39;);
    wtarea.value = &amp;#39;&amp;#39;;
    wtarea.focus();
    document.getElementById(&amp;#39;cvrt&amp;#39;).disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById(&amp;#39;codes&amp;#39;),
        cv = ctarea.value,
        opt1 = document.getElementById(&amp;#39;opt1&amp;#39;),
        opt2 = document.getElementById(&amp;#39;opt2&amp;#39;),
        opt3 = document.getElementById(&amp;#39;opt3&amp;#39;),
        opt4 = document.getElementById(&amp;#39;opt4&amp;#39;),
        opt5 = document.getElementById(&amp;#39;opt5&amp;#39;);
    cv = cv.replace(/\t/g, &amp;quot;    &amp;quot;);
    if (opt1.checked) cv = cv.replace(/&amp;amp;/g, &amp;quot;&amp;amp;amp;&amp;quot;);
    if (opt2.checked) cv = cv.replace(/&amp;#39;/g, &amp;quot;&amp;amp;#039;&amp;quot;);
    if (opt3.checked) cv = cv.replace(/&amp;quot;/g, &amp;quot;&amp;amp;quot;&amp;quot;);
    if (opt4.checked) cv = cv.replace(/&amp;lt;/g, &amp;quot;&amp;amp;lt;&amp;quot;);
    if (opt5.checked) cv = cv.replace(/&amp;gt;/g, &amp;quot;&amp;amp;gt;&amp;quot;);
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
&amp;lt;/script&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;p&amp;gt;
&amp;lt;/p&amp;gt;
&amp;lt;div class=&amp;quot;clear&amp;quot;&amp;gt;

     &amp;lt;/div&amp;gt;
      &amp;lt;div class=&amp;quot;modal-footer&amp;quot;&amp;gt;
        &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;btn btn-default&amp;quot; data-dismiss=&amp;quot;modal&amp;quot;&amp;gt;Close&amp;lt;/button&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;

  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
      &lt;/div&gt;
    &lt;/div&gt;
</b:if>
Untuk Lebih Maksimal silahkan Parse dahulu kode Tersebut .


Sekarang Kita Cari Kode </body>
Lalu Tambahkan Kode Di Bawah ini Tepat Di Atas Kode Tersebut


<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
   $('b[rel^="h"]', this).nextAll().filter('br').remove();
    $('i[rel="pre"]', this).replaceWith(function() {
        return $('<pre></pre>').append($(this).contents());
    });
    $('i[rel="image"]', this).replaceWith(function() {
        return $('<img />').attr('src', $(this).text());
    });
    // Menyisipkan tag `<h3>`
    $('b[rel="h3"]', this).replaceWith(function() {
        return $('<h3></h3>').append($(this).contents());
    });
    $('b[rel="quote"]', this).replaceWith(function() {
        return $('<blockquote></blockquote>').append($(this).contents());
    });
    $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>

Simpan Semua Perubahan Dan Lihat Hasil Nya 😐

Oke Tutorial Selesai 😐
Doain saya juga ya semoga saya lulus mengaji 😀


Read more

Sunday, July 24, 2016

Widget Musik Player Untuk Blogger

thumb




Selamat malam family ? 😀 , jumpa lagi ya dengan agiel syukurlah kita dapat di beri kesehatan oleh tuhan Yang Maha Esa 😀 . Selagi saya sehat saya ingin sharing Widget Pemutar Musik

salin kode di bawah (PILIH SALAH SATU SAJA)

Kode Pertama
<audio controls autoplay>
<source src="http://k003.kiwi6.com/hotlink/i8yvpgkc34/RedMoon_and_Meron_Ryan_-_Heavyweight_NCS_Release_.mp3" />
</source></audio>


Kode Kedua
<video controls="" autoplay="" name="media"><source src="http://k003.kiwi6.com/hotlink/i8yvpgkc34/RedMoon_and_Meron_Ryan_-_Heavyweight_NCS_Release_.mp3" type="audio/mpeg"></video>


autoplay="" atau autoplay
Musik Otomatis Putar saat Loading Website


http://k003.kiwi6.com/hotlink/i8yvpgkc34/RedMoon_and_Meron_Ryan_-_Heavyweight_NCS_Release_.mp3
Ganti Dengan Hosting Musik kamu yang berbentuk .mp3

selesai deh 😀
Read more

Tombol Sosial Media untuk blogger

thumb




Sore 😀 , kali ini agiel mau bagi cara pasang tombol sosial media berikut dengan hover keren 😀 . sangat kurang rasanya kalo website gak ada tombol jejaring sosial 😀 . Nah untuk itu kita harus taruh widget sosial media agar pengunjung dapat berbagi kepada teman.
oke kita langsung ke tutorial.


pertama kita taruh kode CSS ini tepat di atas kode <b:skin>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B3CUuMWORS28WWFpZ2FqQ0xLMEk"/>

lalu save template


kemudian setelah itu kalian taruh kode di bawah dimana saja untuk menampilkan tombol sosial media , bisa di bawah postingan , di sidebar atau di navigation 😀
<div class="container">

< -- social media start -- >
<ul class="cv-social-media">
<a class="animated fadeIn" href="#"><li id="facebook" class="icon-facebook facebook"></li></a>
<a class="animated fadeIn" href="#"><li id="twitter" class="icon-twitter"></li></a>
<a class="animated fadeIn" href="#"><li id="pinterest" class="icon-pinterest"></li></a>
<a class="animated fadeIn" href="#"><li id="youtube" class="icon-youtube"></li></a>
<a class="animated fadeIn" href="#"><li id="tumblr" class="icon-tumblr"></li></a>
<a class="animated fadeIn" href="#"><li id="flickr" class="icon-flickr"></li></a>
<a class="animated fadeIn" href="#"><li id="digg" class="icon-digg"></li></a>
<a class="animated fadeIn" href="#"><li id="delicious" class="icon-delicious"></li></a>
<a class="animated fadeIn" href="#"><li id="smashmag" class="icon-smashmag"></li></a>
<a class="animated fadeIn" href="#"><li id="email" class="icon-email"></li></a>
<a class="animated fadeIn" href="#"><li id="stackoverflow" class="icon-stackoverflow"></li></a>
<a class="animated fadeIn" href="#"><li id="vimeo" class="icon-vimeo"></li></a>
</ul>
<div id="clear"></div>

selesai silahkan lihat hasil nya 😀
Read more

Sunday, July 17, 2016

Cara Buat Sitemap Di Halaman Statis Blogger 2016

Menu




Cara Buat Sitemap Di Halaman Statis Blogger 2016 , Mungkin para pengguna Blogger sudah mengetahui apa itu sitemap , sitemap adalah peta situs dimana di situ terdapat postingan kita yang sudah di posting , kita bisa lihat berapa banyak postingan kita di RSS Feed atau juga Feedburner.

Nah, Hari ini saya mau share bagaimana cara memasang sitemap di halaman statis.mari kita lihat tutorial nya.

Step pertama kita cari kode ]]></b:skin>
Lalu Pastekan semua kode CSS di bawah ini di atas kode ]]></b:skin> .

/*Sitemap
----------------------------------------------- */
#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#111;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#2e2e2e
}

#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:#FFF
}

#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0;
padding:0;
list-style:none
}

#tabbed-toc .toc-tabs {
width:20%;
float:left
}

#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}

#tabbed-toc .toc-tabs li a:hover {
background-color:#444;
color:#FFF
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#e74c3c;
color:#FFF;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0
/* cursor:text;
  */
}

#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #e74c3c;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}

#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7)
}

#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif
}

#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#2e2e2e;
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}

#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right
}

#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden
}

#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa
}

#tabbed-toc .panel li:nth-child(even) {
background-color:#f1f1f1;
font-size:10px;
color:#fff
}

#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {
background-color:#2e2e2e;
color:#FFF;
outline:none
}

#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {
background-color:#222
}

@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888
}

#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block
}

#tabbed-toc .toc-tabs li {
display:inline;
float:left
}

#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {
background-color:#111;
color:#ccc;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4)
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#DF1010;
color:#fff
}

#tabbed-toc .toc-content {
border:none
}

#tabbed-toc .divider-layer,#tabbed-toc .panel li time {
display:none
}


Setelah itu ,
klik save Template

Step kedua Sekarang kita buat Halaman dengan Judul SITEMAP klik Publish.
Lalu EDIT Laman Tadi SITEMAP dan Switch ke HTML mode , setelah itu Paste semua kode js di bawah ini .

<div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl:"https://hd1994.blogspot.co.id", containerId: "tabbed-toc", activeTab: 1};</script>
<script type="text/javascript">
var tabbedTOC_defaults = {
    blogUrl: "https://hd1994.blogspot.co.id", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // true to show the post date
    showSummaries: false, // true to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // true to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // No thumbnail URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum posts result
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by date
    showNew: false, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>Baru!</em>" // HTML for the "New!" text
};

for (var i in tabbedTOC_defaults) {
    tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i];
}

function clickTab(pos) {
    var a = document.getElementById(tabbedTOC_defaults.containerId),
        b = a.getElementsByTagName('ol'),
        c = a.getElementsByTagName('ul')[0],
        d = c.getElementsByTagName('a');
    for (var t = 0; t < b.length; t++) {
        b[t].style.display = "none";
        b[parseInt(pos, 10)].style.display = "block";
    }
    for (var u = 0; u < d.length; u++) {
        d[u].className = "";
        d[parseInt(pos, 10)].className = "active-tab";
    }
}

function showTabs(json) {

    var total = parseInt(json.feed.openSearch$totalResults.$t,10),
        c = tabbedTOC_defaults,
        entry = json.feed.entry,
        category = json.feed.category,
        skeleton = "",
        newPosts = [];

    for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {
        if (g == entry.length) break;
        entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : '');
    }

    entry = c.sortAlphabetically ? entry.sort(function(a,b) {
        return (a.title.$t.localeCompare(b.title.$t));
    }) : entry;
    category = c.sortAlphabetically ? category.sort(function(a,b) {
        return (a.term.localeCompare(b.term));
    }) : category;

    // Build the tabs skeleton
    skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
    for (var h = 0, cen = category.length; h < cen; h++) {
        skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');">' + category[h].term + '</a></li>';
    }
    skeleton += '</ul>';

    // Bulid the tabs contents skeleton
    skeleton += '<div class="toc-content">';
    for (var i = 0, cnt = category.length; i < cnt; i++) {
        skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
        skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
        skeleton += '>';
        for (var j = 0; j < total; j++) {
            if (j == entry.length) break;
            var link, entries = entry[j],
                pub = entries.published.$t, // Get the post date
                month = c.monthNames, // Month array from the configuration
                title = entries.title.$t, // Get the post title
                summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars) + '&hellip;' : '', // Get the post summary
                img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail
                cat = (entries.category) ? entries.category : [], // Post categories
                date = (c.showDates) ? '<time datetime="' + pub + '" title="' + pub + '">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
                
            for (var k = 0; k < entries.link.length; k++) {
                if (entries.link[k].rel == 'alternate') {
                    link = entries.link[k].href; // Get the post URL
                    break;
                }
            }
            for (var l = 0, check = cat.length; l < check; l++) {
                var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
                // Write the list skeleton only if at least one of the post...
                // ... has the same category term with one of the current categories term list
                if (cat[l].term == category[i].term) {
                    skeleton += '<li title="' + cat[l].term + '"';
                    skeleton += (c.showSummaries) ? ' class="bold"' : '';
                    skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>';
                    skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:block;clear:both;"></span></span>' : '';
                    skeleton += '</li>';
                }
            }
        }
        skeleton += '</ol>';
    }

    skeleton += '</div>';
    skeleton += '<div style="clear:both;"></div>';
    document.getElementById(c.containerId).innerHTML = skeleton;
    clickTab(c.activeTab-1);

}

(function() {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs';
    if (tabbedTOC_defaults.preload !== "onload") {
        setTimeout(function() {
            h.appendChild(s);
        }, tabbedTOC_defaults.preload);
    } else {
        window.onload = function() {
            h.appendChild(s);
        };
    }
})();
</script>


setelah itu tinggal klik Publish Laman, silahkan lihat hasil nya.

https://hd1994.blogspot.co.id
ganti kedua nya dengan link website kamu.

silahkan ganti agar sesuai dengan warna template ,



Read more