Tutorial Go Blog

Trik Mudah Cara Mengganti Foto Profil di Twitter

Trik Mudah Cara Mengganti Foto Profil di Twitter

Tutorial Go Blog Cara Mengganti Foto Profil di Twitter - Bagi sebagian pengguna yang masih baru menjalankan social media twitter, akan...

Baca selengkapnya »

16.14

Cara Upload Gambar atau Foto di Twitter

Cara Upload Gambar atau Foto di Twitter

Tutorial Go Blog Cara Upload Gambar atau Foto di Twitter - Twitter merupakan salah satu situs sosial media yang saat ini juga sedang po...

Baca selengkapnya »

08.16

Kumpulan 15 Situs SosBook dengan Pagerank Tinggi

Kumpulan 15 Situs SosBook dengan Pagerank Tinggi

Tutorial Go Blog 15 Situs Bookmark Dengan PR Tinggi - Mensubmit URL postingan ke beberapa situs bookmark merupakan sebuah metode yang ...

Baca selengkapnya »

13.28

Cara Update Status di Twitter Dengan Cepat

Cara Update Status di Twitter Dengan Cepat

Tutorial Go Blog Cara Buat Status di Twitter - Makin kesini, tampaknya para pengguna social media twitter makin banyak. Dan tak bisa d...

Baca selengkapnya »

07.36

Bocoran..!! 3 Inti Cara Desain Tampilan Blog SEO Friendly

Bocoran..!! 3 Inti Cara Desain Tampilan Blog SEO Friendly

Tutorial Go Blog 3 Cara Desain Tampilan Blog Agar SEO Friendly - Dulu, para blogger tidak sama sekali mengubah atau merubah pada penam...

Baca selengkapnya »

18.34

Cara Sederhana Login Twitter Super Cepat

Cara Sederhana Login Twitter Super Cepat

Tutorial Go Blog Cara Login Ke Twitter - Buat anda yang sudah memiliki akun twitter dan belum mengerti cara login atau cara masuk ke tw...

Baca selengkapnya »

12.33

Cara Gampil Membuat Akun Twitter Ala Tutorial Go Blog

Cara Gampil Membuat Akun Twitter Ala Tutorial Go Blog

Tutorial Go Blog Cara Membuat Akun Twitter - Jika sudah mulai bosan dengan sosial media tetangga yang itu-itu aja, anda bisa beralih k...

Baca selengkapnya »

10.00

9 Situs Social Bookmarking SEO Terbaik 2016

</h2>
<table border="1" style="width: 400px;">
<tbody>
<tr><td>http://slashdot.org</td></tr>
<tr><td>http://reddit.com</td></tr>
<tr><td>http://netvouz.com</td></tr>
<tr><td>http://bibsonomy.org</td></tr>
<tr><td>http://digg.com</td></tr>
<tr><td>http://fark.com</td></tr>
<tr><td>http://diigo.com</td></tr>
<tr><td>http://linkagogo.com</td></tr>
<tr><td>http://jumptags.com</td></tr>
</tbody></table>
 
Perbanyaklah anda berjalan-jalan di situs social bookmark submission atau social bookmar list yang sudah terdaftar di mesin pencarian google. Dan pastikan social bookmarking yang anda lakukan adalah situs-situs yang SEO friendly. 
 
Nah, seperti itulah info Situs Social Bookmarking yang bisa <a href="http://tutorialgo-blog.blogspot.com/" target="_blank">Tutorial Go Blog</a> sampaikan. Semoga info tentang situs-situs social bookmark ini dapat berguna dan mampu memberikan sedikit tambahan traffice pada website/blog yang sedang anda kelola. Terima kasih banyak...

9 Situs Social Bookmarking SEO Terbaik 2016

Tutorial Go Blog Situs Social Bookmarking - Banyak sekali para blogger pemula (Newbie) maupun blogger kolotan yang mengeluh dengan tra...

Baca selengkapnya »

18.48

Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot

<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/AVvXsEjZx06_Dx-U0kpqgds8EuDZzTEAoFpbxSwyXFgjY6BsA7OL_KcHWffj_n0BCeyAxNnemauQ-ycekvxRNJni7l6s9XQnz2gqxJqfbFYW50C4DuuXD4OckjzB_VQ4bBZrpSSgwehc59yeG5w/s1600/1t.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="314" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZx06_Dx-U0kpqgds8EuDZzTEAoFpbxSwyXFgjY6BsA7OL_KcHWffj_n0BCeyAxNnemauQ-ycekvxRNJni7l6s9XQnz2gqxJqfbFYW50C4DuuXD4OckjzB_VQ4bBZrpSSgwehc59yeG5w/s320/1t.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tutorial Go Blog</td></tr>
</tbody></table>
 
<a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-gampil-membuat-widget-popular-post.html" target="_blank">Cara Membuat Popular Post Warna-Warni</a> - Kali ini pembahasan dari Tutorial Go Blog tentang popular post di blog. Widget popular post atau widget entri populer ini sangat berpengaruh besar pada sebuah website/blog yang sedang di kelola. Jadi, jika anda sebagai blogger pemula maupun kolotan yang masih belum memasang widget popular post di blog, alangkah baiknya anda segera membuatnya agar tampilan blog semakin menarik perhatian pengunjung. 
 
Cara membuat popular post di blog itu bagaimana..?? Mudah kok, dan anda tidak akan mengalami kesusahan dalam membuat widget popular post tersebut. Tapi, tinggal bagaimana anda memilih model atau jenis macam apa yang ingin anda tampilkan widget popular post di blog anda. 
 
Model pembuatan widget popular post itu apa saja sih..?? Lumayan banyak, namun saya sebutkan yang inti-intinya saja ya, misalnya ada yang membuat popular post sederhana, cara membuat popular post bergerak, ada juga cara membuat popular post slide dan yang akan dibahas oleh <a href="http://tutorialgo-blog.blogspot.com/" target="_blank">Tutorial Go Blog</a> ialah cara membuat popular post warna-warni di blog. 
 
Baiklah, sebelum itu anda harus copy terlebih dahulu kode yang ada di bawah ini.Toh juga nanti kode tersebut akan anda paste-kan di salah satu element pada dashboard blog anda. 
 
 
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
/* Popular Post */ 
.PopularPosts ul, 
.PopularPosts li, 
.PopularPosts li img, 
.PopularPosts li a, 
.PopularPosts li a img { 
margin:0 0; 
padding:0 0; 
list-style:none; 
border:none; 
background:none; 
outline:none; 
} 
.PopularPosts ul { 
margin:.5em 0; 
list-style:none; 
color:black; 
counter-reset:num; 
} 
.PopularPosts ul li img { 
display:block; 
margin:0 .5em 0 0; 
width:50px; 
height:50px; 
float:left; 
} 
.PopularPosts ul li { 
background-color:#eee; 
margin:0 10% .4em 0 !important; 
padding:.5em 1.5em .5em .5em !important; 
counter-increment:num; 
position:relative; 
} 
.PopularPosts ul li:before, 
.PopularPosts ul li .item-title a, .PopularPosts ul li a { 
font-weight:normal; 
color:#000 !important; 
text-decoration:none; 
} 
.PopularPosts ul li:before { 
content:counter(num) !important; 
display:block; 
position:absolute; 
background-color:#333; 
color:#fff !important; 
width:22px; 
height:22px; 
line-height:22px; 
text-align:center; 
top:0px; 
right:0px; 
padding-right:0px !important; 
} 
/* Set color and level */ 
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important} 
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important} 
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important} 
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important} 
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important} 
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important} 
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important} 
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important} 
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important} 
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important} 
.PopularPosts .item-thumbnail { 
margin:0 0 0 0; 
} 
.PopularPosts .item-snippet { 
font-size:11px; 
} 
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed 
} 
.widget-content ul li:last-child{border-bottom:medium none !important 
} 
.widget-content ul li a{color:#333 
} 
.widget-content ul li a:hover{color:#C80441 
} 
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00 
}
</div>
 
Catatan : 
<ol>
<li>Warna merah adalah kode warna.</li>
<li>Warna biru adalah urutan warna/postingan.</li>
</ol>
 
<h2>
Cara Menambahkan Widget Popular Post di Blog</h2>
1. Buka browser. Masuk ke alamat <a href="http://blogger.com/">blogger.com</a>, kemudian login dan masukkan email serta kata sandi blog anda. 
 
<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/AVvXsEhk4LXbi-ivb0fWgEVMYGw4CZHyaIFeD5l5x17e4vshZJMcLS06uPfvDuTPerU61OFSR9-n7lQ19KDw4Gs370iSayKG7dJOkbIwcSB2eJGieCPc5EZaCes2QAY78t3liKqs0zcNWHKHXdg/s1600/11t.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="319" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4LXbi-ivb0fWgEVMYGw4CZHyaIFeD5l5x17e4vshZJMcLS06uPfvDuTPerU61OFSR9-n7lQ19KDw4Gs370iSayKG7dJOkbIwcSB2eJGieCPc5EZaCes2QAY78t3liKqs0zcNWHKHXdg/s320/11t.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 1</td></tr>
</tbody></table>
 
2. Masuk ke dashboard blogger, lalu pilih menu element "Tata Letak". 
 
<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/AVvXsEh2wTlI-rsZ0nWKaz3Jsuy0lta6o1PE0pVmBuv1Ngk8PlWLAT7XPyh3eF5ZTfd57MQEpDSE-QTX4WBZvsysV2-_5Lkpi6e88Ws0zjOzs5Zo5_brutQRWSp8Q7iqikoNEGOB0azcBnErGvA/s1600/1recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="108" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wTlI-rsZ0nWKaz3Jsuy0lta6o1PE0pVmBuv1Ngk8PlWLAT7XPyh3eF5ZTfd57MQEpDSE-QTX4WBZvsysV2-_5Lkpi6e88Ws0zjOzs5Zo5_brutQRWSp8Q7iqikoNEGOB0azcBnErGvA/s320/1recentpost.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 2</td></tr>
</tbody></table>
 
3. Kemudian langsung anda tekan element "Tambahkan Gadget" atau "Add Gadget" dari sisi mana saja. Tapi disarankan, ambil sisi kanan depan layar anda. 
 
<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/AVvXsEjTd-CFtijClwX1wGfsPUDV5991ARiJVDFxhBhuaLd7fCgg63GolpcEbQaK59Qtnm5-pvMNXS_bTQQFqXESZgfS87GOAktG-_gYf3zw76JH1eoCAqDVPBXmedBMp0_2NI9r-nZSfWYPjic/s1600/3t.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="226" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTd-CFtijClwX1wGfsPUDV5991ARiJVDFxhBhuaLd7fCgg63GolpcEbQaK59Qtnm5-pvMNXS_bTQQFqXESZgfS87GOAktG-_gYf3zw76JH1eoCAqDVPBXmedBMp0_2NI9r-nZSfWYPjic/s320/3t.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 3</td></tr>
</tbody></table>
 
4. Carilah menu gadget yang yang bertuliskan "Entri Popular" atau "Popular Post". Kemudian anda setting dan setelah itu "Simpan". 
 
<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/AVvXsEgG3gjDM6LnrtORJP4k0i7-s8adt9l5S3joZGmQh9yBLo4spY8cF8EULJPgbVqih0QJF86ZukbnEUIiizdV4vZm3x4KeUzAGGrJrM2eQztV0utqOm1Ec49ZFwHgmAL_RuJvohnG-TVTnJ8/s1600/4t.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="201" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3gjDM6LnrtORJP4k0i7-s8adt9l5S3joZGmQh9yBLo4spY8cF8EULJPgbVqih0QJF86ZukbnEUIiizdV4vZm3x4KeUzAGGrJrM2eQztV0utqOm1Ec49ZFwHgmAL_RuJvohnG-TVTnJ8/s320/4t.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 4</td></tr>
</tbody></table>
 
Nah, jika anda sudah selesai menambahkan widget popular post di blog, kini saatnya anda untuk melakukan langkah berikutnya agar popular post yang anda buat bisa menjadi warna-warni. 
 
<h3>
Cara Membuat Popular Post Warna-Warni</h3>
1. Anda masuk ke element/editor "Template". Kemudian, anda masuk dan tekan ke elemen/editor "Edit HTML". 
 
<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/AVvXsEgaiTV-eOZiid8744tLIifqm5brEqWs_RRKeIVOA1GIIlltYVDWyk7y0zkegm9vlP6z1QeK2riqYsbqxBsX05b7LE5Fb7jl5FtQPr_Z3gFz8kMHJC9knMIo7Y4_QxiAHXF2PLp00Ak2cWg/s1600/1y.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="254" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiTV-eOZiid8744tLIifqm5brEqWs_RRKeIVOA1GIIlltYVDWyk7y0zkegm9vlP6z1QeK2riqYsbqxBsX05b7LE5Fb7jl5FtQPr_Z3gFz8kMHJC9knMIo7Y4_QxiAHXF2PLp00Ak2cWg/s320/1y.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 1</td></tr>
</tbody></table>
 
2.. Klik sembarang, kemudian tekan CTRL+F. Setelah itu, cari kode </style> atau ]]></b:skin>. Kenapa saya suruh tekan ctrl+f, karena supaya lebih mudah untuk mencari kode yang saya sebutkan tersebut. 
 
<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/AVvXsEg1LrTPWyshLxOD0qZYBPK3MV1-ZI4mf-3cjXjgr3iyAAlkYn4dgZIK1XvWogCibqg-EynK4JPjSsZmX5E3GVfC7VKjmftmE4R4uGzP8huXEKQERCGKIACLxH4ZlIYiVA25gbxTvbsM4gw/s1600/yy.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="107" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LrTPWyshLxOD0qZYBPK3MV1-ZI4mf-3cjXjgr3iyAAlkYn4dgZIK1XvWogCibqg-EynK4JPjSsZmX5E3GVfC7VKjmftmE4R4uGzP8huXEKQERCGKIACLxH4ZlIYiVA25gbxTvbsM4gw/s320/yy.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 2</td></tr>
</tbody></table>
 
3. Selanjutnya, anda paste-kan kode css yang telah anda copy sebelumnya, lalu letakkan di atas kode </style> atau ]]></b:skin>. Setelah itu anda "Simpan". 
 
<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/AVvXsEhfi9q1E7XTbnEUpOsI_8AReHO1868QdTByG7b8YUA7Q5vsyV-WXgDg7iFxnTxkDHlAvsJTc7tY2v2Txi3qsR1z_R61iQxlHNaCRmShWBNBgK748qXT8UrRwG1tfAdKWLSN3llN1GD3O1Q/s1600/yyy.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Widget Popular Post Warna Warni di Blog, Cara Mudah Membuat Widget Popular Post Warna-Warni, Cara Membuat Widget Popular Post Warna Warni - Gudang" border="0" height="107" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfi9q1E7XTbnEUpOsI_8AReHO1868QdTByG7b8YUA7Q5vsyV-WXgDg7iFxnTxkDHlAvsJTc7tY2v2Txi3qsR1z_R61iQxlHNaCRmShWBNBgK748qXT8UrRwG1tfAdKWLSN3llN1GD3O1Q/s320/yyy.png" title="Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 3</td></tr>
</tbody></table>
 
Seperti itulah kira-kira Cara Membuat Popular Post Warna-Warni tersebut. Kini anda tinggal lihat hasilnya saja di blog/website. Jika tidak sesuai dengan gambar atau lainnya, anda bisa ulangi kembali atau cari cara lainnya. Terima kasih banyak...

Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot

Tutorial Go Blog Cara Membuat Popular Post Warna-Warni - Kali ini pembahasan dari Tutorial Go Blog tentang popular post di blog. Widg...

Baca selengkapnya »

12.45

Keren..!! Tampilan Terbaru Facebook 2016

Keren..!! Tampilan Terbaru Facebook 2016

Tutorial Go Blog Tampilan Terbaru Facebook - Hebat, facebook kini telah memberikan sebuah tampilan baru lagi dan lebih simple tanpa har...

Baca selengkapnya »

07.13

Cara Membuat Laman Privacy Policy di Blog

Cara Membuat Laman Privacy Policy di Blog

Tutorial Go Blog Cara Mudah Membuat Privacy Policy di Blogspot - Halaman atau laman dalam sebuah situs website/blog sangat penting sek...

Baca selengkapnya »

18.51

Cara Membuat Widget Recent Post 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/AVvXsEiCN7RMP7R7osXBUXq99o6W12RmN4-0hkfvu-wbKEtovS1RO7HalvRvjr7LPU48sptLdYfY4YRJJu0IcJrzh4KTxBe2bHX7GlD9F5gXMFWqjKSQy2Tfx2q_2xu7NmANyIpVR_yFVCOABEM/s1600/Tutorial+go+blog+6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="192" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCN7RMP7R7osXBUXq99o6W12RmN4-0hkfvu-wbKEtovS1RO7HalvRvjr7LPU48sptLdYfY4YRJJu0IcJrzh4KTxBe2bHX7GlD9F5gXMFWqjKSQy2Tfx2q_2xu7NmANyIpVR_yFVCOABEM/s320/Tutorial+go+blog+6.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tutorial Go Blog</td></tr>
</tbody></table>
 
<a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-membuat-widget-recent-post.html" target="_blank">Cara Membuat Recent Post Responsive</a> - Sahabat blogger Tutorial Go Blog, apakah kalian sudah bisa untuk men-desain tampilan blog/website kalian..?? Jika belum, saya sangat bangga sekali apabila sahabat-sahabat belum bisa mengotak-atik desain pada blog/website, karena tentunya artikel yang saya buatankan khusus untuk para newbiener ini tidak sia-sia lho. Tapi, mungkin setelah membaca detil informasi dalam artikel ini mungkin sahabat-sahabat langsung bisa dan mempraktekannya langsung pada blog/website masing-masing. 
 
Pembahasan sebelumnya dan dengan sekarang masih tetap sama atau masih berkaitan dengan <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-mudah-dan-sederhana-memasang.html" target="_blank">cara membuat widget recent post sederhana di blog</a>. Namun, yang namanya membuat recent post itu sangat banyak jenis atau model yang ditampilakn pada blog/website, tinggal sahabat-sahabat pilih mana yang disukainya. Cara membuat related post atau cara membuat recent post di blog sebenranya sangat mudah dilakukan siapapun, asal-kan tahu dan mengerti cara-cara yang harus dilakukannya. 
 
Seperti yang akan <a href="http://tutorialgo-blog.blogspot.com/" target="_blank">Tutorial Go Blog</a> bahas kali ini, yang mana pembahasan atau pelajaran untuk sahabat-sahabat disini tentang cara membuat recent post dengan responsive, bukan cara membuat widget recent post yang berjalan atau sebagainya. 
 
Nah, jika sudah siap. Anda copy paste dahulu kode html script yang ada dibawah ini, kemudian simpan dulu di wordpad atau lainnya. Toh, nanti kode tersebut juga akan ada fungsinya dalam pembuatan atau pemasangan recent post responsive di blog tersebut. 
 
 
<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">
<style scoped="scoped"> 
#dte_recent-post { 
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; 
  color:#333; 
  margin:0 auto; 
  padding:0; 
  min-height:100px; 
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%; 
} 
 
#dte_recent-post li { 
  list-style:none; 
  margin:0; 
  padding:7px; 
  background-color:white; 
  border-bottom:1px solid #ddd; 
} 
 
#dte_recent-post li a img { 
  float:left; 
  margin:0 10px 0 0; 
  padding:0; 
  border:none; 
  background:none; 
  outline:none; 
} 
 
#dte_recent-post li a.title { 
  display:block; 
  font-size:12px; 
  text-decoration:none; 
  color:#990000; 
} 
 
#dte_recent-post li a.title:hover { 
  text-decoration:underline; 
} 
 
#dte_recent-post li span.foot { 
  clear:both; 
  display:block; 
  color:#ccc; 
  margin-top:7px; 
  font-size:10px; 
} 
</style> 
<ul id="dte_recent-post"></ul> 
<script> 
//<![CDATA[ 
var rp_homePage = "http://tutorialgo-blog.blogspot.com", // Your blog homepage 
    rp_numPosts = 5, // How many posts? 
    rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail 
    rp_numChars = 100, // Number of posts summary 
    rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label 
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery" 
    rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image 
    rp_monthNames = [ 
        "Januari", 
        "Februari", 
        "Maret", 
        "April", 
        "Mei", 
        "Juni", 
        "Juli", 
        "Agustus", 
        "September", 
        "Oktober", 
        "November", 
        "Desember" 
    ], 
    rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab 
    rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...) 
//]]> 
</script> 
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>
</div>
 
Catatan : 
<ol>
<li>Warna biru adalah URL Links, ganti URL Links blog anda.</li>
<li>Warna merah adalah jumlah post yang ditampilkan.</li>
</ol>
 
Keterangan : 
- Login ke <a href="http://blogger.com/">Blogger.com</a> 
- Masukkan email & kata sandi (Password) 
- Buka dashboard 
 
Langkah Pertama 
- Anda langsung cari menu pada dashboard blog yang tulisannya "Tata Letak", apabila tidak tahu anda lihat di sisi kiri depan layar kaca notebook maupun komputer anda. 
 
<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/AVvXsEgk8yviQRlQ-h94lnxTUhtL5Nz7JCQhc3tLp5XohcA2QebSZZ23MIJlyBQ564l-3q8PVtzBw7m8UHESO8x07O9lcTKXhXwPzYJD6yALfpJMgdzfVGdI5p8KuRSlpvnWxAdCFC9whKPOH-s/s1600/1recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="108" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8yviQRlQ-h94lnxTUhtL5Nz7JCQhc3tLp5XohcA2QebSZZ23MIJlyBQ564l-3q8PVtzBw7m8UHESO8x07O9lcTKXhXwPzYJD6yALfpJMgdzfVGdI5p8KuRSlpvnWxAdCFC9whKPOH-s/s320/1recentpost.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 1</td></tr>
</tbody></table>
 
Langkah Kedua 
- Selanjutnya, kita bisa memilih untuk masuk dari sisi mana saja di menu element yang bertuliskan "Tambahkan Gadget" tersebut. Dan didalam menu element tersebut, anda akan ditampilkan beberapa jenis menu element/gadget. 
 
<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/AVvXsEjFl00ycFE5OOiI8tZ61e3sM3Uzbd99UBeZ4tswxe76Z7PMoErEopAVOceW0JFhyRTIak8lagrk2dUnDlvzXaEj0vq_x7CI3QWF1fREzxu1-uMwanF-XqcKKDMvuNW_4d6uWC-mw_DSp_Y/s1600/2recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="98" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFl00ycFE5OOiI8tZ61e3sM3Uzbd99UBeZ4tswxe76Z7PMoErEopAVOceW0JFhyRTIak8lagrk2dUnDlvzXaEj0vq_x7CI3QWF1fREzxu1-uMwanF-XqcKKDMvuNW_4d6uWC-mw_DSp_Y/s320/2recentpost.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 2</td></tr>
</tbody></table>
 
Langkah Ketiga 
- Untuk langkah berikutnya, anda cari menu element yang bertuliskan "HTML/JavaScript". Setelah itu.. 
 
<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/AVvXsEjLr1tmh-DAncq0lnimFFse3FEL9Sd_88VuwEVPUzFXePizxk-CnuPoLHFNEukqsMN5tdNLMfTBw1e9QTHXvxwZ9DGb3En_4_uRF1K0SiRBKlHLs_txucPzzjTvlnSjU01xb0WYoHx_15k/s1600/3recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="144" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLr1tmh-DAncq0lnimFFse3FEL9Sd_88VuwEVPUzFXePizxk-CnuPoLHFNEukqsMN5tdNLMfTBw1e9QTHXvxwZ9DGb3En_4_uRF1K0SiRBKlHLs_txucPzzjTvlnSjU01xb0WYoHx_15k/s320/3recentpost.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 3</td></tr>
</tbody></table>
 
Langkah Keempat 
- Setelah itu...Kode script untuk membuat recent post responsive pada blog yang sudah anda copy tadi, sekarang saatnya untuk meletakkan kode tersebut pada kolom yang telah disediakan seperti gambar dibawah ini. Kemudian, anda tekan element "Simpan". 
 
<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/AVvXsEiUVQ21g7DjFQcpcV9IHEgyHqmUvJNBBSenXPMw0G-vGTy_-fxHCdO28n0LcQ8TlbMNF7LkQEEb8dD5vWHmPyilgnoMWwyNLZBq6ZyfpZjhZiEnpPWUr_4K930dumCJGT7PX8DxhVPjurY/s1600/4recentpost.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVQ21g7DjFQcpcV9IHEgyHqmUvJNBBSenXPMw0G-vGTy_-fxHCdO28n0LcQ8TlbMNF7LkQEEb8dD5vWHmPyilgnoMWwyNLZBq6ZyfpZjhZiEnpPWUr_4K930dumCJGT7PX8DxhVPjurY/s1600/4recentpost.png" title="Cara Membuat Widget Recent Post Responsive di Blog" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 4</td></tr>
</tbody></table>
 
