// API callback
relpostimgcuplik({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-4562681011204589043"},"updated":{"$t":"2023-11-11T06:59:51.668+07:00"},"category":[{"term":"Technology"},{"term":"windows"},{"term":"linux"},{"term":"tools"},{"term":"cyber security"},{"term":"berita"},{"term":"network"},{"term":"networking"},{"term":"software"},{"term":"security"},{"term":"Tekno"},{"term":"Tutorial"},{"term":"Webserver"},{"term":"Server"},{"term":"Video"},{"term":"Web Design"},{"term":"Triks"},{"term":"android"},{"term":"smartphones"},{"term":"Graphic Design"},{"term":"vulnerabilities"},{"term":"Music"},{"term":"download"},{"term":"Motion Design"},{"term":"Sports"},{"term":"learn"},{"term":"programing"},{"term":"webprograming"},{"term":"Database"},{"term":"Kali Linux"},{"term":"WebSecurity"},{"term":"distro"},{"term":"virus"},{"term":"Entertainment"},{"term":"Event"},{"term":"Foods"},{"term":"Game"},{"term":"Internet"},{"term":"Komunitas"},{"term":"Movies"},{"term":"Online Tools"},{"term":"People"},{"term":"Title"},{"term":"antivirus"},{"term":"app"},{"term":"blogger"},{"term":"diretas"},{"term":"fedora"},{"term":"internet sehat"},{"term":"malware"},{"term":"pemula"},{"term":"python"},{"term":"ubuntu"},{"term":"wireless"},{"term":"wordpress"},{"term":"Acara Nasional"},{"term":"Aceh"},{"term":"Artikel"},{"term":"City"},{"term":"Domain"},{"term":"Fashion"},{"term":"Google Maps"},{"term":"Print Design"},{"term":"Short"},{"term":"Test"},{"term":"Unik"},{"term":"Update"},{"term":"Url Short"},{"term":"acehprov"},{"term":"airfiber"},{"term":"chrome"},{"term":"cloud"},{"term":"data"},{"term":"ddos"},{"term":"debian"},{"term":"facebook"},{"term":"games"},{"term":"google"},{"term":"humas aceh"},{"term":"instagram"},{"term":"instragram"},{"term":"jaringan"},{"term":"materi"},{"term":"mysql"},{"term":"nmap"},{"term":"powerbeam"},{"term":"programer"},{"term":"proxmox"},{"term":"seo"},{"term":"ubiquiti"},{"term":"ubnt"},{"term":"uuite"},{"term":"whatsapp"},{"term":"winbox"},{"term":"wine"}],"title":{"type":"text","$t":"#KomunitasBungker"},"subtitle":{"type":"html","$t":"BUNGKER"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/www.bungker.co.id\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4562681011204589043\/posts\/default\/-\/blogger?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.bungker.co.id\/search\/label\/blogger"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Bungker Corp"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14576039512366647631"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"2"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"50"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-4562681011204589043.post-2358202574402734054"},"published":{"$t":"2016-09-24T19:08:00.002+07:00"},"updated":{"$t":"2016-09-24T19:15:11.133+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Technology"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tekno"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial"}],"title":{"type":"text","$t":"Floating Social Bookmark dengan Efek Easing"},"content":{"type":"html","$t":"\u003Cspan class=\"awal\"\u003EJ\u003C\/span\u003Eika Anda perhatikan \u003Ca href=\"http:\/\/www.maskolis.com\/2013\/03\/2-simple-template-blogger-responsive.html\" rel=\"nofollow\" target=\"_blank\"\u003Edua template responsive yang saya bagikan kemarin\u003C\/a\u003E, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu).\u0026nbsp;\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003C\/div\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-2QBZfEy5_so\/V-ZuM9tbFmI\/AAAAAAAABQY\/0K7xD6sONqUzUTKx6ci-NdouHh0cwiJEwCLcB\/s1600\/floating%2Bsocial%2Bbookmark.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"436\" src=\"https:\/\/1.bp.blogspot.com\/-2QBZfEy5_so\/V-ZuM9tbFmI\/AAAAAAAABQY\/0K7xD6sONqUzUTKx6ci-NdouHh0cwiJEwCLcB\/s640\/floating%2Bsocial%2Bbookmark.jpg\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/pakdhejohnydemo.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EDEMO\u003C\/b\u003E\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\nDengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada \u003Ci\u003Ejquery-ui.min\u003C\/i\u003E. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template \u003Ca href=\"http:\/\/www.maskolis.com\/2013\/03\/2-simple-template-blogger-responsive.html\" rel=\"nofollow\" target=\"_blank\"\u003EJohny Ribet\u003C\/a\u003E atau \u003Ca href=\"http:\/\/www.maskolis.com\/2013\/03\/2-simple-template-blogger-responsive.html\" rel=\"nofollow\" target=\"_blank\"\u003EPakdhe Johny\u003C\/a\u003E hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media \u003Cb\u003EPinterest\u003C\/b\u003E dan \u003Cb\u003EYoutube\u003C\/b\u003E agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :\u003C\/div\u003E\n\u003Col\u003E\n\u003Cli\u003ELogin ke \u003Cb\u003EBlogger\u003C\/b\u003E\u003C\/li\u003E\n\u003Cli\u003EMasuk ke \u003Cb\u003ETemplate\u003C\/b\u003E \u0026gt;\u0026gt; \u003Cb\u003EEdit HTML\u003C\/b\u003E (centang \u003Ci\u003Eexpand widget templates\u003C\/i\u003E)\u003C\/li\u003E\n\u003Cli\u003ELetakkan kode CSS di bawah ini diatas \u003Cb style=\"color: #cc0000;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E :\u003Cbr \/\u003E\n\u003Cdiv style=\"margin: 5px;\"\u003E\n\u003Cdiv class=\"bigfont\" style=\"margin-bottom: 2px;\"\u003E\n\u003Cinput onclick=\"if \n(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n != '') { \nthis.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n = ''; this.innerText = ''; this.value = 'Tutup'; } else { \nthis.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n = 'none'; this.innerText = ''; this.value = 'Buka'; }\" style=\"margin: 0px; padding: 0px; width: 60px;\" type=\"button\" value=\"Buka\" \/\u003E\u003C\/div\u003E\n\u003Cdiv style=\"background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;\"\u003E\n\u003Cdiv\u003E\n.social-buttons {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; position: fixed; \u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; top: 130px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 45px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; z-index: 9999;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; left: 0;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; right: 0;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #twitter-btn .social-icon, \u003Cbr \/\u003E\n.social-buttons #facebook-btn .social-icon, \u003Cbr \/\u003E\n.social-buttons #google-btn .social-icon, \u003Cbr \/\u003E\n.social-buttons #rss-btn .social-icon,\u003Cbr \/\u003E\n.social-buttons #pinterest-btn .social-icon,\u003Cbr \/\u003E\n.social-buttons #youtube-btn .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #33353B;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-image: url(http:\/\/1.bp.blogspot.com\/-zt3csy2DqGo\/U661h1iTakI\/AAAAAAAAAFc\/v5tUjZIJDHs\/s1600\/mas-icons.png);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #facebook-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: right 10px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #twitter-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: right -35px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #google-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: right -127px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #rss-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: right -80px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #pinterest-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -177px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left #youtube-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -223px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #facebook-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 12px 10px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #twitter-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -35px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #google-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 10px -127px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #rss-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -80px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #pinterest-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -177px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right #youtube-btn span {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-position: 11px -223px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #facebook-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #3B5998;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #twitter-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #62BDB2;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #google-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #DB4A39;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #rss-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #FF8B0F;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #pinterest-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #D43638;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons #youtube-btn:hover .social-icon {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #C4302B;\u003Cbr \/\u003E\n} \u003Cbr \/\u003E\n.social-buttons a:hover .social-text {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left .social-icon { \u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; -moz-transition: background-color 0.4s ease-in 0s;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; -webkit-transition: background-color 0.4s ease-in 0s;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-repeat: no-repeat;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 43px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-bottom: 2px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 43px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-left .social-text {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; display: none;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 1em;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 11px 40px 11px 0px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; white-space: nowrap;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right .social-icon { \u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; -moz-transition: background-color 0.4s ease-in 0s;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; -webkit-transition: background-color 0.4s ease-in 0s;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background-repeat: no-repeat;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 43px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-bottom: 2px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 43px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.button-right .social-text {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; display: none;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 80%;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 11px 0 11px 40px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; white-space: nowrap;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.social-buttons .social-text {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #FFFFFF;\u003Cbr \/\u003E\n}\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/li\u003E\n\u003Cli\u003EBerikutnya penambahan jquery dan javascript, masih di \u003Cb\u003EEdit HTML\u003C\/b\u003E letakkan kode berikut sebelum \u003Cb style=\"color: #cc0000;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E :\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: left;\"\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u003Cdiv style=\"color: blue;\"\u003E\n\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003C\/div\u003E\n\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.9.2\/jquery-ui.min.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; $(window).load(function(){\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(\u0026amp;#39;.social-buttons .social-icon\u0026amp;#39;).mouseenter(function(){\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(this).stop();\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(this).animate({width:\u0026amp;#39;160\u0026amp;#39;}, 500, \u0026amp;#39;easeOutBounce\u0026amp;#39;,function(){});\u0026nbsp; \u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(\u0026amp;#39;.social-buttons .social-icon\u0026amp;#39;).mouseleave(function(){\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(this).stop();\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; $(this).animate({width:\u0026amp;#39;43\u0026amp;#39;}, 500, \u0026amp;#39;easeOutBounce\u0026amp;#39;,function(){});\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\n\u003C\/div\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\nUntuk jquery library \u003Cspan style=\"color: blue;\"\u003Ewarna biru\u003C\/span\u003E diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.\u003C\/div\u003E\n\u003C\/li\u003E\n\u003Cli\u003ESelanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum \u003Cb style=\"color: #cc0000;\"\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E :\u003Cbr \/\u003E\n\u003Cdiv style=\"margin: 5px;\"\u003E\n\u003Cdiv class=\"bigfont\" style=\"margin-bottom: 2px;\"\u003E\n\u003Cinput onclick=\"if \n(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n != '') { \nthis.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n = ''; this.innerText = ''; this.value = 'Tutup'; } else { \nthis.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display\n = 'none'; this.innerText = ''; this.value = 'Buka'; }\" style=\"margin: 0px; padding: 0px; width: 60px;\" type=\"button\" value=\"Buka\" \/\u003E\u003C\/div\u003E\n\u003Cdiv style=\"background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;\"\u003E\n\u003Cdiv\u003E\n\u0026lt;div class='social-buttons button-right hidden-phone hidden-tablet'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='https:\/\/www.facebook.com\/\u003Cb style=\"color: blue;\"\u003Eyour FB\u003C\/b\u003E' id='facebook-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u0026lt;span class='social-text'\u0026gt;Follow via Facebook\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='https:\/\/twitter.com\/\u003Cb style=\"color: blue;\"\u003Eyour twitter\u003C\/b\u003E' id='twitter-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u0026lt;span class='social-text'\u0026gt;Follow via Twitter\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='https:\/\/plus.google.com\/\u003Cb style=\"color: blue;\"\u003Eyour G+\u003C\/b\u003E' id='google-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u0026lt;span class='social-text'\u0026gt;Follow via Google\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='http:\/\/pinterest.com\/\u003Cb style=\"color: blue;\"\u003Eyour ID\u003C\/b\u003E' id='pinterest-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;span class='social-text'\u0026gt;Follow via Pinterest\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='https:\/\/www.youtube.com\/user\/\u003Cb style=\"color: blue;\"\u003Eyour ID\u003C\/b\u003E' id='youtube-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u0026lt;span class='social-text'\u0026gt;Follow via Youtube\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a class='itemsocial' href='http:\/\/feeds.feedburner.com\/\u003Cb style=\"color: blue;\"\u003Eyour feed\u003C\/b\u003E' id='rss-btn' target='_blank'\u0026gt;\u0026lt;span class='social-icon'\u0026gt;\u0026lt;span class='social-text'\u0026gt;Follow via RSS\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\nGanti tulisan \u003Cb style=\"color: blue;\"\u003Ewarna biru\u003C\/b\u003E diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.\u003C\/div\u003E\n\u003C\/li\u003E\n\u003Cli\u003ETerakhir, \u003Cb\u003ESave Templates\u003C\/b\u003E\u003C\/li\u003E\n\u003C\/ol\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\nNah itu tadi tutorial membuat \u003Cb\u003Efloating social bookmark dengan efek easing\u003C\/b\u003E menjawab pertanyaaan \u003Ca href=\"http:\/\/www.blogger.com\/profile\/01778956899520738845\" rel=\"nofollow\" target=\"_blank\"\u003EMuhammad Farhan\u003C\/a\u003E. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, \u003Ci\u003Ebut please do not spamming.\u003C\/i\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\nSekian dan semoga ada manfaatnya\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSumber :\u0026nbsp;http:\/\/www.maskolis.com\/2013\/03\/floating-social-bookmark-dengan-efek.html\u003C\/div\u003E\n\u003Cdiv style=\"clear: both;\"\u003E\n\u003C\/div\u003E\n\u003Cdiv class=\"blogger-post-footer\"\u003Ehttp:\/\/feeds.feedburner.com\/co\/mFdp\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/www.bungker.co.id\/feeds\/2358202574402734054\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/www.bungker.co.id\/2016\/09\/floating-social-bookmark-dengan-efek.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4562681011204589043\/posts\/default\/2358202574402734054"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4562681011204589043\/posts\/default\/2358202574402734054"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.bungker.co.id\/2016\/09\/floating-social-bookmark-dengan-efek.html","title":"Floating Social Bookmark dengan Efek Easing"}],"author":[{"name":{"$t":"Bungker Corp"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14576039512366647631"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-2QBZfEy5_so\/V-ZuM9tbFmI\/AAAAAAAABQY\/0K7xD6sONqUzUTKx6ci-NdouHh0cwiJEwCLcB\/s72-c\/floating%2Bsocial%2Bbookmark.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-4562681011204589043.post-4752358253540368934"},"published":{"$t":"2016-06-29T22:56:00.003+07:00"},"updated":{"$t":"2016-06-29T22:58:23.978+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Online Tools"}],"title":{"type":"text","$t":"​Online blogging\/microblogging tools"},"content":{"type":"html","$t":"Online blogging\/microblogging tools\n\n\u003Cbr \/\u003E\n\u003Cdiv class=\"paragraph\" style=\"text-align: left;\"\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/blogger.com\/\" target=\"_blank\" title=\"\"\u003EBlogger\u003C\/a\u003E\u0026nbsp;(\u003Ca href=\"https:\/\/chrome.google.com\/webstore\/detail\/blogger\/lejliakmhcfhakneflmicaoikhbicggc?hl=en\" target=\"_blank\" title=\"\"\u003EChrome\u003C\/a\u003E)\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/edublogs.com\/\" target=\"_blank\" title=\"\"\u003EEdublogs\u003C\/a\u003E\u0026nbsp;(\u003Ca href=\"https:\/\/chrome.google.com\/webstore\/detail\/edublogs\/dfhhnknjldpgajoonckfaljllpdgmopg?hl=en\" target=\"_blank\" title=\"\"\u003EChrome\u003C\/a\u003E)\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/jottit.com\/\" target=\"_blank\"\u003EJottit\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/penzu.com\/\" target=\"_blank\" title=\"\"\u003EPenzu\u003C\/a\u003E\u0026nbsp;(\u003Ca href=\"https:\/\/chrome.google.com\/webstore\/detail\/penzu\/khgpedpfmjojllfmmhfabemdelhncneo?hl=en\" target=\"_blank\" title=\"\"\u003EChrome\u003C\/a\u003E)\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/tumblr.com\/\" target=\"_blank\" title=\"\"\u003ETumblr\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/twitter.com\/\" target=\"_blank\" title=\"\"\u003ETwitter\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/wordpress.com\/\" target=\"_blank\" title=\"\"\u003EWordpress\u003C\/a\u003E\u0026nbsp;(\u003Ca href=\"https:\/\/chrome.google.com\/webstore\/detail\/wordpresscom\/khjnjifipfkgglficmipimgjpbmlbemd?hl=en\" target=\"_blank\" title=\"\"\u003EChrome\u003C\/a\u003E)\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003C\/div\u003E\n\u003Cdiv class=\"blogger-post-footer\"\u003Ehttp:\/\/feeds.feedburner.com\/co\/mFdp\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/www.bungker.co.id\/feeds\/4752358253540368934\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/www.bungker.co.id\/2016\/06\/online-bloggingmicroblogging-tools.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4562681011204589043\/posts\/default\/4752358253540368934"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4562681011204589043\/posts\/default\/4752358253540368934"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.bungker.co.id\/2016\/06\/online-bloggingmicroblogging-tools.html","title":"​Online blogging\/microblogging tools"}],"author":[{"name":{"$t":"Bungker Corp"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14576039512366647631"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"thr$total":{"$t":"0"}}]}});