Cara Memasang Live Chat Box Messenger Facebook Pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div id="post16065905696619900369" style="background-color: white;"><div dir="ltr" trbidi="on"><div dir="ltr" trbidi="on"><div dir="ltr" trbidi="on"><div dir="ltr" trbidi="on"><div style="text-align: justify;"><span style="font-family: inherit;">Berawal dari keinginan untuk membuat blog menjadi lebih friendly dan professional, saya mulai mencari referensi dari beberapa blog atau website ternama untuk dijadikan teladan dalam mendesain sebuah blog. Dari sekian banyak website yang saya lihat, ada beberapa fitur yang menurut saya wajib untuk dicoba, dikarenakan fitur-fitur tersebut memiliki segudang manfaat demi keberlangsungan sebuah blog agar tetap disukai dan membuat pengunjung merasa betah di dalamnya.</span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.saifullah.xyz/2017/10/cara-memasang-live-chat-box-messenger.html" rel="nofollow" style="color: #3498db; outline: none; text-decoration-line: none;" target="_blank"><span style="font-family: inherit;"><img alt="Live Chat, Box, Messenger, Facebook" border="0" data-original-height="557" data-original-width="732" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXgCfQmC7r5aYZOpIOZrximb3X-9V5q75W-7FsxlFLwZIRno1o6uyG_YePjfzMvBIHfhE1QwkVs2eNoZ8Ap27QasDmegIcoyJIJWTEXpULUx-VCYePTXiRhjs8e01Lp6d-e5mjz38VNyJS/s200/live+chat.jpg" style="height: auto; margin-left: -1em; margin-right: -1em; max-width: 100%;" title="Live Chat Box Messenger Facebook" width="200" /></span></a></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Jika sebuah blog dianggap sebagai sebuah ruangan, maka fitur-fitur tersebut ibarat furniture atau biasa kita sebut sebagai properti, yang berfungsi sebagai pemanis maupun pelengkap dari ruangan tersebut. Sebagai contoh sederhananya begini, jika di ruangan itu ada kursi, meja, TV, Kulkas, Kipas ataupun AC. Tentu kita akan betah untuk berdiam diri di dalamnya dibandingkan ruangan tanpa ada barang-barang tersebut, bukan? Begitu juga sebuah blog, tanpa adanya widget-widget bermanfaat, blog akan terasa kurang nyaman untuk di jelajahi lebih lama.</span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Nah, sekarang saya akan memberikan sebuah pertanyaan yang harus kamu jawab sendiri di dalam hati. Mana yang kamu pilih jika ada 3 ruangan, yang satu pakai kipas, satunya lagi pakai AC, dan yang satunya lagi ada kipas dan AC? Saya yakin jika kamu orang yang cerdas, kamu akan menjawab ruangan yang ketiga yang punya kipas dan AC. Kenapa? Karena jika ruangan yang menyediakan peralatan yang lebih lengkap, tentu akan berfungsi lebih banyak dan setiap orang yang datang ke dalamnya pasti akan merasa nyaman. Bagi orang yang terbiasa pakai kipas, mereka bisa menggunakanya, dan bagi yang lebih suka pakai AC juga pasti menyukai ruangannya. Selain itu, jika salah satu dari barang tersebut rusak, kamu bisa menggunakan alternatif satunya. Sehingga tidak kebakarangan jenggot ketika panas datang melanda. Begitu juga dengan fitur yang ada di blog yang akan saya bahas ini.</span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Sekarang saya akan menyandingkan 2 hal yang hampir sama dengan contoh di atas, yaitu antara Kolom Komentar dan <a href="http://live%20chat%20box%20messenger%20facebook/" rel="nofollow" style="color: #3498db; outline: none; text-decoration-line: none;" target="_blank"><span style="color: blue;">Live Chat Box Facebook Messenger</span></a>. Kolom Komentar saya ibaratkan sebagai kipas, dan Live Chat Box sebagai AC-nya. Hampir semua blog menyediakan kolom komentar, selain karena memang sudah dari bawaan template, kolom ini memiliki fungsi untuk berinteraksi dengan pengunjung. Namun berbeda dengan Live Chat Box, kebanyakan website yang menggunakan fitur ini adalah yang berbasis bisnis, seperti tempat kita beli domain dan beberapa online shop. Mereka memasang fitur ini pasti punya alasan, dan alasan yang mendasar adalah supaya interaksi dengan pengunjung lebih real time, artinya tanpa jeda waktu yang cukup lama tidak seperti yang terjadi pada kolom komentar biasanya. Sehingga pengunjungpun seolah-olah berhadapan langsung dengan pemilik blog.</span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Disamping itu, Live Chat Box juga memudahkan baik pengunjung atau pemilik blog dalam mendapatkan notifikasi. Saya pernah berinteraksi menggunakan kolom komentar, dan seringkali saya tidak menyadari ada balasan atau komentar baru di sana. Sedangkan ketika saya menggunakan Live Chat Box ini semuanya terasa lebih cepat tanpa was-was apakah komentar sudah dibalas atau belum meskipun memang ada pilihan notify me, tapi tetap saja sulit karena pembitahuan masuk ke email yang notabennya punya banyak notifikasi. Saya sendiri tipe orang yang malas buka email meskipun ada notifikasi masuk, sebab terlalu banyak pemberitahuan yang tidak terlalu penting di sana.</span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Menghadirkan Live Chat Box tidak harus menghilangkan kolom komentar, seperti contoh sederhana antara kipas dan AC sebelumnya, kedua-duanya memiliki fungsi masing-masing, ada pengunjung yang suka pakai kotak komentar, ada yang lebih suka pakai Live Chat Box tadi. Yang lebih penting lagi, kita tidak perlu khawatir jika salah satu fitur tersebut mengalami masalah karena ada alternatif yang sudah tersedia.</span></div><br /><div style="font-family: Roboto_Regular, Roboto, "Roboto Regular", "Franklin Gothic Medium", "Franklin Gothic Book", "Lucida Sans", "Lucida Sans Unicode", "Helmet,Freesans", sans-serif; font-size: 13.5px; text-align: justify;"><br /></div><span style="font-family: inherit; font-size: 13.5px;">Kelebihan lain:</span><br /><ul style="font-family: Roboto_Regular, Roboto, "Roboto Regular", "Franklin Gothic Medium", "Franklin Gothic Book", "Lucida Sans", "Lucida Sans Unicode", "Helmet,Freesans", sans-serif; font-size: 13.5px; list-style: square outside; margin-left: 3em; padding: 0px;"><li style="margin: 5px 0px; text-align: justify;"><span style="font-family: inherit;">Widget Live Chat ini sudah responsive, sehingga bisa muncul pada tampilan desktop dan mobile dengan sangat mulus dan ringan.</span></li><li style="margin: 5px 0px; text-align: justify;"><span style="font-family: inherit;">Widget berfungsi sama persis dengan notifikasi Facebook Messenger, jika ingin menutupnya kita bisa menekan dan menggesernya ke arah bawah bagian tengah sampai masuk tanda (X)</span></li><center><table border="0" style="border-collapse: collapse; border-spacing: 0px; max-width: 100%;"><tbody><tr><td><br /></td><td><br /><span style="font-family: inherit;"></span></td><td><br /><span style="font-family: inherit;"></span></td></tr></tbody></table></center><li style="margin: 5px 0px; text-align: justify;"><span style="font-family: inherit;">Admin blog akan menerima notifikasi langsung di Aplikasi Messanger Facebook setiap kali ada pengunjung yang menggunakannya.</span></li><li style="margin: 5px 0px; text-align: justify;"><span style="font-family: inherit;">Di dalam kotak Live Chat Blog sudah tersedia FB FanPage, sehingga kamu tidak perlu lagi memasangnya di sidebar.</span></li><li style="margin: 5px 0px; text-align: center;"><br /></li><li style="margin: 5px 0px;"><span style="font-family: inherit;">Saya masih belum menemukan blogger yang menggunakan widget atau memberikan tutorial ini di Indonesia. Sehingga merupakan sebuah keberuntungan bagi kamu bisa mampir di sini. :)</span></li></ul></div><div><div style="text-align: justify;"><span style="font-family: inherit;">Setelah panjang lebar menjelaskan perbedaan, kelebihan, dan fungsinya, semua itu tidak akan berguna tanpa adanya cara memasang Live Chat Box tersebut. Untuk itu, berikut saya sediakan langkah-langkah yang bisa kamu ikuti jika berminat untuk memasang widget Live Chat Box ini.</span></div></div><div style="font-family: Roboto_Regular, Roboto, "Roboto Regular", "Franklin Gothic Medium", "Franklin Gothic Book", "Lucida Sans", "Lucida Sans Unicode", "Helmet,Freesans", sans-serif; font-size: 13.5px;"><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div></div><div><div style="text-align: justify;"><b><span style="font-family: inherit;">Cara pemasangan:</span></b></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">1. Buka <b>Blogger.com</b> > <b>Tema > Edit HTML</b></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">2. Klik tombol kiri mouse di dalam kolom html, lalu tekan <b>Ctrl + F</b></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">3. Masukkan kode <b></head></b> dalam kotak pencarian, lalu tekan<b> Enter</b></span></div></div><div><div style="text-align: justify;"><span style="font-family: inherit;">4. Letakkan kode CSS yang ada di bawah ini, tepat <i>di atas</i> <b></head></b></span></div></div><div style="text-align: justify;"><b><span style="font-family: inherit;"><br /></span></b></div><div style="text-align: justify;"><b><span style="font-family: inherit;"><br /></span></b></div><div style="text-align: justify;"><div dir="ltr" style="border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; text-align: left; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa;"><span style="font-family: inherit;"><b>PopularPosts .widget-content{padding:0;box-sizing:border-box}<br /><br />.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}</b><b><style> /* Live chat */ .thing { top:0px; z-index: 99999; } .facebook-messenger-avatar-type1 { background: transparent !important; } .wrapper { position: relative; width: 100%; overflow: hidden; } .drag-wrapper .thing, .drag-wrapper .thing .circle, .drag-wrapper .magnet { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .drag-wrapper .thing .circle, .drag-wrapper .magnet-zone { z-index: 999; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .drag-wrapper, .drag-wrapper *, .drag-wrapper:before, .drag-wrapper:after { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* For some Androids */ } .drag-wrapper .thing { position: fixed; margin: 0px; cursor: pointer; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } .drag-wrapper .thing .circle { position: absolute; text-align: center; top: 0; left: 0; right: 0; bottom: 0; background: #0075FF; background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 50ms linear; -moz-transition: transform 50ms linear; transition: transform 50ms linear; } .drag-wrapper .thing .circle img { </b></span></span></code><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa;"><span style="font-family: inherit;"><b>max-width: 100%; height: auto; width: 75%; margin-top: 15%; } .drag-wrapper .thing.edge { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); } .drag-wrapper .thing .content { display: none; overflow: hidden; position: absolute; top: 100%; right: 0px; margin-top: 12px; padding: 20px; width: 350px; height: auto; background: #ffffff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1); border: none; } .drag-wrapper-left .thing .content { right: auto; left: 0 } .drag-wrapper .thing .content:before { content: ''; position: absolute; top: -10px; right: 25px; width: 12px; height: 10px; border-bottom: 10px solid #ffffff; border-left: 6px solid transparent; border-right: 6px solid transparent; } .drag-wrapper .thing .content .inside { max-height: 100%; position: relative; overflow: hidden; width: 100%; } .drag-wrapper .magnet-zone { pointer-events: none; -webkit-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22); -moz-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22); transition: transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22); } .drag-wrapper .magnet-zone { position: fixed; bottom: 10px; left: 50%; z-index: 999; padding: 10px 20px; text-align: center; -webkit-transform: translate(-50%, 100%) translateZ(0); -moz-transform: translate(-50%, 100%) translateZ(0); transform: translate(-50%, 100%) translateZ(0); } .drag-wrapper .magnet-zone.overlap .magnet { -webkit-transform: scale(1.08) translateZ(0); -moz-transform: scale(1.08) translateZ(0); transform: scale(1.08) translateZ(0); } .touching .drag-wrapper .circle { -webkit-transform: scale(0.9) translateZ(0); -moz-transform: scale(0.9) translateZ(0); transform: scale(0.9) translateZ(0); } .moving .drag-wrapper .container:before { opacity: 1; } .moving .drag-wrapper .magnet-zone { -webkit-transform: translate(-50%, 0) translateZ(0); -moz-transform: translate(-50%, 0) translateZ(0); transform: translate(-50%, 0) translateZ(0); } .drag-wrapper .magnet-zone:after { pointer-events: none; content: '\00d7'; position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 2em; font-weight: 100; color: #fff; -webkit-transform: translateY(-50%) translateZ(0); -moz-transform: translateY(-50%) translateZ(0); transform: translateY(-50%) translateZ(0); } .drag-wrapper .magnet { pointer-events: none; position: relative; border: 2px solid #fff; background: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-transform-origin: center; -moz-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25); -moz-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25); transition: transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25); -webkit-transform: scale(0.7) translateZ(0); -moz-transform: scale(0.7) translateZ(0); transform: scale(0.7) translateZ(0); } body:not(.touching) .drag-wrapper .thing { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1); } @media only screen and (max-width: 767px) { .drag-wrapper .thing .content { right: -17px; width: 310px; padding: 10px 0; } } .facebook_messenger_popup { background: #fff; display: none; } body .drag-wrapper .thing .facebook-messenger-avatar-type1 img { width: 100%; margin-top: 0; border-radius: 50%; height: 100%; } .facebook_messenger_popup .send-app a { border-radius: 0; } .send-app { margin-top: 15px; padding: 0px 15px; } .send-app a { background: #0075ff; display: inline-block; width: 100%; color: #fff; text-align: center; padding: 3px 5px; border-radius: 3px; text-decoration: none; } .send-app a:hover { opacity: 0.8; } .chatHead { background: #0075FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeU5uhkxjTKD6jgfpk7Ojf3jN9Bw6KisDsMAc6LQBxsmF324POH6MMJdj9l2hwMb-4CuT7KMUhiqlCQ3NRaviso5GWxazvknrUqfBhV4BJHTHFYAA78xWqLCR9GIhv9JeYIByx9YGbuy8/s1600/facebook-messenger.png) center center no-repeat; background-size: 50% auto; } .drag-wrapper .thing .circle { background: #0075FF; } .nj-facebook-messenger { background: #0075FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeU5uhkxjTKD6jgfpk7Ojf3jN9Bw6KisDsMAc6LQBxsmF324POH6MMJdj9l2hwMb-4CuT7KMUhiqlCQ3NRaviso5GWxazvknrUqfBhV4BJHTHFYAA78xWqLCR9GIhv9JeYIByx9YGbuy8/s1600/facebook-messenger.png) 15px center no-repeat; background-size: auto 55%; padding: 8px 15px; color: #fff !important; border-radius: 3px; padding-left: 40px; display: inline-block; margin-top: 5px; } .send-app a { background: #0075FF } .nj-facebook-messenger:hover { opacity: 0.8; } </style></b><b><br />.PopularPosts .widget-content ul li {<br /><br /> margin: 0;<br /><br /> padding: 10px 0 10px 60px;<br /><br /> position: relative;<br /><br /> overflow: hidden;<br /><br /> border-top: 1px solid #2b2b2b;<br /><br /> border-bottom: 1px solid #111;<br /><br />}<br /><br />.PopularPosts .widget-content ul li:last-child{border-bottom:none}<br /><br />.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}<br /><br />.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}<br /><br />.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}<br /><br />.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}<br /><br />.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}<br /><br />.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}<br /><br />.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}<br /><br />.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}<br /><br />.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}<br /><br />.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}<br /><br /><br />.sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}<br /><br />.PopularPosts .widget-content{padding:0;box-sizing:border-box}<br /><br />.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}<br /><br />.PopularPosts .widget-content ul li {<br /><br /> margin: 0;<br /><br /> padding: 10px 0 10px 60px;<br /><br /> position: relative;<br /><br /> overflow: hidden;<br /><br /> border-top: 1px solid #2b2b2b;<br /><br /> border-bottom: 1px solid #111;<br /><br />}<br /><br />.PopularPosts .widget-content ul li:last-child{border-bottom:none}<br /><br />.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}<br /><br />.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}<br /><br />.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}<br /><br />.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}<br /><br />.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}<br /><br />.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}<br /><br />.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}<br /><br />#blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}<br /><br />.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}<br /><br />.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}<br /><br />.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}<br /><br />.sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}</b></span></span></code></pre></div></div></div></div></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: inherit;"><br /></span></div><div style="text-align: left;"><span style="font-family: inherit;"> <span style="background-color: transparent; text-align: left;">5. Letakkan kode HTML yang ada di bawah ini, tepat </span><i style="background-color: transparent; text-align: left;">di bawah</i><span style="background-color: transparent; text-align: left;"> </span><b style="background-color: transparent; text-align: left;"><body></b></span></div></div></div></div></div></div><div id="post26065905696619900369" style="background-color: white;"><div dir="ltr" style="border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: inherit;"><b><div class='drag-wrapper drag-wrapper-right'> <script> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script> <div class='drag-wrapper drag-wrapper-right'> <div class='thing' data-drag='data-drag'> <div class='circle facebook-messenger-avatar facebook-messenger-avatar-type0'> <img class='facebook-messenger-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeU5uhkxjTKD6jgfpk7Ojf3jN9Bw6KisDsMAc6LQBxsmF324POH6MMJdj9l2hwMb-4CuT7KMUhiqlCQ3NRaviso5GWxazvknrUqfBhV4BJHTHFYAA78xWqLCR9GIhv9JeYIByx9YGbuy8/s1600/facebook-messenger.png'/> </div> <div class='content'> <div class='inside'> <div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='false' data-href='https://www.facebook.com/lovekarawang/' data-show-facepile='true' data-small-header='true' data-tabs='messages' data-width='310'><div class='fb-xfbml-parse-ignore'><blockquote cite='https://www.facebook.com/lovekarawang/'><a href='https://www.facebook.com/lovekarawang/'>Loading...</a></blockquote></div></div> </div> </div> </div> <div class='magnet-zone'> <div class='magnet'></div> </div> </div> </div></b></span></code></pre></div></div></div></div><div style="text-align: justify;"><span style="font-family: inherit;">*Ada 3 buah link seperti ini https://www.facebook.com/<b style="background-color: #e20202; color: #fafafa; text-align: left; white-space: pre;">lovekarawang</b>/</span></div><div style="text-align: justify;"><span style="font-family: inherit;">Ganti kata <b style="background-color: #e20202; color: #fafafa; text-align: left; white-space: pre;">lovekarawang</b> dengan User ID Fan Page Facebook kamu.</span></div><div style="text-align: center;"><span style="font-family: inherit;"> </span></div><div><span style="font-family: inherit;">6. Letakkan kode Javascript yang ada di bawah ini, tepat <i>di atas </i><b></body></b></span></div><div><b><span style="font-family: inherit;"><br /></span></b></div><div><div dir="ltr" style="border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: inherit;"><b><script> //<![CDATA[ /* blogspotvn.com */ /* popup.js */ !function(a){var f,l,b=a(window),c={},d=[],e=[],g=null,h="_open",i="_close",j=[],k=null,m=/(iPad|iPhone|iPod)/g.test(navigator.userAgent),n="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",o={_init:function(b){var c=a(b),f=c.data("popupoptions");e[b.id]=!1,d[b.id]=0,c.data("popup-initialized")||(c.attr("data-popup-initialized","true"),o._initonce(b)),f.autoopen&&setTimeout(function(){o.show(b,0)},0)},_initonce:function(b){var e,j,c=a(b),d=a("body"),i=c.data("popupoptions");if(g=parseInt(d.css("margin-right"),10),k=void 0!==document.body.style.webkitTransition||void 0!==document.body.style.MozTransition||void 0!==document.body.style.msTransition||void 0!==document.body.style.OTransition||void 0!==document.body.style.transition,"tooltip"==i.type&&(i.background=!1,i.scrolllock=!1),i.backgroundactive&&(i.background=!1,i.blur=!1,i.scrolllock=!1),i.scrolllock){var l,n;"undefined"==typeof f&&(l=a('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo("body"),n=l.children(),f=n.innerWidth()-n.height(99).innerWidth(),l.remove())}if(c.attr("id")||c.attr("id","j-popup-"+parseInt(1e8*Math.random(),10)),c.addClass("popup_content"),i.background&&!a("#"+b.id+"_background").length){d.append('<div id="'+b.id+'_background" class="popup_background"></div>');var p=a("#"+b.id+"_background");p.css({opacity:0,visibility:"hidden",backgroundColor:i.color,position:"fixed",top:0,right:0,bottom:0,left:0}),i.setzindex&&!i.autozindex&&p.css("z-index","100000"),i.transition&&p.css("transition",i.transition)}d.append(b),c.wrap('<div id="'+b.id+'_wrapper" class="popup_wrapper" />'),e=a("#"+b.id+"_wrapper"),e.css({opacity:0,visibility:"hidden",position:"absolute"}),m&&e.css("cursor","pointer"),"overlay"==i.type&&e.css("overflow","auto"),c.css({opacity:0,visibility:"hidden",display:"inline-block"}),i.setzindex&&!i.autozindex&&e.css("z-index","100001"),i.outline||c.css("outline","none"),i.transition&&(c.css("transition",i.transition),e.css("transition",i.transition)),c.attr("aria-hidden",!0),"overlay"==i.type&&(c.css({textAlign:"left",position:"relative",verticalAlign:"middle"}),j={position:"fixed",width:"100%",height:"100%",top:0,left:0,textAlign:"center"},i.backgroundactive&&(j.position="absolute",j.height="0",j.overflow="visible"),e.css(j),e.append('<div class="popup_align" />'),a(".popup_align").css({display:"inline-block",verticalAlign:"middle",height:"100%"})),c.attr("role","dialog");var q=i.openelement?i.openelement:"."+b.id+h;a(q).each(function(b,c){a(c).attr("data-popup-ordinal",b),c.id||a(c).attr("id","open_"+parseInt(1e8*Math.random(),10))}),c.attr("aria-labelledby")||c.attr("aria-label")||c.attr("aria-labelledby",a(q).attr("id")),"hover"==i.action?(i.keepfocus=!1,a(q).on("mouseenter",function(c){o.show(b,a(this).data("popup-ordinal"))}),a(q).on("mouseleave",function(a){o.hide(b)})):a(document).on("click",q,function(c){c.preventDefault();var d=a(this).data("popup-ordinal");setTimeout(function(){o.show(b,d)},0)}),i.closebutton&&o.addclosebutton(b),i.detach?c.hide().detach():e.hide()},show:function(c,h){var m=a(c);if(!m.data("popup-visible")){m.data("popup-initialized")||o._init(c),m.attr("data-popup-initialized","true");var n=a("body"),q=m.data("popupoptions"),r=a("#"+c.id+"_wrapper"),s=a("#"+c.id+"_background");if(p(c,h,q.beforeopen),e[c.id]=h,setTimeout(function(){j.push(c.id)},0),q.autozindex){for(var t=document.getElementsByTagName("*"),u=t.length,v=0,w=0;w<u;w++){var x=a(t[w]).css("z-index");"auto"!==x&&(x=parseInt(x,10),v<x&&(v=x))}d[c.id]=v,q.background&&d[c.id]>0&&a("#"+c.id+"_background").css({zIndex:d[c.id]+1}),d[c.id]>0&&r.css({zIndex:d[c.id]+2})}q.detach?(r.prepend(c),m.show()):r.show(),l=setTimeout(function(){r.css({visibility:"visible",opacity:1}),a("html").addClass("popup_visible").addClass("popup_visible_"+c.id),r.addClass("popup_wrapper_visible")},20),q.scrolllock&&(n.css("overflow","hidden"),n.height()>b.height()&&n.css("margin-right",g+f)),q.backgroundactive&&m.css({top:(b.height()-(m.get(0).offsetHeight+parseInt(m.css("margin-top"),10)+parseInt(m.css("margin-bottom"),10)))/2+"px"}),m.css({visibility:"visible",opacity:1}),q.background&&(s.css({visibility:"visible",opacity:q.opacity}),setTimeout(function(){s.css({opacity:q.opacity})},0)),m.data("popup-visible",!0),o.reposition(c,h),m.data("focusedelementbeforepopup",document.activeElement),q.keepfocus&&(m.attr("tabindex",-1),setTimeout(function(){"closebutton"===q.focuselement?a("#"+c.id+" ."+c.id+i+":first").focus():q.focuselement?a(q.focuselement).focus():m.focus()},q.focusdelay)),a(q.pagecontainer).attr("aria-hidden",!0),m.attr("aria-hidden",!1),p(c,h,q.onopen),k?r.one("transitionend",function(){p(c,h,q.opentransitionend)}):p(c,h,q.opentransitionend),"tooltip"==q.type&&a(window).on("resize."+c.id,function(){o.reposition(c,h)})}},hide:function(b,c){var d=a.inArray(b.id,j);if(d!==-1){l&&clearTimeout(l);var f=a("body"),h=a(b),i=h.data("popupoptions"),m=a("#"+b.id+"_wrapper"),n=a("#"+b.id+"_background");h.data("popup-visible",!1),1===j.length?a("html").removeClass("popup_visible").removeClass("popup_visible_"+b.id):a("html").hasClass("popup_visible_"+b.id)&&a("html").removeClass("popup_visible_"+b.id),j.splice(d,1),m.hasClass("popup_wrapper_visible")&&m.removeClass("popup_wrapper_visible"),i.keepfocus&&!c&&setTimeout(function(){a(h.data("focusedelementbeforepopup")).is(":visible")&&h.data("focusedelementbeforepopup").focus()},0),m.css({visibility:"hidden",opacity:0}),h.css({visibility:"hidden",opacity:0}),i.background&&n.css({visibility:"hidden",opacity:0}),a(i.pagecontainer).attr("aria-hidden",!1),h.attr("aria-hidden",!0),p(b,e[b.id],i.onclose),k&&"0s"!==h.css("transition-duration")?h.one("transitionend",function(a){h.data("popup-visible")||(i.detach?h.hide().detach():m.hide()),i.scrolllock&&setTimeout(function(){f.css({overflow:"visible","margin-right":g})},10),p(b,e[b.id],i.closetransitionend)}):(i.detach?h.hide().detach():m.hide(),i.scrolllock&&setTimeout(function(){f.css({overflow:"visible","margin-right":g})},10),p(b,e[b.id],i.closetransitionend)),"tooltip"==i.type&&a(window).off("resize."+b.id)}},toggle:function(b,c){a(b).data("popup-visible")?o.hide(b):setTimeout(function(){o.show(b,c)},0)},reposition:function(c,d){var e=a(c),f=e.data("popupoptions"),g=a("#"+c.id+"_wrapper");a("#"+c.id+"_background");if(d=d||0,"tooltip"==f.type){g.css({position:"absolute"});var j;j=f.tooltipanchor?a(f.tooltipanchor):f.openelement?a(f.openelement).filter('[data-popup-ordinal="'+d+'"]'):a("."+c.id+h+'[data-popup-ordinal="'+d+'"]');var k=j.offset();"right"==f.horizontal?g.css("left",k.left+j.outerWidth()+f.offsetleft):"leftedge"==f.horizontal?g.css("left",k.left+j.outerWidth()-j.outerWidth()+f.offsetleft):"left"==f.horizontal?g.css("right",b.width()-k.left-f.offsetleft):"rightedge"==f.horizontal?g.css("right",b.width()-k.left-j.outerWidth()-f.offsetleft):g.css("left",k.left+j.outerWidth()/2-e.outerWidth()/2-parseFloat(e.css("marginLeft"))+f.offsetleft),"bottom"==f.vertical?g.css("top",k.top+j.outerHeight()+f.offsettop):"bottomedge"==f.vertical?g.css("top",k.top+j.outerHeight()-e.outerHeight()+f.offsettop):"top"==f.vertical?g.css("bottom",b.height()-k.top-f.offsettop):"topedge"==f.vertical?g.css("bottom",b.height()-k.top-e.outerHeight()-f.offsettop):g.css("top",k.top+j.outerHeight()/2-e.outerHeight()/2-parseFloat(e.css("marginTop"))+f.offsettop)}else"overlay"==f.type&&(f.horizontal?g.css("text-align",f.horizontal):g.css("text-align","center"),f.vertical?e.css("vertical-align",f.vertical):e.css("vertical-align","middle"))},addclosebutton:function(b){var d;d=a(b).data("popupoptions").closebuttonmarkup?a(c.closebuttonmarkup).addClass(b.id+"_close"):'<button class="popup_close '+b.id+'_close" title="Close" aria-label="Close"><span aria-hidden="true">×</span></button>',a(b).data("popup-initialized")&&a(b).append(d)}},p=function(b,c,d){var e=a(b).data("popupoptions"),f=e.openelement?e.openelement:"."+b.id+h,g=a(f+'[data-popup-ordinal="'+c+'"]');"function"==typeof d&&d.call(a(b),b,g)};a(document).on("keydown",function(b){if(j.length){var c=j[j.length-1],d=document.getElementById(c);a(d).data("popupoptions").escape&&27==b.keyCode&&o.hide(d)}}),a(document).on("click",function(b){if(j.length){var c=j[j.length-1],d=document.getElementById(c),e=a(d).data("popupoptions").closeelement?a(d).data("popupoptions").closeelement:"."+d.id+i;a(b.target).closest(e).length&&(b.preventDefault(),o.hide(d)),a(d).data("popupoptions").blur&&!a(b.target).closest("#"+c).length&&2!==b.which&&a(b.target).is(":visible")&&(a(d).data("popupoptions").background?(o.hide(d),b.preventDefault()):o.hide(d,!0))}}),a(document).on("keydown",function(b){if(j.length&&9==b.which){var c=j[j.length-1],d=document.getElementById(c),e=a(d).find("*"),f=e.filter(n).filter(":visible"),g=a(":focus"),h=f.length,i=f.index(g);0===h?(a(d).focus(),b.preventDefault()):b.shiftKey?0===i&&(f.get(h-1).focus(),b.preventDefault()):i==h-1&&(f.get(0).focus(),b.preventDefault())}}),a.fn.popup=function(b){return this.each(function(){var d=a(this);if("object"==typeof b){var e=a.extend({},a.fn.popup.defaults,d.data("popupoptions"),b);d.data("popupoptions",e),c=d.data("popupoptions"),o._init(this)}else"string"==typeof b?(d.data("popupoptions")||(d.data("popupoptions",a.fn.popup.defaults),c=d.data("popupoptions")),o[b].call(this,this)):(d.data("popupoptions")||(d.data("popupoptions",a.fn.popup.defaults),c=d.data("popupoptions")),o._init(this))})},a.fn.popup.defaults={type:"overlay",autoopen:!1,background:!0,backgroundactive:!1,color:"black",opacity:"0.5",horizontal:"center",vertical:"middle",offsettop:0,offsetleft:0,escape:!0,blur:!0,setzindex:!0,autozindex:!1,scrolllock:!1,closebutton:!1,closebuttonmarkup:null,keepfocus:!0,focuselement:null,focusdelay:50,outline:!1,pagecontainer:null,detach:!1,openelement:null,closeelement:null,transition:null,tooltipanchor:null,beforeopen:null,onclose:null,onopen:null,opentransitionend:null,closetransitionend:null}}(jQuery); /* jquery.event.move.js */ !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a,b){function k(a){function e(a){c?(b(),g(e),d=!0,c=!1):d=!1}var b=a,c=!1,d=!1;this.kick=function(a){c=!0,d||e()},this.end=function(a){var e=b;a&&(d?(b=c?function(){e(),a()}:a,c=!0):a())}}function l(){return!0}function m(){return!1}function n(a){a.preventDefault()}function o(a){h[a.target.tagName.toLowerCase()]||a.preventDefault()}function p(a){return 1===a.which&&!a.ctrlKey&&!a.altKey}function q(a,b){var c,d;if(a.identifiedTouch)return a.identifiedTouch(b);for(c=-1,d=a.length;++c<d;)if(a[c].identifier===b)return a[c]}function r(a,b){var c=q(a.changedTouches,b.identifier);if(c&&(c.pageX!==b.pageX||c.pageY!==b.pageY))return c}function s(a){var b;p(a)&&(b={target:a.target,startX:a.pageX,startY:a.pageY,timeStamp:a.timeStamp},d(document,i.move,t,b),d(document,i.cancel,u,b))}function t(a){var b=a.data;A(a,b,a,v)}function u(a){v()}function v(){e(document,i.move,t),e(document,i.cancel,u)}function w(a){var b,c;h[a.target.tagName.toLowerCase()]||(b=a.changedTouches[0],c={target:b.target,startX:b.pageX,startY:b.pageY,timeStamp:a.timeStamp,identifier:b.identifier},d(document,j.move+"."+b.identifier,x,c),d(document,j.cancel+"."+b.identifier,y,c))}function x(a){var b=a.data,c=r(a,b);c&&A(a,b,c,z)}function y(a){var b=a.data,c=q(a.changedTouches,b.identifier);c&&z(b.identifier)}function z(a){e(document,"."+a,x),e(document,"."+a,y)}function A(a,b,d,e){var f=d.pageX-b.startX,g=d.pageY-b.startY;f*f+g*g<c*c||D(a,b,d,f,g,e)}function B(){return this._handled=l,!1}function C(a){a._handled()}function D(a,b,c,d,e,g){var i,j;b.target;i=a.targetTouches,j=a.timeStamp-b.timeStamp,b.type="movestart",b.distX=d,b.distY=e,b.deltaX=d,b.deltaY=e,b.pageX=c.pageX,b.pageY=c.pageY,b.velocityX=d/j,b.velocityY=e/j,b.targetTouches=i,b.finger=i?i.length:1,b._handled=B,b._preventTouchmoveDefault=function(){a.preventDefault()},f(b.target,b),g(b.identifier)}function E(a){var b=a.data.event,c=a.data.timer;K(b,a,a.timeStamp,c)}function F(a){var b=a.data.event,c=a.data.timer;G(),L(b,c,function(){setTimeout(function(){e(b.target,"click",m)},0)})}function G(a){e(document,i.move,E),e(document,i.end,F)}function H(a){var b=a.data.event,c=a.data.timer,d=r(a,b);d&&(a.preventDefault(),b.targetTouches=a.targetTouches,K(b,d,a.timeStamp,c))}function I(a){var b=a.data.event,c=a.data.timer,d=q(a.changedTouches,b.identifier);d&&(J(b),L(b,c))}function J(a){e(document,"."+a.identifier,H),e(document,"."+a.identifier,I)}function K(a,b,c,d){var e=c-a.timeStamp;a.type="move",a.distX=b.pageX-a.startX,a.distY=b.pageY-a.startY,a.deltaX=b.pageX-a.pageX,a.deltaY=b.pageY-a.pageY,a.velocityX=.3*a.velocityX+.7*a.deltaX/e,a.velocityY=.3*a.velocityY+.7*a.deltaY/e,a.pageX=b.pageX,a.pageY=b.pageY,d.kick()}function L(a,b,c){b.end(function(){return a.type="moveend",f(a.target,a),c&&c()})}function M(a,b,c){return d(this,"movestart.move",C),!0}function N(a){return e(this,"dragstart drag",n),e(this,"mousedown touchstart",o),e(this,"movestart",C),!0}function O(a){"move"!==a.namespace&&"moveend"!==a.namespace&&(d(this,"dragstart."+a.guid+" drag."+a.guid,n,b,a.selector),d(this,"mousedown."+a.guid,o,b,a.selector))}function P(a){"move"!==a.namespace&&"moveend"!==a.namespace&&(e(this,"dragstart."+a.guid+" drag."+a.guid),e(this,"mousedown."+a.guid))}var c=6,d=a.event.add,e=a.event.remove,f=function(b,c,d){a.event.trigger(c,d,b)},g=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a,b){return window.setTimeout(function(){a()},25)}}(),h={textarea:!0,input:!0,select:!0,button:!0},i={move:"mousemove",cancel:"mouseup dragstart",end:"mouseup"},j={move:"touchmove",cancel:"touchend",end:"touchend"};a.event.special.movestart={setup:M,teardown:N,add:O,remove:P,_default:function(a){var c,e;a._handled()&&(c={target:a.target,startX:a.startX,startY:a.startY,pageX:a.pageX,pageY:a.pageY,distX:a.distX,distY:a.distY,deltaX:a.deltaX,deltaY:a.deltaY,velocityX:a.velocityX,velocityY:a.velocityY,timeStamp:a.timeStamp,identifier:a.identifier,targetTouches:a.targetTouches,finger:a.finger},e={event:c,timer:new k(function(b){f(a.target,c)})},a.identifier===b?(d(a.target,"click",m),d(document,i.move,E,e),d(document,i.end,F,e)):(a._preventTouchmoveDefault(),d(document,j.move+"."+a.identifier,H,e),d(document,j.end+"."+a.identifier,I,e)))}},a.event.special.move={setup:function(){d(this,"movestart.move",a.noop)},teardown:function(){e(this,"movestart.move",a.noop)}},a.event.special.moveend={setup:function(){d(this,"movestart.moveend",a.noop)},teardown:function(){e(this,"movestart.moveend",a.noop)}},d(document,"mousedown.move",s),d(document,"touchstart.move",w),"function"==typeof Array.prototype.indexOf&&!function(a,b){for(var c=["changedTouches","targetTouches"],d=c.length;d--;)a.event.props.indexOf(c[d])===-1&&a.event.props.push(c[d])}(a)}); /* rebound.min.js */ (function(){function removeFirst(array,item){var idx=array.indexOf(item);-1!=idx&&array.splice(idx,1)}function compatCancelAnimationFrame(id){return"undefined"!=typeof window&&window.cancelAnimationFrame&&cancelAnimationFrame(id)}function compatRequestAnimationFrame(func){var meth;return meth="undefined"!=typeof process?process.nextTick:window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame,meth(func)}function bind(func,context){return args=slice.call(arguments,2),function(){func.apply(context,concat.call(args,slice.call(arguments)))}}function extend(target,source){for(var key in source)source.hasOwnProperty(key)&&(target[key]=source[key])}var rebound={},SpringSystem=rebound.SpringSystem=function SpringSystem(){this._springRegistry={},this._activeSprings=[],this._listeners=[],this._idleSpringIndices=[],this._boundFrameCallback=bind(this._frameCallback,this)};extend(SpringSystem,{}),extend(SpringSystem.prototype,{_springRegistry:null,_isIdle:!0,_lastTimeMillis:-1,_activeSprings:null,_listeners:null,_idleSpringIndices:null,_frameCallback:function(){this.loop()},_frameCallbackId:null,createSpring:function(tension,friction){var spring=new Spring(this);if(this.registerSpring(spring),tension===void 0||friction===void 0)spring.setSpringConfig(SpringConfig.DEFAULT_ORIGAMI_SPRING_CONFIG);else{var springConfig=SpringConfig.fromOrigamiTensionAndFriction(tension,friction);spring.setSpringConfig(springConfig)}return spring},getIsIdle:function(){return this._isIdle},getSpringById:function(id){return this._springRegistry[id]},getAllSprings:function(){return Object.values(this._springRegistry)},registerSpring:function(spring){this._springRegistry[spring.getId()]=spring},deregisterSpring:function(spring){removeFirst(this._activeSprings,spring),delete this._springRegistry[spring.getId()]},advance:function(time,deltaTime){for(;this._idleSpringIndices.length>0;)this._idleSpringIndices.pop();for(var i=0,len=this._activeSprings.length;len>i;i++){var spring=this._activeSprings[i];spring.systemShouldAdvance()?spring.advance(time/1e3,deltaTime/1e3):this._idleSpringIndices.push(this._activeSprings.indexOf(spring))}for(;this._idleSpringIndices.length>0;){var idx=this._idleSpringIndices.pop();idx>=0&&this._activeSprings.splice(idx,1)}},loop:function(){var listener,currentTimeMillis=Date.now();-1===this._lastTimeMillis&&(this._lastTimeMillis=currentTimeMillis-1);var ellapsedMillis=currentTimeMillis-this._lastTimeMillis;this._lastTimeMillis=currentTimeMillis;var i=0,len=this._listeners.length;for(i=0;len>i;i++){var listener=this._listeners[i];listener.onBeforeIntegrate&&listener.onBeforeIntegrate(this)}for(this.advance(currentTimeMillis,ellapsedMillis),0===this._activeSprings.length&&(this._isIdle=!0,this._lastTimeMillis=-1),i=0;len>i;i++){var listener=this._listeners[i];listener.onAfterIntegrate&&listener.onAfterIntegrate(this)}compatCancelAnimationFrame(this._frameCallbackId),this._isIdle||(this._frameCallbackId=compatRequestAnimationFrame(this._boundFrameCallback))},activateSpring:function(springId){var spring=this._springRegistry[springId];-1==this._activeSprings.indexOf(spring)&&this._activeSprings.push(spring),this.getIsIdle()&&(this._isIdle=!1,compatCancelAnimationFrame(this._frameCallbackId),this._frameCallbackId=compatRequestAnimationFrame(this._boundFrameCallback))},addListener:function(listener){this._listeners.push(listener)},removeListener:function(listener){removeFirst(this._listeners,listener)},removeAllListeners:function(){this._listeners=[]}});var Spring=rebound.Spring=function Spring(springSystem){this._id=Spring._ID++,this._springSystem=springSystem,this._listeners=[],this._currentState=new PhysicsState,this._previousState=new PhysicsState,this._tempState=new PhysicsState};extend(Spring,{_ID:0,MAX_DELTA_TIME_SEC:.064,SOLVER_TIMESTEP_SEC:.001}),extend(Spring.prototype,{_id:0,_springConfig:null,_overshootClampingEnabled:!1,_currentState:null,_previousState:null,_tempState:null,_startValue:0,_endValue:0,_wasAtRest:!0,_restSpeedThreshold:.001,_displacementFromRestThreshold:.001,_listeners:null,_timeAccumulator:0,_springSystem:null,destroy:function(){this._listeners=[],this._springSystem.deregisterSpring(this)},getId:function(){return this._id},setSpringConfig:function(springConfig){return this._springConfig=springConfig,this},getSpringConfig:function(){return this._springConfig},setCurrentValue:function(currentValue){this._startValue=currentValue,this._currentState.position=currentValue;for(var i=0,len=this._listeners.length;len>i;i++){var listener=this._listeners[i];listener.onSpringUpdate&&listener.onSpringUpdate(this)}return this},getStartValue:function(){return this._startValue},getCurrentValue:function(){return this._currentState.position},getCurrentDisplacementDistance:function(){return this.getDisplacementDistanceForState(this._currentState)},getDisplacementDistanceForState:function(state){return Math.abs(this._endValue-state.position)},setEndValue:function(endValue){if(this._endValue==endValue&&this.isAtRest())return this;this._startValue=this.getCurrentValue(),this._endValue=endValue,this._springSystem.activateSpring(this.getId());for(var i=0,len=this._listeners.length;len>i;i++){var listener=this._listeners[i];listener.onSpringEndStateChange&&listener.onSpringEndStateChange(this)}return this},getEndValue:function(){return this._endValue},setVelocity:function(velocity){return this._currentState.velocity=velocity,this},getVelocity:function(){return this._currentState.velocity},setRestSpeedThreshold:function(restSpeedThreshold){return this._restSpeedThreshold=restSpeedThreshold,this},getRestSpeedThreshold:function(){return this._restSpeedThreshold},setRestDisplacementThreshold:function(displacementFromRestThreshold){this._displacementFromRestThreshold=displacementFromRestThreshold},getRestDisplacementThreshold:function(){return this._displacementFromRestThreshold},setOvershootClampingEnabled:function(enabled){return this._overshootClampingEnabled=enabled,this},isOvershootClampingEnabled:function(){return this._overshootClampingEnabled},isOvershooting:function(){return this._startValue<this._endValue&&this.getCurrentValue()>this._endValue||this._startValue>this._endValue&&this.getCurrentValue()<this._endValue},advance:function(time,realDeltaTime){var isAtRest=this.isAtRest();if(!isAtRest||!this._wasAtRest){var adjustedDeltaTime=realDeltaTime;realDeltaTime>Spring.MAX_DELTA_TIME_SEC&&(adjustedDeltaTime=Spring.MAX_DELTA_TIME_SEC),this._timeAccumulator+=adjustedDeltaTime;for(var aVelocity,aAcceleration,bVelocity,bAcceleration,cVelocity,cAcceleration,dVelocity,dAcceleration,dxdt,dvdt,tension=this._springConfig.tension,friction=this._springConfig.friction,position=this._currentState.position,velocity=this._currentState.velocity,tempPosition=this._tempState.position,tempVelocity=this._tempState.velocity;this._timeAccumulator>=Spring.SOLVER_TIMESTEP_SEC;)this._timeAccumulator-=Spring.SOLVER_TIMESTEP_SEC,this._timeAccumulator<Spring.SOLVER_TIMESTEP_SEC&&(this._previousState.position=position,this._previousState.velocity=velocity),aVelocity=velocity,aAcceleration=tension*(this._endValue-tempPosition)-friction*velocity,tempPosition=position+.5*aVelocity*Spring.SOLVER_TIMESTEP_SEC,tempVelocity=velocity+.5*aAcceleration*Spring.SOLVER_TIMESTEP_SEC,bVelocity=tempVelocity,bAcceleration=tension*(this._endValue-tempPosition)-friction*tempVelocity,tempPosition=position+.5*bVelocity*Spring.SOLVER_TIMESTEP_SEC,tempVelocity=velocity+.5*bAcceleration*Spring.SOLVER_TIMESTEP_SEC,cVelocity=tempVelocity,cAcceleration=tension*(this._endValue-tempPosition)-friction*tempVelocity,tempPosition=position+.5*cVelocity*Spring.SOLVER_TIMESTEP_SEC,tempVelocity=velocity+.5*cAcceleration*Spring.SOLVER_TIMESTEP_SEC,dVelocity=tempVelocity,dAcceleration=tension*(this._endValue-tempPosition)-friction*tempVelocity,dxdt=1/6*(aVelocity+2*(bVelocity+cVelocity)+dVelocity),dvdt=1/6*(aAcceleration+2*(bAcceleration+cAcceleration)+dAcceleration),position+=dxdt*Spring.SOLVER_TIMESTEP_SEC,velocity+=dvdt*Spring.SOLVER_TIMESTEP_SEC;this._tempState.position=tempPosition,this._tempState.velocity=tempVelocity,this._currentState.position=position,this._currentState.velocity=velocity,this._timeAccumulator>0&&this.interpolate(this._timeAccumulator/Spring.SOLVER_TIMESTEP_SEC),(this.isAtRest()||this._overshootClampingEnabled&&this.isOvershooting())&&(this._startValue=this._endValue,this._currentState.position=this._endValue,this.setVelocity(0),isAtRest=!0);var notifyActivate=!1;this._wasAtRest&&(this._wasAtRest=!1,notifyActivate=!0);var notifyAtRest=!1;isAtRest&&(this._wasAtRest=!0,notifyAtRest=!0);for(var i=0,len=this._listeners.length;len>i;i++){var listener=this._listeners[i];notifyActivate&&listener.onSpringActivate&&listener.onSpringActivate(this),listener.onSpringUpdate&&listener.onSpringUpdate(this),notifyAtRest&&listener.onSpringAtRest&&listener.onSpringAtRest(this)}}},systemShouldAdvance:function(){return!this.isAtRest()||!this.wasAtRest()},wasAtRest:function(){return this._wasAtRest},isAtRest:function(){return Math.abs(this._currentState.velocity)<this._restSpeedThreshold&&this.getDisplacementDistanceForState(this._currentState)<=this._displacementFromRestThreshold},setAtRest:function(){return this._endValue=this._currentState.position,this._tempState.position=this._currentState.position,this._currentState.velocity=0,this},interpolate:function(alpha){this._currentState.position=this._currentState.position*alpha+this._previousState.position*(1-alpha),this._currentState.velocity=this._currentState.velocity*alpha+this._previousState.velocity*(1-alpha)},addListener:function(newListener){return this._listeners.push(newListener),this},removeListener:function(listenerToRemove){return removeFirst(this._listeners,listenerToRemove),this},removeAllListeners:function(){return this._listeners=[],this},currentValueIsApproximately:function(value){return Math.abs(this.getCurrentValue()-value)<=this.getRestDisplacementThreshold()}});var PhysicsState=function PhysicsState(){};extend(PhysicsState.prototype,{position:0,velocity:0});var SpringConfig=rebound.SpringConfig=function SpringConfig(tension,friction){this.tension=tension,this.friction=friction},OrigamiValueConverter={tensionFromOrigamiValue:function(oValue){return 3.62*(oValue-30)+194},origamiValueFromTension:function(tension){return(tension-194)/3.62+30},frictionFromOrigamiValue:function(oValue){return 3*(oValue-8)+25},origamiFromFriction:function(friction){return(friction-25)/3+8}};extend(SpringConfig,{fromOrigamiTensionAndFriction:function(oTension,oFriction){return new SpringConfig(OrigamiValueConverter.tensionFromOrigamiValue(oTension),OrigamiValueConverter.frictionFromOrigamiValue(oFriction))}}),SpringConfig.DEFAULT_ORIGAMI_SPRING_CONFIG=SpringConfig.fromOrigamiTensionAndFriction(40,7),extend(SpringConfig.prototype,{friction:0,tension:0}),rebound.MathUtil={mapValueInRange:function(value,fromLow,fromHigh,toLow,toHigh){return fromRangeSize=fromHigh-fromLow,toRangeSize=toHigh-toLow,valueScale=(value-fromLow)/fromRangeSize,toLow+valueScale*toRangeSize}};var concat=Array.prototype.concat,slice=Array.prototype.slice;"undefined"!=typeof exports?extend(exports,rebound):"undefined"!=typeof window&&(window.rebound=rebound)})(); /* Main Script */ function getCenteredCoordinates(a,b){var c=a.getBoundingClientRect(),d=b.getBoundingClientRect(),e=c.width/2+c.left,f=c.height/2+c.top;return{x:e-d.width/2,y:f-d.height/2}}function onSpringUpdate(a){if(!jQuery(draggableEl).hasClass("edge")){var b=a.getCurrentValue(),c=getCenteredCoordinates(magnet,draggableEl),d=draggableEl.getBoundingClientRect();x=rebound.MathUtil.mapValueInRange(b,0,1,c.x,springDestX||d.left),y=rebound.MathUtil.mapValueInRange(b,0,1,c.y,springDestY||d.top),moveToPos(x,y)}}function vibrate(a){navigator.vibrate&&navigator.vibrate(a||50)}function moveToPos(a,b){var c=draggableEl;a=a||x,b=b||y,c.style.transform=c.style.webkitTransform=c.style.MozTransform="translate("+Math.round(a,10)+"px, "+Math.round(b,10)+"px)"}function animate(){window.requestAnimationFrame(animate),moveToPos()}function isOverlapping(a,b){var c=a.getBoundingClientRect(),d=b.getBoundingClientRect();return!(c.top>d.bottom||c.right<d.left||c.bottom<d.top||c.left>d.right)}function moveMagnet(a,b){var c=12,d=jQuery("body").width()/2,e=jQuery("body").height(),g=a>d?(a-d)/d:-(d-a)/d,h=Math.min(1,(e-b)/(e/2));magnet.style.marginLeft=Math.round(c*g)+"px",magnet.style.marginBottom=Math.round(c*h)+"px"}function trackEvent(a){events.length>5&&events.pop(),events.push(a)}function move(a){var b=jQuery(a.target),c=!0;if(jQuery(".drag-wrapper .thing").hasClass("showContent")&&(b.hasClass("circle")||b.parents(".circle").length?(jQuery(".drag-wrapper .thing").removeClass("showContent"),jQuery(".drag-wrapper .thing .content").hide(400),x=xold,y=yold):c=!1),c){var d=draggableEl,e=magnet.getBoundingClientRect(),f=d.getBoundingClientRect();newX=this._posOrigin.x+a.pageX-this._touchOrigin.x,newY=this._posOrigin.y+a.pageY-this._touchOrigin.y,moveMagnet(newX+f.width/2,newY+f.height/2),startMoving();var g={top:newY,right:newX+f.width,bottom:newY+f.height,left:newX};if(overlapping=!(g.top>e.bottom||g.right<e.left||g.bottom<e.top||g.left>e.right),springDestX=newX,springDestY=newY,overlapping){var h=e.width/2+e.left,i=e.height/2+e.top;if(newX=h-f.width/2,newY=i-f.height/2,jQuery(d).hasClass("overlap")||(magnetSpring.setVelocity(5).setEndValue(0),spring.setCurrentValue(0).setAtRest(),vibrate(25)),jQuery(magnet).toggleClass("overlap",!0),jQuery(d).toggleClass("overlap",!0),!springSystem.getIsIdle())return}else jQuery(d).hasClass("overlap")&&(spring.setEndValue(1),magnetSpring.setCurrentValue(1).setAtRest()),jQuery(magnet).removeClass("overlap"),jQuery(d).removeClass("overlap");x=newX,y=newY}}function onTouchStart(a){var b=jQuery(a.target),c=!0;if(jQuery(".drag-wrapper .thing").hasClass("showContent")&&(b.hasClass("circle")||b.parents(".circle").length?(jQuery(".drag-wrapper .thing").removeClass("showContent"),jQuery(".drag-wrapper .thing .content").hide(400),x=xold,y=yold):c=!1),c){var d=this.getBoundingClientRect();startTouching(),this._touchOrigin={x:a.pageX,y:a.pageY},this._posOrigin={x:d.left,y:d.top}}}function onClick(a){var b=jQuery(a.target);if(b.hasClass("content")||b.parents(".content").length);else{var c=jQuery(window).width();jQuery(".drag-wrapper .thing .content:visible").length?(x=xold,y=yold):(xold=x,yold=y,x=c-74,y=20),jQuery(".drag-wrapper .thing .content").toggle(400),jQuery(this).toggleClass("showContent"),jQuery(".drag-wrapper .thing .content").css({"max-height":jQuery(window).height()-116})}}function getVelocity(){if(jQuery(".drag-wrapper .thing").hasClass("showContent"))return!1;var a=events[events.length-1];return{x:a.velocityX,y:a.velocityY}}function stopTouching(){jQuery("body").removeClass("touching")}function startTouching(){jQuery("body").addClass("touching")}function startMoving(){jQuery("body").addClass("moving")}function stopMoving(){jQuery("body").removeClass("moving"),magnet.style.marginBottom=magnet.style.marginLeft="0px"}function onTouchEnd(a){if(jQuery(".drag-wrapper .thing").hasClass("showContent"));else{var b=jQuery(draggableEl),c=getVelocity();b.hasClass("overlap")?(stopTouching(),stopMoving(),jQuery(".drag-wrapper").remove()):(flingWithVelocity(c),stopTouching(),stopMoving())}}function distanceOverTime(a,b){return a*b}function decelerate(a){return a>.01||a<-.01?a-.05*a:0}function addGravity(a){var b=-.00475;return b*a}function flingWithVelocity(a){var b=jQuery(window).width()/2;x=x<b?5:2*b-60,y<0&&(y=20)}navigator.vibrate=navigator.vibrate||navigator.webkitVibrate||navigator.mozVibrate||navigator.msVibrate,function(){jQuery("body").click(function(a){!jQuery(a.target).hasClass("facebook-messenger-avatar")&&jQuery(".drag-wrapper .thing .content:visible").length&&(jQuery(".drag-wrapper .thing .content").hide(400),c=xold,y=yold)});for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b,c){var d=(new Date).getTime(),e=Math.max(0,16-(d-a)),f=window.setTimeout(function(){b(d+e)},e);return a=d+e,f}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})}();var draggableEl=document.querySelector("[data-drag]"),magnet=document.querySelector(".magnet-zone"),springSystem=new rebound.SpringSystem,spring=springSystem.createSpring(100,7.5),magnetSpring=springSystem.createSpring(450,13),x=jQuery("body").width()-60,y=jQuery(window).height()/2+10,xold=0,yold=0,springDestX,springDestY,magnetX,magnetY,events=[];spring.setCurrentValue(1).setAtRest(),magnetSpring.setCurrentValue(1).setAtRest(),spring.addListener({onSpringUpdate:onSpringUpdate}),magnetSpring.addListener({onSpringUpdate:onSpringUpdate}),animate(),jQuery(draggableEl).on("movestart",onTouchStart).on("move",trackEvent).on("move",move).on("moveend",onTouchEnd).on("click",onClick);var timer; //]]> </script></b></span></code></pre></div></div></div></div></div><div style="text-align: center;"><span style="font-family: inherit;"><br /></span></div><span style="font-family: inherit;"><b>7. Simpan template dan lihat hasilnya.</b><br /><br />*Jika script tidak berfungsi, periksa kode html blog kalian, apakah terdapat script <b>ajax.googleapis</b> atau tidak? Jika tidak ada, masukkan script ini di atas kode </head>, lalu simpan template.</span></div><div id="post26065905696619900369" style="background-color: white;"><span style="font-family: inherit;"><br /></span></div><div id="post26065905696619900369" style="background-color: white;"><div dir="ltr" style="border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: inherit;"><b><script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script></b></span></code></pre></div></div></div></div><center><table border="1" style="border-collapse: collapse; border-spacing: 0px; max-width: 100%;"><tbody></tbody></table></center></div></div>

