tag:blogger.com,1999:blog-52189117476569638862024-03-19T10:56:46.868+08:00BlogManado - Tutorial Web Design - Blogs ManadoTutorial Web DesignBlog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.comBlogger379125tag:blogger.com,1999:blog-5218911747656963886.post-55414328163365235122021-03-27T11:34:00.001+08:002021-03-27T11:34:24.238+08:003 Template Premium Blogger 2021 Responsive SEO Gratis Download<p> </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFMbl12rkkCa26uEh_6V0HwYWm12JUVqZo2Vtbe-O3ST925S7Dvmz4vvONSCt8Ma_msS1ExlBI4TeJhCMXYHaA8ybsah9NfoyFEOY_IS_JhII2cqirQIOztxUNM0vtz75cSFGPC4K4Men/s750/Download+Template+Premium+Gratis.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="450" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFMbl12rkkCa26uEh_6V0HwYWm12JUVqZo2Vtbe-O3ST925S7Dvmz4vvONSCt8Ma_msS1ExlBI4TeJhCMXYHaA8ybsah9NfoyFEOY_IS_JhII2cqirQIOztxUNM0vtz75cSFGPC4K4Men/s16000/Download+Template+Premium+Gratis.jpg" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Download Template Premium Gratis Blogger 2021 Responsive SEO. ©2021 ferlyandosandala.my.id </td></tr></tbody></table><br />Pertama-tama saya minta maaf ke kawan-kawan sekalian, karena sudah lama tidak melakukan postingan artikel di blog pribadi saya. Oke, Artikel saya kali ini untuk membagikan Download Template Premium Gratis Blogger 2021 Responsive SEO seperti judul diatas.<p></p><p><br /></p><p>Langsung saja pada tujaan teman-teman yang beruntung membuka blog pribadi saya.</p><p><br /></p><p><b>1</b>. detikweb adalah template blogger mirip situs berita terkenal detikcom terbaru 2020 dengan tampilan halaman depan dan postingan yang diubah secara keseluruhan. Tampilan detikweb berbeda dari detikcoy yang tampilannya menyerupai detikcom sampai akhir 2019. Seperti yang kita ketahui, detikcom mengubah total tampilan web-nya mulai awal tahun 2020.<br /><br />Tampilan mobile seluler detikweb sudah memiliki fitur Dark Mode (mode malam). Jadi, pengunjung bisa lebih nyaman membaca berita / artikel dengan pewarnaan yang menyejukkan mata. Dan fitur Dark Mode ini menjadi kelebihan tersendiri dari detikcom yang asli.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TakFrerkXxZpx0t-KJQazYHYQKEei6VBy8uTn5IBan9-PDsmEJa8PfxPMJf1XjpexHBrSjEbDebmRFOX8LpTQuaENUKwLx3KC8LbpOLSgIpBIQxf3XMAP6-mX0C6oWmkGYQJuOAfQy1O/s406/Template+Detikweb.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TakFrerkXxZpx0t-KJQazYHYQKEei6VBy8uTn5IBan9-PDsmEJa8PfxPMJf1XjpexHBrSjEbDebmRFOX8LpTQuaENUKwLx3KC8LbpOLSgIpBIQxf3XMAP6-mX0C6oWmkGYQJuOAfQy1O/s16000/Template+Detikweb.png" /></a></div><h3 style="text-align: center;"><b><a href="https://infosatu.co.id" target="_blank">Demo</a></b></h3><h2 style="font-family: "Google Sans", Arial, Helvetica, sans-serif; line-height: normal; margin: 0px; padding: 0px;">detikweb - Template Blogger detikcom Terbaru 2021</h2><div><br /></div><ul style="border: 0px; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px 0px 0px 25px; vertical-align: baseline;"><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Perfectly Structured Data - <a class="external text" href="https://developers.google.com/structured-data/testing-tool/?url=https://www.infosatu.co.id/" rel="external" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Mobile Friendly Design - <a class="external text" href="https://www.google.com/webmasters/tools/mobile-friendly/?url=https://infosatu.co.id/" rel="external" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">PageSpeed Score A (89%)</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">SEO A (95%)</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Responsive Design</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">SEO Optimized</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Dark Mode on Mobile<span class="new" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Time Ago Format (Index)<span class="new" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Latest News Running Text<span class="new" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Special Page for Popular News<span class="new" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span> - <a class="external text" href="https://www.infosatu.co.id/p/terpopuler.html" rel="external" style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Google AdSense Ready</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Sticky Navbar & Sidebar</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Theme-color Status Bar (mobile)</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Auto Resize Thumbnail Image</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Facebook Comments</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Social Media Icons in Footer</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">Compatible with IE8+, Mozilla, Chrome, Safari</span></li><li style="border: 0px; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;">All Completely Automatic...</span></li></ul>Jika tidak jadi link dowload dibawah, komen aja email teman-teman, saya usahakan dikirim secepatnya.<br /><h3 style="text-align: center;">Download</h3><p><br /></p><p><b>2</b>. Kompasweb adalah template blogger mirip situs berita terkenal Kompas.com. Versi ini dibuat karena maraknya pembajakan template yang sebelumnya, yaitu Kompaz.</p><p><br /></p><p>Kami memutuskan untuk menjual terpisah dari updatean template Kompaz, dan untuk pembeli Kompaz, kami akan mengirim hanya untuk yang membeli versi premium.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS86qoeIomN3wRlqIzSEzSnHaZUWkInTxyTPWyCWlJI5PBXjzfdA8scfSwSF7ek3SKieBsCv7cb_lGSEDqTk8pgqMuc4As9uZwqXOc1v-nb2QT8M3NllYGEAZOBkgDwoijk33KaUS0Flz0/s448/Template+Kompasweb.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="325" data-original-width="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS86qoeIomN3wRlqIzSEzSnHaZUWkInTxyTPWyCWlJI5PBXjzfdA8scfSwSF7ek3SKieBsCv7cb_lGSEDqTk8pgqMuc4As9uZwqXOc1v-nb2QT8M3NllYGEAZOBkgDwoijk33KaUS0Flz0/s16000/Template+Kompasweb.png" /></a></div><p style="text-align: center;"><b><a href="https://www.kabarkorupsi.com/" target="_blank">DEMO</a></b></p><h2 style="font-family: "Google Sans", Arial, Helvetica, sans-serif; line-height: normal; margin: 0px; padding: 0px;">Kompasweb - Template Blogger Kompascom Terbaru 2021</h2><p><br style="font-family: "Google Sans", Arial, Helvetica, sans-serif; font-size: 16px; margin: 0px; padding: 0px;" /></p><ul style="border: 0px; font-family: "Google Sans", Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px 0px 0px 25px; vertical-align: baseline;"><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Perfectly Structured Data - <a class="external text" href="https://search.google.com/structured-data/testing-tool/u/0/?url=https://kabarkorupsi.com/" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Mobile Friendly Design - <a class="external text" href="https://www.google.com/webmasters/tools/mobile-friendly/?url=https://kabarkorupsi.com/" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">SEO B (89%)</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Responsive Design</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">SEO Optimized</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Special Page for Popular News<span class="new" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span> - <a class="external text" href="https://www.kabarkorupsi.com/p/most-popular.html" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Google AdSense Ready</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Sticky Navbar & Sidebar</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Theme-color Status Bar (mobile)</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Auto Resize Thumbnail Image</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Facebook Comments</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Social Media Icons in Footer</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Compatible with IE8+, Mozilla, Chrome, Safari</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">All Completely Automatic...</li></ul><p>Jika tidak jadi link dowload dibawah, komen aja email teman-teman, saya usahakan dikirim secepatnya.</p><p style="text-align: center;"><b>Download</b></p><p style="text-align: center;"><b><br /></b></p><p><b>3</b>. Kumparweb adalah template blogger mirip situs berita terkenal Kumparan.com. Versi ini dibuat karena maraknya pembajakan template yang sebelumnya, yaitu Kumparan.</p><p><br /></p><p>Kami memutuskan untuk menjual terpisah dari updatean template Kumparan, dan untuk pembeli Kumparan, kami akan mengirim hanya untuk yang membeli versi premium.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTEyRsMs-Zt9PjKEN_jNCoUcALmqiKJAHdlrC9kbKbZQez2F7zjcFwhHRbrKJxIieDeiZRJKRl5e6KNrbAGe3iUZhT02RF5WEoxfLdqSpgLbd8X0cLGe15y5lIaytfX62Q3CZFdFLq-53/s424/Template+Kumparanweb.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="336" data-original-width="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTEyRsMs-Zt9PjKEN_jNCoUcALmqiKJAHdlrC9kbKbZQez2F7zjcFwhHRbrKJxIieDeiZRJKRl5e6KNrbAGe3iUZhT02RF5WEoxfLdqSpgLbd8X0cLGe15y5lIaytfX62Q3CZFdFLq-53/s16000/Template+Kumparanweb.png" /></a></div><p style="text-align: center;"><b><a href="https://manadoupdatenews.blogspot.com/" target="_blank">DEMO</a></b></p><h2 style="font-family: "Google Sans", Arial, Helvetica, sans-serif; line-height: normal; margin: 0px; padding: 0px;">Kumparanweb - Template Blogger Kumparancom Terbaru 2021</h2><p><br style="font-family: "Google Sans", Arial, Helvetica, sans-serif; font-size: 16px; margin: 0px; padding: 0px;" /></p><ul style="border: 0px; font-family: "Google Sans", Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px 0px 0px 25px; vertical-align: baseline;"><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Perfectly Structured Data - <a class="external text" href="https://search.google.com/structured-data/testing-tool/u/0/?url=https://manadoupdatenews.blogspot.com/" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Mobile Friendly Design - <a class="external text" href="https://www.google.com/webmasters/tools/mobile-friendly/?url=https://manadoupdatenews.blogspot.com/" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">SEO B (89%)</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Responsive Design</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">SEO Optimized</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Special Page for Popular News<span class="new" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span> - <a class="external text" href="https://manadoupdatenews.blogspot.com/p/trending.html" rel="external" style="border: 0px; font: inherit; margin: 0px; outline: none 0px; padding: 0px; text-decoration-line: none; transition: all 0.31s ease 0s; vertical-align: baseline;">Check</a></li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Google AdSense Ready</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Sticky Navbar & Sidebar</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Theme-color Status Bar (mobile)</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Auto Resize Thumbnail Image</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Facebook Comments</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Social Media Icons in Footer</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">Compatible with IE8+, Mozilla, Chrome, Safari</li><li style="border: 0px; font: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;">All Completely Automatic...</li></ul><p>Jika tidak jadi link dowload dibawah, komen aja email teman-teman, saya usahakan dikirim secepatnya.</p><p style="text-align: center;"><b><a href="https://drive.google.com/file/d/1LoV3fLGYoMus9T4XP84XdEZCXSvZROKn/view?usp=sharing" target="_blank">Download</a></b></p><p>Jika memang teman-teman menginginkan template lain dari postingan saya ini, komen saja dibawah. Siapa tau saya bisa membantu teman-teman untuk mendapatkan template yang teman-teman inginkan.</p><p>Tidak lupa saya ucapkan terima kasih sudah mengunjungi blog pribadi saya. Sukses selalu buat kita semua. Salam Blogging....</p>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-83835643672502451732020-01-06T09:31:00.000+08:002020-01-06T09:31:04.767+08:00Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5z3OzRDN993SgonSvrybN3OqQJNZ2Y2MSM6jW-mhRLAEMVLk4qCGEXhKXveuefW5goFyY1e25otRTftphlJjk46PsqJ48HNS7tv463CXsZS3lHaYsd1YlbJGBehAaGFdwK7k4zM4VEzA/s1600/menu+discroll.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5z3OzRDN993SgonSvrybN3OqQJNZ2Y2MSM6jW-mhRLAEMVLk4qCGEXhKXveuefW5goFyY1e25otRTftphlJjk46PsqJ48HNS7tv463CXsZS3lHaYsd1YlbJGBehAaGFdwK7k4zM4VEzA/s1600/menu+discroll.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Baik Sobat sekalian. Kali ini saya akan membagikan sedikit tips <a href="https://blogsmanado.blogspot.com/2020/01/cara-membuat-menu-melayang.html" rel="nofollow" target="_blank">Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding</a> di tampilan template kita.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Menu fixed atau menu melayang sampai saat ini masih menjadi primadona para Blogger. Dengan menu melayang, maka keterlihatan menu dan kesempatan diakses pengunjung menjadi lebih banyak dan lebih mudah dieksplore.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Untuk itu, untuk melangkapi tutorial yang ada di klikberita.co, saya akan membagikan cara membuat fixed menu atau menu melayang dengan CSS dan Javascript.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Javascript yang digunakannya pun hanya beberapa baris saja dan tidak memerlukan Jquery Library sehingga sangat ringan untuk digunakan di blog tidak menambah loding blog.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Trik jenis ini sangat cocok untuk menu yang posisi awalnya berada di bawah header. Artinya, posisi awal menu tidak menempel di atas.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jika ternyata posisi awal menu blog Anda sudah berada di atas, itu artinya Anda tidak memerlukan trik ini. Untuk membuat menu melayang yang posisi awalnya sudah berada di atas, Anda hanya perlu pakai CSS saja tanpa javascript ataupun jquey, sehingga akan lebih ringan tanpa beban script.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Baiklah, kita mulai untuk <a href="https://blogsmanado.blogspot.com/2020/01/cara-membuat-menu-melayang.html" rel="nofollow" target="_blank">Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding</a>.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<span style="font-size: large;">Di sini saya tidak memberikan cara membuat menunya, hanya membuat menunya menjadi melayang saja. Jadi untuk menunya tetap menggunakan menu yang sudah ada di blog Anda masing-masing.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Langkah Pertama</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tambahkan elemen div berikut untuk membungkus kode HTML menu blog Anda.</span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;"><div id='fixedmenu'></span><br />
<span style="color: blue; font-size: large;">KODE HTML MENU BLOG ANDA DI SINI</span><br />
<span style="color: blue; font-size: large;"></div></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Akan tampil seperti ini</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><span style="white-space: pre;"> </span><span style="color: red;"><div id='fixedmenu'></span></span><br />
<span style="color: blue; font-size: large;"> <span class='show-mobile-menu'/></span><br />
<span style="color: blue; font-size: large;"> <nav class='main-menu-wrap'></span><br />
<span style="color: blue; font-size: large;"> <b:section class='galaxymag-main-menu' id='galaxymag-main-menu' maxwidgets='1' name='Main Menu' showaddelement='no'></span><br />
<span style="color: blue; font-size: large;"> <b:widget id='LinkList155' locked='true' title='Main Menu' type='LinkList' version='2' visible='true'></span><br />
<span style="color: blue; font-size: large;"> <b:widget-settings></span><br />
<span style="color: blue; font-size: large;"> <b:widget-setting name='sorting'>NONE</b:widget-setting></span><br />
<span style="color: blue; font-size: large;"> <b:widget-setting name='text-1'>Berita Korupsi</b:widget-setting></span><br />
<span style="color: blue; font-size: large;"> <b:widget-setting name='link-1'>https://kabarkorupsi.com</b:widget-setting></span><br />
<span style="color: blue; font-size: large;"> <b:widget-setting name='text-0'>Home</b:widget-setting></span><br />
<span style="color: blue; font-size: large;"> <b:widget-setting name='link-0'>/</b:widget-setting></span><br />
<span style="color: blue; font-size: large;"> </b:widget-settings></span><br />
<span style="color: blue; font-size: large;"> <b:includable id='main'></span><br />
<span style="color: blue; font-size: large;"> <b:include name='content'/></span><br />
<span style="color: blue; font-size: large;"> </b:includable></span><br />
<span style="color: blue; font-size: large;"> <b:includable id='content'></span><br />
<span style="color: blue; font-size: large;"> <ul id='galaxymag-main-menu-nav' role='menubar'></span><br />
<span style="color: blue; font-size: large;"> <b:loop values='data:links' var='link'></span><br />
<span style="color: blue; font-size: large;"> <li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li></span><br />
<span style="color: blue; font-size: large;"> </b:loop></span><br />
<span style="color: blue; font-size: large;"> </ul></span><br />
<span style="color: blue; font-size: large;"> </b:includable></span><br />
<span style="color: blue; font-size: large;"> </b:widget></span><br />
<span style="color: blue; font-size: large;"> </b:section></span><br />
<span style="color: blue; font-size: large;"> </nav></span><br />
<span style="color: blue; font-size: large;"> </div></span><br />
<span style="color: blue; font-size: large;"> </div></span><br />
<span style="color: blue; font-size: large;"> </span><span style="color: red; font-size: large;"></div></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kode div tersebut untuk ditandai oleh javascript untuk mendapatkan tinggi elemen dari tepi atas untuk mengeksekusi tindakan selanjutnya ketika elemen tersebut menyentuh tepi atas ketika discroll.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Langkah Kedua</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tambahkan beberapa baris javascript ini di atas kode </body></span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;"><script></span><br />
<span style="color: blue; font-size: large;">//<![CDATA[</span><br />
<span style="color: blue; font-size: large;">const nav = document.querySelector('#fixedmenu');</span><br />
<span style="color: blue; font-size: large;">const navTop = nav.offsetTop;</span><br />
<span style="color: blue; font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">function stickyNavigation() {</span><br />
<span style="color: blue; font-size: large;"> console.log('navTop = ' + navTop);</span><br />
<span style="color: blue; font-size: large;"> console.log('scrollY = ' + window.scrollY);</span><br />
<span style="color: blue; font-size: large;"><br /></span>
<span style="color: blue; font-size: large;"> if (window.scrollY >= navTop) {</span><br />
<span style="color: blue; font-size: large;"> document.body.classList.add('fixed-nav');</span><br />
<span style="color: blue; font-size: large;"> } else {</span><br />
<span style="color: blue; font-size: large;"> document.body.classList.remove('fixed-nav');</span><br />
<span style="color: blue; font-size: large;"> }</span><br />
<span style="color: blue; font-size: large;">}</span><br />
<span style="color: blue; font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">window.addEventListener('scroll', stickyNavigation);</span><br />
<span style="color: blue; font-size: large;">//]]></span><br />
<span style="color: blue; font-size: large;"></script></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Javascript di atas akan menambahkan class fixed-nav pada body ketika elemen yang ditandai menyentuh tepi atas dan ketika elemen kembali ke posisi semula maka class pada body akan dihilangkan.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Langkah Ketiga</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kini saatnya memberikan style pada elemen ketika elemen menyentuh sisi atas dan class ditambahkan pada body agar elemen menjadi melayang.</span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">.fixed-nav #fixedmenu{position:fixed;top:0;left:0;width:100%;z-index:999;}</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">akan jadi CSSnya seperti ini</span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">.rtl #klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab{float:right;margin:-20px -10px 0 0}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab:before{content:'';position:absolute;left:0;top:0;width:100%;height:100vh;background-color:rgba(155,155,155,0.07);box-sizing:border-box;display:block}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li{width:100%;margin:0}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu ul > li > ul.complex-tabs > ul.select-tab > li > a{position:relative;display:block;height:auto;font-size:13px;color:$(megamenu.color);line-height:33px;padding:0 20px}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a:after{content:'\f054';font-family:'Font Awesome 5 Free';font-weight:900;font-size:9px;float:right}</span><br />
<span style="color: blue; font-size: large;">.rtl #klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a:after{content:'\f053';float:left}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active,#galaxymag-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li:hover{background-color:$(megamenu.bg)}</span><br />
<span style="color: blue; font-size: large;">#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a,#galaxymag-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li:hover > a{color:$(megamenu.hover.color)}</span><br />
<span style="color: red; font-size: large;">.fixed-nav #fixedmenu{position:fixed;top:0;left:0;width:100%;z-index:999;}</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Anda bisa menambahkan style lainnya pada CSS di atas untuk mengatur tampilan ketika menu melayang.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Penambahan class pada body ini juga bisa dimanfaatkan untuk mengatur elemen lainnya selain menu, misalnya show hide elemen ketika scroll. Contohnya seperti CSS berikut.</span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">.element{display:none;}</span><br />
<span style="color: blue; font-size: large;">.fixed-nav .element{display:block;}</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Bagaimana, mudah bukan?</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kini saatnya Anda untuk mencoba membuat menu blog Anda menjadi melayang. Silahkan kembangkan dan sesuaikan dengan blog Anda.</span><br />
<span style="font-size: large;"><br /></span>
<div style="text-align: center;">
<span style="color: red; font-size: large;"><a href="https://www.klikberita.co/" rel="nofollow" target="_blank"><b>DEMO</b></a></span></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Demikian tips <a href="https://blogsmanado.blogspot.com/2020/01/cara-membuat-menu-melayang.html" rel="nofollow" target="_blank">Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding</a>. Selamat mencoba.</span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-88676101444385362562019-11-24T00:36:00.000+08:002019-11-24T00:39:52.499+08:00Cara Buat Iklan Melayang Tampil di Versi Mobile<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4XeF3CeuW4LMo919uxYbvex6lLtUPgOAu_tiou-pNpOsk-xsdGxa4DrF7njyKZk_Jh1MgPkxcu4qOHNg-uqBs9ihqAhgvsItOIT4r5fU3_3A1bU3eDVAorYcuqi0svQWN6g5pL1bQak/s1600/Banner-News-Theme-blogger-Responsive-detikcom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="121" data-original-width="976" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4XeF3CeuW4LMo919uxYbvex6lLtUPgOAu_tiou-pNpOsk-xsdGxa4DrF7njyKZk_Jh1MgPkxcu4qOHNg-uqBs9ihqAhgvsItOIT4r5fU3_3A1bU3eDVAorYcuqi0svQWN6g5pL1bQak/s1600/Banner-News-Theme-blogger-Responsive-detikcom.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Cara Membuat Iklan Melayang di Blog Hanya Tampil di Perangkat Android atau Versi Mobile - Banyak permintaan yang masuk ke saya setelah saya membuat artikel tentang cara membuat iklan floating dengan tombol close agar responsive, untuk membuatkan kode script iklan melayang yang hanya tampil jika pengunjung blog menggunakan perangkat Android.</span><br />
<span style="font-size: large;"><br /></span>
<blockquote class="twitter-tweet">
<div dir="ltr" lang="in">
Cara Buat Iklan Melayang Tampil di Versi Mobile<a href="https://t.co/9Uyl6r6B4W">https://t.co/9Uyl6r6B4W</a></div>
— Nando Sandala (@NandoSandala) <a href="https://twitter.com/NandoSandala/status/1198279795852759040?ref_src=twsrc%5Etfw">November 23, 2019</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Konsep sebenarnya adalah sama, yaitu iklan ini akan muncul di tengah-tengah blog dan menutupi artikel bedanya hanyalah script ini hanya tampil di Android jadi pengunjung yang menggunakan Dekstop tidak akan melihat iklan ini, jadi saya sarankan jangan menggunakan ini untuk menampilkan iklan Adsense, karna akan berbahaya untuk akun Adsense Anda, sesuai dengan ketentuan yang di berikan oleh Google karna melanggar TOS.</span><br />
<span style="font-size: large;">Lebih baik kalian isi dengan iklan lainya atau dengan widget fanspage, subscribe, profil dan kontak Anda.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Oke, tidak usah pancang lebar, silahkan Anda ikuti panduan di bawah ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">1. Buka akun Blogger Anda.</span><br />
<span style="font-size: large;">2. Di menu Blogger masuk ke Tema pilih Edit HTML</span><br />
<span style="font-size: large;">3. Copy kode script di bawah ini dan paste di atas kode </body></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><style type='text/css'></span><br />
<span style="font-size: large;">#gb{</span><br />
<span style="font-size: large;">position:fixed;</span><br />
<span style="font-size: large;">top:140px;</span><br />
<span style="font-size: large;">z-index:+1000;</span><br />
<span style="font-size: large;">}</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">* html #gb{position:relative;}</span><br />
<span style="font-size: large;">.gbcontent{</span><br />
<span style="font-size: large;">float:right;</span><br />
<span style="font-size: large;">background:transparant;</span><br />
<span style="font-size: large;">padding:0px;</span><br />
<span style="font-size: large;">}</span><br />
<span style="font-size: large;"></style></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><script type='text/javascript'></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">function showHideGB(){</span><br />
<span style="font-size: large;">var gb = document.getElementById(&quot;gb&quot;);</span><br />
<span style="font-size: large;">var w = gb.offsetWidth;</span><br />
<span style="font-size: large;">gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);</span><br />
<span style="font-size: large;">gb.opened = !gb.opened;</span><br />
<span style="font-size: large;">}</span><br />
<span style="font-size: large;">function moveGB(x0, xf){</span><br />
<span style="font-size: large;">var gb = document.getElementById(&quot;gb&quot;);</span><br />
<span style="font-size: large;">var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;</span><br />
<span style="font-size: large;">var dir = xf&gt;x0 ? 1 : -1;</span><br />
<span style="font-size: large;">var x = x0 + dx * dir-100;</span><br />
<span style="font-size: large;">gb.style.top = x.toString() + &quot;px&quot;;</span><br />
<span style="font-size: large;">if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}</span><br />
<span style="font-size: large;">}</span><br />
<span style="font-size: large;"></script></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><div id='gb'></span><br />
<span style="font-size: large;"><div class='gbtab' onclick='showHideGB()'> </div></span><br />
<span style="font-size: large;"><div class='gbcontent'></span><br />
<span style="font-size: large;"><div style='text-align:center'></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><script></span><br />
<span style="font-size: large;"> function myfunction() {</span><br />
<span style="font-size: large;"> document.getElementById(&#39;teaser2&#39;).style.display = &#39;none&#39;;</span><br />
<span style="font-size: large;"> }</span><br />
<span style="font-size: large;">var delay = 2500;</span><br />
<span style="font-size: large;"></script></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><a href='#' id='close-teaser' onclick='setTimeout( myfunction, delay);'><center><img border='0' data-original-height='0' data-original-width='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNA2N40h6vM6EK9XwkOtGlQ9Z3BUE_bnkJZf4YKMDY9ZfcTPkAEWPrdXWnsz27xkM9njag3PVk5aBptltS2ULmly5yft_3U5Lf28UWLSM3gWjtwMfFt4FuY9_kJ9TuUup-UgDgOAGHsiuc/s1600/btn_close.gif'/></center></a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"></div></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><center></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">KODE IKLAN ANDA</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"></center></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><script type='text/javascript'></span><br />
<span style="font-size: large;">var gb = document.getElementById(&quot;gb&quot;);</span><br />
<span style="font-size: large;">gb.style.center = (20-gb.offsetWidth).toString() + &quot;px&quot;;</span><br />
<span style="font-size: large;"></script></div></div></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"> </div></span><br />
<span style="font-size: large;"><script type='text/javascript'></span><br />
<span style="font-size: large;">//<![CDATA[</span><br />
<span style="font-size: large;">function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=10;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();</span><br />
<span style="font-size: large;">//]]></span><br />
<span style="font-size: large;"></script></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"> 4. Silahkan Anda simpan template yang sudah di tambah dengan kode tersebut..</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Untuk melihat hasilnya silahkan Anda buka blog Anda menggunakan HP atau smartphone. !</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">kurang lebih hasilnya akan seperti ini</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Iklan Melayang di Blog Hanya Tampil di Perangkat Android</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Cukup mudah bukan, silahkan Anda praktekan bagaimana Cara Membuat Iklan Melayang di Blog Hanya Tampil di Perangkat Android, jika tidak bekerja pada template Anda silahkan komen di bawah ini.</span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-27574177636156124222019-11-23T13:20:00.001+08:002019-11-24T00:19:26.480+08:00Cara Membuat Formulir Login Template Blog Blogger Responsif<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh60xn8lyUC98LFVoNX0u5YJr3AxSuwVZf2noXDgfLlxTfbf8TTeMgXEDyYM4VbeVAXfJvz0V03DqfB30BUeX8wLuz4gGDAoBwe5ycQFin73Jsgg7G-PII7zExxG5MJcZbeegspfDc0mZA/s1600/login+from+tempate+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="676" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh60xn8lyUC98LFVoNX0u5YJr3AxSuwVZf2noXDgfLlxTfbf8TTeMgXEDyYM4VbeVAXfJvz0V03DqfB30BUeX8wLuz4gGDAoBwe5ycQFin73Jsgg7G-PII7zExxG5MJcZbeegspfDc0mZA/s320/login+from+tempate+blogger.png" width="283" /></a></div>
<br />
<span style="font-family: inherit; font-size: large;">Cara mudah membuat menu form loggin atau kotak registrasi di blogger, ini berguna bagi perusahaan yang ingin mencari mitra online, atau bagi Anda yang memiliki situs yang mengharuskan pengunjung untuk loggin, untuk membuat form loggin kita bisa mulai dengan langkah mudah mulai dari menambahkan css dan mwmbuat menu loggin di halaman statis blog.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Dalam tutorial ini, BlogsManado akan menggunakan cara yang diambil BlogsManado dari w3css di bawah langkah-langkah ini:</span><br />
<span style="font-family: inherit; font-size: large;">Lihat Demo untuk formulir loggin tayangan</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Langkah-Langkah membuat formulir loggin</span><br />
<span style="font-family: inherit; font-size: large;">Pertama. Taruh css berikut di atas]] </ b: skin></span><br />
<span style="font-family: inherit; font-size: large;">tepat dibawah kode body {font-family: Arial, Helvetica, sans-serif;} atau mirip kode tersebut.</span><br />
<span style="font-family: inherit; font-size: large;">Lalu Pasti kode dibawa ini.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="color: blue; font-family: inherit; font-size: large;">/* Full-width input fields */<br />input[type=text], input[type=password] {<br /> width: 100%;<br /> padding: 12px 20px;<br /> margin: 8px 0;<br /> display: inline-block;<br /> border: 1px solid #ccc;<br /> box-sizing: border-box;<br />}<br />/* Set a style for all buttons */<br />button {<br /> background-color: #4CAF50;<br /> color: white;<br /> padding: 14px 20px;<br /> margin: 8px 0;<br /> border: none;<br /> cursor: pointer;<br /> width: 100%;<br />}<br />button:hover {<br /> opacity: 0.8;<br />}<br />/* Extra styles for the cancel button */<br />.cancelbtn {<br /> width: auto;<br /> padding: 10px 18px;<br /> background-color: #f44336;<br />}<br />/* Center the image and position the close button */<br />.imgcontainer {<br /> text-align: center;<br /> margin: 24px 0 12px 0;<br /> position: relative;<br />}<br />img.avatar {<br /> width: 40%;<br /> border-radius: 50%;<br />}<br />.container {<br /> padding: 16px;<br />}<br />span.psw {<br /> float: right;<br /> padding-top: 16px;<br />}<br />/* The Modal (background) */<br />.modal {<br /> display: none; /* Hidden by default */<br /> position: fixed; /* Stay in place */<br /> z-index: 1; /* Sit on top */<br /> left: 0;<br /> top: 0;<br /> width: 100%; /* Full width */<br /> height: 100%; /* Full height */<br /> overflow: auto; /* Enable scroll if needed */<br /> background-color: rgb(0,0,0); /* Fallback color */<br /> background-color: rgba(0,0,0,0.4); /* Black w/ opacity */<br /> padding-top: 60px;<br />}<br />/* Modal Content/Box */<br />.modal-content {<br /> background-color: #fefefe;<br /> margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */<br /> border: 1px solid #888;<br /> width: 80%; /* Could be more or less, depending on screen size */<br />}<br />/* The Close Button (x) */<br />.close {<br /> position: absolute;<br /> right: 25px;<br /> top: 0;<br /> color: #000;<br /> font-size: 35px;<br /> font-weight: bold;<br />}<br />.close:hover,<br />.close:focus {<br /> color: red;<br /> cursor: pointer;<br />}<br />/* Add Zoom Animation */<br />.animate {<br /> -webkit-animation: animatezoom 0.6s;<br /> animation: animatezoom 0.6s<br />}<br />@-webkit-keyframes animatezoom {<br /> from {-webkit-transform: scale(0)}<br /> to {-webkit-transform: scale(1)}<br />}<br />@keyframes animatezoom {<br /> from {transform: scale(0)}<br /> to {transform: scale(1)}<br />}<br />/* Change styles for span and cancel button on extra Mas screens */<br />@media screen and (max-width: 300px) {<br /> span.psw {<br /> display: block;<br /> float: none;<br /> }<br /> .cancelbtn {<br /> width: 100%;<br /> }<br />}</span></blockquote>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Kedua. Buat judul halaman statis, tambah widget, lalu masukkan kode form login di bawah ini, terserah diposisikan ditempat mana yang ada suka</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: inherit; font-size: large;"><span style="color: red;"><h2>Model Login Form</h2></span><br /><span style="color: blue;"><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button></span><br /><span style="color: blue;"><div id="id01" class="modal"></span><br /><span style="color: blue;"> <form class="modal-content animate" action="/action_page.php"></span><br /><span style="color: blue;"> <div class="imgcontainer"></span><br /><span style="color: blue;"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span></span><br /><span style="color: blue;"> <img src="img_avatar2.png" alt="Avatar" class="avatar"></span><br /><span style="color: blue;"> </div></span><br /><span style="color: blue;"> <div class="container"></span><br /><span style="color: blue;"> <label for="uname"><b>Username</b></label></span><br /><span style="color: blue;"> <input type="text" placeholder="Enter Username" name="uname" required></span><br /><span style="color: blue;"> <label for="psw"><b>Password</b></label></span><br /><span style="color: blue;"> <input type="password" placeholder="Enter Password" name="psw" required></span><br /><span style="color: blue;"> <button type="submit">Login</button></span><br /><span style="color: blue;"> <label></span><br /><span style="color: blue;"> <input type="checkbox" checked="checked" name="remember"> Remember me</span><br /><span style="color: blue;"> </label></span><br /><span style="color: blue;"> </div></span><br /><span style="color: blue;"> <div class="container" style="background-color:#f1f1f1"></span><br /><span style="color: blue;"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button></span><br /><span style="color: blue;"> <span class="psw">Forgot <a href="#">password?</a></span></span><br /><span style="color: blue;"> </div></span><br /><span style="color: blue;"> </form></span><br /><span style="color: blue;"></div></span><br /><span style="color: blue;"><script></span><br /><span style="color: blue;">// Get the modal</span><br /><span style="color: blue;">var modal = document.getElementById('id01');</span><br /><span style="color: blue;">// When the user clicks anywhere outside of the modal, close it</span><br /><span style="color: blue;">window.onclick = function(event) {</span><br /><span style="color: blue;"> if (event.target == modal) {</span><br /><span style="color: blue;"> modal.style.display = "none";</span><br /><span style="color: blue;"> }</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;"></script></span></span></blockquote>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Catatan:</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Ganti nama from sesuai nama yang sobat inginkan <span style="color: red;"><h2>Login Form</h2></span>.</span><br />
<blockquote class="twitter-tweet">
<div dir="ltr" lang="in">
Cara Membuat Formulir Login Template Blog Blogger Responsif <a href="https://t.co/dUEAT1JG0T">https://t.co/dUEAT1JG0T</a></div>
— BlogManado (@BlogManado) <a href="https://twitter.com/BlogManado/status/1198108978624024577?ref_src=twsrc%5Etfw">November 23, 2019</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">Usai itu save template dan lihat hasilnya. Ok sampai disi dulu artikel saya tentang Cara Membuat Formulir Login Template Blog Blogger Responsif, semoga bermanfaat untuk sobat semua.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;"><br /></span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-5428066896500973802019-11-10T09:22:00.001+08:002019-11-10T09:52:28.396+08:00Hipwee Hight Quality Premium Blogger Template Free Download<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8J2ZsISum3UxzMA6RxhyphenhyphenxOWPbaFseRPnQ-GfzP5uBaHhZSuzxF97oKJmGddDJnVHCTgZDQsnJyfeziZ8IC8FzHsz8qoI8Ss-In9z-tB1Hm2tbaeGNCLshx_u3PMhRwVzNxEqT9eVJsQ/s1600/hipwee1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8J2ZsISum3UxzMA6RxhyphenhyphenxOWPbaFseRPnQ-GfzP5uBaHhZSuzxF97oKJmGddDJnVHCTgZDQsnJyfeziZ8IC8FzHsz8qoI8Ss-In9z-tB1Hm2tbaeGNCLshx_u3PMhRwVzNxEqT9eVJsQ/s1600/hipwee1.png" /></a></div>
<div style="text-align: center;">
<b><span style="font-size: x-large;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="font-size: x-large;">General Features</span></b></div>
<span style="font-size: large;"><b>Berikut adalah fitur dan keuntungan jika menggunakan template kami.</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Responsive Design</b></span><br />
<span style="font-size: large;">Dengan desain responsif, website Anda akan terlihat bagus ketika di akses menggunakan desktop, tablet atau smartphone karena konten selalu ditampilkan dengan fokus utama.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Search Engine Optimized</b></span><br />
<span style="font-size: large;">Template kami menggunakan H1, H2, H3 yang dinamis, Google Breadcrumbs, dan internal link yang sudah di sesuaikan sehingga website anda lebih optimal & SEO Friendly.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Cross-browser Compatible</b></span><br />
<span style="font-size: large;">Desain dan kode yang Kami gunakan sesuai dengan standar web. Hal ini memastikan desain website tampil dengan baik di browser internet modern, seperti Firefox, Chrome dll.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Easy to Use</b></span><br />
<span style="font-size: large;">Tata letak pada Admin panel yang simpel akan memudahkan Anda mengatur posisi widget, sehingga blog Anda tetap tertata rapi dan pengunjung juga betah berada di website anda.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>PDF Tutorial</b></span><br />
<span style="font-size: large;">Anda dapat dengan mudah menggunakan template ini karena sudah dilengkapi dengan panduan penggunaan berupa Pdf yang sudah ada didalam folder.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Custom Menu</b></span><br />
<span style="font-size: large;">Template kami menggunakan menu navigasi yang di sesuaikan. Anda dapat menambah dan memodifikasi item menu navigasi yang lebih mudah dari sebelumnya. Halaman, kategori, external link, dll.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Social Share Button</b></span><br />
<span style="font-size: large;">Dengan social share ini membuat pengunjung lebih aktif, mereka dapat membagikan tulisan anda kepada teman-teman mereka di situs sosial media populer seperti facebook, twitter dan Google Plus.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Related Post</b></span><br />
<span style="font-size: large;">Fitur artikel terkait ini memiliki peran penting dari segi SEO. Dengan fitur ini membuat pengunjung tertarik untuk melihat halaman lainnya sehingga dapat memaksimalkan jumlah page view per visit.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Perfect Ad Placement</b></span><br />
<span style="font-size: large;">Penempatan iklan yang sempurna akan meningkatkan CTR / konversi iklan pada blog Anda. Hal ini juga memungkinkan penghasilan Anda juga akan meningkat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Support HTTPS</b></span><br />
<span style="font-size: large;">Anda tidak perlu ragu untuk mengaktifkan HTTPS pada blogspot Anda, karena template kami sudah mendukung sepenuhnya fitur baru blogspot tersebut.</span><br />
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">Fitur Template Hipwee</span></b><br />
<span style="font-size: large;"><b>Berikut adalah fitur dan keuntungan jika menggunakan template Hipwee.</b></span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6AOu2_8dZq378BqSqFztku3Qcb3y1iS0PlZVhknf9PQatqmoADQrSpnD_S89S1qHgv0isg7e1hQwn3sxVpK6nbJYO2Iu4b-eirACHcYGW4w9md-u3zuFSPEn79mV7MAYCNYuHDxUWyU/s1600/services-bootstrap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="555" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6AOu2_8dZq378BqSqFztku3Qcb3y1iS0PlZVhknf9PQatqmoADQrSpnD_S89S1qHgv0isg7e1hQwn3sxVpK6nbJYO2Iu4b-eirACHcYGW4w9md-u3zuFSPEn79mV7MAYCNYuHDxUWyU/s1600/services-bootstrap.gif" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">BUILD WITH BOOTSTRAP</span></b><br />
<span style="font-size: large;">Bootstrap adalah front-end framework yang bagus dan luar biasa yang mengedepankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5b3a7H5oSCwKtqXYLIMFejb2pnj-yG7Zxw-Ua2cRqgQWPZbfBisG4iqnhBr_OyAMj7Hikn-RFswiphbQSIFb7w5Y5KI-th8L-zVBHkzttZEEvOfRwvH8-cpIfuNbaLTSmHRFvm6QvBz8/s1600/Menu-Navigasi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5b3a7H5oSCwKtqXYLIMFejb2pnj-yG7Zxw-Ua2cRqgQWPZbfBisG4iqnhBr_OyAMj7Hikn-RFswiphbQSIFb7w5Y5KI-th8L-zVBHkzttZEEvOfRwvH8-cpIfuNbaLTSmHRFvm6QvBz8/s1600/Menu-Navigasi.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>FIXED NAVIGATION BAR</b></span><br />
<span style="font-size: large;">Menu navigasi ini akan tetap berada diatas meski halaman di scroll kebawah. Tentunya pengunjung akan lebih mudah mengunjungi halaman lain sehingga dapat meningkatkan pageview blog anda. Menu navigasi ini juga mendukung fungsi dropdown.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEick5Tdukmy8xgZfwu1EIQSxnWYQ88aa1iL2TvUzxY57gtJnrVksmyX2CxfsYy_Gn83cMVvTs413xvyfuEPrfhzjVFzXc1Gdhp6gaj3-k6xpCnwfaFfRX3_jg4bzPUyhiMLKSf9hznu1dw/s1600/Tombol-Share.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEick5Tdukmy8xgZfwu1EIQSxnWYQ88aa1iL2TvUzxY57gtJnrVksmyX2CxfsYy_Gn83cMVvTs413xvyfuEPrfhzjVFzXc1Gdhp6gaj3-k6xpCnwfaFfRX3_jg4bzPUyhiMLKSf9hznu1dw/s1600/Tombol-Share.png" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">AWESOME SOCIAL SHARES</span></b><br />
<span style="font-size: large;">Dengan tomobol social share ini membuat pengunjung lebih aktif, mereka dapat membagikan tulisan anda kepada teman-teman mereka di situs sosial media populer seperti facebook atau twitter.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6rgX9Ia6g0hzkOGWbQD1WZZMsx5GV8rK8JZPx_tRU8ksEzrbC8A_fL41BmmWxNlGJlKOa9X8sxevWdIDymFvRsC-kuwIUPHDg0UmDPuIzbq9Abgf6Zb7hRaFphCSr1Bu2C1ZP9hz11g/s1600/Tabview-Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6rgX9Ia6g0hzkOGWbQD1WZZMsx5GV8rK8JZPx_tRU8ksEzrbC8A_fL41BmmWxNlGJlKOa9X8sxevWdIDymFvRsC-kuwIUPHDg0UmDPuIzbq9Abgf6Zb7hRaFphCSr1Bu2C1ZP9hz11g/s1600/Tabview-Widget.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>TABVIEW WIDGET</b></span><br />
<span style="font-size: large;">Fitur ini bermanfaat untuk meminimalkan widget dibagian sidebar, sehingga masih ada space kosong untuk widget lainnya. Tentunya fitur ini membuat blog Anda lebih rapi. Tab 1 adalah widget popular post dan Tab 2 adalah widget recent post (dapat disetting berdasarkan kategori).</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCWOj1aeWsLQYLq9CszqXoxO-QG5I9nQxZeaIaLFa_KQ67gfM7Z2Jr5E76doCat3jmoYr45kjkxwXaWL2I4giG3ZG9dpC0Sf8YtL6oLNUuz5uY5JP-wxlX8Rt34hsLLWZ1F65AiEd_Rk/s1600/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCWOj1aeWsLQYLq9CszqXoxO-QG5I9nQxZeaIaLFa_KQ67gfM7Z2Jr5E76doCat3jmoYr45kjkxwXaWL2I4giG3ZG9dpC0Sf8YtL6oLNUuz5uY5JP-wxlX8Rt34hsLLWZ1F65AiEd_Rk/s1600/Layout.png" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">CUSTOM ADMIN LAYOUT</span></b><br />
<span style="font-size: large;">Tata Letak / Layout mudah difahami & beda dari yang lain. Hal ini memastikan anda akan lebih mudah memahami posisi widget pada blog Anda.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocAJEtu2UO2qi-bGDBNBXPGahL-GpA0K871l6kygdLy2KK5NFlzgo7aOG49YWgH9febLV8FSLrNV-nzmZD42GPC_k985yvcRO9c4Rjgg_ARDrXKMXGtzqQP4F_VD4klBiV5TF4qmeftU/s1600/Search-Box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocAJEtu2UO2qi-bGDBNBXPGahL-GpA0K871l6kygdLy2KK5NFlzgo7aOG49YWgH9febLV8FSLrNV-nzmZD42GPC_k985yvcRO9c4Rjgg_ARDrXKMXGtzqQP4F_VD4klBiV5TF4qmeftU/s1600/Search-Box.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>CUSTOM SEARCH BOX</b></span><br />
<span style="font-size: large;">Fitur pencarian yang sudah di custom, terlihat lebih menarik. Fitur ini akan memudahkan pengunjung blog anda mencari konten yang mereka inginkan</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2m7DoPua-tt6-oOyqZpp_wBcennUQlwRAiKcdtEH9a9q0-5nJX1PzK2_FASxC49mbw2U6t4zp53ob8gIOafrYLyRqJZvKRZry1v5SCXO7s-BhcCwPr5hJIx2A-HNDZz9ampdcWmUQng/s1600/Cloud-Label-Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2m7DoPua-tt6-oOyqZpp_wBcennUQlwRAiKcdtEH9a9q0-5nJX1PzK2_FASxC49mbw2U6t4zp53ob8gIOafrYLyRqJZvKRZry1v5SCXO7s-BhcCwPr5hJIx2A-HNDZz9ampdcWmUQng/s1600/Cloud-Label-Widget.png" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">CUSTOM LABELS WIDGET</span></b><br />
<span style="font-size: large;">Widget label pada bagian sidebar sudah di sesuaikan, sehingga sangat menarik. Anda bisa memilih untuk menampilkan salah satu versi (cloud atau list).</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih73nhZj8tUYCuyqhd9ScAF6fQ-5j6yvdhHYz81-0FCMZ8mOWkc-OGtYC06Pt6oORvGrT64DmdQs4oMf1-UOGvFQ4wbw6osF9PIfZiZQfhQPaywdSWib4jrvC6JcJ54-Pxd8-UZl6GMME/s1600/Tombol-Share.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih73nhZj8tUYCuyqhd9ScAF6fQ-5j6yvdhHYz81-0FCMZ8mOWkc-OGtYC06Pt6oORvGrT64DmdQs4oMf1-UOGvFQ4wbw6osF9PIfZiZQfhQPaywdSWib4jrvC6JcJ54-Pxd8-UZl6GMME/s1600/Tombol-Share.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>RELATED POST</b></span><br />
<span style="font-size: large;">Template ini juga dilengkapi related posts dibagian bawah artikel yang memungkinkan pengunjung untuk melihat artikel lainnya, dan itu artinya dapat meningkatkan page view blog anda. Selain itu ada facebook comments dibawah artikel terkait ini.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1epzyoyyobGHJucCWM1fLUPXCe_S9m-TfIr6w3rXklDGAMnq_ZOCCtaMcNPqQy7gIyRQ29EfyjRNlHeeODp_yZHZCOCIK6JbmPJvySbpGzIJPCEVcoddixPFQG27Fmx7CHdXhPzAb48/s1600/adsenselogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="197" data-original-width="517" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1epzyoyyobGHJucCWM1fLUPXCe_S9m-TfIr6w3rXklDGAMnq_ZOCCtaMcNPqQy7gIyRQ29EfyjRNlHeeODp_yZHZCOCIK6JbmPJvySbpGzIJPCEVcoddixPFQG27Fmx7CHdXhPzAb48/s1600/adsenselogo.png" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">ADSENSE OPTIMIZED</span></b><br />
<span style="font-size: large;">Template ini sudah mendukung iklan ditengah artikel, dan itu berarti Anda dapat mengoptimalkan Page CTR Google Adsense</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3x66xt7WMfrPQQQ7wR2B4jHgkoSkgsVbpD8WJfs75tzL_c0ETMzfxsQL2kCOJqZJG7TOfQK5R78h12PQqxleglCV_29kDAgsdEXu2-FirY9q9mZrV8efOIHhFzrDqHsMtJo1_yKEZsJ8/s1600/Facebook-Share.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="367" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3x66xt7WMfrPQQQ7wR2B4jHgkoSkgsVbpD8WJfs75tzL_c0ETMzfxsQL2kCOJqZJG7TOfQK5R78h12PQqxleglCV_29kDAgsdEXu2-FirY9q9mZrV8efOIHhFzrDqHsMtJo1_yKEZsJ8/s1600/Facebook-Share.png" /></a></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">Facebook Share</span></b><br />
<span style="font-size: large;">Template ini juga dilengkapi related posts dibagian bawah artikel yang memungkinkan pengunjung untuk melihat artikel lainnya, dan itu artinya dapat meningkatkan page view blog anda.</span><br />
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">DAFTAR SEMUA FITUR</span></b><br />
<b><span style="font-size: x-large;"><br /></span></b>
<span style="font-size: large;"><b>Berikut adalah semua fitur dan keuntungan jika menggunakan template Hipwee.</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"> 100% Responsive</span><br />
<span style="font-size: large;"> Custom Tag Heading</span><br />
<span style="font-size: large;"> Compatible with major browsers</span><br />
<span style="font-size: large;"> Full Custom admin layout</span><br />
<span style="font-size: large;"> Font Awesome Icons</span><br />
<span style="font-size: large;"> Dropdown Menu</span><br />
<span style="font-size: large;"> Twitter Card</span><br />
<span style="font-size: large;"> SEO Optimized</span><br />
<span style="font-size: large;"> Custom Featured Post Widget</span><br />
<span style="font-size: large;"> Fixed Menu Navigation</span><br />
<span style="font-size: large;"> Page Navigasi</span><br />
<span style="font-size: large;"> Viral Style</span><br />
<span style="font-size: large;"> Custom Social Share</span><br />
<span style="font-size: large;"> Custom Labels Widget</span><br />
<span style="font-size: large;"> Custom Search Box</span><br />
<span style="font-size: large;"> Google Breadcrumbs</span><br />
<span style="font-size: large;"> Custom Related Post</span><br />
<span style="font-size: large;"> Tabview Widgets</span><br />
<span style="font-size: large;"> Iklan ditengah Artikel</span><br />
<span style="font-size: large;"> Facebook Open Graph</span><br />
<span style="font-size: large;"> SEO Friendly Meta Description</span><br />
<br />
<br />
<div style="text-align: center;">
<a href="https://webdesignbaru.blogspot.com/" rel="nofollow" target="_blank"><span style="color: red; font-size: x-large;"><b>DEMO</b></span></a> <span style="color: red; font-size: x-large;"><a href="https://drive.google.com/file/d/1mWgaubeuEd0n-4q3V0hhclKvgGqkTOlL/view?usp=sharing" rel="nofollow" target="_blank"><b>DOWNLOAD</b></a></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-89534881936849983182019-11-08T21:25:00.002+08:002019-11-08T21:55:20.455+08:00Cara Membuat Otomatis Link Postingan Blog Mengarah ke Google Search<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/AVvXsEgtAgceJq2fzwMa77j8uKJgrwXtBUCo6WtT-OB_JrldmYsegFGbEAQSnnTikz7sAMJjkvSvzP_UIOipcbcotHVguUax48GAMIEDTPoiZrNFJkYJWOsyMwvEGyN6fUFm1DeY4O3X5DVXljM/s1600/Cara-Membuat-Otomatis-Link-Postingan-Blog-Mengarah-ke-Google-Search.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="450" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAgceJq2fzwMa77j8uKJgrwXtBUCo6WtT-OB_JrldmYsegFGbEAQSnnTikz7sAMJjkvSvzP_UIOipcbcotHVguUax48GAMIEDTPoiZrNFJkYJWOsyMwvEGyN6fUFm1DeY4O3X5DVXljM/s1600/Cara-Membuat-Otomatis-Link-Postingan-Blog-Mengarah-ke-Google-Search.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Cara Membuat Otomatis Link Postingan Blog Mengarah ke Google Search </b></td></tr>
</tbody></table>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Baik sobat, kali ini saya akan memberikan tips sedikit tentang Cara Membuat Otomatis Link Postingan Blog Mengarah ke Google Search atau membuat search blog atau website redirect ke Google Search.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Saya sih awalnya sempat bingung mau kasih judul apa soal postingan saya kali ini. Soalnya kalau mau dikasih judul cara membuat search otomatis blog atau website ke google search, search dalam judul akan jadi dua nama search.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Akhirnya saya dapat judul yang tepat yaitu, Cara Membuat Otomatis Link Postingan Blog Mengarah ke Google Search.</span><br />
<span style="font-size: large;">Ok sobat, langsung saja pada intinya.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Biar sobat tidak bingung, lihat aja demo dibawa ini.</span><br />
<span style="font-size: large;"><br /></span>
<div style="text-align: center;">
<span style="color: blue; font-size: x-large;"><a href="https://www.google.com/search?q=&domains=kabarkorupsi.com&sitesearch=kabarkorupsi.com&ie=UTF-8&hl=id" rel="nofollow" target="_blank"><b>DEMO</b></a></span></div>
<br />
<span style="font-size: large;">Pertama-tama sobat sekalian Login ke akun Blogger.com sobat.</span><br />
<span style="font-size: large;">Masuk ke tab <b>Template</b>>><b>Edit HTML</b>>> cari kode <b>]]></b:skin></b> atau <b></style></b></span><br />
<span style="font-size: large;">Lalu masukan paste <b>CSS</b> dibawah ini tepat diatas salah satu kode yang kalian cari tadi.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>CSS</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;">/*Seach Box*/</span><br />
<span style="color: blue; font-size: large;">#searching{float:center}</span><br />
<span style="color: blue; font-size: large;">#searching input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0;outline:none}</span><br />
<span style="color: blue; font-size: large;">#search-buttons{padding:5px;overflow:hidden;text-align:center;margin:0}</span><br />
<span style="color: blue; font-size: large;">#search-button-top{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuR6iq7T8K2jNuJuKRIlqaHrNvbmSMenl_tW-dj5ophOzwPjAcQ4je6GGGI3aolfhVtJyEJ79FRmMm4H4k6j8V6lI3d0KXFaoFvbr8i84-MeAoiagKbbLHePPMpfyTdTeuu41PXbW4MeXu/s1600/meta-icon.png");background-repeat:no-repeat;margin:0;outline:none;height:36px;width:40px;background-color:#e74c3c;background-position:13px -243px;border:none;float:center;cursor:pointer}</span><br />
<span style="color: blue; font-size: large;">#search-button-top:hover{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;transition:all .2s ease-in;background-color:#c0392b}</span><br />
<span style="color: blue; font-size: large;">#searching{float:center}</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kedua, setelah memasang CSS diatas, sekarang tinggal mengganti search yang ada di blog atau website sobat, atau bisa juga menambahkan search di widget terserah sobat mau taruh dimana.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Copy <b>script</b> dibawah ini, ganti search sobat atau tambahkan dengan widget.</span><br />
<span style="font-size: large;"><br /></span>
<span style="color: blue; font-size: large;"><div id='searching'></span><br />
<span style="color: blue; font-size: large;"><form id='search-buttons' method='get' target='_blank' action='https://google.com/search'></span><br />
<span style="color: blue; font-size: large;"> <input name='q' placeholder='Search...' type='text'/></span><br />
<span style="color: blue; font-size: large;"> <input id='search-button-top' type='submit' value=''/></span><br />
<span style="color: blue; font-size: large;"> <input name='domains' type='hidden' value='blogsmanado.blogspot.com'/></span><br />
<span style="color: blue; font-size: large;"> <input name='sitesearch' type='hidden' value='blogsmanado.blogspot.com'/></span><br />
<span style="color: blue; font-size: large;"> <input name='ie' type='hidden' value='UTF-8'/></span><br />
<span style="color: blue; font-size: large;"> <input name='hl' type='hidden' value='id'/></span><br />
<span style="color: blue; font-size: large;"></form></span><br />
<span style="color: blue; font-size: large;"></div></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Warning</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Untuk mengganti search yang sudah ada di blog atau website sobat, kalian harus mengetahui letak html searchnya sobat. Kalau sudah ketemu, tinggal sobat pastekan semua script yang kedua untuk widget.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">untuk menambahnya di widget, tinggal sobat yang sesuaikan penempatan diblog atau website sobat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jangan lupa, ganti link <span style="color: red;">blogsmanado.blogspot.com</span> dengan link nama domain atau nama blog atau website sobat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Simpan thema dan silahkan dicobat search otomatisnya. Semoga berhasil dan bermanfaat buat sobat sekalian.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sekian...</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Apabila masih belum paham juga, silahkan sobat bertanya melalui kolom komentar dibawah ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-9857449015184952502019-11-05T06:22:00.000+08:002019-11-05T06:22:05.125+08:00Adakah Perbedaan Tampilan Website, Blog dan Isi Artikel?<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVR8myssPp0DTFfc9TougGZRmFOOvtoV1IplqvamF-uy86zWEb0BIP_E6q9HHyzg-uS3JqcZepMB0_W1CLh8ufewNxSvfHE3ml9tbRxS8oQzFF3FlwzMrwlhZqYiP73h5KGnxpEJBypmI/s1600/perbedaan-blog-dan-website.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="418" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVR8myssPp0DTFfc9TougGZRmFOOvtoV1IplqvamF-uy86zWEb0BIP_E6q9HHyzg-uS3JqcZepMB0_W1CLh8ufewNxSvfHE3ml9tbRxS8oQzFF3FlwzMrwlhZqYiP73h5KGnxpEJBypmI/s1600/perbedaan-blog-dan-website.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">BlogsManado - Hai Sobat, kembali lagi saya posting artikel yang saya rasa tidak perlu dibahas. Tapi jika saya tidak membahas apa pertanyaan para sobat sekalian yang dilontarkan kepada saya, pasti sobat akan merasa kecewa. Baiklah, kali ini saya akan menjelaskan beberapa pertanyaan sobat sekalian perbedaan website dan blog dan apakah tampilan blog bisa diubah seperti tampilan website?... Langsung saja kita bahas dibawah ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Suatu ketika seorang teman pernah bertanya kepada saya lebih kurang begini, “sebenarnya tampilan blog itu bisa diubah menjadi seperti tampilan situs web apa tidak sih?”. Mendapat pertanyaan seperti itu, maka secara spontan saya pun menjawabnya “bisa”. Kemudian dia pun kembali bertanya, “kalau misalnya tampilan blog dapat diubah menjadi seperti situs web (website), lantas caranya bagaimana?”. Mendapat pertanyaan yang kedua, akhirnya saya pun memberikan uraian penjelasan yang cukup panjang dan lebar terkait dengan hal tersebut. Hal ini disebabkan karena untuk mengubah tampilan blog menjadi seperti website, terdapat beberapa hal yang perlu diperhatikan dan dipahami terlebih dulu.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sebelum kita lanjutkan lebih jauh, ada baiknya jika kita bahas lebih dulu mengenai pengertian dari situs web dan blog. Wikipedia Bahasa Indonesia menyebutkan bahwa, “situs web (web site) atau sering disingkat dengan istilah situs adalah sejumlah halaman web yang memiliki topik saling terkait, dan terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Sedangkan blog merupakan singkatan dari web log, yaitu bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Dimana Tulisan-tulisan ini seringkali dimuat dalam urutan terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Dimana situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.”</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah, dari pengertian di atas maka dapat disimpulkan bahwa antara web site dan blog sebenarnya merupakan dua hal berbeda yang secara prinsip dapat dikatakan serupa dan atau bahkan dapat pula dikatakan sama. Hal ini disebabkan karena diantara keduanya sama-sama menyajikan konten yang memiliki topik saling terkait, terkadang disertai dengan berkas gambar, video, dan atau jenis berkas yang lainnya.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kesamaan lain antara situs web dan blog, dapat pula dilihat dari jenis halaman yang dimiliki. Bila dicermati, maka kita akan menemukan 2 (dua) buah jenis halaman yang sama antara situs web dan blog, yaitu halaman dinamis serta halaman statis. Dimana halaman statis merupakan halaman mandiri dengan konten yang tidak dimaksudkan untuk diperbarui secara berkala, sehingga untuk melakukan pembaruan pada konten biasanya dilakukan secara manual (sebagai contoh misalnya adalah halaman daftar isi yang terdapat di blog ini). Sedangkan halaman dinamis merupakan halaman yang secara spesifik didisain agar konten di dalamnya dapat diperbarui secara berkala dengan mudah (sebagai contoh misalnya adalah halaman beranda). Kemudian perbedaan yang paling menonjol diantara keduanya adalah bisa jadi blog lebih kaya akan konten bila dibandingkan dengan situs web, karena pada umumnya blog selalu melakukan pembaruan secara berkala terhadap konten yang disajikan, yaitu dengan cara menerbitkan postingan artikel baru.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Oke, sekarang kita kembali pada topik pembahasan inti, yaitu tentang cara membuat dan mengubah tampilan blog menjadi seperti halaman situs web profesional. Seperti yang telah saya sampaikan di atas bahwasanya apabila kita ingin mengerjakan hal tersebut, maka terdapat beberapa hal yang perlu diperhatikan dan dipahami terlebih dulu. Hal pertama yang perlu diperhatikan dan dipahami adalah penguasaan terhadap template (dalam hal ini minimal adalah penguasaan pada penggunaan HTML dan CSS), karena ketika kita ingin melakukan perubahan pada desain tampilan halaman blog, maka kita tidak bisa lepas dari kustomisasi HTML dan CSS yang terdapat dalam template.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selanjutnya hal kedua yang perlu diperhatikan adalah pemahaman terhadap beberapa fungsi yang disediakan oleh Blogger, dalam hal ini misalnya adalah fungsi ‘IF’ yang biasa kita temukan terdapat dalam template. Hal ini disebabkan karena untuk melakukan penataan desain terhadap halaman tertentu, maka kita juga tidak dapat lepas dari penggunaan fungsi ‘IF’ tersebut. Sebagai contoh yang paling sederhana misalnya adalah ketika kita ingin melakukan penataan terhadap desain tampilan halaman versi seluler, maka kita tidak terlepas dari penggunaan fungsi <b:if cond='data:blog.isMobile'> guna membedakan prosedur yang dipakai untuk menata desain tampilan halaman versi web dan versi seluler (misalnya adalah seperti yang tampak pada contoh rangkaian kode di bawah ini).</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah, berdasarkan contoh sederhana di atas maka akhirnya kita dapat dengan mudah menentukan dan membuat prosedur yang digunakan untuk desain tampilan halaman versi seluler dan prosedur yang digunakan untuk desain tampilan halaman versi web (desktop). Akan tetapi perlu diingat bahwasanya fungsi ‘IF’ yang disediakan oleh Blogger, bukan hanya seperti yang terdapat pada contoh di atas. Sehingga karena banyaknya fungsi ‘IF’ yang ada, maka kedepan akan kita bahas masing-masing fungsi yang ada secara terperinci.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Hal ketiga yang diperlukan untuk membuat dan mengubah desain tampilan blog menjadi seperti layaknya sebuah website adalah penguasaan serta pemahaman terhadap logika dan algoritma pemrograman (secukupnya). Kemudian hal keempat yang diperlukan adalah kreatifitas (secukupnya), niat, dan kemauan (sepenuhnya), dimana hal inilah faktor terpenting yang mesti terpenuhi ketika kita ingin mengerjakan hal tersebut.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jadi, berdasarkan uraian di atas akhirnya dapat disimpulkan bahwa untuk membuat desain tampilan blog menjadi seperti web site, salah satu cara yang dapat ditempuh adalah dengan memanfaatkan berbagai fungsi dalam template yang telah disediakan oleh Blogger. Sementara itu uraian spesifik tentang cara penggunaan dan penerapan berbagai fungsi tersebut, akan kita bahas pada artikel berikutnya.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Semoga berguna dan bermanfaat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jika ada masukan dan pendapat atau masih kurang penjelasan saya kunjungi <a href="https://www.niagahoster.co.id/blog/perbedaan-blog-dan-website/" rel="nofollow" target="_blank"><span style="color: red;">disini</span></a> atau silahkan komentar dibawah.... Terima kasih.</span><br />
<span style="font-size: large;"><br /></span>
<br />Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-48299790846941118282019-11-01T06:37:00.001+08:002019-11-01T07:00:01.704+08:00Cara Membuat Subdomain di Blogger Gratis Secara Lengkap<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVV_qZryPNZ1Hz4KQQpWYv0RI10oH_xo0zu5g-pnnJvgWMYk_VOJTClYgSbMvWwLe5gXqQ4Sx5wJORrljhGg-bnmRBxx1Y8aMnGweSan33GGxpdKCij8CiCfHUd5OZhWJSiXIGu1Ll1Mk/s1600/membuat-subdomain-secara-lengkap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1062" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVV_qZryPNZ1Hz4KQQpWYv0RI10oH_xo0zu5g-pnnJvgWMYk_VOJTClYgSbMvWwLe5gXqQ4Sx5wJORrljhGg-bnmRBxx1Y8aMnGweSan33GGxpdKCij8CiCfHUd5OZhWJSiXIGu1Ll1Mk/s1600/membuat-subdomain-secara-lengkap.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Apa kabar Sobat... Semoga kita sehat selalu. Baik kali ini saya akan membagikan tutorial <b>Cara Membuat Subdomain di Blogger Gratis Secara Lengkap</b>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Apa itu subdomain? Subdomain adalah bagian dari anak atau turunan dari domain utama. Misalnya domain utama adalah <span style="color: red;">www.kabarkorupsi.com</span> dan subdomainnya <span style="color: red;">berita.kabarkorupsi.com</span>, <span style="color: red;">daerah.kabarkorupsi.com</span> atau <span style="color: red;">nasional.kabarkorupsi.com</span>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Keuntungan memakai subdomain diataranya:</span><br />
<span style="font-size: large;"><br /></span>
<br />
<ol>
<li><span style="font-size: large;">Tidak perlu biaya tambahan. Cukup membeli satu domain dan subdomain bisa dibuat sendiri secara gratis.</span></li>
<li><span style="font-size: large;">Memberikan citra yang baik pada website atau blog yang dipasang subdomain. Jika <span style="color: red;">www.kabarkorupsi.com</span> sudah dikenal sebagai website atau blog yang terpercaya, maka website atau blog baru yang mempunyai alamat link <span style="color: red;">berita.kabarkorupsi.com</span> akan terkesan seperti website atau blog yang terpercaya pula.</span></li>
</ol>
<br />
<span style="font-size: large;"><br /></span>
<br />
<ul>
<li><span style="font-size: large;">Perlu kalian ketahui, www pada domain utama yaitu <span style="color: red;">www.kabarkorupsi.com</span> sebenarnya adalah subdomain juga. Tapi www sering dijadikan sebagai alamat link utama sehingga terasa seperti induk.</span></li>
</ul>
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jika Sobat berkeinginan untuk membuat subdomain dan memasangya di website atau blog baru kabarkorupsi.com (nama domain utama anda domain.com), saya akan memcoba untuk menulis secara lengkap tutorial ini.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvK6hW_tjRjga4NinHnuzmEgGDkxsLZG5Van6X6z4f-8TFEsPuoZ9B1WxsFmZSPBJJ5z09Rr2pKHybHONXwFo55sXAZnSRyhk_TVFbwF7UoZWfoxKpArxqOfaAlNiF61De7FD_uyl8jk/s1600/daftar+ini+subdomain+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="138" data-original-width="262" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvK6hW_tjRjga4NinHnuzmEgGDkxsLZG5Van6X6z4f-8TFEsPuoZ9B1WxsFmZSPBJJ5z09Rr2pKHybHONXwFo55sXAZnSRyhk_TVFbwF7UoZWfoxKpArxqOfaAlNiF61De7FD_uyl8jk/s400/daftar+ini+subdomain+blogger.jpg" width="400" /></a></div>
<span style="font-size: x-large;"><b><br /></b></span>
<span style="font-size: x-large;"><b>Mendapat CNAME</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Pertama-tama, buka dashboard Blogger. Akses menu <span style="color: red;">Setelan</span> >> <span style="color: red;">Dasar </span>>> <span style="color: red;">Alamat Blog</span>. Klik tulisan <span style="color: red;">+Siapkan URL pihak ketiga untuk blog anda</span>.</span><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/AVvXsEi3zxjNusNDKtPvOFXsZbf1w-92pevvj9Vq1dzRe4XlhurLClb67Ij67SSF7TzwjwsywJrxnFF_FacZbbua9K_BOTElMCaN7kSWBXwbliJBiaK_rKKhhBAm4fdqmyQjv8LqJkxlxqCe_iY/s1600/dashboard+blogger.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="344" data-original-width="739" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3zxjNusNDKtPvOFXsZbf1w-92pevvj9Vq1dzRe4XlhurLClb67Ij67SSF7TzwjwsywJrxnFF_FacZbbua9K_BOTElMCaN7kSWBXwbliJBiaK_rKKhhBAm4fdqmyQjv8LqJkxlxqCe_iY/s1600/dashboard+blogger.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b><span style="color: red;">Perhatikan Lingkaran garis merah. </span></b></td></tr>
</tbody></table>
<span style="font-size: large;">Tuliskan alamat subdomain yang ingin dipakai lalu klik <b>Simpan</b></span><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/AVvXsEhxx59GW70HX-C_fMfolhUz0OpzvdPT9EKspZbHR4Oi9_ogEK4jtQ7n5KZKbHBsE9AQQf34Kf8juS_BZjY0ie-2DApRg8zFnJ0Gu2RJz8JQ77YQo_1iVtDkyvQh-EBeGdLY_Hr4-VnAPs8/s1600/dashboard+blogger+settingan+domain.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="206" data-original-width="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxx59GW70HX-C_fMfolhUz0OpzvdPT9EKspZbHR4Oi9_ogEK4jtQ7n5KZKbHBsE9AQQf34Kf8juS_BZjY0ie-2DApRg8zFnJ0Gu2RJz8JQ77YQo_1iVtDkyvQh-EBeGdLY_Hr4-VnAPs8/s1600/dashboard+blogger+settingan+domain.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b><span style="color: red;">Perhatikan Lingkaran garis merah. </span></b></td></tr>
</tbody></table>
<span style="font-size: large;">Akan muncul pesan kesalahan. Namun jangan panik, itu memang normal. CNAME yang kita cari akan didapatkan disini. Catat kedua record tersebut. Jangan tutup halaman ini karena akan digunakan lagi.</span><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/AVvXsEi8VwZVGw9kDXtD5MRn3P4TaQBEJalYy3fg5CkN0N_Pr-LJtjv_ozgaqg0AUDZZgbuyIyzuaHcZgDBT9M8z43GgCsfBCqfM6DNUjA57xUrvkDUIcg1mjPRMrG5hK8uHlFQ5VJ7kM5gSumk/s1600/dashboard+blogger+arahkan+subdomain+ke+hosting+1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="365" data-original-width="377" height="619" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VwZVGw9kDXtD5MRn3P4TaQBEJalYy3fg5CkN0N_Pr-LJtjv_ozgaqg0AUDZZgbuyIyzuaHcZgDBT9M8z43GgCsfBCqfM6DNUjA57xUrvkDUIcg1mjPRMrG5hK8uHlFQ5VJ7kM5gSumk/s640/dashboard+blogger+arahkan+subdomain+ke+hosting+1.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b><span style="color: red;">Perhatikan Lingkaran garis merah. </span></b></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">Mengatur DNS</span></b><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Langkah kedua, pergilah ke website tempat membeli domain atau biasa disebut dengan hosting penyedia domain dan buka menu Control panel atau DNS Management. Tampilan setiap website hosting berbeda-beda jadi saya tidak bisa memberikan gambar. Namun semua hosting domain sma kok, intinya akses menu untuk mengatur DNS. Minta bantuan pada Customer Service kalau merasa kesulitan menemukan menunya. </span><span style="font-size: large;">Saya sendiri memakai website penyedia domain <span style="color: blue;">Qwords.com</span>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Disana sudah ada beberapa record lain yang merupakan milik <span style="color: blue;">custom domain</span> utama. Tugas sobat adalah menambahkan dua buah CNAME record yang tadi didapat. Jika biasanya diisi dengan "www" kali ini diisi dengan nama subdomain yang diinginkan. Dalam contoh kali ini subdomainnya adalah <span style="color: red;">berita</span>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sementara untuk 4 buar A Records yang biasanya ditambahkan tidak perlu lagi diinput karena akan mengikuti domain utama.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicw4HVhofh6kF_PO1dv0wito2liHswWBWvV7-8aFWRPSTYTF0DRPFwZh4Rb4OiiPFFHkyiyQG0WrcUIrgRrdUHPIHXrJZ0jx5xQAUrfsLl0qI0a2ZxjxSXWS_SMqNcKe46wA2nB98m-IQ/s1600/CNAME+diarahkan+ke+hosting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="206" data-original-width="579" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicw4HVhofh6kF_PO1dv0wito2liHswWBWvV7-8aFWRPSTYTF0DRPFwZh4Rb4OiiPFFHkyiyQG0WrcUIrgRrdUHPIHXrJZ0jx5xQAUrfsLl0qI0a2ZxjxSXWS_SMqNcKe46wA2nB98m-IQ/s1600/CNAME+diarahkan+ke+hosting.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">CNAME kedua yang memiliki velue unik <span style="color: red;">ynxxxxxxxxxx</span> dan mengarah ke <span style="color: red;">gv-xxxxxxxxxx.dv.googlehosted.com</span> mungkin tidak bisa ditambahkan karena nilainya sama dengan CNAME domain utama. Tidak apa-apa, tidak usah ditambah karena sebelumnya sudah ada.</span><br />
<span style="font-size: large;"><br /></span>
<b><span style="font-size: x-large;">Memasang Subdomain di Blogger</span></b><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kembali lagi ke pengaturan Blogger dimana pesan kesalahan muncul lalu Klik tombol S<b>impan</b>, kali ini pasti berhasil dengan baik.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipR6dC1g8prOi-6Wd_HSpkJr2lf3lIk-uUAHi6wL7E6Yxnh77JvOBJ3rZsh0TJs25xWXtFpG9UR413HtqlSEN0C2t9k-vrfZY7eFWUVANq8Rw-THMJ95tRT-mus8RCaBfTOWgKkMZPf24/s1600/dashboard+blogger+arahkan+subdomain+ke+hosting+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="365" data-original-width="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipR6dC1g8prOi-6Wd_HSpkJr2lf3lIk-uUAHi6wL7E6Yxnh77JvOBJ3rZsh0TJs25xWXtFpG9UR413HtqlSEN0C2t9k-vrfZY7eFWUVANq8Rw-THMJ95tRT-mus8RCaBfTOWgKkMZPf24/s1600/dashboard+blogger+arahkan+subdomain+ke+hosting+1.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Matikan pengalihan non www. Kenapa? Karena jika diaktifkan, maka ketika pengunjung mengakses domain utama kabarkorupsi.com akan beralih ke subdomain berita.kabarkorupsi.com. Kasihan dong domain utama kena redirect terus. Klik <span style="color: red;">Edit</span> pada alamat website atau blog dan jangan centang bagian <span style="color: red;">Alihkan domain.com ke www.domain.com</span> lalu klik tombol simpan.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibb4VF1yFBB26y1aoqCfmbnpqNDA7EpDBH4KG6cWptqMVZa9ibVVRTJZkRUgE-MENi_SRXT976LukDdZqwGMDLjtpeilmat63-9JEMOtbh8sKjQ9zGyHiK0vHNBtd-n8kA9KrRD2xZ8c/s1600/Custom-Subdomain-Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="160" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibb4VF1yFBB26y1aoqCfmbnpqNDA7EpDBH4KG6cWptqMVZa9ibVVRTJZkRUgE-MENi_SRXT976LukDdZqwGMDLjtpeilmat63-9JEMOtbh8sKjQ9zGyHiK0vHNBtd-n8kA9KrRD2xZ8c/s1600/Custom-Subdomain-Blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4InfnjSLy1zxbxJEQWnRPJGHUKx4My8G8AHfvVSoa77nmhoe7aDY89hvm6Wm-d-NSdqNuxuavAzQ_tH4VEvs3ItcSMw7Gk3YIz3s5HyG2IsgAvkAy0v4kwlT70LQM9YF9erdMfBL54pI/s1600/dashboard+blogger+arahkan+subdomain+ke+hosting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="353" data-original-width="370" height="610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4InfnjSLy1zxbxJEQWnRPJGHUKx4My8G8AHfvVSoa77nmhoe7aDY89hvm6Wm-d-NSdqNuxuavAzQ_tH4VEvs3ItcSMw7Gk3YIz3s5HyG2IsgAvkAy0v4kwlT70LQM9YF9erdMfBL54pI/s640/dashboard+blogger+arahkan+subdomain+ke+hosting.jpg" width="640" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Masih di menu yang sama, aktifkan SSL (HTTPS) gratis dari Blogger dengan memilih <b>YA</b> pada <span style="color: red;">Ketersediaan HTTPS</span> dan <span style="color: red;">Pengalihan HTTPS</span>. Jika masih belum bisa dipilih, tunggulah beberapa saat lalu refresh halaman.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5lElBxIdHdeDQQfzXd5Nd8wfvpS2IuQDW1TcR1joJuhLFj6SdAKgAhVv-_qajKaFBHpr2CTk_wrDyOdqt_p-PY_4Qp26aq9_yaASv3bwAUgTo4RHOarBc1kjxzcWCT2RBK9gJGIURs4/s1600/setting+https+blogger+dashboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="244" data-original-width="572" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5lElBxIdHdeDQQfzXd5Nd8wfvpS2IuQDW1TcR1joJuhLFj6SdAKgAhVv-_qajKaFBHpr2CTk_wrDyOdqt_p-PY_4Qp26aq9_yaASv3bwAUgTo4RHOarBc1kjxzcWCT2RBK9gJGIURs4/s1600/setting+https+blogger+dashboard.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dalam beberapa kasus, mungkin website atau blog usai disetting tidak bisa diakses dalam beberapa menit. Itu wajar karena masa perpindahan DNS membutuhkan sedikit waktu. Tunggu saja sebentar sambil ngopi-ngopi. Terima kasih sudah membaca tutorial saya mengenai <b>Cara Membuat Subdomain di Blogger Gratis Secara Lengkap</b>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sekian dan semoga bermanfaat... salam blogging.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><br /></span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-34244754097629355862019-10-30T02:32:00.000+08:002019-10-30T02:32:08.252+08:00Cara Mencuri dan Mengambil Alih Blog Orang Lain Sudah Lama Ditinggalkan<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/AVvXsEjCAiGmcDShJn3pt5zAN57lv3YnYnQ3IBArrrroMHtVT8UTy6P2OWezrmfx0DmDEr_o4qGmGIF_BpqPN9UpSLTCmE2Ljab5W5-ZnQQKsJIZaPD41Tcispck19ABw9z3NaaNkc1IGyF5mTs/s1600/cara-mengambil-alih-blog-orang-lain-11.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCAiGmcDShJn3pt5zAN57lv3YnYnQ3IBArrrroMHtVT8UTy6P2OWezrmfx0DmDEr_o4qGmGIF_BpqPN9UpSLTCmE2Ljab5W5-ZnQQKsJIZaPD41Tcispck19ABw9z3NaaNkc1IGyF5mTs/s1600/cara-mengambil-alih-blog-orang-lain-11.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cara Mencuri dan Mengambil Alih Blog Orang Lain Sudah Lama Ditinggalkan. </td></tr>
</tbody></table>
<span style="font-size: large;">Selamat Datang di BlogsManado. Baik Sobat Senang rasanya bisa berbagi informasi menarik melalui blog personal, kali ini saya akan memberikan tutorial bagaimana mengambil alih blog aktif milik orang lain sudah lama ditinggalkan, ini mungkin seperti hack namun orang bodoh saja bisa melakukanya asalkan mengikuti tutorial yang saya berikan dengan benar</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Ada kalanya saat browsing di internet kita menemukan beberapa artikel blog yang ditulis jauh dimasa lalu, sekitar tahun 2010 kebawah dan terbesit dalam pikiran kita bahwa blog tersebut telah berumur lama dan sayang sekali sudah tidak di urus lagi oleh pemiliknya. Adakah suatu cara mengambil alih blog tersebut yang masih aktif untuk diri sendiri ? ada.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Domain blogspot yang sudah expired telah banyak kehilangan visibilitas di google namun blog aktif yang sudah berumur lama masih tetap ada digoogle , entah apa yang terjadi pada pemilik blog itu mungkin mereka dulu membuat blog sekedar iseng, sudah melupakan blogging atau telah meninggal.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Blog-blog lawas sangat cocok dijadikan sebagai backlink tier 2 untuk blog sitemoney, beberapa webmaster sepakat bahwa blog jaman dulu itu ajaib karena mampu menaklukkan banyak keyword hanya dengan satu artikel yang pendek dan efeknya tetap terasa meski di era seo modern saat ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Yang perlu anda ingat!</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">- Saya tidak bertanggung jawab atas kerugian yang dikeluhkan oleh pihak manapun, sekali lagi ini hanyalah ilmu pengetahuan.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Disisi lain mungkin dapat merugikan orang lain dan disisi satunya memberi warning pada pemilik blog jaman old agar lebih waspada.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">- Ini adalah cara mengambil blog orang lain secara manual, saya tidak menggunakan bantuan software apapun selain browser dan intuisi sebagai orang yang telah lama mengenal internet.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Sedikit History :</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Saat membuka forum adsid disana saya membaca sebuah thread yang bagus, judulnya " share berburu emas, blogspot mati suri" karena didalam tutorial menggunakan beberapa software buatan YBS dan keterangan dilarang share akhirnya saya iseng-iseng coba cara manual dan berhasil.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Saya mencari blogspot lawas dengan target alamat email menggunakan layanan yahoo, hotmail, outlook, plasa dsb.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Blogger merupakan platform blogging yang diakuisisi dari pyralabs dan digratiskan kepublik pada tahun 2013, blognya mbak lindakeiji dibuat ditahun ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Ada banyak blogger lawas yang sudah terbengkalai sejak saat itu, alasan kenapa saya menargetkan email yahoo karena Yahoo akan menghapus akun email yang sudah tidak dilogin selama 12 bulan menurut Vice President Yahoo Jay Rossiter, itu bertujuan memberikan kesempatan kepada pengguna setia Yahoo, untuk mendapatkan Yahoo ID yang mereka idam-idamkan.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Teringat jaman SMP sekitar tahun 2006-2009 layanan email yang populer saat itu adalah yahoo, kemudian masa-masa SMA banyak teman-teman yang menggunakan email hotmail/outlook dari microsoft jadi blogger jaman old sebagian ada yang mendaftar akun blog dengan alamat email yahoo dan apabila mereka telah vakum/berhenti ngeblog alias lebih dari 12 bulan tidak membuka akun yahoo mereka berarti kita bisa mengambil alih blog yang sudah terbengkalai tersebut untuk diri sendiri.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Step-step mengambil blog jadul milik orang lain :</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">1. Mencari target</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">2. Mendaftar ulang email yahoo</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">3. Mereset akun blogger</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Persiapan :</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">1. Secangkir susu</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">2. Bakpia pathok buat cemilan</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Tutorial mengambil alih blog aktif milik orang lain yang sudah lama ditinggalkan</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>1. Mencari target</b></span><br />
<span style="font-size: large;">Buka google, karena kita menargetkan subdomain blogspot maka ketikkan saja dipencarian "blogspot keyword" dalam contoh kali ini saya ingin mencari blog dengan tema format surat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Atur rentang pencarianya dari tahun 2005 sampai 2010, kebanyakan blog yang dibuat sekitar tahun 2010 kebawah masih menggunakan email dari Yahoo.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFC3IAfPzj2cnrjsepHMXMCzl1FHF3FGUjKQhKANWcWJLEfP-R_SWvsSSUUyRH4OONrx4v5uGwJmMEoPe8ULT12vEf2LIxYyda4I5-ylCEc-t3QIeTOJznYFLULM6fGibetm5LBDhthMg/s1600/mengambil-alih-blog-orang-lain-%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="570" data-original-width="765" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFC3IAfPzj2cnrjsepHMXMCzl1FHF3FGUjKQhKANWcWJLEfP-R_SWvsSSUUyRH4OONrx4v5uGwJmMEoPe8ULT12vEf2LIxYyda4I5-ylCEc-t3QIeTOJznYFLULM6fGibetm5LBDhthMg/s1600/mengambil-alih-blog-orang-lain-%25281%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Login kebeberapa blog untuk mencari target, lihat dibagian data profile penulis yang biasanya beralamatkan https://www.blogger.com/profile/IDBlog.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Cari dibagian widget about me atau diakhir artikel pos by nama penulis</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kebanyakan blogger jaman dulu belum menggunakan profile google plus, karena google plus sendiri diperkenalkan pada juni 2011 jadi kebanyakan masih menggunakan data blogger default.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfMLMYK-E7jJASRnO5cnXG2SuK6lXFDSX4thinnu4qGVl19lYrx7bTD4BnxoFK6F5zXZaKBoNna5A1iJk6bIpDjq8VX5Co4VLMSSpq6l29Hp09r-UI27y_QA7JC79K1NLgryj-SLQPeg/s1600/mengambil-alih-blog-orang-lain-%25282%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="540" data-original-width="739" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfMLMYK-E7jJASRnO5cnXG2SuK6lXFDSX4thinnu4qGVl19lYrx7bTD4BnxoFK6F5zXZaKBoNna5A1iJk6bIpDjq8VX5Co4VLMSSpq6l29Hp09r-UI27y_QA7JC79K1NLgryj-SLQPeg/s1600/mengambil-alih-blog-orang-lain-%25282%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kalau beruntung anda akan melihat data email disini, tenang saja kebanyakan blogger jaman dulu mengisi data profile mereka secara lengkap beda dengan blogger era 2011 keatas yang mengalihkan profile default blogger ke profile google plus.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dan ternyata emailnya adalah yahoo, kok pas banget ya hehe...</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWA9lK4mzHxH9nUb-4H7BuV1iJhYPAmInphuDPdGsXpollxNEe2o5wWN_pF6ZnZJ0kG-cwZ8Ssfzh-z6ySTV1tB0S3pxuNcydR_RbLAzPD-o05jLGFgdSwGVzcXUgPsdfFq0yDRBDvPro/s1600/mengambil-alih-blog-orang-lain-%25283%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="474" data-original-width="536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWA9lK4mzHxH9nUb-4H7BuV1iJhYPAmInphuDPdGsXpollxNEe2o5wWN_pF6ZnZJ0kG-cwZ8Ssfzh-z6ySTV1tB0S3pxuNcydR_RbLAzPD-o05jLGFgdSwGVzcXUgPsdfFq0yDRBDvPro/s1600/mengambil-alih-blog-orang-lain-%25283%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kita cek dulu apakah email yahoo ini terkait dengan akun blogger atau tidak, caranya buka www.blogger.com lalu klik login dan masukkan email yahoo yang telah kita dapatkan.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dan betapa bahagianya mengetahui kebenaran kalau email itu terkait, lanjut eksekusi.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzIbhBpH4XjmaZCef78DRseqYs4mScR5_rQrg0feI470cB5IzhUjJ1LkHrSnlOKOSZXvYgrewoJ-0IDyf1_vc4ywYlswt0O6UDzheMHODtnHw-fK1JWC7qgP5y6Xv6IoLhbOUT6_-fE4/s1600/mengambil-alih-blog-orang-lain-%25284%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="399" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzIbhBpH4XjmaZCef78DRseqYs4mScR5_rQrg0feI470cB5IzhUjJ1LkHrSnlOKOSZXvYgrewoJ-0IDyf1_vc4ywYlswt0O6UDzheMHODtnHw-fK1JWC7qgP5y6Xv6IoLhbOUT6_-fE4/s1600/mengambil-alih-blog-orang-lain-%25284%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>2. Mendaftar ulang email yahoo</b></span><br />
<span style="font-size: large;">Kunjungi situs yahoo kemudian buat akun baru dengan alamat email raxeon613@yahoo.com.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Kalau tidak ada keterangan email telah digunakan berarti email orang ini tidak pernah dilogin sejak 12 bulan terakhir, dan sesuai kebijakan yahoo... saya dapat menggunakanya kembali.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRddDXrDlw9tzlh8v_qkPQLGxYoZUgExFqLTt3kxaqzckjmYVolX67y8ez01UuEoY4ua7xiYxNocKcAtr94xOqA0MwTsf9I4GEfVJvGU31ULIgU_TiXo1hefyqCu_smWsZwa5MRTu80o/s1600/mengambil-alih-blog-orang-lain-%25285%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="433" data-original-width="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRddDXrDlw9tzlh8v_qkPQLGxYoZUgExFqLTt3kxaqzckjmYVolX67y8ez01UuEoY4ua7xiYxNocKcAtr94xOqA0MwTsf9I4GEfVJvGU31ULIgU_TiXo1hefyqCu_smWsZwa5MRTu80o/s1600/mengambil-alih-blog-orang-lain-%25285%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Masukkan data yang diperlukan termasuk nomor HP aktif, kalau sudah limit pakai saja situs VPVA digoogle, itu lho situs daftar nomor HP yang bisa digunakan untuk menerima kode verifikasi sementara.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80y5AltknXIaNc_E-SrvqaOkswQNBeY5AKqtc02PWQ-PrrViTyhgiNrDq-K2GQ0_V0oYrTQ0V_mZMYQCKLvPnPy4mOvpX5QXOBrvuiaH3E2ovE0802lgnVCQtPIeCZdmhJuZ0qlGsy7E/s1600/mengambil-alih-blog-orang-lain-%25286%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="371" data-original-width="343" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80y5AltknXIaNc_E-SrvqaOkswQNBeY5AKqtc02PWQ-PrrViTyhgiNrDq-K2GQ0_V0oYrTQ0V_mZMYQCKLvPnPy4mOvpX5QXOBrvuiaH3E2ovE0802lgnVCQtPIeCZdmhJuZ0qlGsy7E/s1600/mengambil-alih-blog-orang-lain-%25286%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>3. Mereset akun blogger</b></span><br />
<span style="font-size: large;">Setelah akun email yahoo dibuat, kembali ke tab blogger silahkan forgot password. Klik try another way sampai mendapat opsi untuk menerima kode yang dikirimkan melalui email yahoo.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bbyDSguntDdkkvgoO6nmGk4a4YDphBve53bB9Xn3DUC1sYf551FUVqDP0kVWtvQ5Q7OZC-R67GHJZZFXfklDg18vBaXRp4tI2Tmg1MVIJX9GPAlgg1aqJWOObdcMiYaWGWdlZ8fnG7k/s1600/mengambil-alih-blog-orang-lain-%25287%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="505" data-original-width="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bbyDSguntDdkkvgoO6nmGk4a4YDphBve53bB9Xn3DUC1sYf551FUVqDP0kVWtvQ5Q7OZC-R67GHJZZFXfklDg18vBaXRp4tI2Tmg1MVIJX9GPAlgg1aqJWOObdcMiYaWGWdlZ8fnG7k/s1600/mengambil-alih-blog-orang-lain-%25287%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Buka pesan inbox yahoo untuk melihat kode verifikasi yang dikirim google, jika belum ada reload dulu tapi biasanya tidak lama.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4MGStTme7z3jooweiINaAQKT4VzPLRApacNoRUvqRHKru3tKWBncYotBW1JlFgsqiODOqYrICVg7zC2LrfiX7LCnuX8REWKq9_kaXXhoXTWfHXuhRebAYvoMahJKzyIkJ5QXnIUkmFg/s1600/mengambil-alih-blog-orang-lain-%25288%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="582" data-original-width="817" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4MGStTme7z3jooweiINaAQKT4VzPLRApacNoRUvqRHKru3tKWBncYotBW1JlFgsqiODOqYrICVg7zC2LrfiX7LCnuX8REWKq9_kaXXhoXTWfHXuhRebAYvoMahJKzyIkJ5QXnIUkmFg/s1600/mengambil-alih-blog-orang-lain-%25288%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Masukkan kode yang anda dapatkan untuk mendapatkan akses ke akun blogger.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwQgebcx4WwflqQ7KT1RotgaSxFp4qkrDwRbwU4jQt0d-29VvmfpA8dg1V9a8yJdKKulgMN-wfA-kgsK6JZTVP8ydhjCIGvKid0g5wGQj6DYO180ES8SozbJ6oMsVvZ0lMjtFAniNdvkY/s1600/mengambil-alih-blog-orang-lain-%25289%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="407" data-original-width="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwQgebcx4WwflqQ7KT1RotgaSxFp4qkrDwRbwU4jQt0d-29VvmfpA8dg1V9a8yJdKKulgMN-wfA-kgsK6JZTVP8ydhjCIGvKid0g5wGQj6DYO180ES8SozbJ6oMsVvZ0lMjtFAniNdvkY/s1600/mengambil-alih-blog-orang-lain-%25289%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jika kodenya benar, anda harus memasukkan password baru. Kombinasikan dengan huruf dan angka agar tidak mudah ditebak oleh orang lain.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTEGMxgqtkZVJB3FmrdLWbISgjc4nAIbBlDTzJ79HDsoCnwvCxn_a41s1sGqqJuSFONJxqoezRwAczNmkG5SI9Z-wB3WKT2J-A17w1p17QOKwLlrFf0KJuqqMIAWb26i9z1-yrH5rgYc/s1600/mengambil-alih-blog-orang-lain-%252810%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="442" data-original-width="405" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTEGMxgqtkZVJB3FmrdLWbISgjc4nAIbBlDTzJ79HDsoCnwvCxn_a41s1sGqqJuSFONJxqoezRwAczNmkG5SI9Z-wB3WKT2J-A17w1p17QOKwLlrFf0KJuqqMIAWb26i9z1-yrH5rgYc/s1600/mengambil-alih-blog-orang-lain-%252810%2529.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selanjutnya kita akan dibawa kehalaman blogger, emang ajib bener blog jadul satu artikel saja rata-rata memiliki pageviews ratusan ribu.</span><br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ES1tZ2ezE3D1cjn_Fl2yMjkUBT1PBSgtKdgyInxCvFTMjscD1LKV59GMLVvGRhkOfFo2I62HZC4s08bzehZ3mjmp4TyIj7Th6R9RFf2slusdUPym-PsVkHgujHj6eIwIxwg-ZI9hKN4/s1600/cara+mengambil+alih+blog+orang+lain.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="646" data-original-width="967" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ES1tZ2ezE3D1cjn_Fl2yMjkUBT1PBSgtKdgyInxCvFTMjscD1LKV59GMLVvGRhkOfFo2I62HZC4s08bzehZ3mjmp4TyIj7Th6R9RFf2slusdUPym-PsVkHgujHj6eIwIxwg-ZI9hKN4/s1600/cara+mengambil+alih+blog+orang+lain.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Yahh cukup mudah saya rasa untuk dipahami, sekali lagi ini adalah ilmu pengetahuan yang terkadang sering disalah gunakan oleh orang lain. Bagi anda yang merasa blogger jaman old yang masih aktif ngeblog hingga hari ini, segera rubah email anda ke layanan google mail yang lebih aman.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Demikian postingan mengenai cara mendapatkan blog orang lain yang sudah tidak diurus lagi, semoga bermanfaat . Bukan hanya blogger saja para pemburu BTC juga mencari member-member lama dengan email yahoo untuk diambil alih saldonya.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sekian dan terimakasih telah membaca artikel di blogsmanado, semoga bermanfaat untuk sobat sekalian.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sekian...</span><br />
<div>
<br /></div>
Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-66572023233004173192019-10-25T20:06:00.001+08:002019-10-30T02:41:05.179+08:00Cara Mendaftar Google Berita atau Google News Secara Gratis<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYPFCRtLFdoTt1hX-ffBfdo17p3ikrqTY4lynq93nLUomu2Xr4XEqb3yTUPxCKHiQ8Gg-I5bQuK3EbFujuvIXj3iQMXfp60VDHz_4KuV2w-9R7YEhF_iXfveUGoZrv_WV__STnuXhL3M/s1600/google-news-logo-desain.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="350" data-original-width="670" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYPFCRtLFdoTt1hX-ffBfdo17p3ikrqTY4lynq93nLUomu2Xr4XEqb3yTUPxCKHiQ8Gg-I5bQuK3EbFujuvIXj3iQMXfp60VDHz_4KuV2w-9R7YEhF_iXfveUGoZrv_WV__STnuXhL3M/s1600/google-news-logo-desain.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Baik Sobat BlogsManado, kali saya mau beritakan info penting buat situ Sobat, ok kita langsung aja. Dengan judul <b>Cara Mendaftar Google Berita atau Google News</b> pasti Sobat sudah sedikit pahaimi, Google Berita atau Google News adalah layanan google untuk situs – situs dengan konten news (berita) dan konten populer lainnya yang bisa dinikmati dengan gratis.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Bisa terdaftar di google news atau google berita adalah idaman setiap blogger, pasalnya jika blog masuk ke daftar google news atau google berita maka traffic mendapatkan kesempatan untuk naik berkali – kali lipat. Selain itu, jika blog sobat masuk kedalam daftar google news maka tidak perlu susah – susah mengatur SEO untuk dapat masuk ke page one search engine google.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Seperti google adsense, pada awal mulanya layanan google news atau google berita hanya tersedia dalam bahasa inggris, namun sekarang juga support dengan bahasa Indonesia.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Apa kelebihan blog masuk ke google news?</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Banyak kelebihan yang akan sobat dapatkan jika bisa mendaftar google news atau google berita dan diterima sebagai situs terdaftar disana. Dalam kanal pencarian google, situs berita akan mendapatkan kanal khusus “dalam berita” dan lebih diperioritaskan pencariannya dari pada situs yang lain.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Google news atau google berita berbeda dengan UCweb news yang mengcopy konten dan hanya memberikan link ke alamat asal blog dan sedikit kesempatan untuk mengunjungi situs asli karena semua isi konten sudah terpampang di UCweb news. Google news atau google berita hanya menampilkan hasil pencarian yang di utamakan, tanpa membuat jaringan situs dengan menjiplak isi konten. Jadi semua traffic google news atau google berita adalah organik.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Untuk lebih lengkapnya, berikut ini adalah kelebihan yang akan sobat dapatkan jika situs sudah terdaftar di google news atau google berita.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>1. Akan sangat cepat terindeks oleh search engine google</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Indeks yang terjadi pada situs akan menjadi sangat cepat, hal ini dilakukan google karena sifat berita online yang memberikan informasi secara cepat. Sobat pasti pernah melihat situs – situs populer bisa masuk di halaman satu google meskipun baru posting artikel 38 detik yang lalu. Luar biasa bukan? Itu terjadi karena google memperioritaskan dan mengutamakan pencarian relevan di google news atau google berita.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sementara, berapa lama google melakukan indeks terhadap blog sobat? Saya yakin tidak secepat jika terdaftar di google news atau google berita. Walaupun bisa melakukan submit manual ke webmaster untuk indeks situs, namun tanpa masuk ke daftar google news, situs masih belum diperioritaskan oleh google.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>2. Traffic organik meningkat tajam dan berkali – kali lipat</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Pengunjung yang masuk ke dalam situs sobat adalah pengunjung organik. Google hanya memperioritaskan hasil pencarian pada serp’nya, pengunjung yang masuk adalah 100% organik.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selain itu, blog sobat bakal mendapatkan kesempatan traffic naik berkali – kali lipat dari sebelumnya. Kabarnya, pembaca google news atau google berita lebih dari 30 juta / hari. Beberapa pengalaman sobat blogger yang situsnya sudah masuk google news atau google berita, traffic bisa naik sampai 4 kali lipat dari sebelumnya</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>3. Mudah masuk dalam halaman pertama google, meskipun tanpa SEO</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Karena prioritasnya di utamakan, maka tak butuh optimasi SEO yang rumit – rumit, tanpa optimasipun blog akan mudah masuk di halaman pertama google</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sobat coba saja cek situs berita, kebanyakan isi tulisannya hanya 150 – 250 karakter saja. Padahal tulisan sedikit kabarnya berpengaruh pada SEO, namun nyatanya situs – situs berita dengan isi kontent yang pendek itu selalu nongkrong di halaman pertama google.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>4. Meningkatkan penghasilan AdSense</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Karena pengunjung yang masuk kedalam blog sobat adalah pengunjung organik, maka pendapatan AdSense sobat pun akan naik. Pengunjung organik adalah yang memiliki nilai klik tertinggi pada AdSense.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah, setidaknya empat keuntungan di atas akan sobat dapatkan jika mendaftar google news atau google berita. menggiurkan bukan? meskipun namanya adalah google news atau google berita, namun tidak hanya situs yang berisi berita saja yang dapat mendaftar. Google news atau google berita juga menerima pendaftaran blog dengan konten :</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>1. Berita</b></span><br />
<span style="font-size: large;"><b>2. Blog</b></span><br />
<span style="font-size: large;"><b>3. Tutorial</b></span><br />
<span style="font-size: large;"><b>4. Tips dan Trick</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jadi blog sobat, meskipun bukan situs berisi konten berita, masih mungkin untuk mendaftar google news. jika sobat berminat untuk mendaftarkan situsnya, sepertinya sobat harus melihat kiat – kiat berikut agar lebih mudah diterima oleh google news atau google berita.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Syarat Mendaftar Google news atau Google berita Agar Mudah Diterima</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmF1-wnvvD8dHDn7EHzrn7Cemo__YzoL9aSHgyyrmye7LP0qYoCyLb1e62bR8pdAn3VJ4asjWm4WqfgkyQdNfcJ2DcShAKURtl4IXJKJUVpZPmP_L9HeAjdHgjDpLVc7tuQOSZpsWJxM/s1600/google-news-logo-desain-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="350" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmF1-wnvvD8dHDn7EHzrn7Cemo__YzoL9aSHgyyrmye7LP0qYoCyLb1e62bR8pdAn3VJ4asjWm4WqfgkyQdNfcJ2DcShAKURtl4IXJKJUVpZPmP_L9HeAjdHgjDpLVc7tuQOSZpsWJxM/s1600/google-news-logo-desain-2.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sebenarnya, asalkan blog sobat sudah diverifikasi melalui webmaster, maka blog sudah bisa mendaftar Google news atau google berita. Namun untuk bisa diterima, google news atau google berita melakukan seleksi yang super ketat, hal ini dilakukan agar kanal news google memiliki update berita yang berkualitas.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dalam kasus pendaftaran google news atau google berita ini sepertinya sama dengan seperti mendaftar google adsense, semuanya boleh bisa mendaftar namun untuk diterima sangat susah. Sobat bisa lakukan hal berikut untuk memudakan diterima news google.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>1. Gunakan domain TLD (Top Level Domain)</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Gunakan blog dengan custom Top Level Domain (TLD) agar blog memiliki nilai kepercayaan yang lebih tinggi. Menggunakan domain TLD membuat blog memiliki nilai yang lebih tinggi, pasalnya situs yang membeli domain sendiri lebih di anggap serius dalam pengerjaannya</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>2. Utamakan menggunakan wordpress self hosting</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sobat lebih baik menggunakan CMS WordPress self hosting untuk mendaftar Google news atau google berita. CMS WordPress memiliki banyak fitur plugin sehingga lebih mudah untuk membuat situs yang aktraktif</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selain itu, google news atau google berita merekomendasikan untuk menggunakan permalink 3 digit di belakang domain sebelum link judul, contoh : infosatu.co.id/123/cara-mendaftar-google-news atau infosatu.co.id/blog/123/cara-mendaftar-google-news. Pihak google news atau google berita merekomendasikan menggunakan permalink seperti di atas dan mendaftarkan blog setelah memiliki 3 digit dalam permalinknya. Atau sama saja mensyaratkan artikel lebih dari seratus.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>3. Tampilan yang baik</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Agar terlihat profesional, lebih baik sobat gunakan theme magazine yang rapi dan enak dilihat. Tampilan yang bagus akan mengindikasikan bahwa blog sobat serius kredibel dan terpercaya. Jika sobat menggunakan wordpress, lebih baik gunakan theme premium karena fiturnya yang mumpuni</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sobat lebih baik menggunakan theme model magazine karena lebih mudah navigasinya dan lebih banyak menampilkan postingan</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>4. Kelengkapan navigasi blog</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Gunakan kelengkapan blog untuk menunjang kepercayaan dari sebuah blog tersebut. Buatlah laman contact us, disclaimer, ToS, about, dan lainnya untuk menunjang pertanggung jawaban blog. Selain itu, pihak google news atau google berita juga merekomendasikan adanya peta situs khusus dalam indeks.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>5. Menggunakan banyak penulis</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Untuk diterima di google news atau google berita, pihak google merekomendasikan situs dengan banyak penulis. Hal ini sebagai indikator bahwa semakin banyak penulis maka semakin banyak update yang dihasilkan blog. Sobat bisa gunakan penulis bayangan (palsu) jika blog digarap mandiri.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selain itu, beberapa master blog juga merekomendasikan untuk update lebih banyak 3 kali dari jumlah penulis. Maksudnya adalah, jika blog sobat menggunkan 5 penulis, maka dalam sehari sobat harus update 15 tulisan dari berbagai penulis, jangan gunakan hanya satu penulis untuk update 15 artikel tersebut.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Apalagi jika sedang massa review pengajuan, sobat harus lebih aktif dalam update artikel. Massa review pengajuan google news adalah sekita 30 hari. Selama masa ini, sobat update artikel terus – menerus dengan konten sekitar 200 – 300 kata, lebih banyak lebih bagus dan usahakan original.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Setelah diterima google news atau google berita sobat bisa lebih bersatai dalam updatenya, namun harus tetap update, hanya intensitasnya yang boleh diturunkan.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>6. Blog telah mencapai umur enam bulan</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Sama seperti rekomendasi dalam pengajuan adsense, google news atau google berita juga merekomendasikan bahwa blog yang di daftarkan di google news atau google berita telah berumur setidaknya enam bulan. Google news selektif dalam menerima pendaftarnya kedalam kanal news, sehingga lebih baik blog yang sudah berumur sajan yang diajukan sobat.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>7. Kelengkapan lain</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Selain itu kelengkapan – kelengkapan lain yang membuat blog makin terpercaya dan memiliki performa yang baik. Jangan terlalu banyak plugin jika menggunakan wordpress self host agar blog tetap cepat ketika di akses. Submit ke webmaster, dan kelengkapan lainnya untuk meningkatkan kualitas blog.</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-size: x-large;"><b>Cara Mendaftar Google news atau Google berita</b></span></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Jika tahapan – tahapan diatas ternyata sudah dimiliki oleh blog sobat, berarti sobat telah siap untuk mengajukan pendaftaran di google news atau google berita. Berikut langkah – langkah mendaftar di google news:</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>1. Masuk ke alamat <a href="https://partnerdash.google.com/partnerdash/d/news" rel="nofollow" target="_blank"><span style="color: red;">DISINI</span></a> untuk masuk ke laman pendaftaran google news atau google berita.</b></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">2. Saat laman diatas terbuka, sobat akan melihat situs – situs sobat yang sudah diverifikasi di webmaster untuk selanjutnya sobat daftarkan di google news atau google berita. Situs yang sudah di verifikasi akan memiliki notifikasi klik Request Inclusion in Google News.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwcSM15mE0yXOYErMA7xSuY4JlM0l9cZT8qlvOOAgLhKrWFzUUuaIi4MwGNw2qKGd0hsF_mfbF6pDVeFD6TB2ZJTJOTvlccJk8ryJlzQMAkkub2ougCJB10lJhRurlaIwe9l4R0WgKKI/s1600/form-registration-google-news.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="348" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwcSM15mE0yXOYErMA7xSuY4JlM0l9cZT8qlvOOAgLhKrWFzUUuaIi4MwGNw2qKGd0hsF_mfbF6pDVeFD6TB2ZJTJOTvlccJk8ryJlzQMAkkub2ougCJB10lJhRurlaIwe9l4R0WgKKI/s1600/form-registration-google-news.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">3. Jika sobat sudah menentukan blog mana yang akan di daftarkan, kemudian klik Request Inclusion in </span><span style="font-size: large;">Google News atau Google Berita</span><span style="font-size: large;">. Selanjutnya akan muncul tab baru yang mewajibkan sobat mengisi form pendaftaran tentang informasi umun blog sobat.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNsyKQLo3q6Tq8JgzNu1cmc9m4aK6zY29LDo7E45XawAIDzK2zdy-rVeGmy_LVM3choK1gQ2PM8GxClDFX9jP8DabS2lhWww2x0ZTqLsSjXh_eRatcV-erWIfic6UXVjhOwUH99Q66Lc/s1600/cara-mendaftar-google-news.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="412" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNsyKQLo3q6Tq8JgzNu1cmc9m4aK6zY29LDo7E45XawAIDzK2zdy-rVeGmy_LVM3choK1gQ2PM8GxClDFX9jP8DabS2lhWww2x0ZTqLsSjXh_eRatcV-erWIfic6UXVjhOwUH99Q66Lc/s1600/cara-mendaftar-google-news.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dalam form tersebut sobat disuruh mengisi :</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">a. General information : Informasi umum tentang situs sobat</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">b. Site information : informasi situs sobat, meliputi :</span><br />
<br />
<ul>
<li><span style="font-size: large;">Source URL</span></li>
<li><span style="font-size: large;">Source Name</span></li>
<li><span style="font-size: large;">Site Language</span></li>
<li><span style="font-size: large;">City</span></li>
<li><span style="font-size: large;">State/Province</span></li>
<li><span style="font-size: large;">Region</span></li>
</ul>
<br />
<span style="font-size: large;">c. Categories : sobat disuruh mencentang kategori yang ada di disitus sobat. Dalam form google news, ada pilihan beberapa kategori, yaitu :</span><br />
<br />
<ul>
<li><span style="font-size: large;">Opinion content</span></li>
<li><span style="font-size: large;">Press Release</span></li>
<li><span style="font-size: large;">Free registration</span></li>
<li><span style="font-size: large;">User Generated</span></li>
<li><span style="font-size: large;">ContentSatire</span></li>
<li><span style="font-size: large;">Paid subscription</span></li>
<li><span style="font-size: large;">Blog</span></li>
</ul>
<br />
<span style="font-size: large;">d. News sections information : dalam form ini sobat bisa memasukan subdomain, jika blog sobat tiap kategori dibuat subdomain dalam situsnya</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Setelah semua informasi umum di isi dengan benar, langkah terahir adalah klik kotakan dibawah kemudian <b>SUBMIT</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCDwKlEfLfLd1ONBeuLfDhiTOZhdjMwNI7hnJOuoEzCgsfkJ2WdnIEf7gIB9W-eS_0Kda1-3Vy3tWGuj4agU8-Tkt2O0vydDTtokqZ-5Dm4XSwn_IetApAg-SHsFvKimPkgYh7l3CcuQ/s1600/submit-to-google-news.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="447" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCDwKlEfLfLd1ONBeuLfDhiTOZhdjMwNI7hnJOuoEzCgsfkJ2WdnIEf7gIB9W-eS_0Kda1-3Vy3tWGuj4agU8-Tkt2O0vydDTtokqZ-5Dm4XSwn_IetApAg-SHsFvKimPkgYh7l3CcuQ/s1600/submit-to-google-news.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">4. Jika sobat sudah submit blog ke google news. Maka dalam tampilan dasboard laman pendaftaran gogge news akabn berubah menjadi seperti dibawah ini.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJI1NtDw2s5klb7-ngB8tsCzz6T9OL8OxnTnzwGqwq776eRK24SE7j7mK1ebVkcnMHkJKfAvIHlofXYmfjZL3gkkaSHDcTp3t7gwGbf-1wBK9P2DbzYTd3ogu6BNzdP0GrL8t-4h7pmc/s1600/setelah-submit-google-news.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="356" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJI1NtDw2s5klb7-ngB8tsCzz6T9OL8OxnTnzwGqwq776eRK24SE7j7mK1ebVkcnMHkJKfAvIHlofXYmfjZL3gkkaSHDcTp3t7gwGbf-1wBK9P2DbzYTd3ogu6BNzdP0GrL8t-4h7pmc/s1600/setelah-submit-google-news.jpg" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Setelah blog di daftarkan ke google news, selanjutnya adalah masa review selama 30 hari. Selam masa review, lebih baik sobat lebih giat dalam update artikel. Lebih disarankan lagi untuk updatenya di atur, misalkan : pagi, siang, sore, malam. Hal ini akan membuat blog sobat terlihat up to date tiap harinnya</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah, demikianlah artikel saya Cara Mendaftar Google Berita atau Google News yang membuat siapapun pemilik blog ingin masuk dan terdaftar sebagai bagian dari google news. Semoga bermanfaat itu Sobat sekalian.</span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-22655727829083900852019-10-21T01:09:00.000+08:002019-10-21T01:09:08.088+08:00Jadilah yang Pertama di pencarian Google!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAqUKk6Cy9hmOQsVhCINp-OHDRQI74UeLv3dZd2u2v21FFLZ8xjIDvByF4UyzzHwr4Soot94Tteo63xkL7e6tuM61JyYboHZxK_qcx7xfLMiKPRgK2XcoisFWbXaAWkOj-0dl3Mnrj2PQ/s1600/blog+manado+search+google.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="623" data-original-width="923" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAqUKk6Cy9hmOQsVhCINp-OHDRQI74UeLv3dZd2u2v21FFLZ8xjIDvByF4UyzzHwr4Soot94Tteo63xkL7e6tuM61JyYboHZxK_qcx7xfLMiKPRgK2XcoisFWbXaAWkOj-0dl3Mnrj2PQ/s640/blog+manado+search+google.png" width="640" /></a></div>
<span style="font-size: large;">Banyak sekali website / blog di era digital ini yang berlomba-lomba untuk mendapatkan posisi teratas & pertama di mesin pencari <a href="https://www.google.com/" rel="nofollow" target="_blank"><span style="color: red;">GOOGLE</span></a>, namun sangat disayangkan jika kita tidak tahu apa yang "Google" butuhkan dari website / blog kita.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Pada kesempatan kali ini, saya akan mencoba berbagi ilmu Internet marketing khususnya SEO melalui Blog Demo blogsmanado untuk para blogger pemula / tingkat lanjut yang ingin lebih dalam mengenal ilmu SEO.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Oke! sekarang kita bahas satu per satu ..</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Pertama, Pastikan Website / Blog anda valid Google Testing Tool.</span><br />
<span style="font-size: large;">Google Testing tool adalah tool khusus yang dibuat oleh Google, yang bertujuan untuk meng-crosscheck apakah website anda sudah terpasang <a href="https://schema.org/" rel="nofollow" target="_blank"><span style="color: red;">Schema</span></a>?</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Belum tahu Google Testing Tool? silahkan cek disini : <a href="https://search.google.com/structured-data/testing-tool" rel="nofollow" target="_blank"><span style="color: red;">https://search.google.com/structured-data/testing-tool</span></a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Contoh blog / website yang sudah tervalidasi oleh Google Struktur : <a href="https://search.google.com/structured-data/testing-tool/u/0/#url=http%3A%2F%2Fblogsmanado.blogspot.com%2F" rel="nofollow" target="_blank"><span style="color: red;">Lihat disini</span></a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Bagaimana cara untuk menambahkan Schema yang benar? : <a href="https://developers.google.com/search/docs/guides/search-gallery" rel="nofollow" target="_blank"><span style="color: red;">Lihat Galeri Penelusuran Google</span></a></span><br />
<span style="font-size: large;"><br /></span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-64689227906873059412019-10-21T00:39:00.002+08:002019-10-31T12:56:58.092+08:00Template Blogger Newsify Responsive SEO Friendly News & Magazine Free Download<div class="separator" style="clear: both; text-align: center;">
<a href="http://template%20blogger%20newsify%20responsive%20seo%20friendly%20news%20%26%20magazine%20free%20download/" rel="nofollow" target="_blank"><img alt=" https://blogsmanado.blogspot.com/2019/10/template-blogger-newsify-responsive-seo-friendly-news-dan-magazine-free-download.html" border="0" data-original-height="432" data-original-width="650" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9CtAq7YGMsD_MsHorarobxMUf_polC7RqXH1pNVOPsBodzlgNb3F_P1TBCrApElf5FunCg-y55odg8xGxqo-tJq2L-8mgK2SpDnkBytmcdxlwAW9xyaf3bQxUF21FaWqsUAXcidG0bxw/s640/Template+Blogger+Newsify+Responsive+SEO+Friendly+News+%2526+Magazine.jpg" width="640" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Newsify adalah template Blogger yang indah, kuat & fleksibel untuk situs web Berita, Majalah dan Blog. </span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Newsify</span><span style="font-size: large;"> </span><span style="font-size: large;">benar-benar dapat disesuaikan yang memungkinkan Anda untuk membuat desain eksklusif baru dalam beberapa klik.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Ini juga sangat dioptimalkan untuk memberikan Anda hasil terbaik di mesin pencari.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: x-large;"><b>Fitur Lengkap Template</b></span><br />
<span style="font-size: large;">100% Desain Responsif.</span><br />
<span style="font-size: large;">Versi RTL otomatis.</span><br />
<span style="font-size: large;">Navigasi Teratas.</span><br />
<span style="font-size: large;">Ikon Sosial di Bilah Top.</span><br />
<span style="font-size: large;">Menu Tetap.</span><br />
<span style="font-size: large;">Menu Multi Level / DropDown.</span><br />
<span style="font-size: large;">Menu Mega Sederhana menurut (Terbaru, Acak atau Label).</span><br />
<span style="font-size: large;">Menu Korsel Mega oleh (Terbaru, Acak atau Label).</span><br />
<span style="font-size: large;">Advanced Mega Menu Tabs berdasarkan (Label).</span><br />
<span style="font-size: large;">Logo Seluler Ubahsuaian.</span><br />
<span style="font-size: large;">Ticker News by (Terbaru, Acak atau Label).</span><br />
<span style="font-size: large;">5 Pilihan Menampilkan Widget Gaya oleh (Terbaru, Acak atau Label).</span><br />
<span style="font-size: large;">6 Blokir Widget Gaya oleh (Terbaru, Acak atau Label).</span><br />
<span style="font-size: large;">Memperbaiki Sidebar.</span><br />
<span style="font-size: large;">Ikon Sosial di Bilah Samping.</span><br />
<span style="font-size: large;">Tab Bilah Sisi.</span><br />
<span style="font-size: large;">Widget Posting Posting oleh (Terbaru, Acak, Label atau Komentar).</span><br />
<span style="font-size: large;">Bagian Footer untuk Gadget.</span><br />
<span style="font-size: large;">Menu Footer.</span><br />
<span style="font-size: large;">Area Iklan Kustom.</span><br />
<span style="font-size: large;">Tombol Posting Bagikan.</span><br />
<span style="font-size: large;">Kotak Penulis Otomatis.</span><br />
<span style="font-size: large;">Gaya Formulir Komentar Blogger Baru.</span><br />
<span style="font-size: large;">Google Plus, Disqus, dan Komentar Facebook.</span><br />
<span style="font-size: large;">Templat Kode Pos Posting.</span><br />
<span style="font-size: large;">Versi Lebar Penuh.</span><br />
<span style="font-size: large;">Terjemahan Otomatis dan Ubahsuaian.</span><br />
<span style="font-size: large;">Cepat Dimuat.</span><br />
<span style="font-size: large;">SEO Dioptimalkan.</span><br />
<span style="font-size: large;">Latar Belakang dan Warna yang Dapat Disesuaikan.</span><br />
<span style="font-size: large;">Hapus Kredit Footer.</span><br />
<span style="font-size: large;">Gunakan Untuk Pelanggan.</span><br />
<span style="font-size: large;">Dukungan Premium 12 Bulan.</span><br />
<span style="font-size: large;"></span><br />
<span style="font-size: large;">Pembaruan Templat Seumur Hidup.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Download : <a href="https://app.box.com/s/684ffcijuomdpttzvjwzsqnuoqot92ob" rel="nofollow" target="_blank"><span style="color: red;">disini</span></a></span><br />
<span style="font-size: large;">Link Demo : </span><a href="https://newsify-template.blogspot.com/" rel="nofollow" target="_blank"><span style="color: red; font-size: large;">Newsify</span></a><br />
<span style="font-size: large;"><br /></span>Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-45191514214395058712019-10-21T00:23:00.000+08:002019-11-11T05:59:21.899+08:00Template Blogger Mirip Tampilan detik.com 2019 SEO Friendly<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXc8j315jXlcMRnDNbFChrhwhmxBj-CQH1my7vIETSwn1SPqEHZufBX0sYF83vNiy1GkUjVbPuv-JdD0xqDyT2dqxilenO6KzUMwUr_uoxs5GDE3w5PXxujJYi7GoRSNU3BtvIHVUh_Q/s1600/template-blogger-mirip-detikcom-responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXc8j315jXlcMRnDNbFChrhwhmxBj-CQH1my7vIETSwn1SPqEHZufBX0sYF83vNiy1GkUjVbPuv-JdD0xqDyT2dqxilenO6KzUMwUr_uoxs5GDE3w5PXxujJYi7GoRSNU3BtvIHVUh_Q/s1600/template-blogger-mirip-detikcom-responsive.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Template Blogger Mirip Website Detikcom ini bernama Template detikcoy.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Template blogger yang satu ini hampir 100% mirip banget dengan website resmi detik.com.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya tampilan versi desktopnya saja yang mirip. tampilan versi mobilenya juga sangat mirip dengan website aslinya. ditambah lagi template ini juga sudah memiliki fitur responsive. yang mana tampilan website/blog akan menyesuaikan dengan ukuran layar yang digunakan oleh pengunjung blog.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya dari segi tampilan saja yang sempurna. Namun template infosatu.co.id juga memiliki struktur data yang sempurna dan juga mobile friendly, yang mana blog akan lebih ramah dengan pengunjung yang menggunakan perangkat mobile.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah untuk melihat apa saja sih fitur yang ada pada Template Blogger Mirip Website Detikcom ini silahkan lihat list dibawah ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Desain responsive di semua perangkat Check</span><br />
<span style="font-size: large;">Data terstruktur sempurna- Check</span><br />
<span style="font-size: large;">Mobile Friendly Design- Check</span><br />
<span style="font-size: large;">Template profesional</span><br />
<span style="font-size: large;">Widget topik populer (detikcom style)</span><br />
<span style="font-size: large;">Tombol share via WhatsApp</span><br />
<span style="font-size: large;">SEO Optimized</span><br />
<span style="font-size: large;">Ready untuk Google Adsense</span><br />
<span style="font-size: large;">Halaman dilengkapi postingan terbaru</span><br />
<span style="font-size: large;">Sticky Navigasi & Sidebar</span><br />
<span style="font-size: large;">Nomor urut dan popular star untuk postingan populer Otomatis, sangat mudah untuk memposting</span><br />
<span style="font-size: large;">Theme-color Status Bar (mobile)</span><br />
<span style="font-size: large;">Auto resize thumbnail image</span><br />
<span style="font-size: large;">Komentar facebook yang otomatis terkoneksi dengan facebook pengunjung</span><br />
<span style="font-size: large;">Didukung Related posts</span><br />
<span style="font-size: large;">Social Media Icons di footer</span><br />
<span style="font-size: large;">Penulis & foto otomatis di setiap halaman</span><br />
<span style="font-size: large;">Compatibel dengan IE8+, Mozilla, Chrome, Safari</span><br />
<span style="font-size: large;">Dan banyak lagi...</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b><i>Harga Rp. 50.000,-</i></b></span><br />
<br />
<div style="background-color: white; border: 0px; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: baseline;"><b style="border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: baseline;"><span style="font-size: large;">Mau pesan sisini</span></b></span></div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://api.whatsapp.com/send?phone=6282192470677&text=Saya%20pesan%20Template%20Mirip%20Detikcom%202019%20Versi%20Blogspot%20https://blogsmanado.blogspot.com/2019/10/template-blogger-mirip-tampilan-detik-com-2019-seo-friendly.html" rel="nofollow" style="border: 0px; color: #cc0000; font: inherit; margin-bottom: 0px; margin-left: 0px !important; margin-right: 0px; margin-top: 0px; max-height: 1e+07em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.2s ease 0s; vertical-align: baseline;" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="44" data-original-width="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUkxVUJ17rgpX5AFKu-UuzLHRTxZ1t-hpyJ1JdACq-YkDs5nltavvnxc_TlMEmaY3-KyXqhGUOqg1YYJbkQdzloWQlXn-y9LV30ifWix4_KosA9prUYhswC8SNKgrYp95AgRoySpwboQ/s1600/whatsapp.png" style="border: 0px none; font: inherit; height: auto; margin: 0px; max-height: 1e+07em; max-width: 100%; outline: none; padding: 0px; vertical-align: baseline;" /></a> </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="sms://+6282192470677?body=Saya%20mau%20pesan%20Template Mirip detikcom 2019 Versi Blogspothttps://www.lapakjuraganwebsite.cf/2019/06/template-mirip-tribunnews-2019-versi.html" rel="nofollow" style="border: 0px; color: #cc0000; font: inherit; margin-bottom: 0px; margin-left: 0px !important; margin-right: 0px; margin-top: 0px; max-height: 1e+07em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.2s ease 0s; vertical-align: baseline;" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="46" data-original-width="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp178pyCrqrbRlwYUzfZQEqtqyjP45wfqRv6XP3E0HqNs8Hv1jpO-OWO3J72xSUHHIY2SiNqvg2RiiaYp0CWQi5_sgjqjPM0-FO150cDjdzxVaZusjjUftifZYtcCQew2WbcFTGKfiAWg/s1600/sms.png" style="border: 0px none; font: inherit; height: auto; margin: 0px; max-height: 1e+07em; max-width: 100%; outline: none; padding: 0px; vertical-align: baseline;" /></a></div>
<br />
<span style="font-size: large;"><span style="font-size: large;">Link Demo : </span><span style="color: red; font-size: large;"><a href="https://kabarkorupsi.com/" rel="nofollow" target="_blank"><b>KabarKorupsi.Com</b></a></span></span><br />
<span style="font-size: large;">Link Demo : </span><span style="color: red; font-size: large;"><a href="https://infosatu.co.id/" rel="nofollow" target="_blank"><b>Infosatu.co.id</b></a></span><br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr32dbwtKd2d5hF-18gQMad3o40hOn2jWxpvKBlkHozaeB5JKxpqAeU5cADyo3fZVx5nf1KZpFS10-S7Vbn6oO0X8deWAmTOYHAt8ZJNKX2HiCixdCM3SynnrykZMMInkstavlv72BrlQ/s1600/tampilan+infosatu.co.id.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="854" data-original-width="969" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr32dbwtKd2d5hF-18gQMad3o40hOn2jWxpvKBlkHozaeB5JKxpqAeU5cADyo3fZVx5nf1KZpFS10-S7Vbn6oO0X8deWAmTOYHAt8ZJNKX2HiCixdCM3SynnrykZMMInkstavlv72BrlQ/s1600/tampilan+infosatu.co.id.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaTveFWsVPM-m5roFIkqhd_ns7zRQVe41j03ohQDgq2o3bqrhWvkKk1KHnKrNay7_-k_05xBsblIjRzGeIF8qvpLaOBqmFVgc_1C_lH_vR52DgfoU7xhQOlbWtcTyVPN-o-paqEXogSk/s1600/tampilan+infosatu.co.id+selular+1.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="491" data-original-width="1022" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaTveFWsVPM-m5roFIkqhd_ns7zRQVe41j03ohQDgq2o3bqrhWvkKk1KHnKrNay7_-k_05xBsblIjRzGeIF8qvpLaOBqmFVgc_1C_lH_vR52DgfoU7xhQOlbWtcTyVPN-o-paqEXogSk/s1600/tampilan+infosatu.co.id+selular+1.jpeg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWpZFlYZBrf_-RK_XGx17xfLmLKYeoxVAkRIPqorkEXNGcmmzxeHG1HyBXZeZ8tb81DZh6WF_Q5g9i7tJgO2RAubDUeY7Ij11UWvMV50OMsBWHqgSHe26-lMvKU-5Qn1zQuW83uqyflM/s1600/tampilan+infosatu.co.id+selular.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1003" data-original-width="540" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWpZFlYZBrf_-RK_XGx17xfLmLKYeoxVAkRIPqorkEXNGcmmzxeHG1HyBXZeZ8tb81DZh6WF_Q5g9i7tJgO2RAubDUeY7Ij11UWvMV50OMsBWHqgSHe26-lMvKU-5Qn1zQuW83uqyflM/s1600/tampilan+infosatu.co.id+selular.jpeg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepBtgqMhl21ngHyjKzeDIlaiPrUiqYt_Bi-_S4Dh5ifxZGQfW9OF49FH6SkVCMH61DUn6CYi1tg8vQkoIHDWLNKWjDCf9XX8KSPxgCDtKGFFxgZlw6H4ZbX7sv3k7J42VpKr50MuEUZk/s1600/tampilan+infosatu.co.id+selular+rubrik.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="877" data-original-width="540" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepBtgqMhl21ngHyjKzeDIlaiPrUiqYt_Bi-_S4Dh5ifxZGQfW9OF49FH6SkVCMH61DUn6CYi1tg8vQkoIHDWLNKWjDCf9XX8KSPxgCDtKGFFxgZlw6H4ZbX7sv3k7J42VpKr50MuEUZk/s1600/tampilan+infosatu.co.id+selular+rubrik.jpeg" /></a></div>
<div>
<br /></div>
Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-55643601696529535272019-10-21T00:04:00.000+08:002019-11-11T05:58:52.635+08:00Template Blogger Mirip Tampilan Tribunnews.com 2019 SEO Friendly<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogsmanado.blogspot.com/2019/10/template-blogger-mirip-tampilan-tribunnews.com-2019-seo-friendly.html" rel="nofollow" target="_blank"><img alt=" Template Blogger Mirip Tampilan Tribunnews.com 2019 SEO Friendly" border="0" data-original-height="400" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ1_Gt-HkTQJ-qjVLNB5lHyrZl1_hVSkJNeU8B005bbMYX-o1f_JMad8FwMu5QOjaxL5E2rT8Z4OCAyx7bCWB7rKj8QVo0C4Obj5PAJYokC4-qxzy5RL6r0Ay6Rr9B9QT4njYRgJZVLyY/s1600/template-blogger-mirip-tribunnews-2019.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Template Blogger Mirip Website Tribunnews ini bernama Template pasarhorasnews.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Template blogger yang satu ini hampir 100% mirip banget dengan website resmi tribunnews.com.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya tampilan versi desktopnya saja yang mirip. tampilan versi mobilenya juga sangat mirip dengan website aslinya. ditambah lagi template ini juga sudah memiliki fitur responsive. yang mana tampilan website/blog akan menyesuaikan dengan ukuran layar yang digunakan oleh pengunjung blog.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya dari segi tampilan saja yang sempurna. Namun template pasarhorasnews juga memiliki struktur data yang sempurna dan juga mobile friendly, yang mana blog akan lebih ramah dengan pengunjung yang menggunakan perangkat mobile.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah untuk melihat apa saja sih fitur yang ada pada Template Blogger Mirip Website Tribunnews ini silahkan lihat list dibawah</span><br />
<span style="font-size: large;">ini.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Fitur Lengkap Template Blogger Mirip Website Tribunnews</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Desain responsive di semua perangkat Check</span><br />
<span style="font-size: large;">Data terstruktur sempurna - Check</span><br />
<span style="font-size: large;">Mobile Friendly Design - Check</span><br />
<span style="font-size: large;">Template profesional</span><br />
<span style="font-size: large;">Widget topik populer (Tribunnews.com style)</span><br />
<span style="font-size: large;">Tombol share via WhatsApp</span><br />
<span style="font-size: large;">SEO Optimized</span><br />
<span style="font-size: large;">Ready untuk Google Adsense</span><br />
<span style="font-size: large;">Halaman dilengkapi postingan terbaru</span><br />
<span style="font-size: large;">Sticky Navigasi & Sidebar</span><br />
<span style="font-size: large;">Nomor urut dan popular star untuk postingan populer Otomatis, sangat mudah untuk mempostingTheme-color</span><br />
<span style="font-size: large;">Status Bar (mobile)</span><br />
<span style="font-size: large;">Auto resize thumbnail image</span><br />
<span style="font-size: large;">Komentar facebook yang otomatis terkoneksi dengan facebook pengunjung</span><br />
<span style="font-size: large;">Didukung Related posts</span><br />
<span style="font-size: large;">Social Media Icons di footer</span><br />
<span style="font-size: large;">Penulis & foto otomatis di setiap halamanCompatibel dengan IE8+, Mozilla, Chrome, Safari</span><br />
<span style="font-size: large;">Dan banyak lagi...</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><i><b>Harga Rp. 50.000,-</b></i></span><br />
<span style="font-size: large;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-size: large;"><b>Mau pesan disini</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://api.whatsapp.com/send?phone=6282192470677&text=Saya%20pesan%20Template%20Mirip%20Tribunnews%202019%20Versi%20Blogspothttps://blogsmanado.blogspot.com/2019/10/template-blogger-mirip-tampilan-tribunnews.com-2019-seo-friendly.html" rel="nofollow" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="44" data-original-width="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUkxVUJ17rgpX5AFKu-UuzLHRTxZ1t-hpyJ1JdACq-YkDs5nltavvnxc_TlMEmaY3-KyXqhGUOqg1YYJbkQdzloWQlXn-y9LV30ifWix4_KosA9prUYhswC8SNKgrYp95AgRoySpwboQ/s1600/whatsapp.png" /></a> </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="sms://+6282192470677?body=Saya%20mau%20pesan%20Template Mirip Tribunnews 2019 Versi Blogspothttps://blogsmanado.blogspot.com/2019/10/template-blogger-mirip-tampilan-tribunnews.com-2019-seo-friendly.html" rel="nofollow" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="46" data-original-width="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp178pyCrqrbRlwYUzfZQEqtqyjP45wfqRv6XP3E0HqNs8Hv1jpO-OWO3J72xSUHHIY2SiNqvg2RiiaYp0CWQi5_sgjqjPM0-FO150cDjdzxVaZusjjUftifZYtcCQew2WbcFTGKfiAWg/s1600/sms.png" /></a></div>
<br />
<span style="font-size: large;">Link demo : <span style="color: red;"><a href="https://bloggertutorialweb.blogspot.com/" rel="nofollow" target="_blank">bloggertutorialweb</a></span></span><br />
<div>
<br /></div>
Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-77597581949804383212019-10-20T23:16:00.000+08:002019-11-11T05:58:37.138+08:00Template Blogger Liputan 9 Mirip Liputan6.com Responsive SEO Premium Version<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogsmanado.blogspot.com/2019/10/template-blogger-liputan-9-mirip-liputan6-com-responsive-seo-premium-version.html" rel="nofollow" target="_blank"><img alt=" Template Blogger Liputan 9 Mirip Liputan6.com Responsive SEO Premium Version" border="0" data-original-height="356" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTOaZ7jKpJfgSkzI_hFGHNX87Djs-XnuDpYbFnJ6ris_VoT1mYUYFgQXGYernp-dmLp2cZ-N5nb_2fu_4vttJrCFrWCn7uVaEC4u2_NzQS-Jzk4aH5yqv2ue-11gI4No7cmYLkliFucQ/s1600/template-blogger-responsive-seo-mirip-liputan6-com.png" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Template Blogger Mirip Website Liputan 6 ini bernama Template Liputan 9.</span><br />
<span style="font-size: large;">Template blogger yang satu ini hampir 100% mirip banget dengan website resmi liputan6•com.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya tampilan versi desktopnya saja yang mirip. tampilan versi mobilenya juga sangat mirip dengan website aslinya. ditambah lagi template ini juga sudah memiliki fitur responsive. yang mana tampilan website/blog akan menyesuaikan dengan ukuran layar yang digunakan oleh pengunjung blog.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Tidak hanya dari segi tampilan saja yang sempurna. Namun template liputan 9 juga memiliki struktur data yang sempurna dan juga mobile friendly, yang mana blog akan lebih ramah dengan pengunjung yang menggunakan perangkat mobile.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah untuk melihat apa saja sih fitur yang ada pada Template Blogger Mirip Website Liputan 6 ini silahkan lihat list dibawah</span><br />
<span style="font-size: large;">ini. Fitur Lengkap Template Blogger Mirip Website Liputan6</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Desain responsive di semua perangkat Check</span><br />
<span style="font-size: large;">Data terstruktur sempurna – Check</span><br />
<span style="font-size: large;">Mobile Friendly Design – Check</span><br />
<span style="font-size: large;">Template profesional</span><br />
<span style="font-size: large;">Widget topik populer (<a href="http://liputan6.com/"><span style="color: red;">Liputan6.com</span></a> style)</span><br />
<span style="font-size: large;">Tombol share via WhatsApp</span><br />
<span style="font-size: large;">SEO Optimized</span><br />
<span style="font-size: large;">Ready untuk Google Adsense</span><br />
<span style="font-size: large;">Halaman dilengkapi postingan terbaru</span><br />
<span style="font-size: large;">Sticky Navigasi & Sidebar</span><br />
<span style="font-size: large;">Nomor urut dan popular star untuk postingan populer</span><br />
<span style="font-size: large;">Otomatis, sangat mudah untuk memposting</span><br />
<span style="font-size: large;">Theme-color Status Bar (mobile)</span><br />
<span style="font-size: large;">Auto resize thumbnail image</span><br />
<span style="font-size: large;">Komentar facebook yang otomatis terkoneksi dengan facebook pengunjung</span><br />
<span style="font-size: large;">Didukung Related posts</span><br />
<span style="font-size: large;">Social Media Icons di footer</span><br />
<span style="font-size: large;">Penulis & foto otomatis di setiap halaman</span><br />
<span style="font-size: large;">Compatibel dengan IE8+, Mozilla, Chrome, Safari</span><br />
<span style="font-size: large;">Dan banyak lagi…</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Nah itulah ulasan singkat dan fitur lengkap yang ada pada template liputan9 – Template Blogger Mirip Website Liputan6. Jika kamu suka dengan template ini langsung saja di order ya gan..</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b><i>Harga Rp. 50.000,-</i></b></span><br />
<span style="font-size: large;"><br /></span>
<br />
<div style="background-color: white; border: 0px; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: medium; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: baseline;"><b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: baseline;">Mau pesan sisini</b></span></div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://api.whatsapp.com/send?phone=6282192470677&text=Saya%20pesan%20Template%20Mirip%20Liputan6%202019%20Versi%20Blogspot%20https://blogsmanado.blogspot.com/2019/10/template-blogger-liputan-9-mirip-liputan6-com-responsive-seo-premium-version.html" rel="nofollow" style="border: 0px; color: #cc0000; font: inherit; margin-bottom: 0px; margin-left: 0px !important; margin-right: 0px; margin-top: 0px; max-height: 1e+07em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.2s ease 0s; vertical-align: baseline;" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="44" data-original-width="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUkxVUJ17rgpX5AFKu-UuzLHRTxZ1t-hpyJ1JdACq-YkDs5nltavvnxc_TlMEmaY3-KyXqhGUOqg1YYJbkQdzloWQlXn-y9LV30ifWix4_KosA9prUYhswC8SNKgrYp95AgRoySpwboQ/s1600/whatsapp.png" style="border: 0px none; font: inherit; height: auto; margin: 0px; max-height: 1e+07em; max-width: 100%; outline: none; padding: 0px; vertical-align: baseline;" /></a> </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #666666; font-family: Roboto; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; max-height: 1e+07em; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="sms://+6282192470677?body=Saya%20mau%20pesan%20Template Mirip Liputan6 2019 Versi Blogspot%20https://blogsmanado.blogspot.com/2019/10/template-blogger-liputan-9-mirip-liputan6-com-responsive-seo-premium-version.html" rel="nofollow" style="border: 0px; color: #cc0000; font: inherit; margin-bottom: 0px; margin-left: 0px !important; margin-right: 0px; margin-top: 0px; max-height: 1e+07em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.2s ease 0s; vertical-align: baseline;" target="_blank"><img alt=" Pesan Sekarang" border="0" data-original-height="46" data-original-width="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp178pyCrqrbRlwYUzfZQEqtqyjP45wfqRv6XP3E0HqNs8Hv1jpO-OWO3J72xSUHHIY2SiNqvg2RiiaYp0CWQi5_sgjqjPM0-FO150cDjdzxVaZusjjUftifZYtcCQew2WbcFTGKfiAWg/s1600/sms.png" style="border: 0px none; font: inherit; height: auto; margin: 0px; max-height: 1e+07em; max-width: 100%; outline: none; padding: 0px; vertical-align: baseline;" /></a></div>
<span style="font-size: large;"></span><span style="font-size: large;"><br /></span>
<span style="font-size: large;">demo : <span style="color: red;"><a href="https://ferlyandosandala.blogspot.com/" rel="nofollow" target="_blank"><b>liputan9</b></a></span></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Dijamin Mantap gan dan aman 100%.</span><br />
<span style="font-size: large;"><br /></span>
Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-78588379712089913142019-10-14T22:37:00.001+08:002019-10-14T22:37:10.770+08:00Cara Menambahkan Otomatis Artikel Terkait di Tengah Postingan 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/AVvXsEhgTav3hZFYE1jg0FqMXo7oVNXIHvLu8drAjHFQFGYYfjUYIVP9Xl8Xlsnjjg724Ngvrk6ueHkVNfZql04rcQwzPS5vLtlS29656fMSmFlXHIbODiJSxqcaNESs3OmTXJ6cV0ORVmcXGFk/s1600/Cara+Menambahkan+Otomatis+Artikel+Terkait+di+Tengah+Postingan+Blogspot.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="359" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgTav3hZFYE1jg0FqMXo7oVNXIHvLu8drAjHFQFGYYfjUYIVP9Xl8Xlsnjjg724Ngvrk6ueHkVNfZql04rcQwzPS5vLtlS29656fMSmFlXHIbODiJSxqcaNESs3OmTXJ6cV0ORVmcXGFk/s1600/Cara+Menambahkan+Otomatis+Artikel+Terkait+di+Tengah+Postingan+Blogspot.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Cara Menambahkan Otomatis Artikel Terkait di Tengah Postingan Blogspot. </b></td></tr>
</tbody></table>
<span style="font-family: Georgia, Times New Roman, serif;">Apa kabar Sobat BlogManado, maaf seribu maaf... Lama tidak jumpa dikarenakan ada banyak hal yang perlu saya utamakan terlebih dahulu. Sehingga Blog saya sudah ngak bisa ada postingan baru lagi.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Hanya satu kali pasang di blog Sobat, semua postingan secara otomatis akan timbul Otomatis Artikel Terkait di Tengah Postingan di Blog Sobat.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Baik Sobat BlogManado, langsung saja pada judul diatas Cara Menambahkan Otomatis Artikel Terkait di Tengah Postingan Blogspot.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">1. Sobat harus login ke akun Blogger. Kalau ada beberapa blog dalam satu akun Blogger Sobat, pilih yang mana Sobat mau pasang tutorial Cara Menambahkan Otomatis Artikel Terkait di Tengah Postingan Blogspot.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">2. Pilih Tab Template, lalu ke edit HTML.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">3. Cari Kode </head>, kalau susah dapatnya Sobat Ctrl F lalu pastekan dikotak kecil yang tampil sesudah Ctrl F, langsung ditemukan kode </head>.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">4. Paste kode dibawa ini diatas kode </head>.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><style type="text/css"></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">/*Artikel Terkait Tengah Postingan*/</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">.bacajuga ul{padding:11px 41px 0;list-style:none}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></style></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script type="text/javascript"> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">//<![CDATA[ </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">//]]> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></script></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">5. Lalu Sobat Save... Tinggal selangkah lagi selesai...</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">6. Cari kode <span style="color: blue;"><data:post.body/></span> , Kalau sudah carinya, buat seperti yang saya jelaskan di no 3.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">7. Ada lebih dari satu kode <span style="color: blue;"><data:post.body/></span> , ambil kode <span style="color: blue;"><data:post.body/></span> yang ke 2, lalu ganti dengan kode yang dibawa ini.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:loop> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:blog.pageType == "item"'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><h4>Baca Juga</h4> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script type="text/javascript"> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">removeRelatedDuplicates(); </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">printRelatedLabels(); </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></script> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></div></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script type='text/javascript'></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var s=obj1.innerHTML;</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var t=s.substr(0,s.length/2);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></script></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Catatan:</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Silahkan Sobat sesuaikan artikel yang mau ditampilkan, max-results=5 bisa diganti sesuai keinginan sobat. Tapi saya sarankan baiknya tampilakan 3 saja biar mantap. jadi ganti max-results=3.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Perlu diketahui, kalau sobat sudah lakukan seperti diatas lalu tidak tampil. Sobat cari <data:post.body/> lagi.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">Kira kira kodenya mirip seperti kode dibawah ini.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="color: blue; font-family: Georgia, Times New Roman, serif;"><data:post.body/></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Ganti saja kode warna biru diatas <span style="color: blue;"><data:post.body/></span> dengan kode yang dibawah ini.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><div expr:id='&quot;post1&quot; + data:post.id'/></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><div class='bacajuga'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:post.labels'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:loop values='data:post.labels' var='label'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:blog.pageType == "item"'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:loop> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><b:if cond='data:blog.pageType == "item"'> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><h4>Baca Juga</h4> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script type="text/javascript"> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">removeRelatedDuplicates(); </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">printRelatedLabels(); </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></script> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if> </span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></div></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"><script type='text/javascript'></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var s=obj1.innerHTML;</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var t=s.substr(0,s.length/2);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;">if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></script></span><br />
<span style="color: red; font-family: Georgia, Times New Roman, serif;"></b:if></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Kalau sudah selesai... Simpan dan lihat hasilnya.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">Terima kasih sudah berkunjung ke BlogManado, semoga postingan ini bermanfaat bagi Sobat sekalian...</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />Redaksihttp://www.blogger.com/profile/03161785846243554515noreply@blogger.com2tag:blogger.com,1999:blog-5218911747656963886.post-81564459065119787652017-04-19T00:53:00.000+08:002017-04-19T00:52:14.607+08:00Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nyaKali ini saya akan menjelaskan sedikit tentang artikel Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nya.<br />
<br />
Langsung saja, ada beberapa cara untuk mendapatkan script iklan adsense. salah satu caranya adalah sebagai berikut. Ikuti langkah-langkah dibawah ini:<br />
<br />
1. Pertama : Anda wajib login ke <a href="https://google.com/adsense"><span style="color: red;"><b>https://google.com/adsense</b></span></a> dan anda akan dihadapkan dengan beberapa tab di bagian atas account area<br />
<br />
2. Kedua : Klik Tab <b>My Ads</b> dan klik New ad unit<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFx19kfBUalJFlbOdPNEMh7b4JMtsh6oH2JD0X-lSlIlC8HP0d6aC7PHjQ1x98G7d33H6YVRe-99A-xtbLb7Wi91RU2Dgt-7GJiQ-myTC_qIA54jo32yTaLHDwcG4FRA6CTgqe9PzcoaF8/s1600/google-my-ads.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFx19kfBUalJFlbOdPNEMh7b4JMtsh6oH2JD0X-lSlIlC8HP0d6aC7PHjQ1x98G7d33H6YVRe-99A-xtbLb7Wi91RU2Dgt-7GJiQ-myTC_qIA54jo32yTaLHDwcG4FRA6CTgqe9PzcoaF8/s400/google-my-ads.gif" width="400" /></a></div>
<br />
3. Ketiga : Isi dan setting kode iklan adsense anda sebagai berikut :<br />
<br />
<b>-</b> Name : Isi dengan nama yang anda inginkan. Kalau saya mengetikkan dengan alamat blog sehingga nanti akan ketahuan blog mana yang lebih banyak menghasilkan klik<br />
<br />
<b>-</b> Ad size : Pilih ukuran iklan adsense sesuaikan dengan ukuran side bar blog anda<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UPtSoAr4oCHZKwHsFbKK6RRtvhC-v_HMV6yhM9e7OHW8LmyeYYaj1tMKLmPmId_wQsNAt7vSAoqtjICPue87kAD3Wlz1BfSDyAl4lJKAn3Xu203rt8XPXIFoK66BKT45WDHE05bwYquZ/s1600/google-adsense.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UPtSoAr4oCHZKwHsFbKK6RRtvhC-v_HMV6yhM9e7OHW8LmyeYYaj1tMKLmPmId_wQsNAt7vSAoqtjICPue87kAD3Wlz1BfSDyAl4lJKAn3Xu203rt8XPXIFoK66BKT45WDHE05bwYquZ/s400/google-adsense.gif" width="400" /></a></div>
<br />
- Ad type : Pilih tipe iklan. Ada 3 pilihan.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkz6HL3QD_rRX7hkyT1xy0P2iVTuhq8F_NYLmTN7nn0VHx2-MBP3vT3rtKZFhIujsWlXWFFGJnek7NlU4pUZde6SzRx-MsXpLW0awkipo9xs6hicoYiLFEMy-DRs6OeTkv70eplT-ZegT/s1600/google_adsense.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkz6HL3QD_rRX7hkyT1xy0P2iVTuhq8F_NYLmTN7nn0VHx2-MBP3vT3rtKZFhIujsWlXWFFGJnek7NlU4pUZde6SzRx-MsXpLW0awkipo9xs6hicoYiLFEMy-DRs6OeTkv70eplT-ZegT/s400/google_adsense.gif" width="400" /></a></div>
<br />
- Text & image/rich media ads, jika anda akan memunculkan iklan text dan gambar<br />
<br />
- Text ads only , jika hanya akan menampilkan iklan text<br />
<br />
- Image/rich media ads only, jika hanya akan memunculkan iklan gambar saja<br />
<br />
- Backup ads : Pilih saja Show Blank space. Jika porsi iklan tidak ada maka iklan adsense yang muncul adalah kosong aleas tidak ada iklan Google Adsense<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjrwfVAAO52Umy1M-49aDD5UWya0yTIMIvYib2m6wdYFstzP55zyNikQW4gSHqTt_7MIlIJ8bdFUdfKxtuhHn2dpDiU91DrfFgiNr8GQ06qtHZVjqoMN0LNPKboJSBC2nwkL8F5JdXOYB/s1600/google_adsen.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjrwfVAAO52Umy1M-49aDD5UWya0yTIMIvYib2m6wdYFstzP55zyNikQW4gSHqTt_7MIlIJ8bdFUdfKxtuhHn2dpDiU91DrfFgiNr8GQ06qtHZVjqoMN0LNPKboJSBC2nwkL8F5JdXOYB/s400/google_adsen.gif" width="400" /></a></div>
<br />
- Custom Channels : Sebaiknya kode iklan anda diberi channel sehingga akan diketahui iklan di bagian mana yang paling efektif menghasilkan klik pengunjung. Misalnya diberi nama iklanheaderblog, sidekananblog dll. Untuk menambah Channel klik saja Create new custom channel<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8dORio9RSuxhNLyBYMiYhp-OP2piOwIId2EzXKDcEEVZs3hakOKRBBvPrNoB7hdDkrN3pMy8ZsZ6MFpa8oPeCDOLg-QvrFy425maG61PrV8AJu6lRAlmiNQEEFtZsbjXceIDbtiVbbYza/s1600/google-adsense-channel.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8dORio9RSuxhNLyBYMiYhp-OP2piOwIId2EzXKDcEEVZs3hakOKRBBvPrNoB7hdDkrN3pMy8ZsZ6MFpa8oPeCDOLg-QvrFy425maG61PrV8AJu6lRAlmiNQEEFtZsbjXceIDbtiVbbYza/s400/google-adsense-channel.gif" width="400" /></a></div>
<br />
4. Keempat : Klik tombol Save and get code untuk mengambil kode html iklan adsense anda langsung copy dan paste ke side bar blog anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUkWyY32pi0zVQ_ncS1dqqQIP32TVLde6TTmcbluNGHY0iG67NQeTaVPzR_oeyz1KAzz-CO6_rwWojbM-tf79pF-w8uJkwX5OVENOh9qFVTerJ4Wcu-tkkN28cterQ6-xvK0jZgEnj1fV/s1600/google-adsen.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUkWyY32pi0zVQ_ncS1dqqQIP32TVLde6TTmcbluNGHY0iG67NQeTaVPzR_oeyz1KAzz-CO6_rwWojbM-tf79pF-w8uJkwX5OVENOh9qFVTerJ4Wcu-tkkN28cterQ6-xvK0jZgEnj1fV/s400/google-adsen.gif" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZacljNIMwgXcmM5A0LdWL1f0Jms0A1sxt6n1ZlHQavHTYkUgtbHi6iNjAy-Ce0Qhg6Z2oaQFEqiqzUgLGD16IQNUmEnRVe0Jmz1Hy04MTHgJnMosWwGcwVLe2rLAzsQmP-XDexrbLRBO/s1600/kode_google_adsense.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZacljNIMwgXcmM5A0LdWL1f0Jms0A1sxt6n1ZlHQavHTYkUgtbHi6iNjAy-Ce0Qhg6Z2oaQFEqiqzUgLGD16IQNUmEnRVe0Jmz1Hy04MTHgJnMosWwGcwVLe2rLAzsQmP-XDexrbLRBO/s400/kode_google_adsense.gif" width="400" /></a></div>
<br />
Untuk menambahkan kode iklan adsense silahkan:<br />
<br />
1. Login ke blogger.com<br />
2. Klik blog yang akan anda pasang adsense<br />
3. Klik Tata Letak<br />
4. Klik Tambah gadget<br />
5. Klik HTML/Javascript<br />
6. Masukkan ( Paste ) kode adsense yang telah anda copy tadi.<br />
<br />
Selesai, Anda sudah memasukkan iklan adsense ke side bar blog. Kalau baru setting dan ambil kode adsense, biasanya memakan waktu beberapa menit untuk muncul di blog anda. Jadi sabar saja. Setelah kurang lebih 10 menit anda bisa buka blog anda.<br />
<br />
Demikian Artikel Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nya, semoga sukses-nya teman-teman... god job.Redaksi Newshttp://www.blogger.com/profile/16850844019715232315noreply@blogger.com3tag:blogger.com,1999:blog-5218911747656963886.post-43479857365840315092017-04-19T00:47:00.001+08:002017-04-19T00:50:28.288+08:00Cara Membuat View Count Postingan Blog Terbaru<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKqBLUwMrz09xeScmh_ulI53f1MLjlBMB2gAQn5ivbCZxH28o2_D6lvX4ngDyo3SukGSNAo7cn-guedIhpkOJvI_PgGM3mSPyZayxZ7KCnRk58tu-qj_44q9k5-ARFFOy_vpFtrbHC6oD/s1600/Cara+Membuat+View+Count+Postingan+Blog+Terbaru.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKqBLUwMrz09xeScmh_ulI53f1MLjlBMB2gAQn5ivbCZxH28o2_D6lvX4ngDyo3SukGSNAo7cn-guedIhpkOJvI_PgGM3mSPyZayxZ7KCnRk58tu-qj_44q9k5-ARFFOy_vpFtrbHC6oD/s640/Cara+Membuat+View+Count+Postingan+Blog+Terbaru.jpg" width="640" /></a></div>
Sudah sekian lama akhir blogsmanado.blogspot.com ketemu yang nama script untuk hitungan pembaca di setiap postingan blog. Dengan script yang blogsmanado.blogspot.com akan jelaskan dibawah, sangat yakin 100% script ini cocok dan meyakinkan ok punya.<br />
<br />
Kali ini blogsmanado.blogspot.com akan bagikan Cara Membuat View Count Postingan Blog terbaru dari Graddit. Sengaja saya ambil dari Graddit karena menurut blogsmanado.blogspot.com penerapannya ke blog sangatlah mudah. Disini tidak hanya menampilkan View Count atau jumlah pengunjung saja tetapi juga disertai feedback untuk setiap postingan.<br />
<br />
Setelah saya terapkan di blog Cara Membuat View Count Postingan Blog terbaru ini valid pada HTML5. Namun untuk kode css-nya masih sedikit error tetapi itu tidak mengurangi ke-valid-an dari template blog kita.<br />
<br />
Sebagai contoh tampilannya bisa anda lihat pada gambar dibawah ini.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTrhkcf_5EbRyLOGChWeNwv6LzqOGQx1dOl_optPg2EG1hA0M9AMhQFB3Xx58F75hC9g1ieJmBdKcM-3jy2crCEfY7EF8x5KffIuO3KMzmD2aEDAQgs9uoVpVUYte0oHpv1YCcz9K_m3k/s1600/Cara+Membuat+View+Count+Postingan+Blog+Terbaru+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTrhkcf_5EbRyLOGChWeNwv6LzqOGQx1dOl_optPg2EG1hA0M9AMhQFB3Xx58F75hC9g1ieJmBdKcM-3jy2crCEfY7EF8x5KffIuO3KMzmD2aEDAQgs9uoVpVUYte0oHpv1YCcz9K_m3k/s640/Cara+Membuat+View+Count+Postingan+Blog+Terbaru+1.jpg" width="640" /></a></div>
<br />
Bagi anda para Blogger yang ingin mencoba Cara Membuat View Count Postingan Blog Terbaru dari Garddit ini, silahkan masuk ke acount Garddit <a href="http://graddit.com/" rel="nofollow" target="_blank"><span style="color: red;"><b>DISINI</b></span></a><br />
<br />
Disini anda tidak perlu mendaftar atau membuat akun baru. Anda tinggal pilih menu "<a href="http://graddit.com/ratings-widget" rel="nofollow" target="_blank"><span style="color: red;"><b>Ratings</b></span></a>". Setelah terbuka jendela baru silahkan pilih tampilan yang kita inginkan. Pilih kode untuk Blogger lalu copy scriptnya.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7qKnSHQQ9TqobiIOLozu0dc5f0ZZQgheXtels0EoBS7vSOzy-WZ-6tvCrdPX64W86Vl-SO2KLnG11DcvPl1zNmaElCiZRk_wv49EriO32TIwKgh-FbYHpUHXdnI-e5m25oRA3GTQqhlc/s1600/Cara+Membuat+View+Count+Postingan+Blog+Terbaru+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7qKnSHQQ9TqobiIOLozu0dc5f0ZZQgheXtels0EoBS7vSOzy-WZ-6tvCrdPX64W86Vl-SO2KLnG11DcvPl1zNmaElCiZRk_wv49EriO32TIwKgh-FbYHpUHXdnI-e5m25oRA3GTQqhlc/s640/Cara+Membuat+View+Count+Postingan+Blog+Terbaru+2.png" width="640" /></a></div>
<br />
Silahkan simpan kode scriptnya serta pastekan ke edit <span style="color: blue;">HTML</span> template blog anda. Bisa di atas atau bawah postingan. terserah keinginan anda masing-masing.<br />
<br />
Untuk disimpan diatas postingan silahkan cari kode <span style="color: red;"><div class='post-body entry-content'</span>. Biasanya kode tersebut ada 2 buah. Simpan kode dari Graddit di atas atau di bawah kode kedua. Agar tidak tampil di homepage, bisa Anda tambahkan kode <span style="color: red;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span> di atas kode Graddit dan <span style="color: red;"></b:if></span> di bawahnya.<br />
<br />
Sedangkan untuk disimpan dibawah postingan, silahkan cari kode<br />
<br />
<span style="color: red;"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></span><br />
<span style="color: red;"><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></span><br />
<span style="color: red;"> <div style='clear: both;'/> <!-- clear for photos floats --></span><br />
<span style="color: red;"> </div> </span><br />
<br />
Simpan kode dari Graddit di bawah kode tadi. Agar tidak tampil di homepage, bisa Anda tambahkan kode <span style="color: red;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span> di atas kode Graddit dan <span style="color: red;"></b:if></span> di bawahnya.<br />
<br />
Jangan lupa simpan kode di bawah ini DI ATAS kode <span style="color: red;"></head></span><br />
<span style="color: red;"><br /></span>
<span style="color: red; font-family: "georgia" , "times new roman" , serif;"><i><link type='text/css' rel='stylesheet' href='http://static.graddit.com/css/graddit.css'/></i></span><br />
<span style="font-family: "times" , "times new roman" , serif;"><br /></span>
<span style="font-family: "times" , "times new roman" , serif;">Demikian saja sharing tentang Cara Membuat View Count Postingan Blog Terbaru semoga dapat dimengerti dan bermanfaat...</span>Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com1tag:blogger.com,1999:blog-5218911747656963886.post-43518983990367439232017-04-18T12:18:00.000+08:002017-04-19T00:54:55.395+08:00Blogger Dinamis Slider Responsif oleh Label / Tulisan Terbaru<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNe-KjZd0yCj5iC4lSLMpg_L2qRLBgcMa_d5s4MZeApBKHiTPqw2qNehy3LogHOi_Y7s8d2YV1Xs5PrFJybl91fHgJ-vSzburVQMYNgtdHruKdC5jDSIlwBPhyphenhyphene8PcnsHJettRd0T7JUmR/s1600/bdSlider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNe-KjZd0yCj5iC4lSLMpg_L2qRLBgcMa_d5s4MZeApBKHiTPqw2qNehy3LogHOi_Y7s8d2YV1Xs5PrFJybl91fHgJ-vSzburVQMYNgtdHruKdC5jDSIlwBPhyphenhyphene8PcnsHJettRd0T7JUmR/s640/bdSlider.jpg" width="640" /></a></div>
"Blogger Dinamis Slider" adalah slider otomatis sederhana namun kuat untuk blogger. Konten slider menghasilkan dari feed blog ini secara dinamis, berdasarkan pengaturan pengguna melalui jQuery Ajax panggilan. Hal ini sepenuhnya responsif. Karena merupakan Dinamis Slider, update konten slider setiap kali posting baru datang (jika cocok dengan kriteria pengaturan pengguna).<br />
<h2>
Blogger Dinamis Slider (bdSlider) Fitur</h2>
<br />
<ul>
<li>Dinamis - Slider Content Menghasilkan otomatis</li>
<li>sepenuhnya Responsif</li>
<li>Slider Oleh Label Tertentu</li>
<li>Slider Dengan Tulisan Terbaru</li>
<li>preloader Fungsi</li>
<li>Banyak Kustomisasi Pilihan</li>
<li>Mudah Pengaturan & Customization</li>
</ul>
<br />
<h2>
<a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/live-testing-tool/" rel="nofollow" target="_blank"><span style="color: red;"><b>Pengujian Alat untuk Blogger Dinamis Slider</b></span></a></h2>
Nah sekarang baru posting slider otomatis ini memiliki alat uji mana Anda dapat memasukkan URL blog Anda dan melihat bagaimana Dinamis itu menghasilkan slider dari feed blog Anda. alat ini memiliki pilihan dasar lain seperti Image Size, Max Item, Label (Anda dapat menentukan label untuk menghasilkan slider dari. Meskipun itu adalah opsional). Lihat Live Pengujian Alat.<br />
<br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<h2 style="line-height: 1.6em;">
Demo/ Examples</h2>
</div>
<div style="background-color: white; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<ul>
<li><a href="http://labelpost.blogspot.com/2016/01/demo-blogger-dynamic-slider.html" style="text-decoration: none;" target="_blank"><b><span style="color: black;">Blogger Demo</span></b></a></li>
<li><span style="color: black;"><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/demo-1.html" style="text-decoration: none;" target="_blank"><b>Static Demo</b></a> (Yes it supports cross domain too!)</span><ul>
<li><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/demo-1.html" style="text-decoration: none;" target="_blank"><span style="color: black;">DEMO 1: (Default Slider)</span></a></li>
<li><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/demo-2.html" style="text-decoration: none;" target="_blank"><span style="color: black;">DEMO 2: (Custom sized slider by a specific Label)</span></a></li>
<li><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/demo-3.html" style="text-decoration: none;" target="_blank"><span style="color: black;">DEMO 3: (Animation: Slide, No Caption, No controlNav etc.)</span></a></li>
<li><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider/demo-4.html" style="text-decoration: none;" target="_blank"><span style="color: black;">DEMO 4: (Multiple Slider in a page with different Settings)</span></a></li>
</ul>
</li>
</ul>
</div>
<h3>
Bagaimana itu bekerja ?</h3>
Konten slider menghasilkan dari umpan blogger blog, dinamis oleh jQuery AJAX panggilan, dan kemudian FlexSlider berlaku dan mengurus fitur sliding. Bahwa, tidak ada yang mewah tapi sangat berguna untuk pengguna blogger.<br />
<h3>
Petunjuk pemasangan</h3>
LANGKAH - 1: Pergi ke Blog Anda Home> Template (Backup template Anda aman)<br />
LANGKAH - 2: Edit HTML<br />
LANGKAH - 3: Cari menutup kepala: </ head> di template (Petunjuk: untuk mencari template: klik di mana saja di blok kode dan tekan Ctrl + F)<br />
LANGKAH - 4: Salin kode berikut di bawah ini dan paste tepat sebelum </ head><br />
<pre class="highlight" style="background-color: white; color: #4f4f4f; font-size: 15px; margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs xml" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- BloggerDynamicSlider Basic CSS --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">style</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/css"</span>></span><span class="css">
<span class="hljs-comment" style="color: #999988; font-style: italic;">/**
* jQuery BloggerDynamicSlider v1.0.0
* Copyright 2016 http://shuvojitdas.com
* Contributing Author: Shuvojit Das
* Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
*
*/</span>
@<span class="hljs-keyword" style="font-weight: 700;">import</span> url(https://fonts.googleapis.com/css?family=Open+Sans:<span class="hljs-number" style="color: teal;">300</span>,<span class="hljs-number" style="color: teal;">400</span>);
@<span class="hljs-keyword" style="font-weight: 700;">import</span> url(<span class="hljs-string" style="color: #dd1144;">"https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css"</span>);
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* Preloader */</span>
<span class="hljs-selector-class">.flexslider</span><span class="hljs-selector-class">.loading</span><span class="hljs-selector-pseudo">:after</span> {
<span class="hljs-attribute" style="color: navy;">content</span>: <span class="hljs-string" style="color: #dd1144;">''</span>;
<span class="hljs-attribute" style="color: navy;">position</span>: absolute;
<span class="hljs-attribute" style="color: navy;">top</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">right</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">bottom</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">left</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">background</span>: <span class="hljs-built_in" style="color: #0086b3;">url</span>(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNiJ_86jngrkBmyeSfHSSc1WrGjH39HaNLt4-DTzf46KB1UQj1Dlpj10xWgGXauP5SkomKCqEME0jNX2qTPY_LEmPS9jhkrlwHsB6-39FBsRfcpGyBVe_KEr0nhFuXqyfV3S1x9qLU_NsT/h120/loader.gif) no-repeat center center;
<span class="hljs-attribute" style="color: navy;">background-color</span>: <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">255</span>, <span class="hljs-number" style="color: teal;">255</span>, <span class="hljs-number" style="color: teal;">255</span>, <span class="hljs-number" style="color: teal;">0.9</span>);
<span class="hljs-attribute" style="color: navy;">z-index</span>: <span class="hljs-number" style="color: teal;">9999</span>;
}
<span class="hljs-selector-class">.flexslider</span><span class="hljs-selector-class">.loading</span> <span class="hljs-selector-tag" style="font-weight: 700;">ul</span><span class="hljs-selector-class">.flex-direction-nav</span>,
<span class="hljs-selector-class">.flexslider</span><span class="hljs-selector-class">.loading</span> <span class="hljs-selector-tag" style="font-weight: 700;">ol</span>,
<span class="hljs-selector-class">.loading</span> <span class="hljs-selector-class">.flex-caption</span> {
<span class="hljs-attribute" style="color: navy;">display</span>: none;
}
<span class="hljs-selector-class">.flexslider</span> {
<span class="hljs-attribute" style="color: navy;">border</span>: <span class="hljs-number" style="color: teal;">1px</span> solid <span class="hljs-number" style="color: teal;">#cacaca</span>;
<span class="hljs-attribute" style="color: navy;">padding</span>: <span class="hljs-number" style="color: teal;">4px</span>;
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span> auto <span class="hljs-number" style="color: teal;">60px</span> auto;
<span class="hljs-attribute" style="color: navy;">-webkit-box-shadow</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-number" style="color: teal;">1px</span> <span class="hljs-number" style="color: teal;">4px</span> <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0.2</span>);
<span class="hljs-attribute" style="color: navy;">-moz-box-shadow</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-number" style="color: teal;">1px</span> <span class="hljs-number" style="color: teal;">4px</span> <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0.2</span>);
<span class="hljs-attribute" style="color: navy;">box-shadow</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-number" style="color: teal;">1px</span> <span class="hljs-number" style="color: teal;">4px</span> <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0.2</span>);
<span class="hljs-attribute" style="color: navy;">-webkit-border-radius</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">-moz-border-radius</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">border-radius</span>: <span class="hljs-number" style="color: teal;">0</span>;
}
<span class="hljs-selector-class">.flexslider</span> <span class="hljs-selector-tag" style="font-weight: 700;">a</span> {
<span class="hljs-attribute" style="color: navy;">text-decoration</span>: none;
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* Caption/Post Title */</span>
<span class="hljs-selector-class">.flex-caption</span> {
<span class="hljs-attribute" style="color: navy;">position</span>: relative;
<span class="hljs-attribute" style="color: navy;">padding-left</span>: <span class="hljs-number" style="color: teal;">15px</span>;
<span class="hljs-attribute" style="color: navy;">padding-right</span>: <span class="hljs-number" style="color: teal;">10px</span>;
<span class="hljs-attribute" style="color: navy;">height</span>: <span class="hljs-number" style="color: teal;">60px</span>;
<span class="hljs-attribute" style="color: navy;">background</span>: <span class="hljs-number" style="color: teal;">#FFFFFF</span>;
<span class="hljs-attribute" style="color: navy;">color</span>: <span class="hljs-number" style="color: teal;">#1C1C1C</span>;
<span class="hljs-attribute" style="color: navy;">font-family</span>: <span class="hljs-string" style="color: #dd1144;">'Open Sans'</span>, sans-serif;
<span class="hljs-attribute" style="color: navy;">font-weight</span>: <span class="hljs-number" style="color: teal;">300</span>;
<span class="hljs-attribute" style="color: navy;">font-size</span>: <span class="hljs-number" style="color: teal;">26px</span>;
<span class="hljs-attribute" style="color: navy;">line-height</span>: <span class="hljs-number" style="color: teal;">26px</span>;
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">-webkit-backface-visibility</span>: hidden;
<span class="hljs-attribute" style="color: navy;">-moz-backface-visibility</span>: hidden;
<span class="hljs-attribute" style="color: navy;">-ms-backface-visibility</span>: hidden;
<span class="hljs-attribute" style="color: navy;">backface-visibility</span>: hidden;
}
<span class="hljs-selector-class">.flex-caption</span> <span class="hljs-selector-tag" style="font-weight: 700;">span</span> {
<span class="hljs-attribute" style="color: navy;">display</span>: table-cell;
<span class="hljs-attribute" style="color: navy;">vertical-align</span>: middle;
<span class="hljs-attribute" style="color: navy;">height</span>: <span class="hljs-number" style="color: teal;">60px</span>;
}
<span class="hljs-selector-class">.flex-caption</span><span class="hljs-selector-class">.overlayDark</span>,
<span class="hljs-selector-class">.flex-caption</span><span class="hljs-selector-class">.overlayLight</span> {
<span class="hljs-attribute" style="color: navy;">margin-bottom</span>: -<span class="hljs-number" style="color: teal;">60px</span>;
<span class="hljs-attribute" style="color: navy;">bottom</span>: <span class="hljs-number" style="color: teal;">60px</span>;
<span class="hljs-attribute" style="color: navy;">position</span>: relative;
}
<span class="hljs-selector-class">.flex-caption</span><span class="hljs-selector-class">.overlayDark</span> {
<span class="hljs-attribute" style="color: navy;">background</span>: <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0</span>, <span class="hljs-number" style="color: teal;">0.7</span>);
<span class="hljs-attribute" style="color: navy;">color</span>: <span class="hljs-number" style="color: teal;">#fff</span>;
}
<span class="hljs-selector-class">.flex-caption</span><span class="hljs-selector-class">.overlayLight</span> {
<span class="hljs-attribute" style="color: navy;">background</span>: <span class="hljs-built_in" style="color: #0086b3;">rgba</span>(<span class="hljs-number" style="color: teal;">255</span>, <span class="hljs-number" style="color: teal;">255</span>, <span class="hljs-number" style="color: teal;">239</span>, <span class="hljs-number" style="color: teal;">0.9</span>);
<span class="hljs-attribute" style="color: navy;">color</span>: <span class="hljs-number" style="color: teal;">#000</span>;
}
<span class="hljs-selector-tag" style="font-weight: 700;">ul</span><span class="hljs-selector-class">.slides</span> <span class="hljs-selector-tag" style="font-weight: 700;">li</span> <span class="hljs-selector-tag" style="font-weight: 700;">a</span> {
<span class="hljs-attribute" style="color: navy;">display</span>: block;
<span class="hljs-attribute" style="color: navy;">overflow</span>: hidden;
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* blogger css conflicts fix */</span>
<span class="hljs-selector-class">.flexslider</span> <span class="hljs-selector-tag" style="font-weight: 700;">ul</span> {
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
<span class="hljs-attribute" style="color: navy;">padding</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
<span class="hljs-attribute" style="color: navy;">line-height</span>: initial <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
}
<span class="hljs-selector-class">.flexslider</span> <span class="hljs-selector-tag" style="font-weight: 700;">ul</span><span class="hljs-selector-class">.flex-direction-nav</span> <span class="hljs-selector-tag" style="font-weight: 700;">li</span> {
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">padding</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">line-height</span>: initial;
}
<span class="hljs-selector-class">.flexslider</span> <span class="hljs-selector-tag" style="font-weight: 700;">ul</span> <span class="hljs-selector-tag" style="font-weight: 700;">li</span> {
<span class="hljs-attribute" style="color: navy;">margin-bottom</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
}
<span class="hljs-selector-class">.flexslider</span> <span class="hljs-selector-tag" style="font-weight: 700;">img</span> {
<span class="hljs-attribute" style="color: navy;">padding</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">border</span>: none;
<span class="hljs-attribute" style="color: navy;">-webkit-box-shadow</span>: none;
<span class="hljs-attribute" style="color: navy;">box-shadow</span>: none;
}
<span class="hljs-selector-tag" style="font-weight: 700;">ul</span><span class="hljs-selector-class">.flex-direction-nav</span> {
<span class="hljs-attribute" style="color: navy;">position</span>: static;
}
<span class="hljs-selector-tag" style="font-weight: 700;">ul</span><span class="hljs-selector-class">.flex-direction-nav</span> <span class="hljs-selector-tag" style="font-weight: 700;">li</span> {
<span class="hljs-attribute" style="color: navy;">position</span>: static;
}
<span class="hljs-selector-class">.error</span> {
<span class="hljs-attribute" style="color: navy;">font-family</span>: monospace, sans-serif;
}
@<span class="hljs-keyword" style="font-weight: 700;">media</span> (max-width: <span class="hljs-number" style="color: teal;">600px</span>) {
<span class="hljs-selector-class">.flex-caption</span> {
<span class="hljs-attribute" style="color: navy;">font-size</span>: <span class="hljs-number" style="color: teal;">20px</span>;
<span class="hljs-attribute" style="color: navy;">line-height</span>: <span class="hljs-number" style="color: teal;">20px</span>;
<span class="hljs-attribute" style="color: navy;">font-weight</span>: <span class="hljs-number" style="color: teal;">400</span>;
}
}
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">style</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- Include Dependency Script --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"http://shuvojitdas.com/script/jquery.bdslider.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span></code></pre>
Catatan: Jika Anda sudah menambahkan jQuery js ke template blog Anda maka jangan tambahkan lagi karena kadang-kadang beberapa jQuery reruntuhan semuanya. Berikut tag script jQuery terletak di bagian paling pertama blok kode ini di atas.<br />
<br />
<br />
LANGKAH - 5: Jadi sekarang script engine slider diinstal, Anda siap untuk menambahkan slider (s) di mana saja di blog Anda, termasuk gadget, posting atau halaman. Nah, hanya menyalin kode di bawah ini dan paste di Gadget HTML atau Post<br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs xml" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">id</span>=<span class="hljs-string" style="color: #dd1144;">"slider1"</span>></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span>></span><span class="javascript">
$(<span class="hljs-built_in" style="color: #0086b3;">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string" style="color: #dd1144;">"#slider1"</span>).BloggerDynamicSlider({
imageWidth: <span class="hljs-number" style="color: teal;">636</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Image width in px value</span>
imageHeight: <span class="hljs-number" style="color: teal;">398</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Image height in px value</span>
maxItem: <span class="hljs-number" style="color: teal;">6</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Max number of Slider Image to show</span>
animation: <span class="hljs-string" style="color: #dd1144;">"slide"</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Select your animation type, "fade" or "slide"</span>
showPostTitle: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Show post title as Caption ? (true/false)</span>
postTitleStyle: <span class="hljs-string" style="color: #dd1144;">"overlayLight"</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Caption style: "default, "overlayDark" or "overlayLight"</span>
});
});
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span></code></pre>
</div>
LANGKAH - 6: Simpan & Selesai! Cukup Sederhana & Dinamis.<br />
<br />
<span style="font-family: "times" , "times new roman" , serif;"><a href="http://shuvojitdas.com/demo/blogger-dynamic-slider" style="background-color: white; color: #ff0084; text-decoration: none;" target="_blank">Check these demos</a><span style="background-color: white;"> </span></span><span style="font-family: "times" , "times new roman" , serif;">lagi dan melihat kode masing-masing di bawah mereka untuk melihat apa yang dapat memberikan bdSlider, Dan membangun slider Anda sendiri.</span><br />
<h3>
Semua pilihan dari 'Blogger Dinamis Slider'</h3>
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs javascript" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;">$(<span class="hljs-string" style="color: #dd1144;">"#slider1"</span>).BloggerDynamicSlider({
blogURL: <span class="hljs-string" style="color: #dd1144;">""</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog</span>
labelName: <span class="hljs-string" style="color: #dd1144;">""</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts</span>
maxItem: <span class="hljs-number" style="color: teal;">6</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Max number of Slider Posts to show</span>
showPostTitle: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Show post title as Caption ? (true/false)</span>
postTitleStyle: <span class="hljs-string" style="color: #dd1144;">"default"</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Select post title/caption style "default, "overlayDark" or "overlayLight"</span>
imageWidth: <span class="hljs-number" style="color: teal;">544</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Image width in px value</span>
imageHeight: <span class="hljs-number" style="color: teal;">280</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Image height in px value</span>
animation: <span class="hljs-string" style="color: #dd1144;">"fade"</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Select your animation type, "fade" or "slide"</span>
controlNav: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Navigation for paging control of each slide? (true/false)</span>
directionNav: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Previous/next navigation? (true/false)</span>
pauseOnHover: <span class="hljs-literal" style="color: teal;">false</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)</span>
slideshowSpeed: <span class="hljs-number" style="color: teal;">7000</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Set the speed of the slideshow cycling, in milliseconds</span>
animationSpeed: <span class="hljs-number" style="color: teal;">600</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Set the speed of animations, in milliseconds</span>
animationLoop: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Should the animation loop? (true/false)</span>
});</code></pre>
</div>
<br />
Terima kasih untuk semua cinta dan dukungan.<br />
<br />Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-36202276449586483622017-04-18T12:04:00.000+08:002017-04-19T00:55:28.159+08:00Cara menambahkan Responsif Widget Slideshow untuk BloggerDi tahun 2016, sekarang desain responsif menjadi hal yang sangat trendi untuk website / blog. Tidak hanya trendi tapi sangat diperlukan untuk situs web untuk memiliki desain responsif, sebagai persentase yang tinggi dari pengguna akan mobile.<br />
<br />
Jadi di sini saya datang dengan slideshow widget responsif untuk webmaster Blogger. widget slideshow ini membangun dengan Kamera slideshow jQuery Plugin, yang merupakan proyek open source dari Pixedelic.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIfusTnjD4bYWhm1K5kPLWRiweyciUh1f40Cq_kRXwO3YPYeS1VmHStbOkPEIdj_CTL08ODSxlnpg7AXbxYQkUXZDnt5bqvFbkgrcUEDMfhgL73mi6Ygnj0ZVauAHSJmoihl5ZggpIvZT/s1600/slideshow-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIfusTnjD4bYWhm1K5kPLWRiweyciUh1f40Cq_kRXwO3YPYeS1VmHStbOkPEIdj_CTL08ODSxlnpg7AXbxYQkUXZDnt5bqvFbkgrcUEDMfhgL73mi6Ygnj0ZVauAHSJmoihl5ZggpIvZT/s640/slideshow-blogger.jpg" width="640" /></a></div>
<h2>
<b>Fitur Responsif Blogger Slideshow Widget (Camera Slideshow)</b></h2>
<br />
<ul>
<li>sepenuhnya Responsif</li>
<li>Cross-Browser yang Didukung</li>
<li>33 Warna Berbeda Kulit</li>
<li>Banyak pilihan untuk menyesuaikan dengan cara Anda</li>
<li>jQuery Easing Didukung</li>
<li>Kustom jQuery Mobile untuk kompatibilitas perangkat mobile.</li>
</ul>
<br />
<b>Lihat demo (Static & Blogger versi) dari Responsif Widget Slideshow</b><br />
<ul style="background-color: white; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<li><a href="http://project.dimpost.com/camera-slideshow/demo.html" style="text-decoration: none;" target="_blank"><b><span style="font-size: medium;"><span style="color: red;">Static Demo</span></span></b></a></li>
<li><a href="http://camera-slideshow-demo.blogspot.com/" style="text-decoration: none;" target="_blank"><b><span style="font-size: medium;"><span style="color: red;">Blogger Demo</span></span></b></a></li>
</ul>
<b>Saya Akan Katakan 'One Of The Best' Jika Anda Meminta Responsive Slider / Plugin slideshow</b><br />
<b><br /></b>
Ada banyak indah jQuery slider / slideshow Plugin luar sana. Tapi saya menemukan bahwa sebagian besar dari mereka (slider dengan banyak fitur) tidak sepenuhnya responsif. Lain slider responsif diandalkan yang saya temukan adalah FlexSlider, yang sangat populer karena kesederhanaan. Di samping tanggap Camera plugin slideshow memiliki beberapa fitur keren lainnya juga termasuk ..<br />
<br />
<br />
<ul>
<li>Banyak efek transisi</li>
<li>Play / Pause, Thumbnail Navigasi, ToolTip Navigasi dll</li>
<li>HTML5 data Atribut didukung. Dengan menggunakan itu, banyak properti dapat ditambahkan untuk meluncur. Misalnya link / URL, URL thumbnail / slider URL gambar dll</li>
<li>Anda tidak perlu khawatir tentang ukuran gambar atau rasio aspek.</li>
<li>Gambar akan kembali berukuran sesuai secara otomatis dengan kotak slide.</li>
<li>Ketika gambar yang lebih besar dari wadah / box slideshow, atau memiliki rasio aspek yang berbeda maka mereka akan dipotong (dari tengah) secara otomatis dengan mempertahankan aspek rasio mereka, itu berarti mereka tidak akan mendapatkan Peregangan.</li>
<li>Video yang didukung.</li>
</ul>
<br />
<i>Saya merekomendasikan untuk menambahkan gambar yang lebih besar dari wadah / box slideshow atau ukuran setidaknya sama wadah.</i><br />
<br />
<b>Dapatkan Kode!</b><br />
<b><br /></b>
<b>Untuk menambahkan slide ini ke blog BlogSpot Anda, hanya Copy dan Paste kode yang diberikan di bawah ini ke HTML / Javascript Widget.</b><br />
<br />
<br />
<ol>
<li>Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript</li>
<li>Salin kode di bawah ini dan paste di atasnya. Kemudian Simpan. Dan Anda sudah selesai !.</li>
</ol>
<br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs xml" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-comment" style="color: #999988; font-style: italic;"><!---------------------------------------------
Blogger Slideshow Widget by
http://imagesliderforblogger.blogspot.com/
org. by dimpost.com
-----------------------------------------------></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- Camera_Slideshow Styles --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">link</span> <span class="hljs-attr" style="color: teal;">rel</span>=<span class="hljs-string" style="color: #dd1144;">'stylesheet'</span> <span class="hljs-attr" style="color: teal;">id</span>=<span class="hljs-string" style="color: #dd1144;">'camera-css'</span> <span class="hljs-attr" style="color: teal;">href</span>=<span class="hljs-string" style="color: #dd1144;">'http://project.dimpost.com/camera-slideshow/css/camera.css'</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/css'</span> <span class="hljs-attr" style="color: teal;">media</span>=<span class="hljs-string" style="color: #dd1144;">'all'</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- Camera Slideshow Scripts --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/javascript'</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">'https://code.jquery.com/jquery-2.1.4.min.js'</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/javascript'</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">'http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/javascript'</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/javascript'</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">'http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">'text/javascript'</span>></span><span class="javascript">
jQuery(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
jQuery(<span class="hljs-string" style="color: #dd1144;">'#camera_wrap_1'</span>).camera({
time: <span class="hljs-number" style="color: teal;">2500</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// milliseconds between the end of the sliding effect and the start of the nex one</span>
transPeriod: <span class="hljs-number" style="color: teal;">1200</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// length of the sliding effect in milliseconds</span>
thumbnails: <span class="hljs-literal" style="color: teal;">false</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// thumnails & tooltip is controlled by it</span>
pagination: <span class="hljs-literal" style="color: teal;">true</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// only when "pagination" is set to "false" thumbnails will be visible</span>
fx: <span class="hljs-string" style="color: #dd1144;">'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop'</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// transition effects</span>
hover: <span class="hljs-literal" style="color: teal;">false</span>, <span class="hljs-comment" style="color: #999988; font-style: italic;">// Pause on hover</span>
height: <span class="hljs-string" style="color: #dd1144;">'50%'</span> <span class="hljs-comment" style="color: #999988; font-style: italic;">// slideshow height (50% is default)</span>
});
});
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">style</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/css"</span>></span><span class="css">
<span class="hljs-selector-class">.fluid_container</span> {
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span> auto;
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* aling centered */</span>
<span class="hljs-attribute" style="color: navy;">width</span>: <span class="hljs-number" style="color: teal;">100%</span>;
<span class="hljs-attribute" style="color: navy;">max-width</span>: <span class="hljs-number" style="color: teal;">900px</span>;
<span class="hljs-attribute" style="color: navy;">overflow</span>: hidden;
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* Blogger CSS Conflict Fix */</span>
<span class="hljs-selector-class">.camera_pag_ul</span> {
<span class="hljs-attribute" style="color: navy;">border</span>: none <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
<span class="hljs-attribute" style="color: navy;">background</span>: none <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
}
<span class="hljs-selector-class">.camera_pag_ul</span> <span class="hljs-selector-tag" style="font-weight: 700;">li</span> {
<span class="hljs-attribute" style="color: navy;">float</span>: inherit <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
<span class="hljs-attribute" style="color: navy;">padding</span>: inherit <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
}
<span class="hljs-selector-class">.camera_pag_ul</span> {
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
<span class="hljs-attribute" style="color: navy;">border</span>: <span class="hljs-number" style="color: teal;">0</span> <span class="hljs-meta" style="color: #999999; font-weight: 700;">!important</span>;
}
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"fluid_container"</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- camera_slideshow camera_wrap--></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_wrap"</span> <span class="hljs-attr" style="color: teal;">id</span>=<span class="hljs-string" style="color: #dd1144;">"camera_wrap_1"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">data-link</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span> <span class="hljs-attr" style="color: teal;">data-thumb</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg"</span> <span class="hljs-attr" style="color: teal;">data-src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/1.jpg"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_caption fadeFromBottom"</span>></span>
Camera is a responsive/adaptive slideshow. <span class="hljs-tag" style="color: navy;"><<span class="hljs-name">em</span>></span>Try to resize the browser window<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">em</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">data-link</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span> <span class="hljs-attr" style="color: teal;">data-thumb</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg"</span> <span class="hljs-attr" style="color: teal;">data-src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/2.jpg"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_caption fadeFromBottom"</span>></span>
It uses a light version of jQuery mobile, <span class="hljs-tag" style="color: navy;"><<span class="hljs-name">em</span>></span>navigate the slides by swiping with your fingers<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">em</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">data-link</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span> <span class="hljs-attr" style="color: teal;">data-thumb</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg"</span> <span class="hljs-attr" style="color: teal;">data-src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/3.jpg"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_caption fadeFromBottom"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">em</span>></span>It's completely free<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">em</span>></span> (even though a donation is appreciated)
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">data-link</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span> <span class="hljs-attr" style="color: teal;">data-thumb</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg"</span> <span class="hljs-attr" style="color: teal;">data-src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/4.jpg"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_caption fadeFromBottom"</span>></span>
Camera slideshow provides many options <span class="hljs-tag" style="color: navy;"><<span class="hljs-name">em</span>></span>to customize your project<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">em</span>></span> as more as possible
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">data-link</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span> <span class="hljs-attr" style="color: teal;">data-thumb</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg"</span> <span class="hljs-attr" style="color: teal;">data-src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/camera-slideshow/images/slides/5.jpg"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"camera_caption fadeFromBottom"</span>></span>
It supports captions, HTML elements and videos.
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- #camera_wrap_1 --></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- .fluid_container --></span></code></pre>
</div>
<b>Kustomisasi Pilihan:</b><br />
<br />
Melihat kode di bawah ini. Di sinilah Anda menyesuaikan slideshow. Bermain dengan itu. (Baca komentar kode untuk mendapatkan dengan mudah).<br />
<br />
<b>Pilihan slideshow</b><br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs sql" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"> time: 2500, // milliseconds between the <span class="hljs-keyword" style="font-weight: 700;">end</span> <span class="hljs-keyword" style="font-weight: 700;">of</span> the sliding effect <span class="hljs-keyword" style="font-weight: 700;">and</span> the <span class="hljs-keyword" style="font-weight: 700;">start</span> <span class="hljs-keyword" style="font-weight: 700;">of</span> the nex one
transPeriod: <span class="hljs-number" style="color: teal;">1200</span>, // <span class="hljs-keyword" style="font-weight: 700;">length</span> <span class="hljs-keyword" style="font-weight: 700;">of</span> the sliding effect <span class="hljs-keyword" style="font-weight: 700;">in</span> milliseconds
thumbnails: <span class="hljs-literal" style="color: teal;">false</span>, // thumnails & tooltip <span class="hljs-keyword" style="font-weight: 700;">is</span> controlled <span class="hljs-keyword" style="font-weight: 700;">by</span> it
pagination: <span class="hljs-literal" style="color: teal;">true</span>, // <span class="hljs-keyword" style="font-weight: 700;">only</span> <span class="hljs-keyword" style="font-weight: 700;">when</span> <span class="hljs-string" style="color: #dd1144;">"pagination"</span> <span class="hljs-keyword" style="font-weight: 700;">is</span> <span class="hljs-keyword" style="font-weight: 700;">set</span> <span class="hljs-keyword" style="font-weight: 700;">to</span> <span class="hljs-string" style="color: #dd1144;">"false"</span> thumbnails will be <span class="hljs-keyword" style="font-weight: 700;">visible</span>
fx: <span class="hljs-string" style="color: #dd1144;">'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop'</span>, // transition effects
hover: <span class="hljs-literal" style="color: teal;">false</span>, // Pause <span class="hljs-keyword" style="font-weight: 700;">on</span> hover
height: <span class="hljs-string" style="color: #dd1144;">'50%'</span> // slideshow height (<span class="hljs-number" style="color: teal;">50</span>% <span class="hljs-keyword" style="font-weight: 700;">is</span> <span class="hljs-keyword" style="font-weight: 700;">default</span>)</code></pre>
</div>
Untuk menyesuaikan ukuran slider mengedit aturan CSS ini dari kode utama<br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs css" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-selector-class">.fluid_container</span> {
<span class="hljs-attribute" style="color: navy;">margin</span>: <span class="hljs-number" style="color: teal;">0</span> auto; <span class="hljs-comment" style="color: #999988; font-style: italic;">/* aling centered */</span>
<span class="hljs-attribute" style="color: navy;">width</span>: <span class="hljs-number" style="color: teal;">100%</span>;
<span class="hljs-attribute" style="color: navy;">max-width</span>: <span class="hljs-number" style="color: teal;">900px</span>;
<span class="hljs-attribute" style="color: navy;">overflow</span>: hidden;
}</code></pre>
</div>
Tanggapan Anda dipersilahkan!Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-29438332207801208812017-04-17T11:45:00.000+08:002017-04-19T00:56:10.857+08:00Gambar Dasar Slider Responsive Widget untuk Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUjO6yHEJL0FmwFTezqZNOqNQ_rCh_W1QV7Nv70MRA6EL_0LM4kAkuQbshIV5ssQSXP9DafPdTcz8LEMCOKC819OMygW1Gz80vXdEfLq9xRyqQjuzdJNgHm_4kDjfeiCiTc5Tg9bejiSV/s1600/Slider-Basic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUjO6yHEJL0FmwFTezqZNOqNQ_rCh_W1QV7Nv70MRA6EL_0LM4kAkuQbshIV5ssQSXP9DafPdTcz8LEMCOKC819OMygW1Gz80vXdEfLq9xRyqQjuzdJNgHm_4kDjfeiCiTc5Tg9bejiSV/s400/Slider-Basic.jpg" width="400" /></a></div>
Ini adalah responsif jQuery gambar slider. slider sederhana tapi menakjubkan ini dikembangkan oleh woothemes.com. Ini memiliki beberapa fitur yang sangat bagus yang membuat Anda seperti itu. Fitur yang paling keren adalah hal ini sangat responsif dan ringan; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi menyesuaikan secara otomatis.<br />
<br />
Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda.<br />
<br />
Lihat demo<br />
<br />
<ul style="background-color: white; font-family: "Segoe UI", Arial; font-size: 14px; line-height: 22.4px;">
<li><b><a href="http://flexsliderdemo.blogspot.com/" style="color: #0060a6; text-decoration: none;" target="_blank">Slider DEMO1</a><span style="color: #4f4f4f;"> </span>(Blogspot)</b></li>
<li><b><a href="http://project.dimpost.com/flexslider-basic/" style="color: #0060a6; text-decoration: none;" target="_blank">Slider DEMO2</a> (Static)</b></li>
</ul>
Mari Pasang Gambar Slider responsive Widget di Blogger<br />
<br />
<br />
<ol>
<li>Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript</li>
<li>Salin kode di bawah ini dan paste di atasnya.</li>
</ol>
<br />
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<div>
</div>
<pre class="highlight" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs xml" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- SLIDER CSS --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">style</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/css"</span>></span><span class="undefined">
/*
* jQuery FlexSlider v2.2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
#flex-isfb {
overflow: hidden;
position: relative;
min-height: 200px;
padding: 3px;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides,
.flexslider .slides img,
.flex-direction-nav {
margin: 0 !important;
padding: 0 !important;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 0 0 60px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
zoom: 1;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 45px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.flex-direction-nav .flex-prev {
background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
left: -50px;
}
.flex-direction-nav .flex-next {
background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
right: -50px;
text-align: right;
}
.flexslider:hover .flex-prev {
opacity: 0.5;
left: 10px;
}
.flexslider:hover .flex-next {
opacity: 0.5;
right: 10px;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
opacity: 0.9;
}
/* Pause/Play */
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">style</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- SLIDER HTML --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">id</span>=<span class="hljs-string" style="color: #dd1144;">"flex-isfb"</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- Preloader --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">id</span>=<span class="hljs-string" style="color: #dd1144;">"preloader"</span>></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* Preloader */</span>
<span class="hljs-selector-id" style="color: #990000; font-weight: 700;">#preloader</span> {
<span class="hljs-attribute" style="color: navy;">position</span>: absolute;
<span class="hljs-attribute" style="color: navy;">top</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">left</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">right</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">bottom</span>: <span class="hljs-number" style="color: teal;">0</span>;
<span class="hljs-attribute" style="color: navy;">background-color</span>: <span class="hljs-number" style="color: teal;">#fff</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* change if the mask should have another color then white */</span>
<span class="hljs-attribute" style="color: navy;">z-index</span>: <span class="hljs-number" style="color: teal;">999999999999</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* makes sure it stays on top */</span>
}
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"flexslider"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">ul</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slides"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">a</span> <span class="hljs-attr" style="color: teal;">href</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">a</span> <span class="hljs-attr" style="color: teal;">href</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">a</span> <span class="hljs-attr" style="color: teal;">href</span>=<span class="hljs-string" style="color: #dd1144;">"http://blogsmanado.blogspot.co.id/"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment" style="color: #999988; font-style: italic;"><!-- SLIDER JS --></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span>></span><span class="javascript">
$(<span class="hljs-built_in" style="color: #0086b3;">window</span>).load(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string" style="color: #dd1144;">'.flexslider'</span>).flexslider({
animation: <span class="hljs-string" style="color: #dd1144;">"slide"</span>,
controlNav: <span class="hljs-literal" style="color: teal;">true</span>,
directionNav: <span class="hljs-literal" style="color: teal;">true</span>,
easing: <span class="hljs-string" style="color: #dd1144;">"swing"</span>,
slideshowSpeed: <span class="hljs-number" style="color: teal;">3000</span>,
animationSpeed: <span class="hljs-number" style="color: teal;">600</span>,
});
});
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-comment" style="color: #999988; font-style: italic;">//<![CDATA[</span>
$(<span class="hljs-built_in" style="color: #0086b3;">window</span>).load(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string" style="color: #dd1144;">'#preloader'</span>).delay(<span class="hljs-number" style="color: teal;">350</span>).fadeOut(<span class="hljs-string" style="color: #dd1144;">'slow'</span>);
})
<span class="hljs-comment" style="color: #999988; font-style: italic;">//]]></span>
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span></code></pre>
</div>
3. Menyimpan, dan kita selesai.<br />
<br />
CATATAN:<br />
Lupakan lebar slider dan tinggi, itu akan menyesuaikan secara otomatis.<br />
Mengganti gambar slider (pencarian <img src) dengan gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)<br />
Ada beberapa hal lain yang mungkin ingin bermain dengan, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka. Bermain dengan mereka ...<br />
<pre class="highlight hoverFired" style="background-color: white; color: #4f4f4f; font-size: 15px; margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs javascript" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;">$(<span class="hljs-string" style="color: #dd1144;">'.flexslider'</span>).flexslider({
animation: <span class="hljs-string" style="color: #dd1144;">"slide"</span>,
controlNav: <span class="hljs-literal" style="color: teal;">true</span>,
directionNav: <span class="hljs-literal" style="color: teal;">true</span>,
easing: <span class="hljs-string" style="color: #dd1144;">"swing"</span>,
slideshowSpeed: <span class="hljs-number" style="color: teal;">3000</span>,
animationSpeed: <span class="hljs-number" style="color: teal;">600</span>,
});</code></pre>
Selamat bersenang-senang! Jangan lupa untuk mengucapkan terima kasih...<br />
<br />Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-14063830461180272112017-03-01T03:03:00.000+08:002017-04-19T00:55:51.546+08:00Cara Membuat View di Setiap Postingan Terbaru<span style="line-height: 20px;"><span style="font-family: "times" , "times new roman" , serif;">Kali ini Blog Manado akan shearing Cara Membuat View Count Postingan Di Blog terbaru dari Graddit. Sengaja saya ambil dari Graddit karena menurut saya penerapannya ke blog sangatlah mudah dan ini atas rekomendasi maskolis. Disini tidak hanya menampilkan View Count atau jumlah pengunjung saja tetapi juga disertai feedback untuk setiap postingan.</span></span><br />
<span style="line-height: 20px;"><span style="font-family: "times" , "times new roman" , serif;"><br /></span></span>
<span style="line-height: 20px;"><span style="font-family: "times" , "times new roman" , serif;">Setelah saya terapkan di blog Cara Membuat View Count Postingan Di Blog ini valid pada HTML5. Namun untuk kode css-nya masih sedikit error tetapi itu tidak mengurangi ke-valid-an dari template blog kita.</span></span><br />
<span style="line-height: 20px;"><span style="font-family: "times" , "times new roman" , serif;"><br /></span></span>
<span style="line-height: 20px;"><span style="font-family: "times" , "times new roman" , serif;">Sebagai contoh tampilannya bisa anda lihat pada gambar dibawah ini atau klik <a href="http://mahessa83.blogspot.com/2016/09/10-air-terjun-paling-unik-di-dunia.html" rel="nofollow" target="_blank"><span style="color: red;"><b>disini</b></span></a>.</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7gOv7i1YjPx2dWXdjvGh6yk-VKJ5vyZhMXVycR7pH2RIBQCypaCDWE7RAX1rixchun8pkpPTViHL4cbi3XNSkCxvqaiuL38NEJfmBbqbosRyVJFXsvTnuBPHq9b5G8F-Ew_PNqYo90jZx/s1600/count-view.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7gOv7i1YjPx2dWXdjvGh6yk-VKJ5vyZhMXVycR7pH2RIBQCypaCDWE7RAX1rixchun8pkpPTViHL4cbi3XNSkCxvqaiuL38NEJfmBbqbosRyVJFXsvTnuBPHq9b5G8F-Ew_PNqYo90jZx/s400/count-view.jpg" width="400" /></a></div>
<br />
Bagi anda para <a href="http://blogger.com/" rel="nofollow" target="_blank"><span style="color: red;"><b>Blogger</b></span></a> yang ingin mencoba Cara Membuat View Count Postingan Di Blog dari Garddit ini, silahkan masuk ke acount Garddit <a href="http://graddit.com/" rel="nofollow" target="_blank"><b><span style="color: red;">DISINI</span></b></a><br />
<br />
Disini anda tidak perlu mendaftar atau membuat akun baru. Anda tinggal pilih menu "Ratings". Setelah terbuka jendela baru silahkan pilih tampilan yang kita inginkan. Pilih kode untuk Blogger lalu copy scriptnya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKF8rQ35c_oeaO0PQ8xqK5baiBjmMPUv_5987DvuagPYQedRCRoL0pl8aBa38WBm983__iADnlLmIaQmBvmjhXzaU4kEq9TtDkLP-eF5SLfG2T9ekAfbTBIXN5uHZdzysi-wjkHp09kJm/s1600/gradit-view.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKF8rQ35c_oeaO0PQ8xqK5baiBjmMPUv_5987DvuagPYQedRCRoL0pl8aBa38WBm983__iADnlLmIaQmBvmjhXzaU4kEq9TtDkLP-eF5SLfG2T9ekAfbTBIXN5uHZdzysi-wjkHp09kJm/s400/gradit-view.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod-LJ9nu-fBoEQQw0mq9qJFSbB7KkRVHlQUMCKK_NGEpNB_UwTxNhQRM5NhL6bSV9VNtQntJ2gBWzRaAbmEX9J4No78gTweA_EjBNw4CFAs_9teOTj1sNeLxwpMrhama84CGUHaS5Iby4/s1600/gradir-view-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod-LJ9nu-fBoEQQw0mq9qJFSbB7KkRVHlQUMCKK_NGEpNB_UwTxNhQRM5NhL6bSV9VNtQntJ2gBWzRaAbmEX9J4No78gTweA_EjBNw4CFAs_9teOTj1sNeLxwpMrhama84CGUHaS5Iby4/s400/gradir-view-1.jpg" width="400" /></a></div>
<br />
Silahkan simpan kode scriptnya serta pastekan ke edit HTML template blog anda. Bisa di atas atau bawah postingan. terserah keinginan anda masing-masing.<br />
<br />
Untuk disimpan diatas postingan silahkan cari kode <span style="color: red;"><div class='post-body entry-content'</span>. Biasanya kode tersebut ada 2 buah. Simpan kode dari Graddit di atas atau di bawah kode kedua. Agar tidak tampil di homepage, bisa Anda tambahkan kode <span style="color: red;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span> di atas kode Graddit dan <span style="color: red;"></b:if></span> di bawahnya.<br />
<br />
Sedangkan untuk disimpan dibawah postingan, silahkan cari kode<br />
<br />
<span style="color: red;"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></span><br />
<span style="color: red;"><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></span><br />
<span style="color: red;"> <div style='clear: both;'/> <!-- clear for photos floats --></span><br />
<span style="color: red;"> </div> </span><br />
<br />
Simpan kode dari Graddit di bawah kode tadi. Agar tidak tampil di homepage, bisa Anda tambahkan kode <span style="color: red;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span> di atas kode Graddit dan <span style="color: red;"></b:if></span> di bawahnya.<br />
<br />
Jangan lupa simpan kode di bawah ini DI ATAS kode <span style="color: red;"><b></head></b></span><br />
<blockquote class="tr_bq" style="background: rgb(240, 240, 240); border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 15.4px; font-stretch: inherit; font-style: italic; line-height: 22.4px; margin: 1.5em 2em; padding: 1em; quotes: none; vertical-align: baseline;">
<span style="border: 0px; font-family: "georgia" , "times new roman" , serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: red; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><link type='text/css' rel='stylesheet' href='http://static.graddit.com/css/graddit.css'/></span></span></blockquote>
<span style="background-color: white; border: 0px; color: #333333; font-family: "georgia" , "times new roman" , serif; font-size: 14px; font-stretch: inherit; line-height: 22.4px; margin: 0px; padding: 0px; vertical-align: baseline;">Demikian saja sharing tentang <b>Cara Membuat View di Setiap Postingan Terbaru</b> semoga dapat dimengerti dan bermanfaat.</span>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-59597492706213395972016-12-06T11:05:00.000+08:002016-12-06T11:47:06.602+08:00jQuery Carousel Slider untuk Blogger (FlexSlider) Responsive<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrkC6OHbu15TVVOwLQm5AePUjFxWbKZsq_8kyq3EXT2X9rQuqas88qWt162-2HUFw2Bt2-01UHIFgKqV5J7xegKAKu-bKhTSXZxLlvzrnfmoy8yebIFPQW1f-K7vDFO76nJlstLPgzc0UU/s1600/carousel-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrkC6OHbu15TVVOwLQm5AePUjFxWbKZsq_8kyq3EXT2X9rQuqas88qWt162-2HUFw2Bt2-01UHIFgKqV5J7xegKAKu-bKhTSXZxLlvzrnfmoy8yebIFPQW1f-K7vDFO76nJlstLPgzc0UU/s640/carousel-slider.jpg" width="640" /></a></div>
Ini adalah responsif jQuery korsel slider. slider ini menakjubkan dikembangkan oleh flexslider.woothemes.com. Ini memiliki beberapa fitur yang sangat keren yang membuat Anda seperti itu. Fitur yang paling keren itu sepenuhnya responsif; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi yang otomatis disesuaikan.<br />
<br />
Dan juga Anda dapat mengatur minimum / maksimum jumlah gambar yang akan tampil di acara berbagai ukuran layar / browser. Jadi secara keseluruhan itu cukup korsel slider yang indah. Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda. Check out live demo dengan mengklik link di bawah.<br />
<br />
<br />
<div style="text-align: center;">
<span style="color: blue; font-size: large;"><b><a href="http://project.dimpost.com/flexslider-carousel/" rel="nofollow" target="_blank">DEMO</a></b></span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: large;"><br /></span></div>
Mari Pasang jQuery Carousel Slider untuk Blogger Blog Anda<br />
<br />
<br />
<ol>
<li>Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget</li>
<li>Pilih HTML / Javascript</li>
<li>Salin kode di bawah ini dan paste di atasnya.</li>
</ol>
<div style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs xml" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"><span class="hljs-tag" style="color: navy;"><<span class="hljs-name">style</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/css"</span>></span><span class="undefined">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.1);
font-size: 14px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 0 0 60px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
zoom: 1;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 50%;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.flex-direction-nav .flex-next {
background-position: 100% 0;
right: -36px;
}
.flex-direction-nav .flex-prev {
left: -36px;
}
.flexslider:hover .flex-next {
opacity: 0.8;
right: 5px;
}
.flexslider:hover .flex-prev {
opacity: 0.8;
left: 5px;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
opacity: 1;
}
.flex-direction-nav .disabled {
opacity: .3!important;
filter: alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .active {
opacity: 1;
cursor: default;
}
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/flexslider-carousel/jquery.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"</span>></span><span class="undefined"></span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">script</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text/javascript"</span>></span><span class="javascript">
$(<span class="hljs-built_in" style="color: #0086b3;">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-built_in" style="color: #0086b3;">window</span>).load(<span class="hljs-function"><span class="hljs-keyword" style="font-weight: 700;">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string" style="color: #dd1144;">'.flexslider'</span>).flexslider({
animation: <span class="hljs-string" style="color: #dd1144;">"slide"</span>,
animationLoop: <span class="hljs-literal" style="color: teal;">false</span>,
itemWidth: <span class="hljs-number" style="color: teal;">210</span>,
itemMargin: <span class="hljs-number" style="color: teal;">0</span>,
minItems: <span class="hljs-number" style="color: teal;">1</span>,
maxItems: <span class="hljs-number" style="color: teal;">4</span>
});
});
});
</span><span class="hljs-tag" style="color: navy;"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"flexslider"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">ul</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slides"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBCVDo2fBs6LJ5O-9p7mgqI151pp0HhkTFGgELDzXd4BeUpFqDdsZ9ihxPwkBMuWOqd_EPna75o71KTEGQst6MVI19GPrG5McncSxCvqlmoudhRr3r6VSehDt8fEqlB1Nmp0Rg-Os_z30/s320/slide4.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBCVDo2fBs6LJ5O-9p7mgqI151pp0HhkTFGgELDzXd4BeUpFqDdsZ9ihxPwkBMuWOqd_EPna75o71KTEGQst6MVI19GPrG5McncSxCvqlmoudhRr3r6VSehDt8fEqlB1Nmp0Rg-Os_z30/s320/slide4.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name">img</span> <span class="hljs-attr" style="color: teal;">src</span>=<span class="hljs-string" style="color: #dd1144;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg"</span> /></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag" style="color: navy;"></<span class="hljs-name">div</span>></span>
</code></pre>
</div>
<br />
4. Menyimpan, dan kita sudah selesai.<br />
<br />
CATATAN:<br />
<br />
<ul>
<li>Lupakan lebar dan tinggi itu akan menyesuaikan otomatis.</li>
<li>Mengganti URL gambar berwarna dengan URL gambar yang diunggah Anda sendiri (Anda dapat meng-upload gambar di blogspot, flickr dll)</li>
<li>Ada beberapa hal lain yang dapat mengubah, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka.</li>
</ul>
<br />
<div dir="ltr" style="background-color: white; color: #4f4f4f; font-family: "Open Sans", "Segoe UI", Arial; font-size: 15px;" trbidi="on">
<pre class="highlight hoverFired" style="margin: 1em auto; overflow: hidden; padding: 0px; position: relative;"><code class="hljs http" style="background: rgb(245, 242, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; max-height: 540px; overflow: auto; padding: 22px 17px; position: relative; word-wrap: initial;"> <span class="hljs-attribute" style="color: navy;">animationLoop</span>: <span style="color: red;">false</span>,
<span class="hljs-attribute" style="color: navy;">itemWidth</span>: <span style="color: red;">210</span>,
<span class="hljs-attribute" style="color: navy;">itemMargin</span>: <span style="color: red;">0</span>,
<span class="hljs-attribute" style="color: navy;">minItems</span>: <span style="color: red;">1</span>,
<span class="hljs-attribute" style="color: navy;">maxItems</span>: <span style="color: red;">4</span></code></pre>
</div>
Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com2tag:blogger.com,1999:blog-5218911747656963886.post-77931249099665395022016-10-15T00:30:00.000+08:002016-10-15T04:06:55.393+08:00Membuat Blog Valid CSS3 Secara Rinci<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4bXazWQjkD_X2PU3bZDk7Y0-RukJ85fTiLEoc-lagHoJZb3yWpWIClQHhk8kusfJOCYwgTJtNJfh1Zl5oro0S064G6O14vRtSWtVv6N8KcNCxjMxBt68WQJDxmM5P6Yj5soZgJ7a5dPF/s1600/Membuat+Blog+Valid+CSS3+Secara+Rinci.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4bXazWQjkD_X2PU3bZDk7Y0-RukJ85fTiLEoc-lagHoJZb3yWpWIClQHhk8kusfJOCYwgTJtNJfh1Zl5oro0S064G6O14vRtSWtVv6N8KcNCxjMxBt68WQJDxmM5P6Yj5soZgJ7a5dPF/s400/Membuat+Blog+Valid+CSS3+Secara+Rinci.png" width="400" /></a></div>
How to validate CSS3 - Setelah berkutat beberapa lama dengan Validasi HTML5, kini saya coba untuk berbagi Validasi CSS3. Terlambat kayaknya saya berbagi tutorial ini, tapi sebuah pepatah mengatakan better late than never, lebih baik terlambat daripada tidak sama sekali.<br />
<br />
Diantara yang menyebabkan terlambatnya saya berbagi tentang validasi ini, saya tidak pernah memposting sesuatu yang belum pernah saya coba. Ironis kan? sebuah blog membahas validasi tapi blognya sendiri belum valid.<br />
<br />
<span style="background-color: black;"><span style="color: white;"><b><i>Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.</i></b></span></span><br />
<br />
Bagi sobat yang ingin mencoba validasi CSS3, baik menghilangkan error atau warning, silahkan dicoba trik yang saya gunakan :<br />
<h3>
Non Aktifkan CSS Reset Stylesheet Blogger</h3>
Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini :<br />
<br />
<span style="background-color: white; color: #555555; font-family: Roboto, Arial, sans-serif; font-size: 16px;">:</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, sans-serif; font-size: 16px;" /><span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span style="font-family: Times, Times New Roman, serif;"><span class="tag" style="margin: 0px; padding: 0px;"><<span class="title" style="color: #990055; margin: 0px; padding: 0px;">b:skin</span>></span><span class="cdata" style="color: #a0733f; margin: 0px; padding: 0px;"><![CDATA[*
......
KODE CSS DI SINI
......
]]></span><span class="tag" style="margin: 0px; padding: 0px;"></<span class="title" style="color: #990055; margin: 0px; padding: 0px;">b:skin</span>></span></span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">ganti<span style="color: #555555;"> </span></span><code style="background-color: white; color: #ff3c00; line-height: 16px;"><b:skin><![CDATA[*</code><span style="background-color: white;"><span style="color: #555555;"> </span>dengan </span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span style="font-family: Times, Times New Roman, serif;">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <span class="tag" style="margin: 0px; padding: 0px;"><<span class="title" style="color: #990055; margin: 0px; padding: 0px;">b:skin</span>></span><span class="cdata" style="color: #a0733f; margin: 0px; padding: 0px;"><![CDATA[*/]]></span><span class="tag" style="margin: 0px; padding: 0px;"></<span class="title" style="color: #990055; margin: 0px; padding: 0px;">b:skin</span>></span>
<span class="tag" style="margin: 0px; padding: 0px;"><<span class="title" style="color: #990055; margin: 0px; padding: 0px;">style</span> <span class="attribute" style="color: #588400; margin: 0px; padding: 0px;">type</span>=<span class="value" style="color: #0077aa; margin: 0px; padding: 0px;">'text/css'</span>></span><span class="css" style="margin: 0px; padding: 0px;"></span></span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">ganti kode </span><code style="background-color: white; color: #ff3c00; line-height: 16px;">]]></b:skin></code><span style="background-color: white;"><span style="color: #555555;"> </span>dengan kode :</span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span class="tag" style="margin: 0px; padding: 0px;"><span style="font-family: Times, Times New Roman, serif;"></<span class="title" style="color: #990055; margin: 0px; padding: 0px;">style</span>></span></span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu.</span></span><br />
<h3>
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;">Hapus Beberapa Kode</span></span></h3>
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;">Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode </span><i style="background-color: white;">rounded corner</i><span style="background-color: white;">(ujung membulat) biasanya kodenya akan seperti ini :</span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="css" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span style="font-family: Times, Times New Roman, serif;">-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">moz</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">border</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">radius</span><span class="pseudo" style="color: #a0733f; margin: 0px; padding: 0px;">:5px</span>;
-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">khtml</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">border</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">radius</span><span class="pseudo" style="color: #a0733f; margin: 0px; padding: 0px;">:5px</span>;
-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">o</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">border</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">radius</span><span class="pseudo" style="color: #a0733f; margin: 0px; padding: 0px;">:5px</span>;
-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">webkit</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">border</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">radius</span><span class="pseudo" style="color: #a0733f; margin: 0px; padding: 0px;">:5px</span>;
<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">border</span>-<span class="tag" style="color: #859900; margin: 0px; padding: 0px;">radius</span><span class="pseudo" style="color: #a0733f; margin: 0px; padding: 0px;">:5px</span>;</span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode </span><code style="background-color: white; color: #ff3c00; line-height: 16px;">border-radius:5px</code><span style="background-color: white; color: #555555;">, </span><span style="background-color: white;">oleh karena itu, hapus semua kode yang berawalan:</span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="diff" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span style="font-family: Times, Times New Roman, serif;"><span class="deletion" style="color: #990055; margin: 0px; padding: 0px;">-moz-</span>
<span class="deletion" style="color: #990055; margin: 0px; padding: 0px;">-khtml-</span>
<span class="deletion" style="color: #990055; margin: 0px; padding: 0px;">-o-</span>
<span class="deletion" style="color: #990055; margin: 0px; padding: 0px;">-webkit-</span></span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">Hapus juga kode dengan awalan</span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="http" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span class="attribute" style="color: #588400; margin: 0px; padding: 0px;"><span style="font-family: Times, Times New Roman, serif;">DXImageTransform</span></span></code></pre>
<h3>
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;">Perhatikan Beberapa Perintah Validator</span></span></h3>
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;">Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini :</span><br style="background-color: white;" /><br style="background-color: white;" /><i style="background-color: white;">Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.</i><br style="background-color: white;" /><br style="background-color: white;" /><span style="background-color: white;">Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya</span><br style="background-color: white; color: #555555;" /></span><br />
<pre style="background-color: #f1f1f1; border-left: 3px solid rgb(204, 204, 204); clear: both; color: #999999; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="http" style="color: #555555; display: block; line-height: 16px; padding: 0.5em;"><span style="font-family: Times, Times New Roman, serif;"><span class="attribute" style="color: #588400; margin: 0px; padding: 0px;">font-family</span>: <span class="string" style="color: #0077aa; margin: 0px; padding: 0px;">'Open Sans', 'Segoe UI', Arial, sans-serif</span></span></code></pre>
<span style="font-family: Times, Times New Roman, serif;"><br style="background-color: white; color: #555555;" /><span style="background-color: white;">Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini.</span></span><br />
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;"><br /></span></span>
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;">Demikian tutorial </span>Membuat Blog Valid CSS3 Secara Rinci, semoga bermanfaat...</span>Blog Manadohttp://www.blogger.com/profile/10003428943569650567noreply@blogger.com0tag:blogger.com,1999:blog-5218911747656963886.post-474755083157692012016-10-14T17:16:00.000+08:002016-10-15T03:54:10.202+08:00Cara Tampilkan Tanggal Di Postingan Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhfIBwt6-hk1zN2PLtUrNGpNZiYkqdCyLfNX8rb1NrdQOrlwQ4xhexwJGp7C5ATCHP4tWDvt62hxznQGIQKvqXi3CKGJw57Fb9ByH6ghtnWJRNcB6RvSZBHTtcOqQyWPrbXO9Llz_R9Ur/s1600/tampilan-tanggal-di-postingan-blog.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhfIBwt6-hk1zN2PLtUrNGpNZiYkqdCyLfNX8rb1NrdQOrlwQ4xhexwJGp7C5ATCHP4tWDvt62hxznQGIQKvqXi3CKGJw57Fb9ByH6ghtnWJRNcB6RvSZBHTtcOqQyWPrbXO9Llz_R9Ur/s320/tampilan-tanggal-di-postingan-blog.JPG" width="320" /></a></div>
Selamat Sore Teman-teman Blogsmanado, pas lagi ada waktu mari kita sama-sama belajar tips-trik design template blogger. Ok langsung saja kita buat Cara Tampilkan Tanggal Di Postingan Blog.<br />
<br />
1. Login ke Blogger<br />
2. Masuk ke Rancangan >> Edit HTML<br />
3. Centang Expand Template Widget<br />
4. Tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin><br />
<br />
.tanggal, .penulis, .kategori { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWO4ShlvjKoAfh1557HFvXZD79rmkBteTz8T8bi6bMD_lH6zef3KoazVDL3FugtC9ajQO_OAhhlfwARddlSle2Zj23t-G5GwAJyC6UnuhE_afKcCTjKVHeEWhzYhvq7ySMZWQ56J_Fxjf/s320/icons.png) no-repeat }<br />
.date { padding:0px; float:right; text-align:right; font-weight:normal; font-size:13px; margin:0 0 0 13px; }<br />
.tanggal {background-position: 3px -66px; height:16px; padding:0 0 0 23px; color:#333; }<br />
.info{margin-top:-7px;padding-top:-5px;line-height:2em;font-size:13px; text-align:left; }<br />
.penulis {background-position:3px 0; height:16px; padding:0 0 0 23px; color:#333; margin-right:6px; }<br />
.kategori {background-position:3px -22px; height:16px; padding:0 0 0 23px; margin:0 0 0 4px }<br />
<br />
5. Jika sudah cari kode seperti ini :<br />
<article class='post hentry' expr:id='data:post.id'><br />
atau kode mirip seperti ini:<br />
<b:else/><br />
<h1 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if><br />
</b:if><br />
</h1><br />
<br />
Kalau dapat kode seperti ini: <article class='post hentry' expr:id='data:post.id'> taruh kode dibawah diatas kode <article class='post hentry' expr:id='data:post.id'>.<br />
<br />
<br />
Kalau kode yang yang mirip seperti ini: <b:else/><br />
<h1 class='post-title entry-title'> <b:if
cond='data:post.link'> <a expr:href='data:post.link'
expr:title='data:post.title'><data:post.title/></a>
<b:else/> <b:if cond='data:post.url'> <a
expr:href='data:post.url'
expr:title='data:post.title'><data:post.title/></a>
<b:else/> <data:post.title/> </b:if><br />
</b:if><br />
</h1> taruh kode dibawah ini diatas kode tadi:<br />
<br />
<div class='info'><span class='penulis'><span class='vcard'><span class='hcard'> <span class='fn n'> <span class='given-name'><data:post.author/></span></span></span></span></span> <span class='kategori'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if></span><br />
<span class='tanggal'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.dateHeader/></abbr></span><div class='clear'/></div><br />
<br />
6. Setelah itu Simpan, dan lihat Tampilkan Tanggal Di Postingan seperti BlogsManado. Kalau ingin seperti Tampilkan Tanggal Di Postingan seperti BlogsManado taruh kode diatas, diatas kode <article class='post hentry' expr:id='data:post.id'>. Semoga bermanfaaf.Redaksi Newshttp://www.blogger.com/profile/16850844019715232315noreply@blogger.com4