tutorial blog

Cara Menampilkan Deskripsi di Bawah Judul Blog

Chaerul Akbar - 1/15/2017 02:35:00 pm

<div style="text-align: left;"><a href="http://www.chaerulakbar.net/2017/01/cara-menampilkan-deskripsi-di-bawah.html"><b>Cara Menampilkan Deskripsi di Bawah Judul Blog</b></a> - Seusai sekian lama saya tak memberikan tutorial blogger, hari ini saya kembali bakal memberikan tutorial blog yang saya khususkan untuk pemula yaitu tutorial meningkatkankan deskripsi blog di bawah judul. Mungkin tak sedikit blogger pengalaman di luar sana yang telah mengenal tutorial meningkatkan deskripsi blog ini, tetapi yang tetap pemula atau yang baru belajar tentang blogging tentu kebingungan dalam meningkatkan deskripsi blog. Oleh sebab itu apabila blog kamu belum dipasangi deskripsi blog silahkan dipasang, sebab deskripsi ini sangat berpengaruh sekali untuk blog dalam faktor SEO.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Tetapi sebelum masuk ke tutorial disini sedikit saya jelaskan tentang apa itu deskrisp blog serta apa kegunaaannya bagi blog, berikut penjelasannya!. Semacam halnya deskripsi dalam faktor lain, deskripsi blog juga memiliki arti yang hampir sama tetapi sedikit tak sama sebab ini menyangkut suatu  web/blog. Deskripsi blog merupakan Suatu  kata/kalimat yang membahas tentang apa saja yang dibahas dalam suatu  blog, yang biasanya tersedia dibawah judul. Deskripsi ini dikatakan sangat berguna sebab dapat meningkatkan SEO blog, SEO disini dapat dikatakan sebagai istilah untuk mengoptimalkan blog supaya postingan dapat terkesan di mesin pencarian baik itu google, tahoo, bing atau masin pencarian lain.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Singkatnya deskripsi blog ini sebagai penjelas tentang apa yang dibahas dalam suatu  blog yang biasanya tak terlalu panjang, oleh sebab itu apabila blog kamu belum dipasangi deskripsi silahkan dipasang sebab akibatnya sangat besar baik bagi blog maupun SEO. Nah untuk memasang deskripsi pada blog terutama yang berplatform blogger caranya lumayan mudah, sebab pihak blogger telah menyediakan fitur untuk meningkatkan deskripsi blog. Nah untuk tutorial lengkapnya dapat dilihat dibawah ini.</div><div style="text-align: left;"><h4>Cara Menampilkan Deskripsi di Bawah Judul Blog</h4></div><ol><li style="text-align: left;">Pertama yang tentu kamu wajib masuk ke blogger.</li>
<li style="text-align: left;">Kemudian untuk meningkatkankan deskripsi blog lumayan mudah tinggal masuk ke setelan lalu pilih menu dasar.</li>
<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;"><img alt="Cara Membuat Deskripsi di Bawah Judul Blog" border="0" height="435" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNPKFpUM7gp_um2tDyvMiZHtl7BFO6zGUyGVP_r0ZLrbAp4yaUnyfIs1gpMhKRdOcbaskkOx9NE3yxeoKjLaoyYKOlVkYOl42rN9z-AoWS_un808XOAZMP5cHjfbgbekrBmcSfi5hDJw/s640/cara+menambah+deskripsi+di+blogger.png" style="margin-left: auto; margin-right: auto;" title="Cara Membuat Deskripsi di Bawah Judul Blog" width="640" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"></td></tr>
</tbody></table><li style="text-align: left;">Pada menu dasar silahkan klik "Edit" dibagian deskripsi, lalu masukkan deskripsi tentang blog anda. Disini kamu tak dapat membikin deskripsi blog yang terlalu panjang sebab maksimal 500 karakter.</li>
<li style="text-align: left;">Jika sudah silahkan klik "Simpan perubahan", dan lihat hasilnya.</li>
</ol><div style="text-align: left;">Nah mudah bukan <a href="http://www.chaerulakbar.net/2017/01/cara-menampilkan-deskripsi-di-bawah.html">tutorial meningkatkan deskripsi blog di blogger</a>, sekian tutorial blog yang bisa saya berikan Semoga bermanfaat.</div><br />
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Menampilkan Deskripsi di Bawah Judul Blog</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2017-01-15T14:35:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Menampilkan Deskripsi di Bawah Judul Blog</span>
</div>