Cara Memasang Live Chat Box Messenger Facebook Pada Blogger

Berawal dari keinginan untuk membuat blog menjadi lebih friendly dan professional, saya mulai mencari referensi dari beberapa blog atau webs...

Baca selengkapnya »

Cara Mengubah Warna Address Bar Mobile Browser Pada Blogger dan Wordpress

<div dir="ltr" style="text-align: left;" trbidi="on"><div id="post18987675599777224301" style="background-color: white;"><div dir="ltr" trbidi="on"><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><br /></div><span style="font-family: Roboto_Regular, Roboto, Roboto Regular, Franklin Gothic Medium, Franklin Gothic Book, Lucida Sans, Lucida Sans Unicode, Helmet,Freesans, sans-serif;"><span style="font-family: inherit;">Warna address bar browser smartphone normalnya adalah berwarna putih dan abu-abu. Namun ketika kita mengunjungi beberapa blog di internet, ada beberapa blog yang membuat tampilannya berubah warna. Ada yang berwarna hitam, biru, merah atau warna yang lain.</span></span><br /><span style="font-family: Roboto_Regular, Roboto, Roboto Regular, Franklin Gothic Medium, Franklin Gothic Book, Lucida Sans, Lucida Sans Unicode, Helmet,Freesans, sans-serif;"><span style="font-family: inherit;"><br /></span></span><div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKnc64iUCdiAVNfWpnGaNNNfNzofcMJOm3X81_8P0o7RcKAfpWSoEnZtGl1kn4Hql8NylFm832zyEF0TKrQGaahXoeKgjU6pbZJtWDqew5eDvRdBal-0rzYpjgI0KmZhsft_z_4K9z97b/s1600/PicsArt_09-25-01.29.48.jpg" imageanchor="1" style="color: #3498db; margin-left: 1em; margin-right: 1em; outline: none; text-decoration-line: none;"><span style="font-family: inherit; font-size: xx-small;"></span></a></div></div><div><span style="font-family: inherit; font-size: xx-small;">Warna-warna tersebut sebetulnya bukan berasal dari bawaan browser melainkan bisa diatur melalui kode HTML yang ada pada template blog. Warna ini termasuk penting, karena selain sebagai penghias tampilan blog, menyertakan warna pada address bar juga mempermudah pengunjung mengingat ciri khas blog kita. Dalam pemberian warna ada baiknya disesuaikan dengan warna dominan template agar lebih serasi. </span></div><div><span style="font-family: inherit; font-size: xx-small;"><br /></span></div><div><span style="font-family: inherit; font-size: xx-small;">Berikut adalah tutorial cara mengubah warna pada address bar mobile browser yang bisa diterapkan pada Blogger maupun Wordpress.</span><br /><span style="font-family: inherit;"><span style="font-family: inherit; font-size: xx-small;"><br /></span> <span style="font-family: inherit; font-size: xx-small;">Langkah-langkah:</span></span><br /><span style="font-family: inherit;"><span style="font-family: inherit; font-size: xx-small;"><br /></span></span><span style="font-family: inherit; font-size: xx-small;">1. Copy kode HTML di bawah ini.</span></div><div><span style="font-family: inherit; font-size: xx-small;"><br /></span></div><div><div dir="ltr" style="border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: consolas, monaco, andale mono, courier new, courier, monospace;"><span style="font-family: inherit; font-size: xx-small;"><!-- URL Theme Color untuk Chrome, Firefox OS, Opera dan Vivaldi --> <meta name="theme-color" content="#001b2a" /> <!-- URL Theme Color untuk Windows Phone --> <meta name="msapplication-navbutton-color" content="#001b2a" /> <!-- URL Theme Color untuk iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="#001b2a" /></span></span></code></pre></div></div></div></div></div><div><span style="font-family: inherit; font-size: xx-small;">Ket: Kode di atas berfungsi untuk mengubah warna address bar pada browser Chrome, Firefox OS, Opera, Vivaldi, Windows Phone, dan IOS Safari.</span><br /><span style="font-family: inherit;"><span style="font-family: inherit; font-size: xx-small;"><br /></span> <span style="font-family: inherit; font-size: xx-small;">2. Untuk pengguna Blogger/Blogspot</span></span></div></div></div><div id="post28987675599777224301" style="background-color: white;"><div class="separator" style="clear: both; text-align: center;"></div><ul style="list-style: square outside; margin-left: 3em; padding: 0px;"><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Masuk ke menu Dashboard Blogger > Theme > Edit HTML </span></li><div id="spoiler"><div id="show" style="border: 1px solid white; margin: 5px; padding: 2px; width: 442.899px;"><span style="font-family: inherit; font-size: xx-small;"></span></div></div><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Letakkan kursor di dalam kotak</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Klik Ctrl + F dan masukkan kata </head> di kotak pencarian, lalu tekan Enter.</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Paste kode yang telah kita copy tadi sebelum kode </head></span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Ganti kode ini <span style="background-color: lime; color: #0077aa; white-space: pre;">#001b2a</span> dengan kode warna yang diinginkan.</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Save Theme / Simpan Tema</span></li></ul><span style="font-family: inherit;"><span style="font-family: inherit; font-size: xx-small;"><br /></span> <span style="font-family: inherit; font-size: xx-small;">3. Untuk Pengguna Wordpress</span></span><br /><ul style="list-style: square outside; margin-left: 3em; padding: 0px;"><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Masuk ke menu Appearance > Editor</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Pilih Theme Header di bagian kanan</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Paste kode di antara tag <head> dan </head></span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Ganti kode ini <span style="background-color: lime; color: #0077aa; white-space: pre;">#001b2a</span> sesuai keinginan.</span></li><li style="margin: 5px 0px;"><span style="font-family: inherit; font-size: xx-small;">Simpan</span></li></ul><ul style="list-style: square outside; margin-left: 3em; padding: 0px;"></ul><span style="font-family: inherit; font-size: xx-small;">Cara Mengetahui Kode dari Sebuah Warna</span><br /><span style="font-family: inherit; font-size: xx-small;">Untuk mengetahui kode dari sebuah warna, kalian bisa menggunakan generator warna yang telah saya sediakan di bawah ini. Caranya tinggal klik pada roda warna yang berputar. Lalu akan muncul kode di 4 kotak sebelah kanan. Copy salah satu kode sebagai pengganti.</span></div></div>

