Tutorial Go Blog

Cara Buat Label di Blogspot Dengan Cepat

<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/AVvXsEg_pIPgFbdchqtkpa8e74UH6XXU-hcmTze4Cyrb1EzOdKwCwXyP6bJu5IUbw_hBUnABpn-Z3VhfPDy095XSR5alyEMpaBTGaDMheWW2Blv9kVl-3eOMZLvzZhuAvNOaOKJTVfWKS3ZKpOI/s1600/tutorial+go+blog+4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" height="209" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pIPgFbdchqtkpa8e74UH6XXU-hcmTze4Cyrb1EzOdKwCwXyP6bJu5IUbw_hBUnABpn-Z3VhfPDy095XSR5alyEMpaBTGaDMheWW2Blv9kVl-3eOMZLvzZhuAvNOaOKJTVfWKS3ZKpOI/s320/tutorial+go+blog+4.png" title="Cara Buat Label di Blogspot Dengan Cepat" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #4c1130;"><i>Tutorial Go Blog</i></span></td></tr>
</tbody></table>
<a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-buat-label-di-blogspot-dengan-cepat.html" target="_blank"><b>Cara Memasang Label di Blog</b></a> - Untuk pelajaran yang satu ini memang adalah syarat membuat blog yang harus anda lakukan jika blog ingin diterima oleh Google. Label, merupakan pilihan kategori dari artikel-artikel yang berkaitan atau terkait, dan label sangat penting untuk di pasang dalam sebuah website/blog.<br />
<br />
<i>Cara memasang widget label di blog</i> yang bakal di perlihatkan tutorialnya oleh <a href="http://tutorialgo-blog.blogspot.com/" target="_blank"><b>Tutorial Go Blog</b></a> hanya yang sederhana saja, tanpa bumbu-bumbu apapun. Membuat label di blog sederhana tidaklah sesulit yang kita pikirkan. Cukup membuka element Tata Letak lalu jadilah label blog anda. Misalnya jika anda sudah memasang label pada blog, alangkah bagusnya <b>buat popular post Warna di blog</b> juga. Caranya ialah baca artikel <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-gampil-membuat-widget-popular-post.html" target="_blank"><i>Cara Gampil Membuat Widget Popular Post Warna</i></a>.<br />
<br />
Memang untuk mempercantik label di blog banyak macam caranya dan <span style="color: #cc0000;"><i>cara membuat widget label di blog</i></span> menggunakan kode html script. Misalnya saja untuk membuat label warna di blog ya menggunakan script html, membuat label bergerak ya juga menggunakan script html. Jadi, belajar yang sederhana saja dulu lah seperti langkah-langkah yang ada dibawah ini dan silahkan baca selengkapnya.<br />
<br />
1. Buka browser, lalu masuk ke alamat <a href="http://blogger.com/">blogger.com</a>. Kemudian, masukkan email & kata sandi.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-NmzXUUvk8OB13NMh_1oVlb-DBt5BfvFbLV1tcumgB1JdFKp5CEv_V_Ahhar1JcKWerMtOedo3elo7yCEw82NvlL4k6EDzUofBDjV2TUtNED-YNwO1ZBEr3n9Z9t2_D3fb5w5y4haqc/s1600/login+blogger+tutorial+go+blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-NmzXUUvk8OB13NMh_1oVlb-DBt5BfvFbLV1tcumgB1JdFKp5CEv_V_Ahhar1JcKWerMtOedo3elo7yCEw82NvlL4k6EDzUofBDjV2TUtNED-YNwO1ZBEr3n9Z9t2_D3fb5w5y4haqc/s1600/login+blogger+tutorial+go+blog.png" title="Cara Buat Label di Blogspot Dengan Cepat" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Gambar 1</i></span></td></tr>
</tbody></table>
<br />
2. Cari, tekan dan masuk ke tombol menu element "<span style="color: #cc0000;">Tata Letak</span>". Posisi menu berada disamping kiri depan layar. Contoh dibawah 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29wTad-pBxf6GR8RVAwbzc-Lf9XFp4nu7a8U5NUHbQR4U9wfUBNfU9G5uGr0xKNxVhTa_WpUFkdeaWkFa5jEIx1xKviCUEv-FW9tANvKCB80r5absZtmz40ohNJFLOTFmsAUQSZO3M4s/s1600/random+post+gerak2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" height="252" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29wTad-pBxf6GR8RVAwbzc-Lf9XFp4nu7a8U5NUHbQR4U9wfUBNfU9G5uGr0xKNxVhTa_WpUFkdeaWkFa5jEIx1xKviCUEv-FW9tANvKCB80r5absZtmz40ohNJFLOTFmsAUQSZO3M4s/s320/random+post+gerak2.png" title="Cara Buat Label di Blogspot Dengan Cepat" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Gambar 2</i></span></td></tr>
</tbody></table>
<br />
3. Langsung saja anda tekan tombol element "<span style="color: #cc0000;">Tambahkan Gadget</span>" dari sisi mana pun.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnFAIvsOba93IPxYy6ISRG-9e6aO3E2BKMO2cJrS5NYNcqLvwJrQCo27UkV3jY8NjxnDhobfr22FFzf1oLzKgPG9fS_yUe7sC1kjgdMf-7_ED95A0FCVA68LqfrN_9rGiksIOHMTX6_w/s1600/random+post+gerak3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" height="117" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnFAIvsOba93IPxYy6ISRG-9e6aO3E2BKMO2cJrS5NYNcqLvwJrQCo27UkV3jY8NjxnDhobfr22FFzf1oLzKgPG9fS_yUe7sC1kjgdMf-7_ED95A0FCVA68LqfrN_9rGiksIOHMTX6_w/s320/random+post+gerak3.png" title="Cara Buat Label di Blogspot Dengan Cepat" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Gambar 3</i></span></td></tr>
</tbody></table>
<br />
4. Cari tombol menu element yang bertuliskan "<span style="color: #cc0000;">Label</span>", kemudian anda tekan menu element tersebut.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUx8TxAwYGfgcqPAGW2qVwwOlu3lIQuognZcneL15cvto35_2fZLuhsi-BAaB6eHn6Sd00by5bManaoyrZdpZ2xTm6ZhgJmniS9AIF_7w92-D8XK_8E4-h18rZ5gyrGWQZIUNk_EB6x48/s1600/label.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUx8TxAwYGfgcqPAGW2qVwwOlu3lIQuognZcneL15cvto35_2fZLuhsi-BAaB6eHn6Sd00by5bManaoyrZdpZ2xTm6ZhgJmniS9AIF_7w92-D8XK_8E4-h18rZ5gyrGWQZIUNk_EB6x48/s1600/label.png" title="Cara Buat Label di Blogspot Dengan Cepat" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Gambar 4</i></span></td></tr>
</tbody></table>
<br />
5. Anda isi judul kolom label. Kemudian, anda bisa memilih tampilkan semua label/label yang dipilih. Dan anda bisa menyortir label dengan alfabetik/berdasarkan frekuensi. Anda juga bisa menampilkan label daftar/cloud serta bisa menampilkan jumlah entri dalam per label. Selanjutnya, anda tekan tombol "<span style="color: #cc0000;">Simpan</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-GlUEefNTEqHxpDU-KeI2l3aMLSST8dqFUDwMbNZbRxL6e-iRCQhyphenhyphenSVfD1uS3xjjCLJKBIBPgywn0VCgAsfIeMf49NmOtVj8-M8I-yRRIbiISCcoZNw-m2dDoSvirvKZxGvOQVY3yFw/s1600/pilihan+label.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-GlUEefNTEqHxpDU-KeI2l3aMLSST8dqFUDwMbNZbRxL6e-iRCQhyphenhyphenSVfD1uS3xjjCLJKBIBPgywn0VCgAsfIeMf49NmOtVj8-M8I-yRRIbiISCcoZNw-m2dDoSvirvKZxGvOQVY3yFw/s1600/pilihan+label.png" title="Cara Buat Label di Blogspot Dengan Cepat" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Gambar 5</i></span></td></tr>
</tbody></table>
<br />
6. Seperti inilah nanti hasil gambarnya, menampilkan label dengan tampilan "<span style="color: #cc0000;">Cloud</span>", tetapi tidak termasuk warna ya..klo warna beda lagi cara pembuatannya.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxbi1W227HMmt0QH9eJnLfnOoEjLDh0XQGHKsGmuugF4QW6BizBr-52XggamDAi87AJOvwhLWc8plznSp8_4EzVPb_S6mxMU9dv8KcWfUpfxfmRU6kpzhVU7HdlopoRS9g1i20h48F4Q/s1600/hasil+label.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Label Pada Blog Terabaru 2015 | Cara Internet, Cara Membuat Label atau Kategori di Blog, Cara Membuat Label Atau Kategori Pada Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxbi1W227HMmt0QH9eJnLfnOoEjLDh0XQGHKsGmuugF4QW6BizBr-52XggamDAi87AJOvwhLWc8plznSp8_4EzVPb_S6mxMU9dv8KcWfUpfxfmRU6kpzhVU7HdlopoRS9g1i20h48F4Q/s1600/hasil+label.png" title="Cara Buat Label di Blogspot Dengan Cepat" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;"><i>Hasil Gambar</i></span></td></tr>
</tbody></table>
<br />
Demikian saja informasi <b>Cara Memasang Label di Blog</b> anda. Semoga anda bisa dan semoga bermanfaat. Buatlah tampilan pada blog-mu semenarik mungkin agar para pengunjung tertarik untuk selalu datang ke blog anda. Baca juga artikel <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-menata-template-pada-blog.html" target="_blank"><i>Cara Menata Template Pada Blog</i></a>. Terima kasih banyak...

Cara Buat Label di Blogspot Dengan Cepat

Tutorial Go Blog Cara Memasang Label di Blog - Untuk pelajaran yang satu ini memang adalah syarat membuat blog yang harus anda lakukan ...

Baca selengkapnya »

08.28

Daftar Situs Backlink Nofollow Terbaru

Daftar Situs Backlink Nofollow Terbaru

Tutorial Go Blog Situs Backlink Nofollow - Bagi sebagian blogger ada yang tahu soal backlink dofollow dan juga backlink nofollow. Kedua...

Baca selengkapnya »

14.37

Daftar Situs Backlink Dofollow Terbaru

Daftar Situs Backlink Dofollow Terbaru

Tutorial Go Blog Daftar Situs Backlink Dofollow - Untuk para pemula pemain blogger, memang masih belum tahu soal dunia backlink dan bi...

Baca selengkapnya »

12.25

Pengertian Soal Backlink Dan Cara Membuatnya

Pengertian Soal Backlink Dan Cara Membuatnya

Tutorial Go Blog Pengertian Soal Backlink Dan Cara Membuatnya - Mendapatkan sebuah traffice dari mesin google pencarian atau juga Yaho...

Baca selengkapnya »

09.06

Cara Membuat Widget Recent Post Bergerak di Blog

<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/AVvXsEj62nsmrZKzZGdTkWI0FvXW6Ijov57lMAX53T9gaZSwNgKS6oESELmK0R0_mMhZ58iTIu0PwBEXhBmOZVpiZt8Od_kCWkZudphDJ-2e71klLInJ70azM2R_eCkiApa1vKOsRJbpZi4laW0/s1600/tutorial+go+blog+9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62nsmrZKzZGdTkWI0FvXW6Ijov57lMAX53T9gaZSwNgKS6oESELmK0R0_mMhZ58iTIu0PwBEXhBmOZVpiZt8Od_kCWkZudphDJ-2e71klLInJ70azM2R_eCkiApa1vKOsRJbpZi4laW0/s1600/tutorial+go+blog+9.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i><span style="color: #cc0000;">Tutorial Go Blog</span></i></td></tr>
</tbody></table>
<br />
<a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-membuat-widget-recent-post.html" target="_blank"><b>Cara Membuat Recent Post Bergerak</b></a> - Banyak sekali sebagian para blogger pemula yang mengeluh dengan cara-cara dalam pembuatan recent post bergerak. Mereka sebagai pemula masih selalu gagal dalam hal <i>memasang recent post bergerak</i> di blog. Maka dari itu, <b>Tutorial Go Blog</b> ingin membantu saudara-saudara pemula blogger yang sekiranya ingin bisa membuat widget recent post bergerak di blog maupun websitenya, silahkan baca terus artikel ini sampai selesai.<br />
<br />
<b>Cara membuat recent post bergerak di blog</b> bisa menambah daya magnet bagi traffice tersendiri, karena recent post ini adalah sebuah widget yang menampilkan artikel terbaru yang baru saja di publikasikan di blog, kira-kira seperti itulah. <span style="color: #cc0000;">Cara membuat recent post berjalan di blog</span> berbeda dengan <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-membuat-widget-recent-post.html" target="_blank"><i>Cara Membuat Widget Recent Post Responsive di Blog</i></a> tersebut, dimana langkah-langkahnya cukup membuat anda kebingungan dan lelah.<br />
<br />
Baiklah, sebelum kita menuju ke langkah selanjutnya, silahkan copy dan simpan dahulu kode script html dibawah ini guys. Toh, nanti juga kode tersebut akan ada gunanya. Jika sudah anda copy, sekarang tinggal chooow ke TKP...!!<br />
<br />
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<span style="color: #f1c232;"><style type="text/css"></span><br />
<span style="color: #f1c232;">    #rp_plus_img{height:377px;}</span><br />
<span style="color: #f1c232;">    #rp_plus_img li {height:60px;padding:5px;list-style:none;</span><br />
<span style="color: #f1c232;">    background-color:#ffffff;</span><br />
<span style="color: #f1c232;">    border:solid 1px #000000;}</span><br />
<span style="color: #f1c232;">    #rp_plus_img a{color:#00000;}</span><br />
<span style="color: #f1c232;">    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;</span><br />
<span style="color: #f1c232;">    text-align:justify;</span><br />
<span style="color: #f1c232;">    -moz-border-radius: 5px;}</span><br />
 <span style="color: #f1c232;">   #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}</span><br />
<span style="color: #f1c232;"><br /></span>
<span style="color: #f1c232;"></style></span><br />
<span style="color: #f1c232;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></span><br />
<span style="color: #f1c232;"></script></span><br />
<span style="color: #f1c232;"><script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"></span><br />
<span style="color: #f1c232;"></script></span><br />
<span style="color: #f1c232;"><script type="text/javascript"></span><br />
<span style="color: #f1c232;">    var speed = 1500;</span><br />
<span style="color: #f1c232;">    var pause = 3500;</span><br />
<span style="color: #f1c232;">    $(document).ready(function(){</span><br />
<span style="color: #f1c232;">    rpnewsticker();</span><br />
<span style="color: #f1c232;">    interval = setInterval(rpnewsticker, pause);</span><br />
<span style="color: #f1c232;">    });</span><br />
<span style="color: #f1c232;"><br /></span>
<span style="color: #f1c232;"></script></span><br />
<span style="color: #f1c232;"><ul id="rp_plus_img"><script></span><br />
<span style="color: #f1c232;">    var <span style="color: #cc0000;">numposts = 5</span>;</span><br />
<span style="color: #f1c232;">    var numchars = 0;</span><br />
<span style="color: #f1c232;"><br /></span>
<span style="color: #f1c232;"></script>     <script src="<span style="color: #3d85c6;">http://tutorialgo-blog.blogspot.com</span>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></span><br />
<span style="color: #f1c232;"></script>     </ul></span><br />
<span style="color: #f1c232;"><small><a href="<span style="color: #3d85c6;">http://tutorialgo-blog.blogspot.com</span>/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></span><br />
<span style="color: #f1c232;"><small><a 
href="<span style="color: #3d85c6;">http://tutorialgo-blog.blogspot.com</span>/2013/05/cara-membuat-widget-recent-posts.html"
 target="_blank">Get This Widget</a></small></span><br />
<span style="color: #f1c232;"></small></span></div>
<br />
<i>Keterangan :</i><br />
- Untuk warna <span style="color: #cc0000;">merah</span> ialah jumlah post yang diterbitkan.<br />
- Untuk warna <span style="color: #3d85c6;">biru</span> ialah URL blog, ganti dengan URL blog anda.<br />
<br />
<h2>
Cara Memasang Widget Recent Post Bergerak</h2>
1. Buka browser mozila maupun chrome di komputer anda. Kemudian, cari alamat <a href="http://blogger.com/">blogger.com</a> dan masuk ke alamat tersebut.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jXOcaHzr0RHFp7GY-nQ4QM2hVlyY5Jz7rfB-90XHHUewyePtla6kDWNdEsY37MDCjEO-PZTRF39wpYOgHY7E4bmqENNTZyNS0g71jSSunFcVcDSkJGDgbpyHaB0g6J6thOiue-4Sff8/s1600/random+post+gerak1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="236" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jXOcaHzr0RHFp7GY-nQ4QM2hVlyY5Jz7rfB-90XHHUewyePtla6kDWNdEsY37MDCjEO-PZTRF39wpYOgHY7E4bmqENNTZyNS0g71jSSunFcVcDSkJGDgbpyHaB0g6J6thOiue-4Sff8/s320/random+post+gerak1.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 1</i></td></tr>
</tbody></table>
<br />
2. Anda masukkan username atau email dan beserta kata sandi atau passowrd blogger anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhhCseWEgl4I8-KASI_OXm70BP_BQRL0JY0sLWLTs8OqR1BPhqOMywoMsQEPunI-8iWogzlbZ4lu-UjLfk6UAnpNw3cii39lIhHHzlkhsloTnDOyfZDExYfcNUkYJChp8nvZJKfr3u9g/s1600/login+blogger+tutorial+go+blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhhCseWEgl4I8-KASI_OXm70BP_BQRL0JY0sLWLTs8OqR1BPhqOMywoMsQEPunI-8iWogzlbZ4lu-UjLfk6UAnpNw3cii39lIhHHzlkhsloTnDOyfZDExYfcNUkYJChp8nvZJKfr3u9g/s1600/login+blogger+tutorial+go+blog.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 2</i></td></tr>
</tbody></table>
<br />
3. Buka dashboard blogger anda, lalu anda segera tekan dan cari menu yang bertuliskan "<span style="color: #cc0000;">Tata Letak</span>" ini, contoh seperti gambar yang telah saya buatkan dibawah 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEmfd-iQV1H6MRFQI5zmUt7q8rM39r99ivVQOGxcbiYO6x_-SBeIwC8EdF1g5V9lUWFjrRzrRnYK1-96bOZARGQ0enOT8anvBi6f2ZT9uHjTS9zscz_odYCvycnIjQ_PkPfigDJ7Q8JQs/s1600/random+post+gerak2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="252" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEmfd-iQV1H6MRFQI5zmUt7q8rM39r99ivVQOGxcbiYO6x_-SBeIwC8EdF1g5V9lUWFjrRzrRnYK1-96bOZARGQ0enOT8anvBi6f2ZT9uHjTS9zscz_odYCvycnIjQ_PkPfigDJ7Q8JQs/s320/random+post+gerak2.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 3</i></td></tr>
</tbody></table>
<br />
4. Jika sudah mengerti, sekarang anda langsung masuk dan tekan tombol "<span style="color: #cc0000;">Tambahkan Gadget</span>", anda bisa memilih dari sisi mana saja untuk masuk ke element tersebut, karena nanti juga bisa di pindah-pindah sesuai selera anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNKp2yn0fITjgoEjgv1gicNyRcoRGUzS3ihCxHhq_iu3DOTjqr_tvaGftBvhRLQyUxgEX_pVXIPdiyqqT7NQGUNjjhwF4CaTf01S6OX9kGN5lV0GAkpexm2pSWBpdBNkMqOgyGNeM5a8/s1600/random+post+gerak3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="117" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNKp2yn0fITjgoEjgv1gicNyRcoRGUzS3ihCxHhq_iu3DOTjqr_tvaGftBvhRLQyUxgEX_pVXIPdiyqqT7NQGUNjjhwF4CaTf01S6OX9kGN5lV0GAkpexm2pSWBpdBNkMqOgyGNeM5a8/s320/random+post+gerak3.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 4</i></td></tr>
</tbody></table>
<br />
5. Berikutnya, anda pilih element widget "<span style="color: #cc0000;">HTML/JavaScript</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpd36eqpFDZOCaiRod6zifI2YhQp1nwPi4_KnyA9AANvhON1CwI2Y2n1gij2hhCA1ZEvG2lcGEcnlzVLlSOHxWdnMoO7gaoG92C_soH0MPF_kTMLbEgVSvj8pHO97rKIPZtCbsRu-KuOs/s1600/3recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="144" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpd36eqpFDZOCaiRod6zifI2YhQp1nwPi4_KnyA9AANvhON1CwI2Y2n1gij2hhCA1ZEvG2lcGEcnlzVLlSOHxWdnMoO7gaoG92C_soH0MPF_kTMLbEgVSvj8pHO97rKIPZtCbsRu-KuOs/s320/3recentpost.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 5</i></td></tr>
</tbody></table>
<br />
6. Setelah itu, kode yang berada di atas yang sebelumnya anda sudah mengcopy-nya, sekarang anda paste-kan kode tersebut di kolom kotak widget seperti gambar dibawah ini. Kemudian tekan tombol "<span style="color: #cc0000;">Simpan</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnUA7BiFBEMyAK96uh0Jnl5rATGMpFjcYxLU2OKlReRwdsKuibmnzVT_Tp9JUDlHKV-l3T4Avb3DGgg3ZNLXdkyEB2Ib3StdZwx1ed4y68jEZjb1uhAPWTHeicZdL7zqpejpslPuHPsc/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="297" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnUA7BiFBEMyAK96uh0Jnl5rATGMpFjcYxLU2OKlReRwdsKuibmnzVT_Tp9JUDlHKV-l3T4Avb3DGgg3ZNLXdkyEB2Ib3StdZwx1ed4y68jEZjb1uhAPWTHeicZdL7zqpejpslPuHPsc/s320/4.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 6</i></td></tr>
</tbody></table>
<br />
7. Lihat hasil proses pembuatan pemasangan widget recent post bergerak di blog yang sedang anda kelola saat 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPns9ryO6AD-FbsW1-XHCzNLqsbMdvXMNXfR6LHTuyqp2SYp5HMH6RLGzkVqcrnpvTCAjjJCgyLuJqoKjlqWhNj3Rt5SLY5VVvjxHa-Rogu8H0peqb45aFpgpy6su786T9876IGzY_9s/s1600/recent+post+gerak.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Recent Posts Bergerak di Blog, Membuat Widget Random Post Bergerak di Blogspot, Cara Membuat Recent Post Berjalan di Blog" border="0" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPns9ryO6AD-FbsW1-XHCzNLqsbMdvXMNXfR6LHTuyqp2SYp5HMH6RLGzkVqcrnpvTCAjjJCgyLuJqoKjlqWhNj3Rt5SLY5VVvjxHa-Rogu8H0peqb45aFpgpy6su786T9876IGzY_9s/s320/recent+post+gerak.png" title="Cara Membuat Widget Recent Post Bergerak di Blog" width="229" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Hasil Gambar</i></td></tr>
</tbody></table>
<br />
Semoga informasi <b>Cara Membuat Recent Post Bergerak</b> ini bisa anda kuasai dan bisa anda juga bagikan atau share lewat artikel maupun lainnya. Nah, jika anda sudah selesai membaca info di atas ini, anda bisa dan diperbolehkan untuk membaca artikel lainnya seperti <a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-membuat-widget-random-post.html" target="_blank"><i>Cara Membuat Widget Random Post Bergerak di Blog</i></a>. Terima kasih banyak...

Cara Membuat Widget Recent Post Bergerak di Blog

Tutorial Go Blog Cara Membuat Recent Post Bergerak - Banyak sekali sebagian para blogger pemula yang mengeluh dengan cara-cara dalam p...

Baca selengkapnya »

19.46

Cara Membuat Widget Random Post Bergerak di Blog

<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/AVvXsEizkojvZu8TpvVC3tH4-YQyBNyHgQ9lT0qOIaq1fvNx7nmmjHZ6eoBNbmZuDqzN1nnq7EK5v8rfFRkm2_YjJgCv1s3Z1uYAzqhfli2ByOr_oE9uahk5MwDMMPjxBMAkwwzeJF6kh6q53-s/s1600/tutorial+go+blog+10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="239" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizkojvZu8TpvVC3tH4-YQyBNyHgQ9lT0qOIaq1fvNx7nmmjHZ6eoBNbmZuDqzN1nnq7EK5v8rfFRkm2_YjJgCv1s3Z1uYAzqhfli2ByOr_oE9uahk5MwDMMPjxBMAkwwzeJF6kh6q53-s/s320/tutorial+go+blog+10.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Tutorial Go Blog</i></span></td></tr>
</tbody></table>
<br />
<a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-membuat-widget-random-post.html" target="_blank"><b>Cara Membuat Random Post Bergerak</b></a> - Pada artikel kali ini, <b>Tutorial Go Blog</b> sudah mempersiapkan pembahasan mengenai bagaimana cara membuat dan juga cara memasang random post bergerak di website atau blog anda. Widget random post yang akan dibahas berbeda dengan pembuatan widget random post yang sebelumnya sudah dibagikan dalam artikel.<br />
<br />
Dengan cara memasang random post bergerak di blog, maka anda bisa menampilkan postingan-postingan dengan secara acak, yang mana artinya postingan terdahulu anda akan dimunculkan kembali dan bahkan hingga disetiap halaman blog. <b>Membuat widget random post</b> sangat berbeda sekali dengan <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-gampil-membuat-widget-popular-post.html" target="_blank"><i>cara membuat widget popular post</i></a> yang biasanya hanya sekedar menampilkan postingan atau artikel yang unggulan maupun populer saja.<br />
<br />
Sebelum melanjutkan ke langkah berikutnya, silahkan copy dahulu <span style="color: #cc0000;"><i>kode script</i></span> pembuatan random post bergerak tersebut yang ada dibawah ini. Jika sudah anda copy, segera langsung ke TKP...!!<br />
<br />
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<span style="color: #f1c232;"><style type="text/css"></span><br />
<span style="color: #f1c232;">/*widget*/</span><br />
<span style="color: #f1c232;">#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}</span><br />
<span style="color: #f1c232;">#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}</span><br />
<span style="color: #f1c232;">#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}</span><br />
<span style="color: #f1c232;">#rp_plus_img li{height:70px;padding:1px;list-style:none;}</span><br />
<span style="color: #f1c232;">#rp_plus_img a{color:#3366ff;}</span><br />
<span style="color: #f1c232;">#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}</span><br />
<span style="color: #f1c232;">#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}</span><br />
<span style="color: #f1c232;">#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}</span><br />
<span style="color: #f1c232;"></style></span><br />
<span style="color: #f1c232;"></span><br />
<span style="color: #f1c232;">  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></span><br />
<span style="color: #f1c232;"><script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script></span><br />
<span style="color: #f1c232;"><script type="text/javascript"></span><br />
<span style="color: #f1c232;">var <span style="color: #cc0000;">speed = 400</span>;</span><br />
<span style="color: #f1c232;">var <span style="color: #741b47;">pause = 3500</span>;</span><br />
<span style="color: #f1c232;">$(document).ready(function(){</span><br />
<span style="color: #f1c232;">rpnewsticker();</span><br />
<span style="color: #f1c232;">interval = setInterval(rpnewsticker, pause);</span><br />
<span style="color: #f1c232;">});</span><br />
<span style="color: #f1c232;"></script></span><br />
<span style="color: #f1c232;"><ul id="rp_plus_img"></span><br />
<span style="color: #f1c232;"><script style="text/javascript"></span><br />
<span style="color: #f1c232;">var <span style="color: #6aa84f;">numposts = 5</span>;</span><br />
<span style="color: #f1c232;">var numchars = 0;</span><br />
<span style="color: #f1c232;"></script></span><br />
<span style="color: #f1c232;"><script src="<span style="color: #0b5394;">http://www.tutorialgo-blog.blogspot.com</span>/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></span><br />
<span style="color: #f1c232;"></ul></span><br />
<span style="color: #f1c232;">  </span></div>
<br />
<i>Keterangan :</i><br />
- Untuk yang berwarna <span style="color: #cc0000;">merah</span> ialah kecepatan berpindahnya post.<br />
- Untuk yang berwarna <span style="color: #6aa84f;">hijau</span> ialah jumlah post yang ditampilkan.<br />
- Untuk yang berwarna <span style="color: #a64d79;">ungu</span> ialah waktu berhenti setiap post.<br />
- Untuk yang berwarna <span style="color: #3d85c6;">biru</span> ialah alamat blog atau URL blog anda (Ganti).<br />
<br />
<h2>
Cara Buat Random Post Bergerak di Blog</h2>
1. Buka browser. Masuk ke alamat <a href="http://blogger.com/">blogger.com</a>.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZg6BT_U6CP_tRvOaN_yhVpetss4vWuZ12jdDLMS-p17ntnjNrwcsGakXgJrZY_AaQOJ9o5WHSJWXh2jdCCcMcDAKzY1kHX4Ymgd2-ClOT2eEofcFkhtUXSu6dxCl7YVuutQeNh6PKJ0/s1600/random+post+gerak1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="236" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZg6BT_U6CP_tRvOaN_yhVpetss4vWuZ12jdDLMS-p17ntnjNrwcsGakXgJrZY_AaQOJ9o5WHSJWXh2jdCCcMcDAKzY1kHX4Ymgd2-ClOT2eEofcFkhtUXSu6dxCl7YVuutQeNh6PKJ0/s320/random+post+gerak1.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 1</i></td></tr>
</tbody></table>
<br />
2. Buka dashboard blog dan tekan menu element "<span style="color: #cc0000;">Tata Letak</span>". Umumnya element yang disebutkan berada di samping kiri depan layar komputer anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRryMvZCdvuOY5LSZ1krVOxMoRaKugxfQv_BSQEhNTiISCuGIXrYdAFAm8m0Nn5wPOMPrQmB9kjaza9Gt8WS637G6fhkrDEYDs_caCNtriEozeCWHE9G_QkDGZxWvUsZrONyks9eamn80/s1600/random+post+gerak2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="252" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRryMvZCdvuOY5LSZ1krVOxMoRaKugxfQv_BSQEhNTiISCuGIXrYdAFAm8m0Nn5wPOMPrQmB9kjaza9Gt8WS637G6fhkrDEYDs_caCNtriEozeCWHE9G_QkDGZxWvUsZrONyks9eamn80/s320/random+post+gerak2.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 2</i></td></tr>
</tbody></table>
<br />
3. Selanjutnya, tekan tombol element "<span style="color: #cc0000;">Tambahkan Gadget</span>" dari sisi mana saja sesuka anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMS5073gGRDT8-jb_YAoUtKfaxaRw-DDx0-O6WTOzSn1PQcc_2tLW6vR97oWxJcRT9abE1-bv4-vJzt-oMzRhhOeCbFAL-4mOzyRmISERqS_PqTk6h3qgMERCcbmj4XsRbII6uYkljv6o/s1600/random+post+gerak3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="117" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMS5073gGRDT8-jb_YAoUtKfaxaRw-DDx0-O6WTOzSn1PQcc_2tLW6vR97oWxJcRT9abE1-bv4-vJzt-oMzRhhOeCbFAL-4mOzyRmISERqS_PqTk6h3qgMERCcbmj4XsRbII6uYkljv6o/s320/random+post+gerak3.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 3</i></td></tr>
</tbody></table>
<br />
4. Kemudian anda tekan tombol menu widget yang bertuliskan "<span style="color: #cc0000;">HTML/JavaScript</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpd36eqpFDZOCaiRod6zifI2YhQp1nwPi4_KnyA9AANvhON1CwI2Y2n1gij2hhCA1ZEvG2lcGEcnlzVLlSOHxWdnMoO7gaoG92C_soH0MPF_kTMLbEgVSvj8pHO97rKIPZtCbsRu-KuOs/s1600/3recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="144" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpd36eqpFDZOCaiRod6zifI2YhQp1nwPi4_KnyA9AANvhON1CwI2Y2n1gij2hhCA1ZEvG2lcGEcnlzVLlSOHxWdnMoO7gaoG92C_soH0MPF_kTMLbEgVSvj8pHO97rKIPZtCbsRu-KuOs/s320/3recentpost.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 4</i></td></tr>
</tbody></table>
<br />
5. Kode script yang diatas anda sudah copy sebelumnya, sekarang letakkan kode tersebut (Paste) ke dalam kolom kotak widget yang sudah disediakan. Kemudian tekan tombol "<span style="color: #cc0000;">Simpan</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnUA7BiFBEMyAK96uh0Jnl5rATGMpFjcYxLU2OKlReRwdsKuibmnzVT_Tp9JUDlHKV-l3T4Avb3DGgg3ZNLXdkyEB2Ib3StdZwx1ed4y68jEZjb1uhAPWTHeicZdL7zqpejpslPuHPsc/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="297" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnUA7BiFBEMyAK96uh0Jnl5rATGMpFjcYxLU2OKlReRwdsKuibmnzVT_Tp9JUDlHKV-l3T4Avb3DGgg3ZNLXdkyEB2Ib3StdZwx1ed4y68jEZjb1uhAPWTHeicZdL7zqpejpslPuHPsc/s320/4.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 5</i></td></tr>
</tbody></table>
<br />
6. Selanjutnya, lihat review pembuatan. Hasilnya akan membuat anda senang dan pengunjung pun semakin betah mengunjungi blog anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MKFDf4VK73-eHB6Rvl4l3UKb__iHl8E6kCmwpYSjBkWQfVuQBQRoPVVfUwOJVrCfuF1yYzfjEb1ZH25TB-mb26fDmG7fIWCn1JzSTuDOI38t6z_OQUXY4VnkwrmmrlVTR-AtbzXoG-0/s1600/random+post+gerak.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Random Post Bergerak di Blogspot, SEOCIPS, Cara Terbaru Membuat Random Post Tanpa Gambar di" border="0" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MKFDf4VK73-eHB6Rvl4l3UKb__iHl8E6kCmwpYSjBkWQfVuQBQRoPVVfUwOJVrCfuF1yYzfjEb1ZH25TB-mb26fDmG7fIWCn1JzSTuDOI38t6z_OQUXY4VnkwrmmrlVTR-AtbzXoG-0/s320/random+post+gerak.png" title="Cara Membuat Widget Random Post Bergerak di Blog" width="205" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Hasil Gambar</i></td></tr>
</tbody></table>
<br />
Demikian pembahasan tentang <b>Cara Membuat Random Post Bergerak</b> tersebut. Semoga anda berhasil melakukan langkah-langkah pembuatan random post bergerak ini. Dan setelah selesai anda membaca artikel di atas tersebut, anda bisa baca juga artikel lain misalnya seperti <a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-buat-tabel-sederhana-di-blog.html" target="_blank"><i>Cara Buat Tabel Sederhana di Blog</i></a>. Terima kasih banyak...

Cara Membuat Widget Random Post Bergerak di Blog

Tutorial Go Blog Cara Membuat Random Post Bergerak - Pada artikel kali ini, Tutorial Go Blog sudah mempersiapkan pembahasan mengenai ...

Baca selengkapnya »

17.08

Cara Buat Tabel Sederhana di Blog

<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/AVvXsEh2CqNCf31MkjyGVhTkDS-mJp9Tkxc9MZXQQT272nqmjLF2uw-OA2jPT8-Mr3uNrYbSpfD-LpTYeGwPzqId4EHj_GCrze2eoRWLVta7L0PNBBfqAG3CaEdW22Yv2uBrgovTpE5MnBFY21g/s1600/tutorial+go+blog+11.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="210" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CqNCf31MkjyGVhTkDS-mJp9Tkxc9MZXQQT272nqmjLF2uw-OA2jPT8-Mr3uNrYbSpfD-LpTYeGwPzqId4EHj_GCrze2eoRWLVta7L0PNBBfqAG3CaEdW22Yv2uBrgovTpE5MnBFY21g/s320/tutorial+go+blog+11.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Tutorial Go Blog</i></td></tr>
</tbody></table>
<br />
<a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-buat-tabel-sederhana-di-blog.html" target="_blank"><b>Cara Membuat Tabel di Blog</b></a> - Membuat tabel di blog atau website memang terbilang susah, itu bagi para pemula dan bahkan ada juga para kolotan pemain blogger yang tak tahu tentang cara membuat tabel di blog lho. Banyak cara-cara membuat tabel yang bisa anda pelajari di <i>Tutorial Go Blog</i> ini, ya salah satunya ada cara membuat tabel dengan tiga tipe yang berbeda. Tinggal pilih, mana yang akan anda gunakan nantinya untuk di pasangkan di blog anda.<br />
<br />
Selain buat tabel di blog, banyak cara lain diantaranya seperti cara membuat tabel di excel, cara membuat tabel html, cara membuat tabel di word dan juga cara membuat tabel distribusi frekuensi. Tinggal anda pelajari mana cara-cara yang anda rasa itu penting untuk menunjang traffice di blog atau website anda yang sedang di kelola saat ini.<br />
<br />
Baca juga : <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-membuat-widget-recent-post.html" target="_blank"><i>Cara Membuat Widget Recent Post Responsive di Blog</i></a><br />
<br />
Nah, langsung saja anda praktekan sekarang.<br />
<br />
1. Buka browser. Masuk ke alamat <a href="http://blogger.com/">blogger.com</a><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/AVvXsEggTi9NedKnbKr9I5287nkJ9PxwwexccMRfmfzJne0Qkex1YQIIVjod7rE5Faezc_P8JIypMvbqE00FVA4V6TsEWA5ymjleoBxlue-De2AcubqG3nhJX63EIBllsokzP1I2erZV8V71sjY/s1600/langkah1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="123" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTi9NedKnbKr9I5287nkJ9PxwwexccMRfmfzJne0Qkex1YQIIVjod7rE5Faezc_P8JIypMvbqE00FVA4V6TsEWA5ymjleoBxlue-De2AcubqG3nhJX63EIBllsokzP1I2erZV8V71sjY/s320/langkah1.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Gambar 1</i></span></td></tr>
</tbody></table>
<br />
2. Setelah itu. Masukkan username atau email dan dengan kata sandi atau password blog anda.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-6oC_rCqNc2Z8Ls0z5pwt6RqDqqoeaTWzH6YO9GWDTVe00_FQEAh92MBfduRbigGhGPffi3Sm5cHbf-9qq4h22kJWT3gBrIeYp5fYOK7QWL2lGIpmjuHROPsUvW3s9vqlfyStVG-8gE/s1600/langkah2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="141" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-6oC_rCqNc2Z8Ls0z5pwt6RqDqqoeaTWzH6YO9GWDTVe00_FQEAh92MBfduRbigGhGPffi3Sm5cHbf-9qq4h22kJWT3gBrIeYp5fYOK7QWL2lGIpmjuHROPsUvW3s9vqlfyStVG-8gE/s320/langkah2.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Gambar 2</i></span></td></tr>
</tbody></table>
<br />
3. Buka dashboard blog anda. Contoh seperti ada di gambar bawah 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DYheQBsDfG1wJZDodV-demCwAq3ewSEHkhdANw67hEYUsZMtbGPZrGkzsodcmObisv7NuZK8JHlBTMgqBGTWi3U7qbfY9LDRf-XCiIKRUH6trAVdMlhzxtnWpIgqhYiat2E4_nokDxw/s1600/langkah3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="104" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DYheQBsDfG1wJZDodV-demCwAq3ewSEHkhdANw67hEYUsZMtbGPZrGkzsodcmObisv7NuZK8JHlBTMgqBGTWi3U7qbfY9LDRf-XCiIKRUH6trAVdMlhzxtnWpIgqhYiat2E4_nokDxw/s320/langkah3.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Gambar 3</i></span></td></tr>
</tbody></table>
<br />
4. Kemudian anda cari menu elemen yang bertuliskan "<b>Entri Baru</b>". Umumnya, posisi element tersebut ada di sisi kiri depan layar. Contoh bisa anda lihat digambar bawah 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOetI25q1lQUyRzkVsSwBjjQZOMnFxC1_OXMvAgZkpUbDfRDPtBFwTMMIyZ1Zcz_a1yV_OvR9ORYSy3KKBGo0kl8IAp671f8XUVsSx2cxtd4G21W5CRZLdKj8NB1OpP5pc_9pgDCKgY9E/s1600/langkah4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOetI25q1lQUyRzkVsSwBjjQZOMnFxC1_OXMvAgZkpUbDfRDPtBFwTMMIyZ1Zcz_a1yV_OvR9ORYSy3KKBGo0kl8IAp671f8XUVsSx2cxtd4G21W5CRZLdKj8NB1OpP5pc_9pgDCKgY9E/s320/langkah4.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Gambar 4</i></span></td></tr>
</tbody></table>
<br />
5. Jika ingin membuat tabel di dalam artikel jangan menggunakan metode element "<b>Compose</b>", gunakanlah metode element "<b>HTML</b>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4vA6ppycdkGQmClHA3C8gr2rLR4yah541vgdj6AxcmTYiejYjQnDJulNZhpGU_lk3xCl0IunkBuMZSeObqtCY8GYAvGCRwuq7v4O8GzfDFudDJXq8E9qcY52VC57FajqBw_qSedgb94/s1600/contoh+script.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="242" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4vA6ppycdkGQmClHA3C8gr2rLR4yah541vgdj6AxcmTYiejYjQnDJulNZhpGU_lk3xCl0IunkBuMZSeObqtCY8GYAvGCRwuq7v4O8GzfDFudDJXq8E9qcY52VC57FajqBw_qSedgb94/s320/contoh+script.jpg" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Gambar 5</i></span></td></tr>
</tbody></table>
<br />
6. Sekarang anda tinggal review hasil pembuatan tabel dalam artikel yang anda buat tersebut dengan cara tekan atau klik "<b>Pratinjau</b>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfT3bDqV1KdA-VnWwlwt_fz-M90Dw7z3QqKa4emaD-tCaF01mkt5C0sMBAr5LslhvY6HqK-nBSOCb2oHzvB8S5rx7a6vWDm1neGVS6_CK6g-x_o0IP8YvJxqoKjK4IlzgvW92Mc5VYGDA/s1600/langkah7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="88" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfT3bDqV1KdA-VnWwlwt_fz-M90Dw7z3QqKa4emaD-tCaF01mkt5C0sMBAr5LslhvY6HqK-nBSOCb2oHzvB8S5rx7a6vWDm1neGVS6_CK6g-x_o0IP8YvJxqoKjK4IlzgvW92Mc5VYGDA/s320/langkah7.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Hasil gambar</i></span></td></tr>
</tbody></table>
<br />
<b>Tipe Tabel Pertama
</b>
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<span style="color: #f1c232;"><table width="400" border="1"></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"></table></span></div>
<br />
Contoh hasil gambar tabel tipe satu :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtfvjAK5-c-LXV081DWKd7e1-kPcRG_hnVreavF7drcah9_bBz2rQGvjNQ2xbTMRexwTn579RWag5aErDuCKmEzOQc0kS7V3qRNIvV0qpCOt9iImDTYo30sofpnnEs_tPiyMPRFwOmEM/s1600/cara+membuat+tabel+di+blog1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="75" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtfvjAK5-c-LXV081DWKd7e1-kPcRG_hnVreavF7drcah9_bBz2rQGvjNQ2xbTMRexwTn579RWag5aErDuCKmEzOQc0kS7V3qRNIvV0qpCOt9iImDTYo30sofpnnEs_tPiyMPRFwOmEM/s320/cara+membuat+tabel+di+blog1.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></div>
<br />
<b>Tipe Tabel Kedua</b>
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<br />
<span style="color: #f1c232;"><table width="400" border="1"></span><br />
<span style="color: #f1c232;"><tr><td colspan="2">Daftar Donatur</td> </tr></span><br />
<span style="color: #f1c232;"><tr><td>1</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>2</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>3</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"></table></span></div>
<br />
Contoh hasil gambar tabel tipe kedua :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbr9Hf38O3fGemF-DSfwx_LC6Vetk9iTRPxcaCkvrKcR9gwGKEZ8dSXtXOMO7I9TsdPt611-wMnVjBu2LU04mvGCOwwbxJfv5Z7NVk_KDLKCx04XUdUv-xlB79hLq2CFrgA5HZnGh-B-4/s1600/cara+membuat+tabel+di+blog2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="105" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbr9Hf38O3fGemF-DSfwx_LC6Vetk9iTRPxcaCkvrKcR9gwGKEZ8dSXtXOMO7I9TsdPt611-wMnVjBu2LU04mvGCOwwbxJfv5Z7NVk_KDLKCx04XUdUv-xlB79hLq2CFrgA5HZnGh-B-4/s320/cara+membuat+tabel+di+blog2.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></div>
<br />
<b>Tipe Tabel Ketiga
</b><br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<br />
<span style="color: #f1c232;"><table width="400" border="1"></span><br />
<span style="color: #f1c232;"><tr><td rowspan="4">Daftar Donatur</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>1</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>2</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>3</td><td>Nama</td></tr></span><br />
<span style="color: #f1c232;"></table></span></div>
<br />
Contoh hasil gambar tabel tipe ketiga :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRB6EbqggvK1Z4Dtwac2M7tzBVZiBhk3mw0Gvh3hTW4sYoT5s1nHMCRng_Ll-qfDD5su3X9rma13Hc2OEXGIWGSgl8PErb9-UBG88NA-iAKB1H8ozKAkP1nGwwcohIgATtLN1LMisP8QU/s1600/cara+membuat+tabel+di+blog3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mudah Membuat Tabel Pada Postingan Blog, Cara Membuat Tabel Di Dalam Postingan Blog, Cara membuat tabel di Blog tanpa Coding" border="0" height="77" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRB6EbqggvK1Z4Dtwac2M7tzBVZiBhk3mw0Gvh3hTW4sYoT5s1nHMCRng_Ll-qfDD5su3X9rma13Hc2OEXGIWGSgl8PErb9-UBG88NA-iAKB1H8ozKAkP1nGwwcohIgATtLN1LMisP8QU/s320/cara+membuat+tabel+di+blog3.png" title="Cara Buat Tabel Sederhana di Blog" width="320" /></a></div>
<br />
Semoga dengan adanya pelajaran <b>Cara Membuat Tabel di Blog</b> ini bisa membantu anda serta pengunjung-pengunjung lain khususnya para blogger pemula merasa senang dan bangga akan situs yang selalu memberikan pelajaran-pelajaran bagus bagi pemula (Blogging). Anda bisa baca referensi lain, misalnya <a href="http://tutorialgo-blog.blogspot.com/2016/03/cara-membuat-tabel-responsive-di-blog.html" target="_blank"><i>Cara Membuat Tabel Responsive di Blog</i></a> tersebut. Terima kasih banyak...