1/15/2017 02:35:00 pm

Cara Membuat Tombol Demo dan Download Tampilan Elegant

Chaerul Akbar - 11/09/2016 02:57:00 pm

<a href="http://www.chaerulakbar.net/2016/11/cara-membuat-download-demo-di-blog.html" target="_blank">Membuat Tombol Download dan Demo</a>, Kesempatan kali ini saya mencoba membagikan tutorial blog menambahkan<b> tombol download dan demo</b>, munkin dari beberapa blogger ada yang sesuatu yang ingin di bagikan melalui blog baik itu template, softwares, ebook, dan hal lain pasti sangat membutuhkan tombol download dan demo.<br />
<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/AVvXsEjJ9Hp19KAipZPUwFow7zcJ4qFTo81DbCbcj03EIKzwwhjc52uF2P83zRjLaUBdIDuGYyPP9rc8ai8y3Ehxi6xi198WfzjAGwo3Sahl41JwzfHgQS8Tt0-dB_V5ga3UfgfJjSfnfFNL4Jup/s1600/Download-Demo.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tombol Demo dan Download Tampilan Elegant" border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9Hp19KAipZPUwFow7zcJ4qFTo81DbCbcj03EIKzwwhjc52uF2P83zRjLaUBdIDuGYyPP9rc8ai8y3Ehxi6xi198WfzjAGwo3Sahl41JwzfHgQS8Tt0-dB_V5ga3UfgfJjSfnfFNL4Jup/s640/Download-Demo.png" title="Cara Membuat Tombol Demo dan Download Tampilan Elegant" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh tampilan</td></tr>
</tbody></table><br />
<b>Tampilan download demo</b> yang saya bagikan ini menurut saya sangat elegant dengan penambahan <b>font awesome</b> pada tombol.<br />
<br />
Baiklah gak usah berlama-lama langsung kita meluncur ke TKP :<br />
<h4>Cara Membuat Tombol Demo dan Download Tampilan Elegant :</h4>Widget ini menggunakan<b> font awesome</b>, untuk itu silakan menambahkan code link CSS di bawah ini tepat di atas<span style="color: blue;"> </head></span><br />
<br />
<blockquote class="tr_bq"><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></blockquote><br />
1. Silakan masuk Blogger - Template - Edit HTML<br />
2. Letakkan script CSS di bawah di atas <span style="color: blue;">]]></b:skin></span> atau <span style="color: blue;"></style>.</span><br />
<h3>Script CSS</h3><blockquote class="tr_bq">/* CSS Button www.chaerulakbar.net */<br />
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}<br />
.button2 ul{margin:0;padding:0}<br />
.button2 li{display:inline;margin:5px;padding:0;list-style:none}<br />
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}<br />
.button2 li a.download{background:#3498db}<br />
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}<br />
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}<br />
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}<br />
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}<br />
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}<br />
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}</blockquote><br />
3. Simpan Template.<br />
<br />
<a href="http://www.chaerulakbar.net/2016/11/cara-membuat-download-demo-di-blog.html" target="_blank">Untuk menampilkan tombol Download dan Demo</a> silakan masukkan script di bawah ini di dalam postingan kamu yang ini di beri tampilan Download dan Demo. Saat memasukkan scriptnya di postingan masuk ke (Tab <b>HTML</b>) bukan <b>Compose.</b><br />
<h3><b>Script HTML dalam postingan</b></h3><blockquote class="tr_bq"><div style="text-align: center;"><br />
  <ul class="button2"><br />
    <li><a class="demo" href="http://www.chaerulakbar.net" target="_blank">Demo Link</a></li><br />
    <li><a class="download" href="http://www.chaerulakbar.net" target="_blank">Download Link</a></li><br />
  </ul><br />