Langkah Kelima 
- Berikutnya, jika sudah meletakkan kode script widget recent post responsive di blog atau di menu element dashboard, anda tinggal tekan menu element "Simpan Setelan", kemudian anda bisa mereview hasilnya dengan menekan element "Pratinjau". 
 
<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/AVvXsEj5EJdUxYmkuipdV0MbTiLjQ0NpgWlz5P_TL3-KBgB0PuQlPr5rozhGiqEZqgHUCVf9idoVnI92mu8GlmQMcoVRPC_nAlLJUSwWQWoEO2KVJZZp78BR5ocWJbf3jpVfuMFCeb1ZNEzesYs/s1600/tutorial+go+blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="126" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EJdUxYmkuipdV0MbTiLjQ0NpgWlz5P_TL3-KBgB0PuQlPr5rozhGiqEZqgHUCVf9idoVnI92mu8GlmQMcoVRPC_nAlLJUSwWQWoEO2KVJZZp78BR5ocWJbf3jpVfuMFCeb1ZNEzesYs/s320/tutorial+go+blog.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar 5</td></tr>
</tbody></table>
 
Langkah Terakhir 
- Nah, langkah yang terakhir ini adalah langkah dimana anda akan melihat sebuah hasil karya buatan anda dalam mengotak-atik desain website/blog milik anda agar tampil lebih menarik dari sebelumnya. Contoh hasil gambarnya dibawah ini. 
 
<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/AVvXsEj2ExK3UkHagMdgR5lG1UCTjavgg4kPkI9VldWFEZfu-XcvGf65AvnKXfGVPo4eMYqXvFmcEJZnHM1rCMY-24HByhF8VtSQhtGK9DfsQ7iPaRdkOaphNCfZw0ZoiyBuRWkOm0d-fl-XaFA/s1600/Tutorial+go+blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Resposive Recent Post Slider Di Blog, Membuat Recent Post Dengan Thumbnail Keren Untuk, Cara membuat Recent Post gambar (thumbnail) responsive" border="0" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ExK3UkHagMdgR5lG1UCTjavgg4kPkI9VldWFEZfu-XcvGf65AvnKXfGVPo4eMYqXvFmcEJZnHM1rCMY-24HByhF8VtSQhtGK9DfsQ7iPaRdkOaphNCfZw0ZoiyBuRWkOm0d-fl-XaFA/s320/Tutorial+go+blog.png" title="Cara Membuat Widget Recent Post Responsive di Blog" width="268" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh Hasil Gambar</td></tr>
</tbody></table>
 
Demikianlah ulasan tentang Cara Membuat Recent Post Responsive di blog tersebut. Jika anda menginginkan jenis pembuatan atau pemasangan recent post jenis responsive, ya artikel ini sangat cocok untuk anda pelajari dan prakteknya pun sangat mudah anda lakukan sendiri tanpa harus bertanya-tanya pada mastah-mastah blogger. Jika menurut sahabat-sahabat itu susah, sebaiknya gunakan <a href="http://tutorialgo-blog.blogspot.com/2016/02/cara-simple-dan-gampil-membuat-recent.html" target="_blank">Cara Simple Dan Gampil Membuat Recent Post Dengan Scroll</a> saja. Terima kasih banyak...

Cara Membuat Widget Recent Post Responsive di Blog

Tutorial Go Blog Cara Membuat Recent Post Responsive - Sahabat blogger Tutorial Go Blog , apakah kalian sudah bisa untuk men-desain ta...

Baca selengkapnya »

12.26

Trik Mudah Cara Mengganti Foto Profil di Twitter

Cara Upload Gambar atau Foto di Twitter

Kumpulan 15 Situs SosBook dengan Pagerank Tinggi

Cara Update Status di Twitter Dengan Cepat

Bocoran..!! 3 Inti Cara Desain Tampilan Blog SEO Friendly

Cara Sederhana Login Twitter Super Cepat

Cara Gampil Membuat Akun Twitter Ala Tutorial Go Blog

9 Situs Social Bookmarking SEO Terbaik 2016

Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot

Keren..!! Tampilan Terbaru Facebook 2016

Cara Membuat Laman Privacy Policy di Blog

Cara Membuat Widget Recent Post Responsive di Blog

Popular Post

Comment

Arsip Blog