Cara Membuat Menu Navigasi Header Responsive Terbaru

<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 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 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"><b>Menu Navigasi </b>adalah merupakan sebuah <b>Tab Menu</b> yang berisi sebuah petunjuk arahan untuk pengunjung dan kategori dari situs, yang berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. <b>Menu Navigasi</b> ini sendiri biasanya berada pada bagian <b>Header</b>. Menu Navigasi ini sangat diperlukan diterapkan di blogger anda, karena memudahkan pengunjung dalam surfing semua isi blog anda.<b> Menu Navigasi</b> ini sangat Responsive, kenapa responsive? Menu Navigasi ini tidak akan hancur atau berantakan ketika anda sedang melihatnya di <b>Smartphone/Desktop - Tablet</b>. Karena <b>Menu Navigasi</b> ini menempel ke arah kiri, dan dengan menu <b>Dropdown</b>.<br /><b><br /></b><b>Screenshoot :</b><br /><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVecHO-VUDLRiT0lpGGikT3n2oPruoFURP3eJr8D4TXFy0SiW9fe7YbQx8mnouRJdxFFb5J3q7PLrvOJ_BqPG9txDYVo7SJvf-kYCNZzJd5M76WYCgqMK1r_3yfWJhdwqG8b5GzTwi8VI/s1600/navigasion-menu-responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="540" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVecHO-VUDLRiT0lpGGikT3n2oPruoFURP3eJr8D4TXFy0SiW9fe7YbQx8mnouRJdxFFb5J3q7PLrvOJ_BqPG9txDYVo7SJvf-kYCNZzJd5M76WYCgqMK1r_3yfWJhdwqG8b5GzTwi8VI/s640/navigasion-menu-responsive.jpg" width="640" /></a></div></div><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Menu Navigasi Header Responsive Terbaru</span></b></div><div style="text-align: left;"><b><br /></b></div><div style="text-align: left;"><b>Cara Pertama : </b><br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login</div><div style="text-align: left;">2. Dashboard - Template</div><div style="text-align: left;">3. Edit HTML</div><div style="text-align: left;"><b><br /></b></div><div style="text-align: left;"><b>Proses Pembuatan : </b><br /><br />1. Temukan kode <Gunakan CTRL+F Untuk Memudahkan Pencarian> Temukan kode<br /><b><span style="color: red;"><i>]]></b:skin></i></span> </b>atau<b> <span style="color: red;"><i></style></i></span></b></div><div style="text-align: left;">2. Copy&paste kode berikut ini, dan letakkan diatas kode <b><i><span style="color: red;">]]></b:skin></span></i> </b>atau<b> <span style="color: red;"><i></style></i></span></b></div></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Navigasion Menu */<br />body {<br /> padding-top: 50px;<br />}<br />* {<br /> margin: 0;<br /> padding: 0;<br /> -webkit-box-sizing: border-box;<br /> -moz-box-sizing: border-box;<br /> -ms-box-sizing: border-box;<br /> box-sizing: border-box;<br />}<br />navbar a { text-decoration: none !important; }<br />.navigasion-menu {<br /> display: block;<br /> margin-bottom: 15px 0;<br /> background: #3498db;<br /> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> z-index: 120;<br />}<br />.navigasion-menu ul {<br /> list-style-type: none;<br /> margin: 0;<br /> padding: 0;<br /> display: block;<br />}<br />.navigasion-menu li {<br /> list-style-type: none;<br /> margin: 0;<br /> padding: 0;<br /> display: inline-block;<br /> position: relative;<br /> font-size: 14px;<br /> color: #def1f0;<br />}<br />.navigasion-menu li a {<br /> padding: 15px 20px;<br /> font-size: 14px;<br /> color: #def1f0;<br /> display: inline-block;<br /> outline: 0;<br /> font-weight: 400;<br />}<br />.navigasion-menu li:hover ul.dropdown { display: block; }<br />.navigasion-menu li ul.dropdown {<br /> position: absolute;<br /> display: none;<br /> width: 200px;<br /> background: #2980b9;<br /> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> padding-top: 0;<br /> z-index: 110;<br />}<br />.navigasion-menu li ul.dropdown li {<br /> display: block;<br /> list-style-type: none;<br />}<br />.navigasion-menu li ul.dropdown li a {<br /> padding: 15px 20px;<br /> font-size: 15px;<br /> color: #fff;<br /> display: block;<br /> font-weight: 400;<br />}<br />.navigasion-menu li ul.dropdown li:last-child a { border-bottom: none; }<br />.navigasion-menu li:hover a {<br /> background: #2980b9;<br /> color: #fff !important;<br />}<br />.navigasion-menu li:first-child:hover a { border-radius: 3px 0 0 3px; }<br />.navigasion-menu li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }<br />.navigasion-menu li ul.dropdown li:first-child:hover a { border-radius: 0; }<br />.navigasion-menu li:hover .arrow-down { border-top: 5px solid #fff; }<br />.arrow-down {<br /> width: 0;<br /> height: 0;<br /> border-left: 5px solid transparent;<br /> border-right: 5px solid transparent;<br /> border-top: 5px solid #def1f0;<br /> position: relative;<br /> top: 15px;<br /> right: -5px;<br /> content: '';<br />}<br />.title-mobile {<br /> display: none;<br />}<br /> @media only screen and (max-width:900px) {<br />.navigasion-menu {<br /> background: #fff;<br /> width: 200px;<br /> height: 100%;<br /> display: block;<br /> position: fixed;<br /> left: -200px;<br /> top: 0px;<br /> -webkit-transition: left 0.25s ease;<br /> -moz-transition: left 0.25s ease;<br /> -ms-transition: left 0.25s ease;<br /> -o-transition: left 0.25s ease;<br /> transition: left 0.25s ease;<br /> margin: 0;<br /> border: 0;<br /> border-radius: 0;<br /> overflow-y: auto;<br /> overflow-x: hidden;<br /> height: 100%;<br /> z-index: 105;<br />}<br />.title-mobile {<br /> position: fixed;<br /> display: block;<br /> top: 10px;<br /> font-size: 20px;<br /> left: 100px;<br /> right: 100px;<br /> text-align: center;<br /> color: #FFF !important;<br />}<br />.navigasion-menu.visible {<br /> left: 0px;<br /> -webkit-transition: left 0.25s ease;<br /> -moz-transition: left 0.25s ease;<br /> -ms-transition: left 0.25s ease;<br /> -o-transition: left 0.25s ease;<br /> transition: left 0.25s ease;<br /> z-index: 90;<br />}<br />.nav-mobile {<br /> display: inline-block;<br /> vertical-align: middle;<br /> width: 100%;<br /> height: 50px;<br /> margin: 0;<br /> position: absolute;<br /> top: 0px;<br /> left: 0px;<br /> background: #3498db;<br /> padding: 12px 0 0 10px;<br /> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);<br /> z-index: 100;<br />}<br />.navbar-menu {<br /> display: inline-block;<br /> vertical-align: middle;<br /> height: 50px;<br /> cursor: pointer;<br /> margin: 0;<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> padding: 12px;<br /> z-index: 102;<br />}<br />.navbar-menu span {<br /> height: 2px;<br /> background: #fff;<br /> margin: 5px;<br /> display: block;<br /> width: 20px;<br />}<br />.navbar-menu span:nth-child(2) { width: 20px; }<br />.navbar-menu span:nth-child(3) { width: 20px; }<br />.navigasion-menu ul { padding-top: 50px; }<br />.navigasion-menu li { display: block; }<br />.navigasion-menu li a {<br /> display: block;<br /> color: #505050;<br /> font-weight: 600;<br />}<br />.navigasion-menu li:first-child:hover a { border-radius: 0; }<br />.navigasion-menu li ul.dropdown { position: relative; }<br />.navigasion-menu li ul.dropdown li a {<br /> background: #2980b9 !important;<br /> border-bottom: none;<br /> color: #fff !important;<br />}<br />.navigasion-menu li:hover a {<br /> background: #3498db;<br /> color: #fff !important;<br />}<br />.navigasion-menu li ul.dropdown li:hover a {<br /> background: rgba(0,0,0,.1); !important;<br /> color: #fff !important;<br />}<br />.navigasion-menu li ul.dropdown li a { padding: 10px 10px 10px 30px; }<br />.navigasion-menu li:hover .arrow-down { border-top: 5px solid #fff; }<br />.arrow-down {<br /> border-top: 5px solid #505050;<br /> position: absolute;<br /> top: 20px;<br /> right: 10px;<br />}<br />.nav-cover {<br /> background: rgba(0,0,0,0.5);<br /> position: fixed;<br /> top: 0;<br /> bottom: 0;<br /> left: 0;<br /> right: 0;<br />}<br />}<br /> @media only screen and (max-width:1199px) {<br />.container { width: 96%; }<br />}<br />.rotasi-topmenu {<br /> position: fixed;<br /> top: 0;<br /> right: 0;<br />left:0;<br />z-index:120;<br />}</code></pre></div><br />3. Temukan kode <i><b><span style="color: red;"><div class='outer-wrapper'></span>.<span style="color: red;"> <div class='main-wrapper'></span>.<span style="color: red;"> </header></span></b></i> atau yang mirip, karena setiap kode berbeda-beda.<br />4. Copy&paste kode berikut ini, dan letakkan diatas kode <b><i><span style="color: red;"><div class='outer-wrapper'></span>.<span style="color: red;"> <div class='main-wrapper'></span></i></b></div></div></div><pre data-codetype="HTML" title="HTML"><code class="language-markup"><navbar class="rotasi-topmenu"><br /><div class='navigasion-menu'><br /><ul><br /><li><a class='fa fa-home' href='/'> Home</a></li><br /><li><a class='fa fa-wrench' href='#'> Website Tools</a><br /><ul class='dropdown'><br /><li><a href='#' title='CSS Minifier'>CSS Minifier</a></li><br /><li><a href='#' title='Ads Converter'>Ads Converter</a></li><br /><li><a href='#' title='Kode Warna'>Kode Warna</a></li><br /><li><a href='#' title='Tag Condisional'>Tag Condisional</a></li><br /><li><a href='#'>SEO Tools</a></li><br /><li><a href='#' target='_blank'>Parse Kode HTML</a></li><br /><li><a href='#' title='Check Your Pagerank Website'>Check PageRank</a></li><br /><li><a href='#' title='Meta Tags Analyzer'>Meta Tags Analyzer</a></li><br /></ul><br /></li><br /><li><a href='javascript:void(0)'>Menu<span class='arrow-down'></span></a><br /><ul class='dropdown'><br /><li><a href=''>Menu 1</a></li><br /><li><a href=''>Menu 2</a></li><br /><li><a href=''>Menu 3</a></li><br /><li><a href=''>Menu 4</a></li><br /></ul><br /></li><br /><li><a href='javascript:void(0)' >Menu 2<span class='arrow-down'></span></a><br /><ul class='dropdown'><br /><li><a href=''>Menu 1</a></li><br /><li><a href=''>Menu 2</a></li><br /></ul><br /></li><br /><li><a href='javascript:void(0)' >Menu 3<span class='arrow-down'></span></a><br /><ul class='dropdown'><br /><li><a href=''>Menu 1</a></li><br /><li><a href=''>Menu 2</a></li><br /></ul><br /></li><br /><li><a href='#'>Menu 4</a></li><br /><li><a href='#'>Menu 5</a></li><br /><li><a href='#'>Menu 6</a></li><br /></ul><br /></div><br /><div class='nav-mobile'><br /><div class='navbar-menu'> <span></span> <span></span> <span></span> </div><br /><a href='' class='title-mobile'>All Menu</a><br /></div><br /></navbar><br /><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script><br /><script><br />$(document).ready(function(){<br /> $('.navbar-menu').click(function(){<br /> $('.navigasion-menu').toggleClass('visible');<br /> $('body').toggleClass('nav-cover');<br /> });<br /> });<br /></script> </code></pre></div><br />5. Simpan Template!<br /><br />Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda. Sekian dari saya, <b>Semoga Bermanfaat!</b> Thanks for Reading & Sharing : <b>Cara Membuat Menu Navigasi Header Responsive Terbaru</b></div>

Diposting oleh Mr Xiulung

Cara Membuat Menu Navigasi&Header Responsive di Blogger

<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 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 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 dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><b>Menu Navigasi </b>adalah merupakan sebuah <b>Tab Menu</b> yang berisi penunjuk arah pada bagian kategori/label dari blog atau situs, dan berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. <b>Menu Navigasi</b> ini sendiri biasanya berada pada bagian <b>Header</b>. Menu Navigasi ini sangat diperlukan diterapkan di blogger anda, karena memudahkan pengunjung dalam surfing semua isi blog anda.<br /><br /><b>Baca Juga : </b><br /><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/12/cara-membuat-top-menu-navigasi.html">Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive</a></li><li><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-top-menu-navigasi-diatas.html">Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy</a></li><li><a href="http://maycyber-download.blogspot.com/2016/08/cara-membuat-menu-navigasi-header.html">Cara Membuat Menu Navigasi Header Seperti Evo Magz</a></li><li><a href="http://maycyber-download.blogspot.com/2016/08/cara-membuat-menu-navigasi-plus-media.html">Cara Membuat Menu Navigasi Plus Media Sosial, Responsive!</a></li><li><a href="http://maycyber-download.blogspot.com/2016/07/cara-membuat-menu-navigasi-drop-down.html">Cara Membuat Menu Navigasi Drop Down Plus Media Sosial</a></li></ul><div><b>Screenshoot :</b><br /><b><br /></b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNyMHzEXi_0QQhTtWOjgo5iJOC_sEmK8wicGprqCcBHDVkLPY3yaQnJQQgKer54hQPypDMAZEpAuQtb3w3P7bMYxFHOpBw2deJIbymb9gaeSH7mz9CGKK1ujSt1mx0jF_cTxE2-NwZts/s1600/navigasion-menus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNyMHzEXi_0QQhTtWOjgo5iJOC_sEmK8wicGprqCcBHDVkLPY3yaQnJQQgKer54hQPypDMAZEpAuQtb3w3P7bMYxFHOpBw2deJIbymb9gaeSH7mz9CGKK1ujSt1mx0jF_cTxE2-NwZts/s640/navigasion-menus.jpg" width="640" /></a></div><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibR2qyGAli-f9a4y-ANvpcxRqnG_3WW4GfLhM0_xoxfZspSuRpO8uKz4ZspfNRzlmX3wZOcsUL59vR8ihfNp_o3Cv6nORzrX8ES2nJyb8XtMurLvn7H4i89TbmC1PAatyxpgWVhgB_MHs/s1600/navigasion-menu.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibR2qyGAli-f9a4y-ANvpcxRqnG_3WW4GfLhM0_xoxfZspSuRpO8uKz4ZspfNRzlmX3wZOcsUL59vR8ihfNp_o3Cv6nORzrX8ES2nJyb8XtMurLvn7H4i89TbmC1PAatyxpgWVhgB_MHs/s640/navigasion-menu.gif" width="640" /></a></div><br /></div></div></div><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Menu Navigasi&Header Responsive</span></b></div><div style="text-align: center;"><b><br /></b></div><div style="text-align: left;"><b>Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Bloger </a>- Kemudian login<br />2. Dashboard - Template<br />3. Edit HTML<br /><br /><b>Proses Pembuatan : </b><br /><br />1. Temukan kode <span style="color: red; font-style: italic; font-weight: bold;">]]></b:skin></span> atau <span style="color: red; font-style: italic; font-weight: bold;"></style></span></div><div style="text-align: left;">2. Copy&paste kode berikut ini, dan letakkan diatas kode<b> </b><span style="color: red; font-style: italic; font-weight: bold;">]]></b:skin> </span>atau <span style="color: red; font-style: italic; font-weight: bold;"><style></span></div></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Menu Navigasion Header */<br />.menu-navigasion{display:block;background:rgba(60, 192, 145, 0.6) none repeat scroll 0% 0%;margin:0 auto}<br />.menu-navigasion ul{list-style-type:none;margin:0 auto;padding:0;display:block;max-width:1024px}<br />.menu-navigasion li{float:none;list-style-type:none;margin:0;padding:0;display:inline-block;position:relative;font-size:14px;color:#def1f0}<br />.menu-navigasion li a{padding:15px;font-size:15px;color:#fff;display:inline-block;outline:0;font-weight:600}<br />.menu-navigasion li:hover ul.dropdown{display:block}<br />.menu-navigasion li ul.dropdown{position:absolute;display:none;width:200px;background:#fff;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-ms-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-o-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);padding-top:0}<br />.menu-navigasion li ul.dropdown li{display:block;list-style-type:none;float:none}<br />.menu-navigasion li ul.dropdown li a{padding:15px 20px;font-size:15px;color:#fff;display:block}<br />.menu-navigasion li ul.dropdown li:last-child a{border-bottom:none}<br />.menu-navigasion li:hover a{background:#3cc091;color:#fff!important}<br />.menu-navigasion li.active a{background:#3cc091;color:#fff}<br />.menu-navigasion li.active span{border-top:5px solid #fff}<br />.menu-navigasion li:first-child:hover a{color:#fff}<br />.menu-navigasion li ul.dropdown li:hover a{background:rgba(60,192,145,0.6)}<br />.menu-navigasion li ul.dropdown li:first-child:hover a{border-radius:0}<br />.menu-navigasion li:hover .arrow-down{border-top:5px solid #fff}<br />.arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;position:relative;top:11px;right:-5px;content:''}<br />.title-mobile{display:none}<br />.nav-social{float:right!important}<br />.nav-social li a{padding:10px 3px;font-size:14px}<br />.nav-social li:hover a{background:none}<br />.nav-social li:hover a{background:none;color:#777!important}<br />.nav-social a.fcb:hover{color:#4d70a8!important}<br />.nav-social a.twt:hover{color:#00bbf2!important}<br />.nav-social a.gpl:hover{color:#e3401d!important}<br />.nav-social a.ig:hover{color:#527fa4!important}<br />.nav-social a.ytb:hover{color:#cb3737!important}<br />@media only screen and (max-width:700px){<br /> .menu-navigasion{padding:0;background:#fff;width:200px;height:100%;display:block;position:fixed;left:-200px;top:0;-webkit-transition:left .25s ease;-moz-transition:left .25s ease;-ms-transition:left .25s ease;-o-transition:left .25s ease;transition:left .25s ease;margin:0;border:0;border-radius:0;overflow-y:auto;overflow-x:hidden;height:100%;box-shadow:none;z-index:0}<br /> .title-mobile{position:fixed;display:block;top:15px;font-size:20px;left:0;right:0;text-align:center;color:#FFF;font-family:Roboto,Arial,Sans-serif;font-weight:700;z-index:1}<br /> a.title-mobile{color:#444}<br /> .menu-navigasion.visible{left:0;-webkit-transition:left .25s ease;-moz-transition:left .25s ease;-ms-transition:left .25s ease;-o-transition:left .25s ease;transition:left .25s ease}<br /> .nav-menu{display:inline-block;vertical-align:middle;width:100%;height:50px;margin:0;position:fixed;top:0;left:0;background:#fff;padding:5px 0 0 10px;z-index:9;box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5)}<br /> .navbar-navigasion{display:inline-block;vertical-align:middle;height:31px;cursor:pointer;margin:0;position:fixed;top:0;left:0;padding:12px;z-index:99}<br /> .navbar-navigasion span{height:2px;background:#444;margin:5px;display:block;width:20px}<br /> .navbar-navigasion span:nth-child(2){width:20px}<br /> .navbar-navigasion span:nth-child(3){width:20px}<br /> .menu-navigasion ul{padding-top:55px}<br /> .menu-navigasion li{display:block;float:none}<br /> .menu-navigasion li a{display:block;color:#505050;font-weight:600}<br /> .menu-navigasion li:first-child:hover a{border-radius:0}<br /> .menu-navigasion li ul.dropdown{position:relative}<br /> .menu-navigasion li ul.dropdown li a{background:#358c6d!important;border-bottom:none;color:#fff!important}<br /> .menu-navigasion li:hover a{background:#3cc091;color:#fff!important}<br /> .menu-navigasion li ul.dropdown li:hover a{background:rgba(0,0,0,.1);color:#fff!important}<br /> .menu-navigasion li ul.dropdown li a{padding:10px 10px 10px 30px}<br /> .menu-navigasion li:hover .arrow-down{border-top:5px solid #fff}<br /> .arrow-down{border-top:5px solid #505050;position:absolute;top:20px;right:10px}<br /> .cover-bg{background:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0}<br />}<br /></code></pre></div><br />3. Temukan kode <Gunakan CTRL+F untuk memudahkan pencarian> Tenukan kode <b></body></b><br />4. Copy&paste kode berikut ini, dan letakkan diatas kode<b> </body></b></div><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />$(document).ready(function(){<br /> $(&#39;.navbar-navigasion&#39;).click(function(){<br /> $(&#39;.menu-navigasion&#39;).toggleClass(&#39;visible&#39;);<br /> $(&#39;body&#39;).toggleClass(&#39;cover-bg&#39;);<br /> });<br /> });<br /></script> </code></pre></div></div><br />5. Temukan kode <span style="color: red;"><i style="font-weight: bold;"><div id='post-wrapper'> </i>.<i style="font-weight: bold;"> </header></i> .<i style="font-weight: bold;"> <div id='content-wrapper'></i></span><br />6. Copy&paste kode berikut ini, dan letakkan diatas kode<b style="color: red; font-style: italic;"> <div id='post-wrapper'></b> .<b style="color: red; font-style: italic;"> </header> </b>.<b style="color: red; font-style: italic;"> <div id='content-wrapper'></b></div><pre data-codetype="HTML" title="HTML"><code class="language-markup"><nav><br /><div class='menu-navigasion'><br /><ul><br /><li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> HOME</a></li><br /><li><a href='javascript:void(0)'>MENU<span class='arrow-down'/></a><br /><ul class='dropdown'><br /><li><a href='#'>MENU 1</a></li><br /><li><a href='#'>MENU 2</a></li><br /><li><a href='#'>MENU 3</a></li><br /></ul><br /></li><br /><li><a href='#'>MENU 1</a></li><br /><li><a href='#'>MENU 2</a></li><br /><li><a href='#'>MENU 3</a></li><br /></ul><br /></div><br /><div class='nav-menu'><br /><div class='navbar-navigasion'> <span/> <span/> <span/> </div><br /><a class='title-mobile' expr:href='data:blog.homepageUrl'><data:blog.title/></a><br /></div><br /></nav></code></pre></div><br />7. Temukan lagi kode <b><i><span style="color: red;"></head></span></i></b><br />8. Copy&paste JQuery berikut ini, dan letakkan diatas kode <b><i><span style="color: red;"></head></span></i></b></div><pre data-codetype="jQuery" title="jQuery"><code class="language-javascript"><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'/></code></pre></div><br />9. Simpan Template!<br /><br />Demikianlah Tutorial Blogger kali ini, Jika terjadi kesalahan atau kurang mengerti? Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : <b>Cara Membuat Menu Navigasi&Header Responsive</b></div>

Diposting oleh Mr Xiulung

Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

<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 dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><span style="text-align: left;">Menu Header adalah (Navigasion Menu) yaitu menu yang biasa dibuat para blogger untuk menu tentang kategori apa saja yang disediakan di blog itu sendiri.  Menu Header ini sangat penting bagi pengunjung agar mereka bisa leluasa berselancar (Surfing) dan membaca blog kita lebih lama. Untuk </span><b style="text-align: left;">Menu Header</b><span style="text-align: left;"> ketika pengunjung sedang membaca mereka membacakan otomatis membaca sampai kebawah, berarti pengunjung scroll down kan. </span>Saya ingin menu header tersebut juga ikut kebawah, jika kalian penasaran caranya bagaimana.<br /><br />Singkat cerita :  Awalnya saya iri dengan blog yang saya kunjungi, ketika saya membaca konten yang berkualitas itu atau saya sedang blogwalking saya melihat <b>Menu Header</b> yang mereka pakai melayang, meskipun saya scroll kebawah untuk membaca artikel sampai habis dan kembali ketempatnya seperti semula dengan posisi seperti awalnya. Setalah saya meneliti akhirnya saya tahu yang mereka gunakan "<b><i>Sticky Position (Bar) With CSS Or JQuery</i></b>". Kode tersebut saya ambil agar Menu Header yang saya gunakan tetap muncul meskipun di scroll kebawah. Cara membuatnya mudah banget, ikuti langkah-langkah berikut ini.<br /><div><br /><b>Baca Juga :</b><br /><ul style="text-align: left;"><li><b><a href="http://maycyber-download.blogspot.com/2016/12/cara-membuat-top-menu-navigasi.html">Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive</a></b></li><li><b><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-menu-header-keren-dan.html">Cara Membuat Menu Header Keren dan Responsive</a></b></li></ul><b>Screenshoot : </b><br /><br /><i><b><span style="font-weight: bold;">Perhatikan! Menu Header ketika saya Scroll kebawah</span>.</b></i><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtxNTe29W8R_0s8fJKjxgTrWyJUpQCTI25ag8EHBb3GD4-mq53UD0ePzNLq2Wps6vwzBegy9snlenvWxGp3eCSz-30vk7kewnYP6W3wd0lUbd6mV9Glgobs4k-xSo8N7UVZfplwx_FBuQ/s1600/Menu-header-melayang-responsive.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah" border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtxNTe29W8R_0s8fJKjxgTrWyJUpQCTI25ag8EHBb3GD4-mq53UD0ePzNLq2Wps6vwzBegy9snlenvWxGp3eCSz-30vk7kewnYP6W3wd0lUbd6mV9Glgobs4k-xSo8N7UVZfplwx_FBuQ/s640/Menu-header-melayang-responsive.gif" title="Navigasion Responsive" width="640" /></a></div><br /><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah</span></b></div></div></div><b>Cara Pertama : </b><br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian login.<br />2. Dashboard - Template.<br />3. Edit HTML.<br /><br /><b>Proses Pembuatan :</b><br /><br />1. Temukan <CTRL+F> kode <b></body></b><br />2. Copy&paste kode Java Script berikut ini, dan letakkan diatas kode<b> </body></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function() {<br /> var stickyNavTop = $('<b><span style="color: blue;">#nav</span></b>').offset().top;<br /> var stickyNav = function(){<br /> var scrollTop = $(window).scrollTop();<br /> if (scrollTop > stickyNavTop) {<br /> $('<span style="color: blue;"><b>#nav</b></span>').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });<br /> } else {<br /> $('<b><span style="color: blue;">#nav</span></b>').css({ 'position': 'relative' });<br /> }<br /> };<br /> stickyNav();<br /> $(window).scroll(function() {<br /> stickyNav();<br /> });<br />});<br />//]]><br /></script></code></pre>3. Perhatikan <span style="color: blue;">ID CLASS</span> pada tulisan yang berwarna biru. Silakan ganti kode tersebut dengan kode Menu yang ada di Template anda. Biasanya <b>.nav </b>atau<b> #nav</b> atau <b>#menu</b><br /><b><br /></b>4. Sehingga menjadi Seperti ini <b><Saya Menggunakan ID Class #menu></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function() {<br /> var stickyNavTop = $('<span style="color: blue;"><b>#menu</b></span>').offset().top;<br /> var stickyNav = function(){<br /> var scrollTop = $(window).scrollTop();<br /> if (scrollTop > stickyNavTop) {<br /> $('<b><span style="color: blue;">#menu</span></b>').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });<br /> } else {<br /> $('<b><span style="color: blue;">#menu</span></b>').css({ 'position': 'relative' });<br /> }<br /> };<br /> stickyNav();<br /> $(window).scroll(function() {<br /> stickyNav();<br /> });<br />});<br />//]]><br /></script></code></pre>5. Simpan Template!.<br /><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Mencari ID Class pada Menu Header dengan Mudah</span></b></div><div style="text-align: center;"><b><br /></b></div><div style="text-align: left;">Jika anda kesulitan dalam mencari ID Class, saya akan kasih tau cara mencarinya dengan mudah. Anda cukup <b>Inspect Elemen</b> pada <b>Menu Header lihat Souce kodenya</b> pada bagian <b>bawah kanan.</b></div><div style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdkXNQSFaXZ9k4LnyFeo-duqigCdG5ExLINUawWpCSr0MSHiwku66vRuN8DZz0ZIxOvJOwbnDguDVhn9xFESzjYTuuRkbJGsmO61KVB9qGvKFcH7vMRKlOI6ydIhJUW6k-vZkc9WBTu4/s1600/cara-mencari-Id-Class.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br /></a></div><div style="text-align: left;"><br /></div><i><b>Perhatikan gambar berikut ini.</b></i><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdkXNQSFaXZ9k4LnyFeo-duqigCdG5ExLINUawWpCSr0MSHiwku66vRuN8DZz0ZIxOvJOwbnDguDVhn9xFESzjYTuuRkbJGsmO61KVB9qGvKFcH7vMRKlOI6ydIhJUW6k-vZkc9WBTu4/s1600/cara-mencari-Id-Class.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Mencari ID Class pada Blogger" border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdkXNQSFaXZ9k4LnyFeo-duqigCdG5ExLINUawWpCSr0MSHiwku66vRuN8DZz0ZIxOvJOwbnDguDVhn9xFESzjYTuuRkbJGsmO61KVB9qGvKFcH7vMRKlOI6ydIhJUW6k-vZkc9WBTu4/s640/cara-mencari-Id-Class.jpg" title="Search ID Class Blogger" width="640" /></a></div></div>Ternyata saya Inspect Elemen pada Menu Header Demo Bloggers, Blogger itu punya saya. Ternyata ID Class itu menggunakan <b><span style="color: blue;">#nav</span></b>. Tinggal ganti kode diatas yang bertuliskan warna merah dengan <b><span style="color: blue;">#nav</span></b>. Mudah bukan?<br /><br />Demikianlah Tutorial Blogger kali ini, jika anda mengalami kesulitan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda dan jangan lupa Scroll kebawah. Sekian dari saya, <b>Semoga Bermanfaat! </b>Thanks for Reading, Sharing & Visited and Search :<b> Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah.</b></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger

<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 dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><b>Related post</b> adalah biasa disebut<i><b> </b></i><b>Artikel Terkait</b><i><b>. </b></i>Related post ini bisa dibilang user freandly karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama. Related post juga menuntun pengunjung blog kita menuju postingan atau artikel yang lain dan yang berkaitan dengan postingan yang mereka lihat. Dengan memasang Related post di blogger kemungkinan dapat meningkatkan <b>pageview </b>halaman meningkat- menurut master seo, karena berada dibawah postingan.<br /><br />Related post kali ini yang saya postingkan adalah hanya menampilkan judul saja. Dimana Related post ini lebih ringan daripada menggunakan Related post Thumbnail (bergambar).<br /><br /><b>Screenshoot :</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifi-hskO7_lXuG8WvNZyUHyRodJOEqh4iML2CFTvZetaBhVeZl32Gas5nMrNYjuQiW3jMb5Kd8V7hsZ-EsMQgWkVi6-GiTaCj_f__FHWEkVTc2NjU9BwuWl5akVG6dPWMI97sNY1Csl7E/s1600/related-post-anchor-text_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifi-hskO7_lXuG8WvNZyUHyRodJOEqh4iML2CFTvZetaBhVeZl32Gas5nMrNYjuQiW3jMb5Kd8V7hsZ-EsMQgWkVi6-GiTaCj_f__FHWEkVTc2NjU9BwuWl5akVG6dPWMI97sNY1Csl7E/s1600/related-post-anchor-text_1.jpg" /></a></div><div style="text-align: center;"><b> <span style="font-size: large;">Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger</span></b></div><div style="text-align: left;"><b> </b> </div><b>Cara Pertama : </b><br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login.<br />2. Dashboard - Template.<br />3. Edit HTML.<br /><br /><b>Proses Pembuatan :</b><br /><br />1. Temukan kode <b><span style="color: red;">]]></b:skin></span> </b>atau <b><span style="color: red;"></style></span></b><br />2. Copy&paste kode berikut ini, dan letakkan diatas kode<b> <span style="color: red;">]]></b:skin></span> </b>atau <b><span style="color: red;"></style></span></b></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Related Post Title Only Start */<br />#related-post-title-only {<br /> overflow: hidden;<br /> margin: 15px 0;<br /> padding: 0<br />}<br />#related-post-title-only h3 {<br /> font-size: 20px;<br /> font-weight: bold;<br /> padding: 0 0 8px;<br /> margin: 0;<br /> color: #4C565F;<br />}<br />#related-post-title-only ul {<br /> margin-left: 20px;<br /> padding: 0 0 0 10px;<br />}<br />#related-post-title-only ul li {<br /> padding: 0 0 8px;<br />}<br />/* Related Post Title Only End */</code></pre>3. Jika sudah? Temukan kode <b><span style="color: red;"></head></span></b><br />4. Copy&paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;"></head></span></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script><br />//<![CDATA[<br />var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}<br />function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}<br />relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}<br />function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}<br />i++;}<br />document.write('</ul>');document.write();}//]]><br /></script><br /></b:if></code></pre>5. Selanjutnya, Temukan kode <b><span style="color: red;"><data:post.body/></span> </b>Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga.<b> </b><br /><b><br /></b><b>Wajib Baca : </b>Anda bisa meletakkan kode berikut ini, dibawah<b> Tombol Share </b>(jika memasangnya)<br /><b><br /></b>6. Copy&paste kode berikut ini, dan letakkan dibawah kode<b> </b><b><span style="color: red;"><data:post.body/></span></b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- Related posts di bawah postingan --><br /><div id='related-post-title-only'><br /><h3>Artikel Terkait :</h3><br /><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><br /></div><br /><!-- Related posts di bawah postingan Berakhir --></code></pre>7. Simpan Template.<br /><br />Demikianlah Tutorial Blogger kali ini, Jika terjadi kesalahan? Jangan  sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda, lihat bagian bawah. Sekian dari saya, <b>Semoga Bermanfaat!</b> Thanks for Reading, Sharing & Visited and Search :  <b>Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger.</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Sosial Media Share Buttons Responsive for Blogger

<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 dir="ltr" style="text-align: left;" trbidi="on">Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media. Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi jika blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke berbagai sosial media yang anda miliki. Hal ini agar orang tahu blog Anda untuk melihat terus-menerus alamat blog anda di Timeline mereka.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmCK6kiROMOHzUJ3aWiA92UhaIi4gduN-k3mAl9Ut2hOZ1oFCFtUFjYYB_4NlwvCDC70F2lbNMhpcSX5EReFsu7PGLMHbaR2gF2PIn_4R-emowJ8y7hCTZ4L8cMa26eUF812PF4HIEP8/s1600/sosial_media_share.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmCK6kiROMOHzUJ3aWiA92UhaIi4gduN-k3mAl9Ut2hOZ1oFCFtUFjYYB_4NlwvCDC70F2lbNMhpcSX5EReFsu7PGLMHbaR2gF2PIn_4R-emowJ8y7hCTZ4L8cMa26eUF812PF4HIEP8/s640/sosial_media_share.jpg" width="640" /></a></div>Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik. Dan kali ini saya akan mempostingan sesuai judul yaitu <b>Cara Membuat Sosial Media Share Buttons Responsive for Blogger</b><br /><br /><b>Screenshoot :</b><br /><b></b><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRnANunkItPlEC9DnKQxJoMKpuoFeWESmHfDMhyphenhyphenFp821bx_nr-aQel3xOJcUl7E6ECyHG697-LUqYz5loO61cGhlL1Rmp9nSPMuTSfN_-a9aGJNGxfpxUZKDbvILXY8gXS1bvjWEMYRo/s1600/tombol_berbagi.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRnANunkItPlEC9DnKQxJoMKpuoFeWESmHfDMhyphenhyphenFp821bx_nr-aQel3xOJcUl7E6ECyHG697-LUqYz5loO61cGhlL1Rmp9nSPMuTSfN_-a9aGJNGxfpxUZKDbvILXY8gXS1bvjWEMYRo/s640/tombol_berbagi.gif" width="640" /></a></div><div style="text-align: left;"><br /></div><div style="text-align: center;"><span style="font-size: large;"><b>Cara Membuat Sosial Media Share Buttons Responsive for Blogger</b></span></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><b>Cara Pertama : <br /> </b></div><div style="text-align: left;">1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login.</div><div style="text-align: left;">2.  Dashboard - Template.</div><div style="text-align: left;">3. Edit HTML.<b></b></div><div style="text-align: left;"><b><br /></b></div><div style="text-align: left;"><b>Proses Pembuatan : </b></div><div style="text-align: left;"><b><br /></b></div><div style="text-align: left;">1. Temukan <CTRL+F> kode <span style="color: red;"><b style="color: red;">]]></b:skin> </b>atau<b style="color: red;"> </style></b></span></div><div style="text-align: left;">2. Copy&paste kode berikut ini, dan letakkan diatas kode <span style="color: red; font-weight: bold;">]]></b:skin> </span><span style="color: red;">atau</span><span style="color: red; font-weight: bold;"> </style></span></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Share on Media Sosial Start */<br />.share-post{font-family:'Arimo';text-align:center;margin-bottom:20px;margin-top:20px;margin-bottom:10px;padding:10px 0;}<br />.widget .post-body > .share-post ul {padding:0;}<br />.share-post li{float:left;margin:0 1%;width:18%;padding:5;list-style:none;position:relative;}<br />.share-post li:hover{}<br />.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}<br />.share-post li a:hover{color:#fff;}<br />.share-post li .twitter{background-color:#19bfe5;}<br />.share-post li .facebook{background-color:#3b5998;}<br />.share-post li .gplus{background-color:#d64136;}<br />.share-post li .pinterest{background-color:#cb2027;}<br />.share-post li .tumblr{background-color:#304e6c;}<br />.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,<br />.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}<br />.share-post li:last-child{margin-right:0}<br />.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}<br />.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}<br />.share-post li .fa {display:initial;}<br />.share-post li:hover{}<br />.share-post li a{padding:6px 0 6px 0;}<br />.share-post li .fa:before{display:none;}<br />.bagitiga{-webkit-column-count:1;-moz-column-count:1;column-count:1;}}<br />@media screen and (max-width:480px) {<br />.share-post li{width:100%}}<br />.bpas-tooltip {position:relative;display:inline-block;}<br />.bpas-tooltip:before, .bpas-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} <br />.bpas-tooltip:hover:before, .bpas-tooltip:hover:after {opacity:1;}<br />.bpas-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;} <br />.bpas-tooltip:after {content:attr(data-bpas-tooltip);background:#FF9934;color:#fff;padding:6px 8px;font-family:'Arimo';font-size:12px;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;}<br />.bpas-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#FF9934;}<br />.bpas-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px;}<br />.bpas-tooltip-bottom:before {top:100%;left:50%;margin:-6px 0 0 0;border-bottom-color:#FF9934;}<br />.bpas-tooltip-bottom:after {top:100%;left:50%;margin:6px 0 0 -10px;}<br />.bpas-tooltip-right:before {left:100%;bottom:50%;margin:0 0 -4px 0;border-right-color:#FF9934;} <br />.bpas-tooltip-right:after {left:100%;bottom:50%;margin:0 0 -13px 12px;}<br />.bpas-tooltip-left:before {right:100%;bottom:50%;margin:0 0 -4px 0;border-left-color:#FF9934;} <br />.bpas-tooltip-left:after {right:100%;bottom:50%;margin:0 8px -13px 0;}<br />/* Share on Media Sosial End */</code></pre>3. Jika sudah? Temukan lagi kode <b><span style="color: red;"><data:post.body/></span> </b>Kode ini biasanya lebih dari satu, silakan Anda pilih yang kedua/ketiga.<br />4. Copy&paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><br /><b>Wajib Baca : </b><br /> Anda bisa meletakkan kode dibawah ini diatas related post, next-previous, subscribe dll.<br />(jika memasangnya)<br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='share-post'><br /> <ul><br /> <li><a class='twitter bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li><br /> <li><a class='facebook bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li><br /> <li><a class='gplus bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li><br /> <li><a class='tumblr bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li><br /> <li><a class='pinterest bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li><br /> </ul><br /> </div><br /></b:if></code></pre>5. Jangan lupa untuk memasang Font Awesome Icons. Karena pada tombol share ini, menggunakan Font Awesome . Contoh<b> : fa fa-facebook</b><br />6. Temukan kode <b><span style="color: red;"></head></span></b> <br />7. Copy&paste Font Awesome Icons, dan letakkan diatas kode <b><span style="color: red;"></head></span></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />//CSS Ready<br />function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }<br />loadCSS("http://fonts.googleapis.com/css?family=Arimo:400italic,400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");<br />//]]></code></pre>8. Simpan Template.<br /><br />Demikian Tutorial Blogger kali ini, bila ada kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan lihat postingan anda. Sekian dari saya, <b>Semoga Bermanfaat!</b> Thanks for Reading, Sharing & Visited and Search : <b>Cara Membuat Sosial Media Share Buttons Responsive for Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Sosial Media Share Buttons for Blogger

<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 dir="ltr" style="text-align: left;" trbidi="on"><b>Sebelumnya</b> saya pernah posting cara membuat berbagai <i><b>"Tombol Sosial Media Share" </b></i>Tujuan<i><b> </b></i>nya sama yaitu untuk meningkatkan pengunjung. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung.  <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0dzAp-q78wPrZS6Yt8gVZVK3odB9t6SRkUvg2_EPDjRAhzqQS_ZQ07TNVjiWmEDP79L2OT01LerkeOiFhMKnpVnZJCf4Hx2j815XVHbOuQvkH0q9jDbQa-sxyMmVZwar8Y8lX15HctMQ/s1600/Sosial-Share-Buttons.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0dzAp-q78wPrZS6Yt8gVZVK3odB9t6SRkUvg2_EPDjRAhzqQS_ZQ07TNVjiWmEDP79L2OT01LerkeOiFhMKnpVnZJCf4Hx2j815XVHbOuQvkH0q9jDbQa-sxyMmVZwar8Y8lX15HctMQ/s640/Sosial-Share-Buttons.jpg" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><b>Baca Juga : </b><br /><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/12/cara-membuat-tombol-share-buttons.html"><i><b>C</b></i>ara Membuat Tombol Share Buttons Responsive pada Blogger</a></li><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-flat-social-share-buttons.html"><i><b>C</b></i>ara Membuat Flat Social Share Buttons di Blogger</a></li><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-tombol-share-buttons.html"><i><b>C</b></i>ara Membuat Tombol Share Buttons Keren, Responsive di Blogger</a></li><li><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-tombol-share-sosial-media.html"><i><b>C</b></i>ara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog</a></li><li><a href="http://maycyber-download.blogspot.com/2016/08/cara-memasang-tombol-share-di-blogger.html"><i><b>C</b></i>ara memasang Tombol Share di Blogger, Responsive!</a><i><b></b></i></li></ul><b>Screenshoot : </b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrwDpGkuSvqQn9_3adRsZRXaW6ivWrz-r8FUOQYOdS41ki9pVbIVh0XRaqrnIH7rCLN_IDQdsaOZYLmDK1bOmeX7dHvQ-7ExHsnUf6YgZclOA0GRl05L5GSDfZJyJyZIut63gAijs96jI/s1600/Share-postingan.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrwDpGkuSvqQn9_3adRsZRXaW6ivWrz-r8FUOQYOdS41ki9pVbIVh0XRaqrnIH7rCLN_IDQdsaOZYLmDK1bOmeX7dHvQ-7ExHsnUf6YgZclOA0GRl05L5GSDfZJyJyZIut63gAijs96jI/s640/Share-postingan.gif" width="640" /></a></div><br /><br /><div style="text-align: center;"><span style="font-size: large;"><b>Cara Membuat Sosial Media Share Buttons for Blogger</b></span></div><b><br />Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian login<br />2. Dashboard - Template<br />3. Edit HTML.<br /><br /><b>Proses Pembuatan :</b><br /><br />1. Temukan kode <CTRL+F> <b style="color: red;">]></b:skin> </b>atau <b style="color: red;"></style> </b><br />2. Copy&paste kode berikut ini, dan letakkan diatas kode <b style="color: red;">]></b:skin> </b>atau <b style="color: red;"></style>  </b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Share postingan Start*/<br />.share-postingan{height:33px;position:relative;line-height:0;margin:0 0 20px;padding:0}<br />.share-artikel{display:block;margin:0;padding:0}<br />.share-artikel a{float:left;width:20%;height:45px;line-height:45px;color:#fff;font-weight:400;font-size:28px;text-align:center;display:inline-block;box-sizing:border-box;opacity:.75;margin:0;padding:0;transition:all .25s ease}<br />.share-artikel a:hover{opacity:1}<br />.share-artikel .fac-art{background:#3b5998}<br />.share-artikel .twi-art{background:#00acee}<br />.share-artikel .goo-art{background:#db4a39}<br />.share-artikel .pin-art{background:#CA2127}<br />.share-artikel .lin-art{background:#0077B5}<br />/* Share postingan End*</code></pre>3. Jika sudah? langkah selanjutnya adalah memasang Font Awesome Icons. Karena pada tombol share sosial media ini menggunakan font awesome icon. Contoh<b> </b>:<b> fa fa-facebook</b><br />4. Temukan kode <b><span style="color: red;"></head></span></b><br />5. Copy&paste kode berikut ini, dan letakkan diatas kode<b> <span style="color: red;"></head></span> </b><br /><pre data-codetype="jQuery" title="jQuery"><code class="language-javascript"><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/></code></pre>6. Terakhir, Temukan kode <b><span style="color: red;"><data:post.body/></span></b><br />7. Copy&paste kode berikut ini, dan letakkan dibawah kode<b> <span style="color: red;"><data:post.body/></span> </b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!---Share-postingan start--><br /><div class='share-postingan'><br /><div class='share-artikel'><br /><a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a><br /><a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a><br /><a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a><br /><a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a><br /><a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/></a><br /></div><br /></div><br /><!--Share-Artikel End --></code></pre>8. Simpan Template.<br /><br />Demikian Tutorial Blogger kali ini, bila anda mengalami kesalahan? Silakan jangan sungkan untuk berkomentar. Sekian dari saya, <b>Semoga Bermanfaat! Thanks for Reading, </b><b>Sharing </b><b>& Search and Visited : Cara Membuat Sosial Media Share Buttons for Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive

<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 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><div><div><b>Menu Navigasi</b> ini sering digunakan para blogger untuk bagian : <b>About, Contact us, Privacy Policy dan Disclaimer.</b> Menu ini sangat penting diterapkan di blogger Anda, karena ini memang penting, kenapa penting? Jika anda meminta permohonan<b> Iklan Adsense </b>maka menu navigasi ini harus ada dibagian blog anda. Top menu navigation menu ini merupakan sebuah tab menu yang berisi penunjuk arah pada bagian kategori/label dari Blog atau Situs, dan berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu navigasi ini sendiri berada pada bagian atas atau Header. Banyak para blogger menggunakan menu navigasi agar blog mereka terlihat lebih teratur dan memudahkan pengunjung untuk mencari apa yang mereka inginkan.<br /><br /><div style="text-align: left;">Baca Juga : </div><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-top-menu-navigasi-diatas.html">Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy</a></li></ul><b>Screenshoot : </b></div></div></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJApLJt8LmZ7Jnw1YyWIUEAiXhyphenhyphenoD8qnbaLLGmISGr7nQ5Qo4GBJYD8oJ-ZWeKZs0VHp-KdO6g2be9lSgYKBxrpV1OmHzoLXzWBuSni9aU9E2jpJRu9gBGKTphF0g8fgmRtTS59jiNcpU/s1600/Top+Menu+Navigasi_1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Navigasi" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJApLJt8LmZ7Jnw1YyWIUEAiXhyphenhyphenoD8qnbaLLGmISGr7nQ5Qo4GBJYD8oJ-ZWeKZs0VHp-KdO6g2be9lSgYKBxrpV1OmHzoLXzWBuSni9aU9E2jpJRu9gBGKTphF0g8fgmRtTS59jiNcpU/s640/Top+Menu+Navigasi_1.jpg" title="Top Menu Navigasi" width="640" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrAOXYllQ8tU5sHlRRrpYPu-28czMC_Uh4txd4PFgVjfQy-dxDLLk5b7vbVlqKsHSIdGH1IgBFpZo3bDp4HOG15qCKmXtVI0Q8VZTWG6pRj_7d5oT3YhsM2Lcyi8VI60GK1s-u36Vo9Dg/s1600/%255BMayCyber%255D+-+Navigasi+Menu+Top_1.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Top Navigasion Responsive" border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrAOXYllQ8tU5sHlRRrpYPu-28czMC_Uh4txd4PFgVjfQy-dxDLLk5b7vbVlqKsHSIdGH1IgBFpZo3bDp4HOG15qCKmXtVI0Q8VZTWG6pRj_7d5oT3YhsM2Lcyi8VI60GK1s-u36Vo9Dg/s640/%255BMayCyber%255D+-+Navigasi+Menu+Top_1.gif" title="Navigasi Top Menu" width="640" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrAOXYllQ8tU5sHlRRrpYPu-28czMC_Uh4txd4PFgVjfQy-dxDLLk5b7vbVlqKsHSIdGH1IgBFpZo3bDp4HOG15qCKmXtVI0Q8VZTWG6pRj_7d5oT3YhsM2Lcyi8VI60GK1s-u36Vo9Dg/s1600/%255BMayCyber%255D+-+Navigasi+Menu+Top_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive</span></b></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><b>Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian login</div><div style="text-align: left;">2.  Dashboard - Template</div><div style="text-align: left;">3. Edit HTML</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><b>Proses Pembuatan : </b><br /><br />1. Temukan kode<b> <span style="color: red;"></head></span></b></div><div style="text-align: left;">2. Copy&paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;"></head></span></b></div><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />// Menu Top<br />$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})<br />$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});<br />//]]><br /></script><br /><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script></code></pre><b><br /></b><b>Wajib Baca : </b><br /><br />1. Jika Font Awesome Icon sudah dipasang di blog Anda sebaiknya kode  <b></b><b> </b><br /><span style="color: blue;"><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/></span> Silakan anda hapus. Jika belum dipasang? Sebaiknya pasang. Karena Icon Sosial Media pada menu ini menggunakan Font Awesome.<br />2. Jika blog anda sudah memasang JQuery pada blog anda, sebaiknya kode <br /><span style="color: blue;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script<b>></b></span> silakan anda hapus jika sudah ada didalam template anda. Jika belum? Sebaiknya dipasang.<br /><br />3. Jika sudah? Temukan kode <b><span style="color: red;">]]></b:skin></span></b><br />4. Copy&paste kode berikut ini, dan letakkan diatas kode <span style="color: red;">]<b>]></b:skin> </b></span><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/*Top Menu Navigasi */<br />.menu-wrapper {background:#333;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;}<br />.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}<br />.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}<br />.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}<br />.top-menu li a {position:relative;font-family:'Open Sans';font-size:14px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}<br />.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}<br />.top-menu ul li a:hover {background:#FF9934;color:#fff;text-decoration:none;}<br />.top-menu li.socialwrap {float:right;}<br />.top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;}<br />.top-menu li.socialwrap a:hover{background:#FF9934;color:#fff;}<br />.top-menu li.socialwrap.pinterest {border-right:0;}<br />.top-menu a#pull {display:none;}<br /><br />@media only screen and (max-width:768px) {<br />.menu-top li ul { background:#222222; border:none; box-shadow:none; }<br />.menu-wrapper {margin:0;border:1px solid #e6e6e6;}<br />.top-menu {display:block;width:100%;padding:0}<br />.top-menu ul {text-align:center;}<br />.top-menu ul {display:none;height:auto;}<br />.top-menu a#pull{color:#fff;display:inline-block;font-family:"Open Sans";font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}<br />.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#eee;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}<br />.top-menu a#pull:hover{background:transparent}<br />.top-menu li {display:block;width:50%;text-align:left;border-right:none;}<br />.top-menu li a {padding:15px 20px;display:block;}<br />.top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;}<br />.top-menu ul li a:hover {background:#ef4824;color:#fff;}<br />.top-menu li.socialwrap {float:left;}<br />.top-menu li.socialwrap.twitter {border-left:0;}<br />.active {display:block;}<br />}<br />@media only screen and (max-width:640px) {<br />.menu-wrapper {margin:0 auto 20px auto;}<br />}<br />@media only screen and (max-width:480px) {<br />.top-menu li {display:block;width:100%;text-align:left;border-right:none;}<br />}</code></pre>5. Terakhir, Temukan kode <b><span style="color: red;"><div class='content-wrapper'></span> </b>. <b><span style="color: red;"><div class='header-wrapper'></span></b> .<b> </b><br /><b><span style="color: red;"><div class='header-outer'></span> </b>.<b> </b> Letakan kode berikut ini, dan letakkan diatas</div></div></div></div><span style="color: red;"> </span>kode yang sudah disebutkan diatas.<br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><div class='menu-wrapper'><br /><nav class='top-menu'><br /><ul><br /><li><a href='###' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li><br /><li><a href='###' title='Sitemap'><i class='fa fa-list'/> Sitemap</a></li> <br /><li><a href='###' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li><br /><li><a href='###' title='Privacy Policy'><i class='fa fa-unlock-alt'/> Privacy Policy</a></li><br /><li class='socialwrap pinterest'><a class='socialwrap pinterest' data-bpas-tooltip='Follow us on Pinterest' href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a></li><br /><li class='socialwrap youtube'><a href='###' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li><br /><li class='socialwrap rss'><a href='###' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li><br /><li class='socialwrap google'><a class='socialwrap google' data-bpas-tooltip='Follow us on Google+' href='###' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li><br /><li class='socialwrap twitter'><a class='socialwrap twitter' data-bpas-tooltip='Follow us on Twitter' href='###' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li><br /><li class='socialwrap facebook'><a class='socialwrap facebook' data-bpas-tooltip='Follow us on Facebook' href='###' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li><br /> </ul><br /> <a href='#' id='pull'>MENU</a><br /> </nav></div></code></pre>6. Simpan Template.<br /><br />Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar.<b></b> Silakan anda lihat blog anda, apakah widget tersebut sudah muncul atau belum. Sekian dari saya,<b> Semoga Bermanfaat!</b> Thanks for Reading &Sharing and visited :<b> Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive</b></div>

Diposting oleh Mr Xiulung

Cara Membuat Related Post Thumbnail&Snippet Responsive

<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 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">Related post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Related post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Related bisa disebut juga user freandly karena memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar, sejajar ke kana, hanya menampilkan judul saja dll. Related Post yang saya berikan ini berbentuk vertikal mengarah kebawah serta bergambar dan snippet dibawahnya.<br /><br />Baca Juga :<br /><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/07/cara-membuat-related-post-yang-paling.html">Cara Membuat Related Post Yang Paling Simple, dan Aman!</a></li></ul><b>Screenshoot :</b><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYMdfsnDzpvWhHBGnKGlsq4LkLDLNRrXlAlpdaIghE_O1R58_FQQNi3T9W_fWlEDuP9qgAASl1gUCimcsSI8dXeByWM5krKEq-iikcliukjEwQq-shNhlTu-Hvd9qBRCU-AQ-k1ZjK8k/s1600/Related+Post.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Related Post Responsive" border="0" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYMdfsnDzpvWhHBGnKGlsq4LkLDLNRrXlAlpdaIghE_O1R58_FQQNi3T9W_fWlEDuP9qgAASl1gUCimcsSI8dXeByWM5krKEq-iikcliukjEwQq-shNhlTu-Hvd9qBRCU-AQ-k1ZjK8k/s400/Related+Post.jpg" title="Related Post Vertikal" width="400" /></a></div></div><br /><div style="text-align: center;"><span style="font-size: large;"><b>Cara Membuat Related Post Thumbnail& Snippet Responsive</b></span></div><br /><b>Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian login<br />2. Dashboard - Template<br />3. Edit HTML<b> </b><br /><br /><b>Proses Pembuatan :</b><br /><br />1. Temukan kode <span style="color: red; font-weight: bold;">]]></b:skin> </span>atau <span style="color: red; font-weight: bold;"></style></span><br />2. Copy & Paste kode berikut ini, dan letakkan diatas kode<b> <span style="color: red;">]]></b:skin> </span></b>atau <span style="color: red; font-weight: bold;"></style></span><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/* CSS Related Posts */<br />#maycyberrelated { background-color:#FFF; margin:10px 0 0 0; padding:10px;border:1px solid #ddd}<br />#maycyberrelated h4 { color:#fff;font-family:'Arimo';font-size:18px; margin:-10px -10px 10px; padding:10px 3px; text-align:center; font-weight:bold;position:relative; background-color:#374760;}<br />#maycyberrelated ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }<br />#maycyberrelated ul { margin-top:10px }<br />#maycyberrelated li { float:left; width:100%; margin:0 0 5px}<br />#maycyberrelated .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }<br />#maycyberrelated strong { font-weight:bold;font-family:'Arimo';font-size:15px; line-height:1.1em;color:#222 }<br />#maycyberrelated p { margin:2px 0 0;font-family:'Arimo';font-size:15px;text-align:justify; }<br />.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqeXJgB2kiY0prBOgylw6jHhJi5hw552Zi36_QTd3lZJbpc9Old6gsdmwSC1mVFiigGztGJUy8Cwo0C4qEU7U55PYGKunjIX075s6LO2h0uaaxIMUYoUM1nHFoz_pOEUsOcGUVTwOdgI0/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }<br />#virelated-posts {margin:20px 20px 20px 0;padding:0;}<br />ul#virelated-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;}<br />ul#virelated-summary li:last-child{border-bottom:none;}<br />ul#virelated-summary li img{display:none;}<br />ul#virelated-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}<br />#virelated-summary .news-text {display:block;padding:0;font-size:12px;margin-bottom:0;}</code></pre>3. Jika sudah? Temukan lagi kode <b><span style="color: red;"><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'></span></b><br />4. Copy&Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'></span></b><br /><br /><b>Wajib Baca : </b>kode<b> </b><span style="color: blue;"><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'></span><b style="font-weight: bold;"> </b>biasanya lebih dari satu, silakan anda pilih yang pertama.<b></b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><div id='virelated-posts-mobile'><br /> <h3>Related Posts :</h3><br /> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><br /> </div></code></pre>5. Terakhir, Temukan kode <b><span style="color: red;"><data:post.body/></span></b><br />6. Copy&Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span> </b></div></div></div></div><br /><b>Wajib Baca :</b><br /><br />Biasanya kode <span style="color: blue;"><data:post.body/></span> lebih dari satu, silakan anda pilih yang kedua/ketiga.<br />Jika bagian <span style="color: blue;"><data:post.body/></span> tidak bisa, atau tidak muncul widget related post. Anda bisa meletakkan kode diatas, <span style="color: blue;">tepat dibawah tombol share</span>, atau <span style="color: blue;">dibawah about arthor</span>, atau <span style="color: blue;">diatas next-previous.</span><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='maycyberrelated'/><br /><script type='text/javascript'><br />//<![CDATA[<br />function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwp3inanN0o4BhL2VGYykeqjC2sgsrnsmajBCK8tM8e8SIbBrExWn4BZacU4SecmOEBhNNRqhNm5SvhwBKpUHc3agcwVev6CgTEp4AMJ4V_E644pulSkNulM6W6FU_iO-e3-pw3MiygdF/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Related Post",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="maycyberrelated"></div>');f.containerSelector="#maycyberrelated"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#maycyberrelated-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#maycyberrelated"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="maycyberrelated"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="maycyberrelated-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};<br />relatedPostsWidget({<br />related_title: "Related Posts",<br />containerSelector: "#maycyberrelated",<br />maxPosts: 6,loadingClass: "loadingxx",<br />rlt_thumb: 70<br />});<br />//]]><br /></script><br /><div class='clear'/><br /></b:if></code></pre>7. Simpan Template.<br /><br />Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar pasti saya akan membantu anda. Sekian dari saya, <b>Semoga Bermanfaat! </b>Thanks for Reading & Sharing and Visited :<b> Cara Membuat Related Post Thumbnail& Snippet Responsive.</b> </div>