</div><br />
<div class="clear"></div><b> </b></blockquote><h3><b>Catatan:</b></h3>- Silakan ganti tulisan <b>http://www.chaerulakbar.net</b> untuk link target kamu.<br />
- Untuk memudahkan pencarian script di dalam template silakan tekan <b>CTLR + F</b><br />
<div style="text-align: center;"><ul class="button2"><li><a class="demo" href="http://www.bagebagi.net/2016/11/download-notepad-70-32-bit-64-bit.html" target="_blank">Demo </a></li>
</ul></div><div class="clear"></div>Demikian tutorial Cara Membuat Tombol Demo dan Download Tampilan Elegant, Semoga tutorial blog ini bisa bermanfaat dan berhasil di terapkan di blog kamu.<br />
<br />
script by <i>http://www.arlinadzgn.com/2016/04/membuat-tombol-demo-dan-download-flat-ui.html</i>
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Membuat Tombol Demo dan Download Tampilan Elegant</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2016-11-09T14:57:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Membuat Tombol Demo dan Download Tampilan Elegant</span>
</div>

11/09/2016 02:57:00 pm

Cara Membuat Widget Random Post

Chaerul Akbar - 9/14/2016 04:04:00 pm

<a href="http://chaerulakbar.blogspot.com/2016/09/cara-membuat-widget-random-post.html">Membuat Widget Random Post</a> - bertujuan untuk menampilkan postingan artikel secara acak yang ada di blog kamu, Widget random post ini hanya menampilkan judul dari postingan, Jadi widget ini tidaklah memberatkan loading blog kamu ketika ada pengunjung yang mampir.<br />
<br />
Menambah widget random post sangat mudah kamu hanya perlu memasukkan kode script yang ada di bawah di ini.<br />
<br />
<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="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Cara Membuat Widget Random Post Di Blog" border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWbS6eyxOcb5zPThpXC7b4Agg1sP4hMxxjvNdLN-FNgnGqZHIqvhG5mIYOHRwSjGujjqLfvHJhPr697_AftFx1LzLNvB8i3GPGe1PnWH3IOQFcygPCNKSrTWmCW8CUn3A7dh9AqkGIigD/s640/random-post-tanpa-thump-01.jpg" title="Widget Random Post" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Random Post</i></td></tr>
</tbody></table>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://demo-blog-chaerulakbar.blogspot.co.id/2016/09/postingan-demo-ke-empat.html" target="_blank">Demo</a></li>
<li>Download</li>
</ul>
</div>
<div class="clear">
</div>
<br />
<b><span style="font-size: large;"> #Cara Membuat Widget Random Post</span></b><br />
<br />
<b>1</b>. Masuk ke blog kamu.<br />
<b>2</b>. Menu tab Tata letak.<br />
<b>3</b>. Tambahkan gadget di sidebar yang kamu inginkan.<br />
<b>4</b>. Pilih HTML/Javascript dan masukkan kode yang ada di bawah ini.<br />
<br />
<blockquote class="tr_bq">
<ul id="random-posts"></ul><br />
<script><br />
//<![CDATA[<br />
var homePage = "<span style="color: red;">http://chaerulakbar.blogspot.co.id/</span>",<br />
numPosts = <span style="color: blue;">5</span>;<br />
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);<br />
//]]><br />
</script><p><a href="http://chaerulakbar.blogspot.co.id" target="_blank">Random Post</a></p></blockquote>
" Tulisan warna <i>merah </i>di atas silakan ganti dengan URL kamu, dan angka 5 yang berwarna <i>biru </i>silakan ganti sesuai jumlah random postingan yang ingin di tampilkan "<br />
<br />
<b>5</b>. Klik Simpan dan lihat hasilnya.<br />
<br />
Dengan adanya widget random post pengunjung akan dengan mudah melihat isi dari blog kamu yang mungkin berada pada laman blog yang di buka oleh pengunjung, Sekian tutorial <a href="http://chaerulakbar.blogspot.com/2016/09/cara-membuat-widget-random-post.html">cara membuat widget random post</a> semoga bermanfaat.
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Membuat Widget Random Post</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2016-09-14T16:04:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Membuat Widget Random Post</span>
</div>

9/14/2016 04:04:00 pm

Cara Memasang Iklan Di Bawah Artikel

Chaerul Akbar - 9/13/2016 07:18:00 pm

<b>Cara Memasang Iklan Di Bawah Postingan</b> - Kali ini saya membuat tutorial mengenai <a href="http://chaerulakbar.blogspot.com/2016/09/cara-memasang-iklan-di-bawah-artikel.html">Cara Memasang Iklan Di Akhir Postingan/Artikel</a>, Memasang iklan di akhir potingan artikel bertujuan agar dapat perhatian dari pengunjung, Karena penempatan iklan di akhir postingan artikel posisinya sangat idel mendapatkan perhatian dari pengunjung sehingga kemungkinan besar iklan dapat di klik oleh pengunjung.<br />
<br />
Menurut dari berbagai sumber penempatan iklan ( PPC ) di letakkan di antara konten postingan, Dengan kemungkinan besar iklan dapat di klik oleh pengunjung, Apalagi jika iklan di letakkan di tengah potingan artikel dan iklan tersebut lebih menonjol dari konten yang bisa tanpa sengaja di klik oleh pengunjung, Iklan boleh saja di letakkan di tengah artikel dengan syarat tidak melanggar aturan dari penyedian jasa Iklan dan tidak menggangu isi dari konten.<br />
<br />
Sebelum kita melanjutkan ke pembahasan kita kali ini <a href="http://chaerulakbar.blogspot.com/2016/09/cara-memasang-iklan-di-bawah-artikel.html">Cara Memasang Iklan Di Akhir Postingan/Artikel</a>, Ada baiknya kamu Back up terlebih dahuhu template kamu untuk menghindari hal-hal yang tidak di inginkan.<br />
<br />
<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="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="cra memasang iklan di bawah postingan/artikel" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxL3E6rdNmPS8gdY7Cfv92Jq2VkuE6XzsKSZnfztzxA2FzncdEzHT_t_w38JoAKDZOxDbwvw6IhFpKrnt1R5pGVJM2v7VPBpHvwFShK44XM1DvGtU7m1DDGHZYTBBadUIHbGwAc8xzr3q/s640/Iklan-bawah-postingan.jpg" title="Iklan Bawah Artikel" width="480" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">( iklan bawah postingan/artikel )</span></td></tr>
</tbody></table>
<div style="text-align: left;">
<h3>
 <b><span style="font-size: large;">Memasang Iklan Di Bawah Artikel</span></b></h3>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: small;">1. Parse script / kode iklan yang kamu punya ke <a href="http://chaerulakbar.blogspot.co.id/2016/09/ads-script-converted.html">Parse Script Adsense</a>.</span></div>
<div style="text-align: left;">
<span style="font-size: small;">2. Copy paste iklan kamu dan masukkan di kolom parse script adsense dan klik "Convert".</span></div>
<div style="text-align: left;">
<span style="font-size: small;">3.  Jika sudah masuk ke blog kamu - Template - Edit HTML.</span></div>
<div style="text-align: left;">
<span style="font-size: small;">4. Cari kode script <data:post.body/> dan masukkan script yang ada di bawah ini tepat dibawah </span><br />
<span style="font-size: small;"><data:post.body/>.</span></div>
<div style="text-align: left;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='text-align: <span style="color: blue;">center</span>;'><br />
<span style="color: red;">Letakan script / kode iklan yang sudah kamu parse disini</span>.<br />
</div><br />
</b:if><span style="font-size: small;"> </span></div>
</blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: small;">Copy paste script iklan yang sudah kamu parse di tulisan warna merah, ganti tulisan warna merah dengan kode iklan yang sudah di parse dan ganti tulisan warna biru jika kamu mau merubah letak posisi iklan <span style="color: blue;">center</span>, <span style="color: blue;">left</span>, <span style="color: blue;">right</span>.</span><span style="font-size: small;"> ( jika kamu menemukan lebih dari satu script </span><span style="font-size: small;"><data:post.body/> coba satu persatu ).</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: small;">Tujuan dari memasang iklan dibawah adalah untuk meningkatkan penghasilan tambahan di blog kamu, karena letak iklan sangat ideal dan pengunjung dapat melihat iklan setelah selesai membaca artikel kamu. kelanjutan artikel nanti kita akan membahas bagaimana cara memasang iklan di bawah judul artikel dan di tengah artikel.</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: small;">Dengan penempatan iklan yang ideal maka kamu bisa memaksimalkan pendapatan dari program iklan ( PPC ), Sekian artikel <a href="http://chaerulakbar.blogspot.com/2016/09/cara-memasang-iklan-di-bawah-artikel.html">cara memasang iklan di bawah postingan/artikel</a> semoga bermanfaat.</span></div>
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Memasang Iklan Di Bawah Artikel</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2016-09-13T19:18:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Memasang Iklan Di Bawah Artikel</span>
</div>

9/13/2016 07:18:00 pm

Cara Membuat Daftar Isi Perlabel Di Blog

Chaerul Akbar - 9/13/2016 01:05:00 pm

Halo sahabat blogger kembali lagi saya akan membagikan tutorial<i> <a href="http://chaerulakbar.blogspot.com/2016/09/membuat-daftar-isi-perlabel.html"><b>cara membuat daftar isi</b></a> </i>sederhana di blog, salah satu fungsi dari pembuatan daftar isi yakni agar blog tertata rapi seperti halnya sebuah buku belum lengkap jika tidak tersedia daftar isinya.<br />
<br />
Pembuatan daftar isi ini akan di urut perlabel/kategori yang ada di blog kamu, Baiklah kita langsung saja ke pembahasan tutorial ini.<br />
<br />
<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="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara membuat daftar sis perlabel di blog" border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnu0wj57Rd3lqL921rpcB0P1jf6Kv8M2d0ixCnczPP6TGEn0Dw9YzdznV9KKWZC1b1cmo7CYlQyi4tWqdlhmWe2E6GbEQlz1LUiqRmNL0o11S05LYBJ2zu1tEFGmVBqwKIgysxiD2DcpTD/s640/DaftarIsi01.jpg" title="Daftar Isi" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Contoh Daftar Isi Perlabel)</td></tr>
</tbody></table>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://chaerulakbar.blogspot.co.id/p/daftra-isi.html" target="_blank">Demo</a></li>
<li>Download </li>
</ul>
</div>
<div class="clear">
</div>
<div style="text-align: left;">
<h3>
<span style="font-size: large;"><b>Cara Membuat Daftar Isi Perlabel Di Blog</b></span> </h3>
</div>
1. Masuk ke blog kamu.<br />
2. Buat Laman laman baru.<br />
3. Buat judul Daftar isi, Sitemap atau Index tergantung mana yang kamu suka, Masuk ke tab <b>HTML</b>.<br />
(Ingat <b>HTML </b>Bukan di <b>Compose</b>) Masukkan script di bawah ini.<br />
<br />
<blockquote class="tr_bq">
<div style="border: 1px solid #000000; height: 450px; overflow: auto; padding: 5px; width: auto;"><br />
<script src="https://sites.google.com/site/chaerulakbr/chaerul-script/daftar-isi-blog.js"></script><script src="<span style="color: red;">https://chaerulakbar.blogspot.com</span>/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script><br />
</div></blockquote>
<br />
4. Ganti tulisan warna merah dengan URL blog kamu.<br />
5. Save/Publikasikan dan lihat hasilnya.<br />
<br />
Terimakasih sudah membaca tutorial <a href="http://chaerulakbar.blogspot.com/2016/09/membuat-daftar-isi-perlabel.html"><b>Cara Membuat Daftar Isi Perlabel Di Blog</b></a> semoga bermanfaat.<br />
<br />
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Membuat Daftar Isi Perlabel Di Blog</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2016-09-13T13:05:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Membuat Daftar Isi Perlabel Di Blog</span>
</div>

9/13/2016 01:05:00 pm

Cara Membuat Sticky Widget Sidebar Di Blog

Chaerul Akbar - 9/12/2016 05:17:00 pm

<a href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target=""><i><b>Membuat Efek Sticky widget Di Sidebar</b></i></a>, Apa pernah kalian mampir di sebuah blog dan mendapatkan widget di blog itu ada bagian element atau widgetnya ketika kamu melakukan scroll kebawah pada halaman/page widget tersebut diam/tertahan, itulah maksud dari pembahasan kita kali ini.<br />
<br />
Baca Juga:<br />
<ul>
<li><a href="http://chaerulakbar.blogspot.co.id/2016/09/cara-memasang-widget-perlabel-di-blogger.html" target="_blank">Cara memasang widget perlabel di blog</a></li>
<li><a href="http://chaerulakbar.blogspot.co.id/2016/08/membuat-multi-widget-di-blog.html" target="_blank">Membuat multi widget di blog</a> </li>
</ul>
Pada kesempatan kali ini saya akan berbagi tutorial yang saya rangkum dari berbagi sumber untuk membuat sticky widget pada sidebar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara membuat sticky widget di sidebar blog" border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftAi1FSBLAlGtJvmzziHUVrHfhqtz-ZTO1gA8CawiNBrIe4yUiQxD4LK5U028P0yp9c8tpERMHrXLLL4yGalhTwkonbu_PxajstaB8KjIniEocclcnPPEtM47jOUw8PTY3bFGuiRa7vh-/s640/widgetsticky01.jpg" title="Sticky Widget" width="640" /></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://demo-blog-chaerulakbar.blogspot.co.id/2016/09/demo-widget-sticky-sidebar.html" target="_blank">Demo</a></li>
<li><a class="download" href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<b><span style="font-size: large;">#Cara Membuat Sticky Widget Di Sidebar</span></b><br />
<br />
1. Masuk blog kamu.<br />
2. Pilih Edit HTML template blog.<br />
3. Cari kode </body> dan letakkan kode yang ada di bawah ini tepat di atas </body>.<br />
<blockquote class="tr_bq">
<script><br />
//<![CDATA[<br />
bs_makeSticky("<span style="color: red;">Letakkan kode, ID Widget yang mau di Sticky</span>");<br />
function bs_makeSticky(elem) {<br />
    var bs_sticky = document.getElementById(elem);<br />
    var scrollee = document.createElement("div");<br />
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);<br />
    var width = bs_sticky.offsetWidth;<br />
    var iniClass = bs_sticky.className + ' bs_sticky';<br />
    window.addEventListener('scroll', bs_sticking, false);<br />
    function bs_sticking() {<br />
        var rect = scrollee.getBoundingClientRect();<br />
        if (rect.top < 0) {<br />
            bs_sticky.className = iniClass + ' bs_sticking';<br />
            bs_sticky.style.width = width + "px";<br />
        } else {<br />
            bs_sticky.className = iniClass;<br />
        }<br />
    }<br />
}<br />
//]]><br />
</script><br />
<style><br />
.bs_sticking {position:fixed; top:0; z-index:9999;}<br />
</style>  </blockquote>
<div style="text-align: center;">
<i><span style="font-size: xx-small;">sumber kode seocips.com</span></i></div>
<br />
Sebelum save, Kamu harus menggati tulisan warna merah sesuai ID Widget yang mau di buat sticky.<br />
4. Simpan/Save dan lihat hasilnya.<br />
<br />
Sekian tutorial<a href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target=""><b> membuat efek sticky widget di sidebar</b></a>, Semoga bermanfaat.
<div class='hrecipe'>
    Title: <span class='item'><span class='fn'>Cara Membuat Sticky Widget Sidebar Di Blog</span></span><br/>
    Posted by:<span class='author'>Unknown</span><br/>
    Published :<span class='published'>2016-09-12T17:17:00+08:00</span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
    Rating: <span class='average'>3.5</span><br/>
    Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'>Cara Membuat Sticky Widget Sidebar Di Blog</span>
</div>

9/12/2016 05:17:00 pm

Chaerul Akbar

Cara Menampilkan Deskripsi di Bawah Judul Blog

Cara Membuat Tombol Demo dan Download Tampilan Elegant

Cara Membuat Widget Random Post

Cara Memasang Iklan Di Bawah Artikel

Cara Membuat Daftar Isi Perlabel Di Blog

Cara Membuat Sticky Widget Sidebar Di Blog

Popular

Blog Labels

Blog Archive

Anime

Template Blog

Other