Cara Mengubah Warna Address Bar Mobile Browser Pada Blogger dan Wordpress

Warna address bar browser smartphone normalnya adalah berwarna putih dan abu-abu. Namun ketika kita mengunjungi beberapa blog di internet, a...

Baca selengkapnya »

Cara Membuat Popular Post Keren Valid Amp

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2z3RjC9ydvZOx4HAdx-yQekM82yVMOdv6jxwzdch4NnzJe3KGbE_tQGNxqiaWSAx8MkclWdwYpn85D0s3NHw6XMiAgfb3BxZKaELFEYoxu99svAlkdIsOVBrFS21Tkle-1-9z-dSVFSpq/s1600/Screenshot_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="229" data-original-width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2z3RjC9ydvZOx4HAdx-yQekM82yVMOdv6jxwzdch4NnzJe3KGbE_tQGNxqiaWSAx8MkclWdwYpn85D0s3NHw6XMiAgfb3BxZKaELFEYoxu99svAlkdIsOVBrFS21Tkle-1-9z-dSVFSpq/s1600/Screenshot_4.png" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><br /><div style="text-align: left;"><span style="background-color: white; font-size: 16px;">Popular Post Yang Kali Ini Kita Akan Pelajari Yaitu Cara Membuat Popular Post Untuk Template Amp .. Karna Popular Post Template Non Amp Sudah Biasa Jadi Saya Disini Akan Membahas Tentang Bagaimana Caranya Kita Membuat Popular Post Keren Untuk Template Amp Atau Valid Amp .. Sebelum Kita Membahas Ke Tutorial Nya Kita Harus Memahami Terlebih Dahulu Template AMP .. Dan Tentu Saja Kita Sebelum Membuat Popular Post Valid Amp Template Yang Kita Gunakan Harus Support Amp .. Karna Apabila Template Kita Tidak Valid Amp Maka Tutorial Yang Kita Bahas Ini Hanya Untuk Template Amp Saja .. Langsung Saja Ke Tutorial Nyaa</span><br /><span style="background-color: white; font-size: 16px;"><br /></span></div></div></div><b>Cara Pertama : </b><br /><div style="background-color: white; border: 0px; box-sizing: border-box; display: inline; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><ul style="border: 0px; box-sizing: border-box; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px; vertical-align: baseline;"><li style="border: 0px; box-sizing: border-box; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0.5em 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: inherit;"><span style="font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">Masuk Ke Template > Edit Html > Cari Kode</span><span style="font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit;"><b><span style="color: orange;"> </span></b></span></span><b><span style="color: orange;">]]></b:skin></span></b><span style="font-family: inherit;"><span style="font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;"> > Dan Simpan Kode Di Bawah Ini Tepat Di Atas Kode </span></span><b style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit;"><span style="color: orange;"></style></span></b></li></ul></div><ul style="text-align: left;"></ul><div dir="ltr" style="background-color: white; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="-webkit-user-select: text; background-color: #e20202; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 0px; counter-reset: linenumber 0; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: "consolas" , "monaco" , "andale mono" , "courier new" , "courier" , monospace;"><span style="font-size: 12px;"><b>PopularPosts .widget-content{padding:0;box-sizing:border-box}<br /><br />.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}<br /><br />.PopularPosts .widget-content ul li {<br /><br /> margin: 0;<br /><br /> padding: 10px 0 10px 60px;<br /><br /> position: relative;<br /><br /> overflow: hidden;<br /><br /> border-top: 1px solid #2b2b2b;<br /><br /> border-bottom: 1px solid #111;<br /><br />}<br /><br />.PopularPosts .widget-content ul li:last-child{border-bottom:none}<br /><br />.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}<br /><br />.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}<br /><br />.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}<br /><br />.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}<br /><br />.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}<br /><br />.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}<br /><br />.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}<br /><br />.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}<br /><br />.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}<br /><br />.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}<br /><br /><br />.sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}<br /><br />.PopularPosts .widget-content{padding:0;box-sizing:border-box}<br /><br />.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}<br /><br />.PopularPosts .widget-content ul li {<br /><br /> margin: 0;<br /><br /> padding: 10px 0 10px 60px;<br /><br /> position: relative;<br /><br /> overflow: hidden;<br /><br /> border-top: 1px solid #2b2b2b;<br /><br /> border-bottom: 1px solid #111;<br /><br />}<br /><br />.PopularPosts .widget-content ul li:last-child{border-bottom:none}<br /><br />.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}<br /><br />.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}<br /><br />.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}<br /><br />.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}<br /><br />.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}<br /><br />.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}<br /><br />.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}<br /><br />#blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}<br /><br />.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}<br /><br />.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}<br /><br />.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}<br /><br />.sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}<br /><br />.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}</b></span></span></code></pre></div></div></div></div><ul style="background-color: white; border: 0px; box-sizing: border-box; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px; vertical-align: baseline;"><li style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0.5em 0px; padding: 0px; vertical-align: baseline;"><span style="font-weight: inherit;">Selanjutnya cari kode 'sidebar-wrapper' > Letakan Kode Di Bawah Ini Tepat Di Bawah Kode </span><b><span style="color: orange;"><b:section class='sidebar' id='sidebar' showaddelement='yes'> </span></b></li></ul><div><div dir="ltr" style="background-color: white; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><br /><span style="color: #fafafa; font-family: "consolas" , "monaco" , "andale mono" , "courier new" , "courier" , monospace;"><span style="font-size: 12px;"><b><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'><br /><br /> <b:widget-settings><br /><br /> <b:widget-setting name='numItemsToShow'>10</b:widget-setting><br /><br /> <b:widget-setting name='showThumbnails'>true</b:widget-setting><br /><br /> <b:widget-setting name='showSnippets'>true</b:widget-setting><br /><br /> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting><br /><br /> </b:widget-settings><br /><br /> <b:includable id='main'><br /><br /> <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if><br /><br /> <div class='widget-content popular-posts'><br /><br /> <ul><br /><br /> <b:loop values='data:posts' var='post'><br /><br /> <li><br /><br /> <b:if cond='!data:showThumbnails'><br /><br /> <b:if cond='!data:showSnippets'><br /><br /> <!-- (1) No snippet/thumbnail --><br /><br /> <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><br /><br /> <b:else/><br /><br /> <!-- (2) Show only snippets --><br /><br /> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><br /><br /> <div class='item-snippet'><data:post.snippet/></div><br /><br /> </b:if><br /><br /> <b:else/><br /><br /> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --><br /><br /> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'><br /><br /> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'><br /><br /> <div class='item-thumbnail'><br /><br /> <a expr:href='data:post.href'><br /><br /> <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'><br /><br /> <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/><br /><br /> </b:with><br /><br /> </a><br /><br /> </div><br /><br /> <b:else/><br /><br /> <div class='item-thumbnail'><br /><br /> <a expr:href='data:post.href' expr:title='data:post.title'><br /><br /> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjET9gFFzcBiipxt87HPtEAbwvMwISNgd0YKMZyQGbmmADasznQdqjIYp-2C6-E051mnMR4k3n8Ra7LJs50DvvHdWcMHaIOfQ2WA2gYe6KDKUSIlMkIXI_ZXBa1VuNnis8l4WvapwclhlfH/s100/no-thumbnail.png' width='300'/><br /><br /> </a><br /><br /> </div><br /><br /> </b:if><br /><br /> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><br /><br /> <b:if cond='data:showSnippets'><br /><br /> <div class='item-snippet'><data:post.snippet/></div><br /><br /> </b:if><br /><br /> </div><br /><br /> <div class='clear'/><br /><br /> </b:if><br /><br /> </li><br /><br /> </b:loop><br /><br /> </ul><br /><br /> </div><br /><br /></b:includable><br /><br /> </b:widget></b></span></span><br /></code><div><br /></div><br /></pre></div></div></div></div></div><div><ul style="background-color: white; border: 0px; box-sizing: border-box; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px; vertical-align: baseline;"><li style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0.5em 0px; padding: 0px; vertical-align: baseline;">Langkah Terakhir Cari Kode <b:includable id='main'>  Letakan Kode Di Bawah Ini Tepat Di Bawahnya</li></ul></div><ul style="background-color: white; border: 0px; box-sizing: border-box; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px; vertical-align: baseline;"></ul><div dir="ltr" style="background-color: white; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div dir="ltr" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-stretch: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #e20202; border-radius: 4px; border: 0px; font-stretch: inherit; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline; word-wrap: break-word;" title="HTML"><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-stretch: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><span style="color: #fafafa; font-family: "consolas" , "monaco" , "andale mono" , "courier new" , "courier" , monospace;"><span style="font-size: 12px;"><b><b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if><br /><br /> <div class='widget-content popular-posts'><br /><br /> <ul><br /><br /> <b:loop values='data:posts' var='post'><br /><br /> <li><br /><br /> <b:if cond='!data:showThumbnails'><br /><br /> <b:if cond='!data:showSnippets'><br /><br /> <!-- (1) No snippet/thumbnail --><br /><br /> <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><br /><br /> <b:else/><br /><br /> <!-- (2) Show only snippets --><br /><br /> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><br /><br /> <div class='item-snippet'><data:post.snippet/></div><br /><br /> </b:if><br /><br /> <b:else/><br /><br /> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --><br /><br /> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'><br /><br /> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'><br /><br /> <div class='item-thumbnail'><br /><br /> <a expr:href='data:post.href'><br /><br /> <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'><br /><br /> <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/><br /><br /> </b:with><br /><br /> </a><br /><br /> </div><br /><br /> <b:else/><br /><br /> <div class='item-thumbnail'><br /><br /> <a expr:href='data:post.href' expr:title='data:post.title'><br /><br /> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjET9gFFzcBiipxt87HPtEAbwvMwISNgd0YKMZyQGbmmADasznQdqjIYp-2C6-E051mnMR4k3n8Ra7LJs50DvvHdWcMHaIOfQ2WA2gYe6KDKUSIlMkIXI_ZXBa1VuNnis8l4WvapwclhlfH/s100/no-thumbnail.png' width='300'/><br /><br /> </a><br /><br /> </div><br /><br /> </b:if><br /><br /> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><br /><br /> <b:if cond='data:showSnippets'><br /><br /> <div class='item-snippet'><data:post.snippet/></div><br /><br /> </b:if><br /><br /> </div><br /><br /> <div class='clear'/><br /><br /> </b:if><br /><br /> </li><br /><br /> </b:loop><br /><br /> </ul><br /><br /> </div></b></span></span></code><code class=" language-markup" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; color: inherit; direction: ltr; display: block; font-family: Consolas, Monaco, ' Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: 16px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span class="line-numbers-rows" style="border: 0px; color: #e9e9e9; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 48px; left: -3.5em; line-height: inherit; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 3em;"><span style="border: 0px; display: block; 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;"></span></span></code></pre></div></div></div></div><ul style="text-align: left;"><li>Simpan Template!.</li></ul></div>Demikianlah Tutorial Blogger kali ini, <span style="background-color: white; font-size: 16px;">Sekian </span><b style="background-color: white; border: 0px; box-sizing: border-box; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; transition: color 0.2s; vertical-align: baseline;">Tutorial Cara Membuat Popular Post Keren Di Template Amp</b><span style="background-color: white; font-size: 16px;"> Semoga Bermanfaat</span></div>

Cara Membuat Popular Post Keren Valid Amp

Popular Post Yang Kali Ini Kita Akan Pelajari Yaitu Cara Membuat Popular Post Untuk Template Amp .. Karna Popular Post Template Non Amp Suda...

Baca selengkapnya »