Cara Buat Tabel Sederhana di Blog

Tutorial Go Blog Cara Membuat Tabel di Blog - Membuat tabel di blog atau website memang terbilang susah, itu bagi para pemula dan bahk...

Baca selengkapnya »

07.15

Cara Membuat Tabel Responsive di Blog

<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/AVvXsEgAd08jrqM7kLn_a3FbzO2_qYzTyn0KD2vbi4pOrub045Ao7MWhctgMvwbFffAs8uW6veuJ01dGaf5_NyZYvkRDtpmK4vhoy4zzEllw-Fc-4wJRXvpURehw7JAwQRRbeUWqUJbs0laJ6k8/s1600/tutorial+go+blog+12.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="171" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAd08jrqM7kLn_a3FbzO2_qYzTyn0KD2vbi4pOrub045Ao7MWhctgMvwbFffAs8uW6veuJ01dGaf5_NyZYvkRDtpmK4vhoy4zzEllw-Fc-4wJRXvpURehw7JAwQRRbeUWqUJbs0laJ6k8/s320/tutorial+go+blog+12.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #cc0000;"><i>Tutorial Go Blog</i></span></td></tr>
</tbody></table>
<a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-membuat-tabel-responsive-di-blog.html" target="_blank"><b>Cara Buat Tabel Responsive</b></a> - Bagaimana cara membuat tabel responsive di blog..?? Umumnya, trik seperti ini digunakan oleh para blogger yang suka atau gemar membagikan informasi Tutorial yang masih berkaitan dengan menu daftar, dokumen dan juga jenis-jenis tabel lainnya. Untuk membuat sebuah tabel di blog sangat mudah, anda cuma diharuskan memainkan kode HTML tag <span style="color: #3d85c6;"></table></span> dan <span style="color: #3d85c6;"><tr><td></span>. Kode-kode tersebut bisa dirangkai menjadi sebuah tabel.<br />
<br />
Banyak sekali para blogger yang membagikan informasi tutorial cara pembuatan tabel di blog, namun tak ada penambahan kode CSS-nya. Sehingga seringkali tabel tersebut tak mempunyai kemampuan Responsive apabila blog/website di akses via smartphone, jadinya ya berantakan. Tapi, jika ditambahkan dengan kode CSS tabel akan menyesuaikan diri dengan ukuran layar. Baca juga : <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-gampil-membuat-widget-popular-post.html" target="_blank"><i>Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot</i></a><br />
<br />
Cara membuat tabel responsive itu sanga mudah dan bisa dilakukan dengan singkat. Dan bahkan kode-kode tersebut bisa seenaknya anda melakukan eksperimen tabel yang bagus dan terbaik buatan anda sendiri (Hand made).<br />
<br />
Baiklah, sebelum menuju praktek pembuatan tabel responsive, anda copy paste dahulu kode CSS dibawah ini dan simpan sebentar di word atau notepad.<br />
<br />
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<span style="color: #f1c232;">/* CSS Post Table by trikpos.com */  </span><br />
<span style="color: #f1c232;">.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}  </span><br />
<span style="color: #f1c232;">.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}  </span><br />
<span style="color: #f1c232;">.post-body table.tr-caption-container {border:1px solid #eee;}  </span><br />
<span style="color: #f1c232;">.post-body th{font-weight:700;}  </span><br />
<span style="color: #f1c232;">.post-body table caption{border:none;font-style:italic;}  </span><br />
<span style="color: #f1c232;">.post-body table{}  </span><br />
<span style="color: #f1c232;">.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}  </span><br />
<span style="color: #f1c232;">.post-body td:hover{background:#fafafa;}  </span><br />
<span style="color: #f1c232;">.post-body th{background:#f53b3b;color:#fff;}  </span><br />
<span style="color: #f1c232;">.post-body table.tr-caption-container td {border:none;padding:8px;}  </span><br />
<span style="color: #f1c232;">.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}  </span><br />
<span style="color: #f1c232;">.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}  </span><br />
<span style="color: #f1c232;">img {max-width:100%;height:auto;border:none;}  </span><br />
<span style="color: #f1c232;">table {max-width:100%;width:100%;margin:1.5em auto;}  </span><br />
<span style="color: #f1c232;">table.section-columns td.first.columns-cell{border-left:none}  </span><br />
<span style="color: #f1c232;">table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}  </span><br />
<span style="color: #f1c232;">table.columns-2 td.columns-cell{width:50%}  </span><br />
<span style="color: #f1c232;">table.columns-3 td.columns-cell{width:33.33%}  </span><br />
<span style="color: #f1c232;">table.columns-4 td.columns-cell{width:25%}  </span><br />
<span style="color: #f1c232;">table.section-columns td.columns-cell{vertical-align:top}  </span><br />
<span style="color: #f1c232;">table.tr-caption-container{padding:4px;margin-bottom:.5em}  </span><br />
<span style="color: #f1c232;">td.tr-caption{font-size:80%}  </span><br />
<span style="color: #f1c232;">.widget ul {padding:0;} 
</span></div>
<br />
Jika sudah copy kode tersebut, sekarang langsung kita sama-sama praktekan cara pembuatan tabel responsive di blog bareng <a href="http://tutorialgo-blog.blogspot.com/" target="_blank"><b>Tutorial Go Blog</b></a>.<br />
<br />
<i>Keterangan :</i><br />
- Buka browser, masuk ke alamat <a href="http://blogger.com/">blogger.com</a><br />
- Masukkan email (username) dan kata sandi (password).<br />
<br />
<h2>
Tahap pertama</h2>
- Kode yang di atas tersebut atau kode yang sudah anda copy, anda letakkan di element <b>Edit HTML</b>, dan biasanya diletakkan di atas kode <span style="color: #cc0000;">]]></b:skin></span> ini.<br />
<br />
1. Buka dashboard dan masuk ke element menu "<b>Template</b>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn4Xn3-mCvzYfuetMyLhkxJoBl0aRIObkvAwrY1Q5KpZCvYCfgD3E4_2MU4kCELEg1XI2RQ43JQLeDtivdjvTnWC6AiCo36zgcmKHyEmCzRPSfKIHdo1ae8c-V_Zb80RII4mbBmbsvtCY/s1600/1tabel.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="165" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn4Xn3-mCvzYfuetMyLhkxJoBl0aRIObkvAwrY1Q5KpZCvYCfgD3E4_2MU4kCELEg1XI2RQ43JQLeDtivdjvTnWC6AiCo36zgcmKHyEmCzRPSfKIHdo1ae8c-V_Zb80RII4mbBmbsvtCY/s320/1tabel.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 1</i></td></tr>
</tbody></table>
<br />
2. Kemudian anda tekan atau klik element "<b>Edit HTML</b>" tersebut. Contoh ada digambar bawah 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt2utDhSLLM9SMe_PUBIAyF1X14PU0LV3bKAMcvqx67wn-MXf9bXvjDFaC31TWQXwM_sy3GC8xEMJ80I2L1Sbu1S2og8_Ow70aJ-bBmC043Dm7rkGzAUmgh3NHNiHgfNa4mIbwBVLb7f8/s1600/2tabel.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="121" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt2utDhSLLM9SMe_PUBIAyF1X14PU0LV3bKAMcvqx67wn-MXf9bXvjDFaC31TWQXwM_sy3GC8xEMJ80I2L1Sbu1S2og8_Ow70aJ-bBmC043Dm7rkGzAUmgh3NHNiHgfNa4mIbwBVLb7f8/s320/2tabel.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 2</i></td></tr>
</tbody></table>
<br />
3. Tekan sembarang, lalu anda cari kode <span style="color: #cc0000;">]]></b:skin></span> tersebut, jika merasa kesulitan anda bisa menggunakan cara tekan <b>CTRL+F</b>. Contoh seperti gambar dibawah ini. Jika sudah ketemu kode tersebut, baru anda letakkan kode yang sebelumnya anda copy.
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1KUXl86JEuMK00GAPycw0E8qlc9rjHra8L68KSRIJHOK7vPYwS4vVrr_DJUu3lRVxQGjz0YYVQiPyw_c73GBjyzD3pygrsQYNkRsf4PVIcq6MSlv06LzS1sVvxG9XsgFuL_UAcfK5BWU/s1600/3tabel.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="106" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1KUXl86JEuMK00GAPycw0E8qlc9rjHra8L68KSRIJHOK7vPYwS4vVrr_DJUu3lRVxQGjz0YYVQiPyw_c73GBjyzD3pygrsQYNkRsf4PVIcq6MSlv06LzS1sVvxG9XsgFuL_UAcfK5BWU/s320/3tabel.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 3</i></td></tr>
</tbody></table>
<br />
Nah, sekarang anda tinggal ke tahap yang selanjutnya dengan cara memasang kode tabel seperti dibawah ini. Copy kode dibawah ini.<br />
<br />
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<br />
<span style="color: #f1c232;"><table width="400" border="1"></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"><tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr></span><br />
<span style="color: #f1c232;"></table>
</span></div>
<br />
Seperti biasa keterangan masih sama seperti yang diatas tersebut.<br />
<br />
<h3>
Tahap Kedua</h3>
- Untuk kode yang kedua anda copy tersebut adalah kode pembuatan atau pemasangan tabel didalam postingan maupun artikel. Caranya sebagai berikut:<br />
<br />
1. Anda langsung tekan menu "<b>Entri Baru</b>" dan gunakan metode HTML, jangan gunakan metode Compose untuk meletakkan kode tabel, nanti tidak akan muncul.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWs-fy6zIYiT_1m5l8GjB-tl5BeZI4GxcQTFfsx0nWwJ08omxTVlbfAerBtMnpDRHytlkGxAFnpScYNML1cQ6Jx9IW2DEpxbo5tQJ97TErRpMzXUo3vxhU6CaVCNq8KTcbN1XDXFgcHA/s1600/tabel1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="144" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWs-fy6zIYiT_1m5l8GjB-tl5BeZI4GxcQTFfsx0nWwJ08omxTVlbfAerBtMnpDRHytlkGxAFnpScYNML1cQ6Jx9IW2DEpxbo5tQJ97TErRpMzXUo3vxhU6CaVCNq8KTcbN1XDXFgcHA/s320/tabel1.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 1</i></td></tr>
</tbody></table>
<br />
2. Jika sudah meletakkan kode, anda tekan menu "<b>Compose</b>" dan setelah itu anda tekan menu "<b>Simpan</b>". Kemudian, anda review dengan cara tekan tombol "<span style="color: #cc0000;">Pratinjau</span>".<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrTH4_mORktFRizr8BllEGNHq1zUb_VfSAMdHAiPKe2Om2yQK305BHF3D8W9i0xhaHBazmu-lMI9georg5FZ3V-hlM9APR1OyhJqLgc-xWrOVkQFZvRts2keRFcdtY2pg3EOex-DJIJU/s1600/tabel2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="103" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrTH4_mORktFRizr8BllEGNHq1zUb_VfSAMdHAiPKe2Om2yQK305BHF3D8W9i0xhaHBazmu-lMI9georg5FZ3V-hlM9APR1OyhJqLgc-xWrOVkQFZvRts2keRFcdtY2pg3EOex-DJIJU/s320/tabel2.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Gambar 2</i></td></tr>
</tbody></table>
<br />
3. Lihat hasil pembuatan tabel responsive yang sudah anda lakukan sejak tadi.<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gN9Mtrcj4GMYGa0c1XPeyE0K_hzdJZbksavnTKjH6_LCOt-k9sIpu1tQJQllqXYgFljNHby0r2hA4F6M4mrOJCqSv_AZ-NP_QtF0dwmYVaPhHH0DQiiZa-Nu92hmm4Z0vt-iGdQsVa0/s1600/langkah7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML" border="0" height="88" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gN9Mtrcj4GMYGa0c1XPeyE0K_hzdJZbksavnTKjH6_LCOt-k9sIpu1tQJQllqXYgFljNHby0r2hA4F6M4mrOJCqSv_AZ-NP_QtF0dwmYVaPhHH0DQiiZa-Nu92hmm4Z0vt-iGdQsVa0/s320/langkah7.png" title="Cara Membuat Tabel Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Hasil Gambar</i></td></tr>
</tbody></table>
<br />
Sangat bagus bukan..!! Tentunya anda bangga bisa membuat tabel sendiri di blog, apalagi tabel yang anda buat juga responsive. Semakin percaya diri saja untuk mengembangkan blog sendiri. Dan jika ingin membuat unik tabel buatan sendiri, anda bisa baca artikel <i>Cara Membuat Tabel di Blog</i> tersebut.<br />
<br />
Terima kasih, telah sudi membaca pelajaran <b>Cara Buat Tabel Responsive</b> tersebut. Semoga anda senang, semoga anda betah dan semoga anda membagikan terus informasi-informasi dari situs ini kepada teman-teman seprofesi anda. Sekali lagi, terima kasih banyak...