Diposting oleh Mr Xiulung

Cara Membuat Tombol Share Buttons Responsive pada Blogger

<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 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">Setiap Blogger jika memang ingin website yang anda kelola meningkat prioritasnya serta yang terbaik, efektif yaitu dengan cara berbagi konten gratis ke sosial media. Cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs adalah dengan rajin menge-share artikel kita ke media sosial, seperti Facebook, Twitter, Dll. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media dari Blogger yaitu dengan cara memasang tombol share buttons. <br /><br /><div style="text-align: left;"><b>Baca Juga : </b></div><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-tombol-share-buttons.html">Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger</a></li><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-flat-social-share-buttons.html">Cara Membuat Flat Social Share Buttons di Blogger</a></li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7zqnKT81W7cfeJwhSLHtF20N67rAnclB1uP3qmxZ0r0DfmpbRLHA4HHEE7GeiieZGutGK3l64c9YoBY6GEjLf-bzRknILZZSXe_fi7rbsvEhr8-XwOZp-V0s4gVB2LIXCDR3t4cmMt0/s1600/%255BMayCyber%255D+-+Share+Buttons+Responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="[MayCyber] - Share Buttons RRSSB " border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7zqnKT81W7cfeJwhSLHtF20N67rAnclB1uP3qmxZ0r0DfmpbRLHA4HHEE7GeiieZGutGK3l64c9YoBY6GEjLf-bzRknILZZSXe_fi7rbsvEhr8-XwOZp-V0s4gVB2LIXCDR3t4cmMt0/s400/%255BMayCyber%255D+-+Share+Buttons+Responsive.jpg" title="[MayCyber] - Share Buttons RRSSB " width="400" /></a></div>Selain Tujuan berbagi ke media sosial adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik mengklik postingan Anda, Selain itu juga Tujuan berbagi ke media sosial adalah agar orang lain tahu blog Anda, dan melihat terus-menerus alamat blog anda di Timeline mereka. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung dengan hanya satu klik. Karena ini memang dibutuhkan, sebaiknya Anda memasang Tombol Share di blog Anda.<br /><b><br />Screenshoot : </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA2YEUlGZgAuFgpm12FvztsE2ULwSclyUzZbB28kAPwtEmIe4pagMqlnTrzYVf7fjxGjR7gf49J9k0DA9H14J148z1isskCR_3FiFS4DFb1Ja7YFPuigiyyxtUcZVyyl348qZSNBrLUg/s1600/share+buttons+rrssb-preview.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA2YEUlGZgAuFgpm12FvztsE2ULwSclyUzZbB28kAPwtEmIe4pagMqlnTrzYVf7fjxGjR7gf49J9k0DA9H14J148z1isskCR_3FiFS4DFb1Ja7YFPuigiyyxtUcZVyyl348qZSNBrLUg/s640/share+buttons+rrssb-preview.gif" width="640" /></a></div><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Tombol Share Buttons Responsive pada Blogger</span></b></div><br /><b>Cara Pertama : </b><br /><br />1. Buka Blogger - Kemudian login.<br />2. Dashboard - Template</div></div>3. Edit HTML<br /><br /><b>Proses Pembuatan : </b><br /><br />1. Temukan kode <b style="color: red;">]]></b:skin> </b>atau<b> <span style="color: red;"></style></span></b><br />2. Copy & Paste kode berikut ini, dan letakkan diatas kode <b style="color: red;">]]></b:skin> </b>atau<b> <span style="color: red;"></style></span></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Share Buttons RRSS<br />----------------------------------------------- */<br />.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111}<br /><br />/* Share Buttons RRSS End<br />----------------------------------------------- */</code></pre>3. Jika sudah? Temukan lagi kode <b><span style="color: red;"></body></span></b><br />4. Copy & Paste kode berikut ini, dan letakkan diatas <b><span style="color: red;"></body></span></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'>//<![CDATA[<br />/* Start Share Buttons RRSSB */<br />(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each(function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o/i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery);<br /><br />/* Share Buttons RRSSB: JavaScript Ends */<br />//]]></script></code></pre>5. Jika sudah? Terakhir, Temukan kode <b><span style="color: red;"><data:post.body/></span> </b>.<b> </b>Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga. <br />6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- RRSSB Share Buttons Start --><br /><ul class='rrssb-buttons'><br /> <li class='email'><br /> <a expr:href='&quot;mailto:?subject=Check%20out%20&quot; + data:post.title + &quot;&amp;body=Visit:%20&quot; + data:post.canonicalUrl '><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a><br /> </li><br /> <li class='facebook'><br /> <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a><br /> </li><br /> <li class='linkedin'><br /> <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803 c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048 h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501 c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546 C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a><br /> </li><br /> <li class='twitter'><br /> <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a><br /> </li><br /> <li class='reddit'><br /> <a expr:href='&quot;http://www.reddit.com/submit?url=&quot;+data:post.canonicalUrl' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg><br /></span><span class='text'>reddit</span></a><br /> </li><br /> <li class='googleplus'><br /> <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><br /> <g><br /> <g><br /> <path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/><br /> <polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 '/><br /> </g><br /> </g></svg></span><span class='text'>google+</span></a><br /> </li><br /> <li class='pinterest'><br /> <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785 C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458 c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557 c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168 C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239 c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a><br /> </li><br /></ul><!-- RRSSB Share Buttons End --></code></pre>7. Silakan Simpan Template.<br /><br />Sekian Tutorial Blogger kali ini, Jika terdapat kesalahan silakan jangan sungkan untuk berkomentar.<b> </b>Silakan anda lihat postingan blog anda atau lihat bagian bawah blog anda. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Share Buttons Responsive pada Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung