Invite X-D-X ./

Membuat Efek Tombol Keyboard di Blog

Unknown 0 Trik Blog 2/22/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY2op2k54-sYBcrNV3WgpSYFELRTCPXtyqZC2Tj_vPSr96QdnbNhqGzXxGW1W6H1tM0nKGT7UOOszpbqSMje0hKYA-GbmJXxH5HftA4vjsA0CQ6Qce4AVCdMciNrbRJDCMckiN-aWKkGT/s1600/Tombol+Keyboard+di+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY2op2k54-sYBcrNV3WgpSYFELRTCPXtyqZC2Tj_vPSr96QdnbNhqGzXxGW1W6H1tM0nKGT7UOOszpbqSMje0hKYA-GbmJXxH5HftA4vjsA0CQ6Qce4AVCdMciNrbRJDCMckiN-aWKkGT/s1600/Tombol+Keyboard+di+blog.png" width="400" /></a></div>
<b>Tombol Keyboard Blog</b> - Pernahkah anda melihat blog yang memakai efek tombol seperti keyboard di blog? jika pernah mungkin anda penasaran "Bagaimana cara membuatnya?". Tenang Sob kali ini saya akan membahas itu semua, Cara nya sangat mudah sekali hanya perlu menambahkan CSS saja diblog Anda.</div>
<h5>
STEP 1 :</h5>
<div>
<ul style="text-align: left;">
<li><b>Loggin Blogger</b> > <b>Template</b> > <b>Edit Html</b>.</li>
<li><xdx>CTRL</xdx>+<xdx>F</xdx> atau cari <span style="color: red;">kode</span> <b><span style="color: #274e13;">]]></b:skin></span></b>.</li>
<li>Tambahkan <i>Cascading Style Sheet</i> ini <b>di atas</b> <span style="color: red;">kode</span> tsb.</li>
</ul>
</div>
<div class="codeview2">
.keyboard {
    border: 1px solid gray;
    padding: 1px 5px;
    margin: 0px 5px;
    font-size: 1.2em;
    text-transform: uppercase;
    color:#555 !important;
    box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    -moz-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    -webkit-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    background: linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
}
.keyboard:active {
    background: none repeat scroll 0% 0% rgb(119, 119, 119);
}
.keyboard:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration:none;
}</div>
<ul style="text-align: left;">
<li>Kemudian <b>Simpan</b> Template Anda.</li>
</ul>
<h5 style="text-align: left;">
STEP 2 :</h5>
<div>
Ketika posting anda hanya perlu menambahkan kode seperti ini :
<br />
<div class="codeview">
<a class="keyboard">CTRL</a>+<a class="keyboard">F</a><br />
<a class="keyboard">CTRL</a>+<a class="keyboard">A</a><br />
<a class="keyboard">F1</a><br />
<a class="keyboard">F2</a><br />
<a class="keyboard">F3</a><br />
<a class="keyboard">F5</a></div>
Maka hasilnya akan seperti ini :<br />
<div>
<a class="keyboard">CTRL</a>+<a class="keyboard">F</a> = Fungsi untuk Mencari (Find).<br/><br/>
<a class="keyboard">CTRL</a>+<a class="keyboard">A</a> = Fungsi untuk Seleksi Semua Text.<br/><br/>
<a class="keyboard">F1</a> = Fungsi untuk memunculkan Help.<br/><br/>
<a class="keyboard">F2</a> = Fungsi untuk Rename.<br/><br/>
<a class="keyboard">F3</a> = Fungsi untuk Search.<br/><br/>
<a class="keyboard">F5</a> = Fungsi untuk Refresh.</div><br/>
<div class="info">
Demikian tutorial membuat efek tombol keyboard diblog, Jika ada yang ditanyakan silahkan di kotak komentar :D.</div>
</div>
</div>

Membuat Efek Tombol Keyboard di Blog

Tombol Keyboard Blog - Pernahkah anda melihat blog yang memakai efek tombol seperti keyboard di blog? jika pernah mungkin anda penasara...

testing

Unknown 6 Aplikasi 2/20/2014

Calistung maca nulis ngitung jago calistung
<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>
calistung calistung maca nulis hitut
<div id="new">
  <h2 class="page-header">11 New Icons in 4.0</h2>

<div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/rub"><i class="fa fa-rub"></i> fa-rub</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/rub"><i class="fa fa-ruble"></i> fa-ruble <span class="text-muted">(alias)</span></a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/rub"><i class="fa fa-rouble"></i> fa-rouble <span class="text-muted">(alias)</span></a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/pagelines"><i class="fa fa-pagelines"></i> fa-pagelines</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/stack-exchange"><i class="fa fa-stack-exchange"></i> fa-stack-exchange</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-o-right"><i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-o-left"><i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/caret-square-o-left"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span></a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/dot-circle-o"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/wheelchair"><i class="fa fa-wheelchair"></i> fa-wheelchair</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/vimeo-square"><i class="fa fa-vimeo-square"></i> fa-vimeo-square</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/try"><i class="fa fa-try"></i> fa-try</a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/try"><i class="fa fa-turkish-lira"></i> fa-turkish-lira <span class="text-muted">(alias)</span></a></div>
    
      <div class="fa-hover col-md-3 col-sm-4"><a href="http://fortawesome.github.io/Font-Awesome/icon/plus-square-o"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</a></div>
    
  </div>

</div>
<div id="buton1">slideToggle2</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle Kedua</div>

testing

Calistung maca nulis ngitung jago calistung slideToggle Contoh penggunaan jQuery slideToggle calistung calistung maca nulis hitut 11 Ne...

Tutorial Share to Download Keren untuk blog

Unknown 0 Trik Blog 2/20/2014

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVlIhtgM6vxIqpoGdE0imNujSNCaI0CZjtzHpEK0IyFgJ0PPDJVl8t63m4ETi7Q02JIze_ii9yvhtUs64OjHKOqK-t7vDsBUzoVpYzvpLosAiaNF4LU9lU3LQDXkyBhjf0U17FnynXPAH/s1600/share+to+download.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVlIhtgM6vxIqpoGdE0imNujSNCaI0CZjtzHpEK0IyFgJ0PPDJVl8t63m4ETi7Q02JIze_ii9yvhtUs64OjHKOqK-t7vDsBUzoVpYzvpLosAiaNF4LU9lU3LQDXkyBhjf0U17FnynXPAH/s1600/share+to+download.png" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<b>Share to Download</b> - Ini merupakan salah satu optimalisasi dari seo agar blog kita menjadi lebih terkenal :), mungkin sedikit pemaksaan bagi pengujung untuk share artikel kita. Tapi anda bisa berfikir 2 kali apabila artikel anda yang terlalu biasa untuk menggunakan konten seperti ini, tapi jika artikel anda sangat menarik pasti saya sarankan untuk menggunakan ini. Langsung saja untuk tutorialnya :</div>
<h3 style="text-align: left;">
Pertama :</h3>
<div>
<ul style="text-align: left;">
<li><b><span style="color: magenta;">Masuk Blogger Anda</span></b> <span style="color: red;">></span> <b><span style="color: magenta;">Template</span></b><span style="color: red;"> ></span> <b><span style="color: magenta;">Edit Html</span></b>.</li>
<li>'Copy paste' <i>Stylesheet</i> ini tepat diatas <b><span style="color: #274e13;"></body></span></b>.</li>
</ul></div>
<pre class="codeview"><link href='https://deris-cole.googlecode.com/svn/CSS/SharetoUnlockXDX.css' rel='stylesheet' type='text/css'/></pre>
<div style="text-align: center;">
<b><span style="color: #990000;">Kemudian.....<br />
Untuk Selanjutnya Silahkan Share, Like atau Tweet.<br />
Konten dibawah - Sebagai Contoh / DEMO</span>.</b></div>
<article id="default-usage">
<div class="to-lock" style="display: none;">

<div style="text-align: justify">
<h3 style="text-align: left;">
Kedua :</h3>
<div>
Anda tinggal memasukan kode ini, didalam postingan anda !</div>
<div class="codeview2">
<article id="default-usage"><br />
<div class="to-lock" style="display: none;"><br />
<br />
<div style="text-align: justify"><br />
<span style="background-color: #eeeeee; color: orange;"><b>DISINI LINK ATAU KONTEN YANG DISEMBUNYIKAN ! </b></span><br />
</div><br />
<br />
</article><br />
</div><div id="mblunlocker"> </div><br />
<script type="text/javascript" src="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script><br />
<script><br />
jQuery(document).ready(function ($) {<br />
$("#default-usage .to-lock").socialLock({<br />
text: {<br />
header: "LINK DAN KONTEN DIKUNCI!",<br />
message: "Untuk membuka kunci, Silahkan Like / Tweet / Plus(+), <b>Terima Kasih</b>!"<br />
},<br />
style: "ui-social-locker-secrets",<br />
buttons: {<br />
order: ["twitter", "facebook", "google"]<br />
},<br />
  // pengaturan twitter<br />
twitter: {<br />
url: "<b><span style="background-color: #eeeeee; color: orange;">http://deris10.blogspot.com/</span></b>",<br />
text: "#inviteXDX"<br />
},<br />
    // pengaturan facebook<br />
facebook: {<br />
url: "<b><span style="background-color: #eeeeee; color: orange;">http://www.facebook.com/358093207561934</span></b>",<br />
appId: "365605720117937"<br />
},<br />
google: {<br />
url: "<b><span style="background-color: white; color: orange;">http://deris10.blogspot.com/</span></b>"<br />
}<br />
});<br />
});;;;<br />
      <br />
</script></div>
<br />
<ul style="text-align: left;">
<li>Untuk yang bertulisan '<b><span style="background-color: white; color: #bf9000;">KUNING</span></b>' Silahkan ganti dengan selera anda masing-masing.!</li>
</ul>
</div>

</article> 
</div><div id="mblunlocker"></div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "LINK DAN KONTEN DIKUNCI!",
message: "Untuk membuka kunci, Silahkan Like / Tweet / Plus(+), <b>Terima Kasih</b>!"
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
  // pengaturan twitter
twitter: {
url: "http://deris10.blogspot.com/",
text: "#inviteXDX"
},
    // pengaturan facebook
facebook: {
url: "http://www.facebook.com/358093207561934",
appId: "365605720117937"
},
google: {
url: "http://deris10.blogspot.com/"
}
});
});
</script>
<div class="alert">
Sekian Penjelasan tentang share to download pada blog, Terima Kasih !</div>
</div>

Tutorial Share to Download Keren untuk blog

Share to Download - Ini merupakan salah satu optimalisasi dari seo agar blog kita menjadi lebih terkenal :), mungkin sedikit pemaksaan b...

Chelsea vs Everton (Streaming)

Unknown 2 Chelsea 2/19/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<b><span style="font-family: Georgia, Times New Roman, serif;">LIGA PRIMER INGGRIS </span></b><br />
<div style="background-image: url('http://www.goal.com/web/goal/2014.01.30-v1/images/default/site-elements/match-header/bg.jpg'); background-position: center center; background-repeat: repeat; padding: 5px; text-align: justify;">
<center>
<img alt="Manchester City" height="50" id="logo_team1" src="http://cache.images.globalsportsmedia.com/soccer/teams/150x150/661.png" width="50" />  <b><span style="font-size: x-large;"><span style="color: white; font-family: Georgia, Times New Roman, serif;">CHELSEA</span> <skr>1</skr><vs>-</vs><skr>0 </skr><span style="color: white; font-family: Georgia, Times New Roman, serif;"> EVERTON</span></span></b> <img alt="Chelsea" height="50" src="http://cache.images.globalsportsmedia.com/soccer/teams/150x150/674.png" width="50" /></center>
<div align="center">
<strong><span style="color: lime;"><br /></span></strong><strong style="background-color: #091f2c; color: #a2aaad; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15.399999618530273px;"><span class="style2" style="color: #008254;">Full Time</span></strong><br />
<span style="background-color: #091f2c; color: #a2aaad; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15.399999618530273px;">Februari 22, 2014 7:45 PM WIB</span><br />
<span style="background-color: #091f2c; color: #a2aaad; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15.399999618530273px;">Stamford Bridge — London</span><br />
<span style="background-color: #091f2c; color: #a2aaad; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15.399999618530273px;">Wasit:‬ L. Probert‎</span><br />
<div style="text-align: right;">
<br /></div>
</div>
</div>
<h5 style="text-align: left;">
<span style="font-weight: normal;"><span style="text-align: justify;">Matchday </span><span style="text-align: justify;">ke-27</span></span></h5>
</div>
<div style="text-align: justify;">
<span style="text-align: center;">CHELSEA vs Everton akan berlangsung <i>Stamford Bridge</i> dipimpin oleh Probert</span><i style="text-align: center;">. </i><span style="text-align: center;">Streaming </span><span style="text-align: center;">bisa dilihat di blog ini, kami akan menyediakan beberapa Server tercepat tentunya dan link akan aktif beberapa saat sebelum <b><i>kick-off.</i></b></span>
</div>
<h5 style="text-align: left;">
Head To head :</h5>
<style type="text/css">
.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}
.tftable tr {background-color:#bedda7;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}
.tftable tr:hover {background-color:#ffffff;}
</style>
<table border="1" class="tftable">
<tbody>
<tr><th>Liga Primer Inggris ‎(EPL)‎</th><th>14 Sep 2013</th><th>Everton 1 - Chelsea 0</th></tr>
<tr><td><span style="font-weight: bold; text-align: center;">Liga Primer Inggris ‎(EPL)‎</span></td><td>19 Mei 2013</td><td><b>Chelsea 2</b> - Everton 1</td></tr>
<tr><td><span style="font-weight: bold; text-align: center;">Liga Primer Inggris ‎(EPL)‎</span></td><td>30 Des 2012</td><td>Everton 1 -<b> Chelsea 2</b></td></tr>
<tr><td><span style="font-weight: bold; text-align: center;">Liga Primer Inggris ‎(EPL)‎</span></td><td>11 Feb 2012</td><td><b>Everton 2</b> - Chelsea 0</td></tr>
<tr><td><span style="font-weight: bold; text-align: center;">Capital One Cup</span></td><td>27 Okt 2011</td><td>Everton 1 - <b>Chelsea 2</b></td></tr>
</tbody></table>
<h5 style="text-align: left;">
<span style="font-weight: normal;">
Link Streaming :</span></h5>
<div class="secret">
<div style="text-align: center;">
<ul class="DS-tombol2">
<li><a href="#deris1-download">Server 1</a></li>
<li><a href="http://deris10.blogspot.jp/p/espn-start-sport.html" onclick="window.open(this.href,"popupwindow","status=0,height=450,width=500,resizable=0,top=50,left=100");return false;">Server 2</a></li>
<li><a href="http://deris10.blogspot.com/2013/09/streaming-tv-chelsea.html" target="_blank">Server 3</a></li>
</ul>
</div></div>
<div class="secret-share">
Bagikan melalui Facebook / Twitter / Google Plus untuk melihat <strong>Link Streaming</strong> !

<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="Invite X-D-X./" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

<div class="info">
Info selanjutnya bisa anda tanyakan di <i>kotak komentar</i>, <b>Terimakasih</b>!</div>
<div class="sledoktri" id="deris1-download">
<div class="deris1-blog">
<ul id="navigation"><a href="#x" id="link-x">X</a>Chelsea vs Everton</ul>
<center>
<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="Center" valign="top" width="200">Tekan CTRL+F (lalu ketik "CHELSEA")<br />
<br />
<iframe frameborder="0" height="400" scrolling="auto" src="http://www.sportlemon.tv/webmasters/webmaster_iframe.php" width="500"></iframe></td></tr>
</tbody></table>
</center>
</div>
</div>
<div dir="ltr" style="text-align: right;" trbidi="on">
<b><span style="color: #073763;">Next Match</span></b> >> Fulham vs <b><span style="color: #073763;">Chelsea</span></b> 01-03-2014 | 22.00 <b>WIB</b>.</div>
</div>

Chelsea vs Everton (Streaming)

LIGA PRIMER INGGRIS CHELSEA 1 - 0 EVERTON Full Time Februari 22, 2014 7:45 PM WIB Stamford Bridge — London Wasit:‬ L. Pro...

Membuat Daftar Isi Simple

Unknown 0 Trik Blog 2/19/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Daftar Isi</b> - Cara membuat daftar isi simple berdasarkan label sangat mudah sekali. Anda tinggal masuk ke <span style="color: magenta;"><b>Blogger</b> </span>Anda > Lalu <span style="color: magenta;"><b>Tambah Laman</b> </span>> Masukan <b><span style="color: magenta;">Javascript</span></b> ini dalam postingan laman Anda.<br />
<div class="codeview2">
<script src="https://deris-cole.googlecode.com/svn/trunk/javascript/Soft-Daftar-Isi.js"><br />
</script><script src="<b><span style="color: #cc0000;">http://deris10.blogspot.com</span></b>/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"><br />
</script></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<ul style="text-align: left;">
<li>Untuk <b><span style="color: #cc0000;">http://deris10.blogspot.com</span></b>. harus diganti dengan namablog Anda.</li>
<li>Untuk demo anda bisa melihat gambar dibawah :</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0aGcY3SN9LyW4dnTqsdz95SiGfxNzQfcvf_34itGfqwV-j_R86zODgynyh5Ne6l5b_uQrSUQCBLIjbRLVLMO5JjFPEVXE5fskyrP_8GazGr8x2epF9GJ8s4Eah5mjO4RV3rFohQ6Hb-D/s1600/Daftar+Isi+Simple.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0aGcY3SN9LyW4dnTqsdz95SiGfxNzQfcvf_34itGfqwV-j_R86zODgynyh5Ne6l5b_uQrSUQCBLIjbRLVLMO5JjFPEVXE5fskyrP_8GazGr8x2epF9GJ8s4Eah5mjO4RV3rFohQ6Hb-D/s1600/Daftar+Isi+Simple.png" width="640" /></a></div>
<br />
<div style="text-align: center;">
<ul class="tombol">
<li><a href="http://deris10.blogspot.com/p/laman-label-anime.html" target="_blank">Demo</a></li>
</ul>
</div>
</div>

Membuat Daftar Isi Simple

Daftar Isi - Cara membuat daftar isi simple berdasarkan label sangat mudah sekali. Anda tinggal masuk ke Blogger Anda > Lalu Tambah La...

Membuat Berita Terbaru Blog diatas Header

Unknown 4 Trik Blog 2/18/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<b>BERITA TERBARU</b> - Membuat berita terbaru diatas header dari blog akan membuat tampak manis dari sebuah blog, anda bisa melihat demo gambarnya dibawah :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamNwlQk5JJXFsy9o3tM4xru0WNDdpCeRbI6GEZ2zs_sqF5iU1EWCKlleIQ7FJc6ZMYnXjCaHtL9zogNUGeonZkJ8kdqsbs3ybGdYIBv06hOjr3OUNBeXnyesFbFYM_p951jl5EX0sxIUI/s1600/Breaking+news.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamNwlQk5JJXFsy9o3tM4xru0WNDdpCeRbI6GEZ2zs_sqF5iU1EWCKlleIQ7FJc6ZMYnXjCaHtL9zogNUGeonZkJ8kdqsbs3ybGdYIBv06hOjr3OUNBeXnyesFbFYM_p951jl5EX0sxIUI/s1600/Breaking+news.png" width="640" /></a></div>
<h5 style="text-align: left;">
Step 1 :</h5>
<div>
<ul style="text-align: left;">
<li>Masuk Dashboard > Edit HTML.</li>
<li><xdx>CTRL</xdx>+<xdx>F</xdx> atau cari kode <b><span style="color: #0b5394;">]]></b:skin></span></b>.</li>
<li>Letakan kode CSS dibawah tepat diatasnya.</li>
</ul>
</div>
<div class="codeview">
/* Headline-xdx */<br />
.newspic {background:transparent url(https://lh5.googleusercontent.com/-5EABVQDyheA/Uvs0mPwebmI/AAAAAAAAARY/-b6e5vAA0HY/w123-h22-no/wn.png) no-repeat top left;border-bottom:1px solid #CDCDCD; width:675px;margin:0 auto;padding:0 auto;height:23px;color:#000;position:absolute;left:13.10%;}<br />
.news {width: 850px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}<br />
.news a:link, .news a:visited{color:#000;text-decoration:none;}<br />
.news a:hover {color:#0099cc;text-decoration:underline;}</div>
<br />
<ul style="text-align: left;">
<li>Kemudian Cari kode <b><span style="color: #38761d;"><div id='body-wrapper'></span></b>.</li>
<li>Letakan kode tepat ini dibawahnya.</li>
</ul>
<div class="codeview">
<div style='clear:both;'/><br />
<div class='newspic'><br />
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'><br />
<script type='text/javascript'><br />
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)<br />
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.deris10.blogspot.com/feeds/posts/default&quot;) //Specify<br />
&quot;label&quot; plus URL to RSS feed<br />
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields<br />
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag<br />
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date<br />
cssfeed.entries_per_page(1)<br />
cssfeed.init()<br />
</script><br />
</div><br />
<div style='clear:both;'/><br />
</div></div>
<ul style="text-align: left;">
<li>Selanjutnya letakan script ini diatas kode <b><span style="color: #38761d;"></head></span></b>.</li>
</ul>
<div class="codeview2">
<br />
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};<br />
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};<br />
//]]><br />
</script><br />
<style type='text/css'><br />
.titlefield{ /*CSS for RSS title link in general*/<br />
text-decoration: none;}<br />
.labelfield{ /*CSS for label field in general*/<br />
color:#0099cc;font-size: 100%;}<br />
.datefield{ /*CSS for date field in general*/<br />
color:#aaa;font:normal 12px courier;text-transform:none;}<br />
#example1{ /*Demo 1 main container*/<br />
width: 960px;<br />
height: 13px;<br />
border: 0px solid #cdcdcd;<br />
padding: 0px;<br />
font:bold 13px courier;<br />
text-transform:none;<br />
text-align:left;<br />
background-color:transparent;}<br />
code{ /*CSS for insructions*/<br />
color: #0099CC;}<br />
#example1 a:link, #example1 a:visited {color:#02ab68;text-decoration:none;}<br />
#example1 a:hover {color:#111;text-decoration:none;}<br />
</style></div>
<br />
<ul style="text-align: left;">
<li>Selesai, Silahkan simpan template Anda.</li>
</ul>
</div>

Membuat Berita Terbaru Blog diatas Header

BERITA TERBARU - Membuat berita terbaru diatas header dari blog akan membuat tampak manis dari sebuah blog, anda bisa melihat demo gambar...