Tampilkan postingan dengan label responsive. Tampilkan semua postingan
Tampilkan postingan dengan label responsive. Tampilkan semua postingan
hamburger menu dengan toggle beranimasi

Model model desain template web tidak dapat ditinggalkan begitu saja. Selama dakade tentunya para desainer telah bekerja keras untuk membuat tampilan dan antarmuka halaman web yang dapat di pergunakan dengan sama baiknya di berbagai ukuran layar perangkat.

Sehingga muncul istilah desain responsif dan desain adaptif. Keduanya merujuk pada penggunaan halaman di layar desktop dan mobile. Bisa di pergunakan di layar dengan ukuran besar seperti PC desktop dan laptop, bisa di akses dengan mudah dan nyaman melalui layar tablet dan hape.


Contoh menu yang responsif adalah ketika ia dibuka pada beberapa layar berbeda: Pada PC desktop, laptop, tablet dan hape mobile. Pada PC layar besar menu tersebut tampak horisontal, sedangkan pada layar kecil seperti hape ia menjadi berbentuk menu hamburger yang dapat di klik untuk memunculkan menu menu. 

Sedangkan pada desain adaptif menu akan terlihat sama baik pada saat di buka melalui layar desktop, laptop, tablet maupun hape mobile.

Model dengan Javascript:

yang unik pada menu hamburger yang akan saya uraikan rahasia pembuatannya adalah: Toggle dari hamburger garis tiga bersusun menjadi close (x). Biasanya itu di buat dengan Javascript. Namun bundle CSS3 ternyata mampu memberikan efek toggle yang sama. Saya tunjukan contoh dengan menggunakan Java script:
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>

Di atas adalah pengaturan CSS perhatikan perubahan dari bar1 bar2 hingga3, itu pengaturan 3 garis bersusun yang kita sebut menu hamburger tadi.

HTMLnya:

<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>

Namun ia tidak dapat memberikan transisi toggle atau peralihan dari garis tiga
hamburger menjadi animasi tutup/close (x) tanpa javascript berikut:

<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>

Hasilnya:

See the Pen by sufyan (@sufyan33) on CodePen.

 


Model murni CSS:

Cara menerapkan menu hamburger model blogger editblogtema khusus template contempo dan essential (bisa untuk template varian template lain namun dengan sedikit editing bagian CSSnya):

1. CSS
  1. Masuk ke pengaturan atau dasbor blogger
  2. Pilih Tema
  3. Pilih Edit HTML
Pada halaman editor HTML blog yang telah terbuka cari kode </head> dan letakan kode CSS berikut di atasnya:
 <style>
       html,
a {
  text-decoration: none;
  color: #cdcdcd;
  transition: color 0.3s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: #6f0000;
}

h1 {
  text-align: center;
       float:center;
       margin-left:20px;
  position: absolute;
  top: 28px;
  color: #cdcdcd;
  -webkit-user-select: none;
  user-select: none;
}

#navicon {
  display: block;
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 999;
  -webkit-user-select: none;
  user-select: none;
}

#navicon input {
  display: block;
  width: 50px;
  height: 32px;
  position: absolute;
  top: 5px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 1000;
  -webkit-tap-highlight-color: transparent;
}

#navicon span {
  display: block;
  width: 33px;
  height: 4px;
  top: 17px;
  left: 10px;
  margin-bottom: 5px;
  position: relative;
  background: #CCCCFF;
  border-radius: 3px;
  z-index: 999;
  transform-origin: 4px 0px;
  transition: transform 0.5s ease-in-out, background 0.5s ease,
    opacity 0.55s ease;
}

.drawer {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: -100px 0 0 -50px;
  padding-top: 125px;
  padding-right: 20px;
  background: #000000;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.drawer li {
  transform: translate(0, 100%);
  transition: transform 1s ease-in-out;
  list-style-type: none;
  text-align: center;
  padding: 10px 20px;
  font-size: 22px;
}

#navicon input:checked ~ .drawer {
  opacity: 0.8;
  visibility: visible;
}

#navicon input:checked ~ .drawer li {
  transform: translate(0, 0);
}

#navicon input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #cdcdcd;
}

#navicon input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#navicon input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

#navicon span:first-child,
#navicon span:nth-last-child(2) {
  transform-origin: 0% 100%;
}   
</style>
2. HTML

Lalu di bawah kode </head> tadi letakan kode HTML berikut :
  <header>
  <div id='navicon'>
    <input type='checkbox'/>
    <span/>
    <span/>
    <span/>
    <ul class='drawer'>
       &lt;li&gt;&lt;a href=&#39;/&#39;&gt;&lt;svg style=&#39;width:44px;height:44px&#39; viewBox=&#39;0 0 24 24&#39;&gt;
    &lt;path d=&#39;M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z&#39; fill=&#39;currentColor&#39;/&gt;
&lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
       <li><a href='#link1'>Trik meletakan profile penulis</a></li>
      <li><a href='#link2'>Kode warna</a></li>
      <li><a href='#link3'>Utak atik template</a></li>
      <li><a href='#link4'>A.I dan Singularity</a></li>
      <li><a href='#link5'>Paradox</a></li>
      <li><a href='#link6'>Navigasi menu Blog</a></li>
      <li><a href='#link7'>Sudut Cerita</a></li>
      <li><a href='#link8'>Tips dan Triks</a></li>
    </ul>
    </div></header>      
Ganti setiap tulisan (link menu) yang disorot kuning dengan URL atau link kalian sendiri
Ganti setiap tulisan (judul menu) dengan Judul menu kalian sendiri.

Lihat contohnya:

See the Pen by sufyan (@sufyan33) on CodePen.



3. Kesimpulan

Menu tersebut adalah responsif dan terlihat adaptif pada setiap ukuran layar
Murni CSS tanpa Javascript
Namun untuk menerapkannya seperti template editblogtema, kalian harus merombak layout template secara keseluruhan, misalnya tataletak header dari section ke section harus dipindah dari posisi aslinya. 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Halo Zen Z!

Dulu sebelum zamannya perangkat mobile, konon para websider sangatlah umum menggunakan satu jenis desain web saja: Model desktop atau model laptop. Desain model itu pada zamannya tentu saja bukan masalah. Soalnya orang orang masih bekerja menggunakan layar lebar, mulai dari PC desktop hingga laptop, semua serba besar, berat dan tebal. Orang masih belum memegang smartphone dan tablet. Ia baru lahir belakangan.

Seperti kata pepatah bahwa tidak ada yang abadi di dunia fana ini, semuanya akan berubah. Hal hal baru akan datang mempengaruhi atau menggantikan hal hal lama, apalagi jika hal tersebut terkait dengan kemajuan teknologi, dan desain website memang tidak bisa tidak pasti akan di pengaruhi oleh kemajuan teknologi.

Perangkat mobile muncul, layarnya kecil, tapi perangkat tersebut perlahan lahan memiliki kemampuan komputer, dan mau tidak mau ia mula terlibat dengan dunia web. Ketika tidak semua orang memiliki sebuah PC desktop dan laptop dengan berbagai alasan teknis dan alasan personal. Sebaliknya hampir semua orang pada akhirnya memiliki perangkat mobile di dalam genggaman tangan mereka. Konten harus fleksibel dan dapat menyesuaikan diri terhadap ukuran layar perangkat apapun.

Dan dunia bisnis membutuhkannya dan lalu bergantung pada kecepatan mobile dalam melakukan berbagai hal: Dari berkomunikasi hingga bertransaksi. Dari sanalah para desainer web berfikir keras bagaimana menampilkan halaman web pada ukuran layar mobile, supaya enak di baca, supaya bisa mengambil alih beberapa aktivitas model bisnis.

Sehingga di kalangan desainer muncul motto berikut: 
Konten itu seperti air
Jika dimasukan ke dalam cangkir ia akan mengikuti bentuk cangkir
Jika dimasukan ke dalam bottol ia akan mengikuti bentuk botol
Jika di masukan ke dalam teko teh ia akan berbentuk teko
konten fleksibel seperti air
kredit gambar: Stephanie Walter

Awalnya di buatlah desain responsif. Berbasis atau berawal dari desain WEB

Lalu muncul lagi desain halaman adaptif, yang terakhir ini masih baru. Jauh lebih cepat, dapat menampung gambar dengan resolusi tinggi tanpa merugikan kecepatan. Di buat murni berdasarkan atau karena kemunculan perangkat mobile.

Di desain untuk mobil dan dasarnya benar benar mobile bukan sekedar 'mobile friendly'.


Beda desain responsif dengan adaptif 

Dua pendekatan untuk mendesain web pada era mobile di berbagai ukuran perangkat pada masa kita ini adalah desain responsif dan desain adaptif. 

Dalam istilah yang sederhana, desain responsif menggunakan satu tata letak dan menyesuaikan konten, navigasi, dan elemen halaman agar sesuai dengan layar pengguna. Desain responsif akan mengkonfigurasi ulang semua elemen desain supaya ia pas saat di buka di desktop, laptop, tablet, atau ponsel. 

Ia menggunakan media querry pada CSS 3.

Pada desain yang responsif misalnya sebuah menu navigasi jika di buka melalui laptop dan PC desktop tampak tampil horisontal, namun ketika di buka melalui layar kecil hape yang mobile ia menjadi menu hamburger yang apabila di klik akan memunculkan menu dropdown ke bawah! Itu salah satu contoh cara bekerjanya desain responsif

Sedangkan dengan menggunakan desain adaptif, tata letak adalah tetap disana, sedangkan ukuran yang berbeda beda dibuat beradaptasi dengan ukuran layar pengguna. Berbeda dengan pendekatan yang lebih responsif, desain adaptif menggunakan berbagai ukuran desain dan ia tetap, tetap bentuknya, tetap tataletaknya. hanya saja ia dapat di buka di berbagai perangkat. 

Kekurangan dan kelebihan:

Responsif menggunakan media query CSS3 dapat menyesuaikan diri pada setiap ukuran layar tidak perduli seberapa banyak ukuran layar yang ada di dunia pada saat ini, responsif berarti fleksibel, dan itu dapat meningkatkan pengalaman SEO. Akan tetapi media query ini juga dapat membatasi kecepatan loading halaman jika pemasangannya kurang tepat.

Adaptif adalah beberapa halaman berbeda dibuat berdasarkan ukuran perangkat yang berbeda pula, jadi ketika digunakan laptop dan desktop halaman adaptif mengelola halaman adaptif, ketika menggunakan tablet dan hape halaman adaptif menampilkan halaman mobile. Seluruh elemen akan tampak hadir dan tampil lebih cepat daripada halaman responsif.

Akan tetapi ketika ukuran layar perangkat baru hadir ke dunia, model halaman adaptif tidak akan serta merta menyesuaikan dirinya, disini bedanya perbandingan halaman responsif dengan adaptif. Halaman responsif dapat menyesuaikan diri melalui hitungan atau nilai yang di tentukan (dituliskan) pada media query sedangkan halaman adaptif mengambil teknik pembuatan kode kode yang berbeda dari sisi klien. Dan jika mau di bandingkan mana yang lebih SEO? Maka halaman responsif akan jauh lebih SEO dibanding dengan halaman adaptif walaupun ia jauh lebih cepat.

halaman responsif vs halaman adaptif

kekurangan terbesar desain adaptif paling tidak untuk permulaan hidupnya adalah: Desainer dan pengembang berikut pembuat gawai layar atau produsen piranti keras harus saling bekerja sama. Artinya ini adalah projek mahal.

Sedangkan kelebihannya 

Desain adaptif berguna jika Kita ingin menambahkan versi seluler situs web tanpa mendesain ulang semua pekerjaan yang ada. Jika kalian memiliki situs web dan tidak punya waktu atau anggaran untuk membuat yang baru dan responsif, Desain Adaptif adalah alat yang berguna untuk memperbarui situs yang telah ada. Tapi harus di ingsat: Ya itu tadi jika faktor environment-nya memang telah tersedia.

Paling tidak sampai sejauh ini sebelum perkembangan dunia web desain berkembang semakin jauh, halaman responsif masih menjadi pilihan yang baik.

contoh saat mendesain halaman web, seorang desainer akan membuat berbagai menu navigasi yang rumit namun dapat meningkatkan pengalaman pengguna pada saat menggunakannya. 

Misalnya melihat kepada perkembangan desain yang adaptif inilah kami memilih menggunakan menu navigasi hamburger buka tutup yang tampilannya akan selalu sama pada setiap ukuran layar ketimbang jika menggunakan template viomagz yang pada ukuran layar besar ia tampak sebagai menu horisontal sedangkan pada tampilan mobile ia tampak menjadi menu mobile yang hamburger. 

Bedanya kami menggunakan melulu trik dan kode kode pengaturan CSSI, sedangkan pada viomagz ia menggunakan javascript untuk pengalihan (toggle) dari hamburger ke close (x).

Aku tidak mengklaim template ini adaptif, akan tetapi ia dapat mewakili template yang responsif sekaligus adaptif. Walaupun perbedaannya tidak akan diketahui oleh kebanyakan pengguna.

Namun pada perkembangan berikutnya halaman dengan desain adaptif akan menemukan masa depannya dan menjadi selangkah lebih maju daripada halaman responsif.

Dan sekali lagi kami ingatkan tidak akan ada yang abadi di dunia ini. Halaman responsif, halaman adaptif, dan halaman AMP, semuanya akan menemukan kejayaannya masing masing namun suatu hari akan berakhir stagnan juga.

Next aku akan membeberkan cara membuat navigasi dan tombol navigasi murni CSS yang adaptif dan responsif...

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Pada saat kita ingin menguji apakah halaman web yang sedang kita kelola sudah responsif? Tentu saja mengujinya paling tidak harus dengan cara membuka halaman tersebut satu persatu melalui perangkat perangkat berikut: PCDesktop, PC Laptop, Tablet/iPad, dan smartphone (perangkat mobile).
tampilan halaman responsif situs editblogtema

Ribet bukan? Nah ada beberapa halaman web yang menyediakan tool online untuk keperlua itu. Akan tetapi saya sangat tertarik dengan versi blogspotnya. Halaman tersebut bisa di sentuh layaknya perangkat benaran, misalnya klik menu, buka konten menulis komentar melalui semua perangkat yang disediakan biasanya ya di wakili oleh 4 ukuran layar monitor gagdet yang telah kita sebutkan di atas tadi.

Coba perhatikan DEMO

Halaman ini adalah bentuk salinan dari ami.responsivedesign.is. Namun masih dalam bentuk subdomain blogspot.

Silahkan ganti alamat di dalam kolom di bawah gambar 4 perangkat di atas untuk melihat apakah halaman blog atau halaman web Anda telah responsif? Nah coba deh gunakan tool responsinator berbasis blogspot ini.

Responsinator yang disediakan khusus buat blogger berbasis blogspot.

Selamat mencoba!


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

for making simple navigation menu
HTML and CSS for making simple blogger menu
Terlebih dahulu saya jelaskan keuntungan menggunakan model menu navigasi seperti ini:
  1. Modelnya yang berada dalam bar/frame dapat di scroll dari kanan ke kiri dan sebaliknya membuat dia mampu menampilkan sebanyak banyaknya menu navigasi untuk blog kalian. Terus geser sampai menu lain hilang di tepi halaman dan menu baru muncul dari tepi lain halaman. Tidak ada batas.
  2. Responsive. Tidak perlu kuatir tidak bisa ditampil pada seceen atau ukuran layar perangkat yang berbeda. Tidak perlu membuat menu dropdown lagi. Mau di layar besar (desktop dan laptop) maupun layar kecil (tablet dan hape) menu tetap berformat horisontal.
  3. Otomatis hemat ruang. 
Kekurangan:
  1. Kadang orang tidak menyadari bahwa begitu banyak menu yang dapat di geser atau di gulung (di scroll) ke kiri dan ke kanan.
Contoh:


What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Coba Sentuh dengan Jari jika menggunakan hape, atau gunakan mouse untuk mengklik tanda panah dibawah navigasi di ujung bagian bawah kiri dan kanan, dan geser menu yang berjumlah lebih 30 menu di dalam bar berwara biru diatas.

Tampaknya Menu seperti diatas telah diterapkan pada template Textrimnya Mbak Igniel, walau mungkin ditulis dengan cara berbeda karena saya tidak tahu bagaimana cara mbak Igniel membuatnya. Namun dalam kesempatan ini saya mendapatkan kesempatan dari admin editblogtema untuk mengasah dan melatih kemampuan "koding" sederhana melalui blog ini dan Saya berikan contoh penerapannya.

Terapkan pada blogger
Ya karena blogger di tulis berbasis HTML dan kode pembuatan menu diatas adalah HTML (tanpa JavaScript) dan ditambah sekelumit kode CSS yang akan membuat templat blog kalian menjadi sangat kencang. Tidak akan bisa di terapkan ke template Wordpress yang ditulis dari inti kode kode PHP, cara menerapkannya adalah sebagai berikut:
1. Tambahkan HTML
  1. Masuk kepengaturan Blogger
  2. Pilih Tema
  3. Klik Edit HTML
  4. Pada halaman editor HTML cari kode atau tag penutup </head>
Letakan kode berikut tepat di bawah kode </head> tadi. (pada beberapa kasus bisa juga diletakan di bawah tag <body>
<div class="scrollAnissa">
<a href="#home">Menu1</a>
<a href="#news">Menu2</a>
<a href="#contact">Menu3</a>
<a href="#about">Menu4</a>
<a href="#support">Menu5</a>
<a href="#blog">Menu6</a>
<a href="#tools">Menu7</a>
<a href="#base">Menu8</a>
<a href="#custom">Menu9</a>
<a href="#more">Menu10</a>
<a href="#logo">Menu11</a>
<a href="#friends">Menu12</a>
<a href="#partners">Menu13</a>
<a href="#people">Menu14</a>
<a href="#work">Menu16</a>
<a href="#work">Menu17</a>
<a href="#work">Menu18</a>
<a href="#work">Menu19</a>
<a href="#work">Menu20</a>
<a href="#work">Menu21</a>
<a href="#work">Menu22</a>
<a href="#work">Menu23</a>
<a href="#work">Menu24</a>
<a href="#work">Menu25</a>
<a href="#work">Menu26</a>
<a href="#work">Menu27</a>
<a href="#work">Menu28</a>
<a href="#work">Menu29</a>
<a href="#work">Menu30</a>
<a href="#work">Menu31</a>
</div>
2. Tambahkan CSS
Masih di halaman editor HTML, letakan kode CSS berikut di atas kode </head>
<style>
div.scrollAnissa {
background-color: #0000FF;
overflow: auto;
white-space: nowrap;
}
div.scrollAnissa a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollAnissa a:hover {
background-color: #FF0000;
}
</style>
 Selanjutnya SAVE template. Saya ingin melanjutkan tulisan ini di lain kesempatan dengan tema mempercantik tampilan navigasi blogger menggunakan ikon SVG. 

SHARE YA:

Menurut saya sih ini tombol share paling responsive telah dibuat oleh rekan blogger kita. Seperti anda ketahui  tombol share cukup signifikan mendukung kinerja SEO sebuah blog, jadi tidak perlu dibahas lagi manfaatnya.
Persiapan:

  1. Masuk ke pengaturan blogger
  2. Pilih tema atau template
  3. Pilih editHTML

Langkah 1
Untuk memasang tombol share ini pastikan template blogger anda telah terpasang kode pemanggil font awsome yang harus anda pasang dibawah kode <head>:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

Dan juga pastikan telah terpasang kode API (Application Programming interface) pada template anda untuk memastikan semua kode perintah widget share yang mau kita pasang berjalan sempurna, masangnya sama yakni dibawah kode <head> atau diatas kode </head> kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: Jika kedua kode diatas telah terdapat pada template anda (template tempalte premium telah memiliki kode kode ini) maka langkah diatas dapat diabaikan.

Langkah 2

Cari kode </head> letakan kode di bawah ini sebelum atau sesudahnya (pembuatnya menyarankan sesudahnya, saya berpendapat lebih baik sebelumnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


.bsd_horizontal_sharebar {
position: relative;
background: none;
z-index: 2;
width: 100%;
padding: 10px 0;
display: inline-block;
font-family: sans-serif;
margin: 5px 0px;
border-top: 1px dotted rgba(0, 0, 0, 0.05);
border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.bsd_horizontal_sharebar .Share_buttons {
display: block;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
text-align: center;
margin: 0 auto;
display: inline-block;
min-width: 41px;
}
.bsd_horizontal_sharebar .Share_buttons .wrap1 {
display: inline-block;
width: 31px;
float: left;
}
.bsd_horizontal_sharebar .Share_buttons ul {
margin: 0;
padding: 0;
}
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
list-style: none;
list-style-type: none;
padding: 0;
margin: 1px;
float: left;
width: 16%;
max-width: 115px;
display: inline-block;
font-size: 13px;
overflow: hidden;
text-align: left;
height: 25px;
line-height: 25px;
color: #fff;
border: 1px solid rgba(0,0,0,0.04);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
color: #fff;
font-size: 17px;
font-weight: normal;
font-family: FontAwesome;
display: inline-block;
text-align: center;
padding: 0;
height: 25px;
line-height: inherit;
width: 30px;
background-color: rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.bsd_horizontal_sharebar .Share_buttons .bs_fb {
background: #3a579a;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb:hover {
background: #314a83;
}
/*--Tweeter---*/
.bsd_horizontal_sharebar .Share_buttons .bs_twtr {
background: #00abf0;
}
.bsd_horizontal_sharebar .Share_buttons .bs_twtr:hover {
background: #0092cc;
}
/*--Google Plus---*/
.bsd_horizontal_sharebar .Share_buttons .bs_gplus {
background: #df4a32;
}
.bsd_horizontal_sharebar .Share_buttons .bs_gplus:hover {
background: #be3f2b;
}
/*--Pinterest---*/
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
background: #cd1c1f;
}
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst:hover {
background: #ae181a;
}
/*--linkedin---*/
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
background: #2554BF;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin:hover {
background: #224EB4;
}
/*---Total Share----*/
.bsd_horizontal_sharebar .Share_buttons .share.h6 {
font-size: 10px;
font-weight: bold;
text-shadow: none!important;
text-decoration: none;
text-align: center;
color: #000000;
border-top: 3px solid #FFF600 !important;
border-bottom: 0;
padding: 0px !important;
padding-top: 5px!important;
margin: 0 !important;
line-height: 8px;
border-radius: 75% 0;
}
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible !important;
width: 95px !important;
}
.bsd_horizontal_sharebar .Share_buttons .share .count.h4 {
font-size: 18px;
font-weight: bold;
text-shadow: none;
text-decoration: none;
font-family: sans-serif;
text-align: center;
color: #FF0000;
line-height: 15px;
margin-top: 0px;
margin: -4px 0px 2px 0;
min-height: 15px;
padding: 0px;
border: none;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs {
position: relative;
color: #C3C3C3;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 11px;
float: right;
min-width: 12px;
font-family: sans-serif;
padding: 0px 5px;
background-color: rgba(0,0,0,0.28);
border-radius: 0px 0px 0px 15px;
}
@media only screen and (max-width: 979px) {
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs
{
display: none !important;
}
}


@media only screen and (max-width:768px) {

.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;


font-size: 11px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
min-width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
width: 30px;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
margin: 1px 3px;
}
@media only screen and (max-width:479px) {
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible!important;
width: 80px!important;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
width: 25px !important;
margin: 2px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.14);
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
display: none !important;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
width: 25px !important;
}
}
</style>
</b:if>

Langkah ke 3:
Di dalam template anda (opsi editHTML) cari kode: share buttons kodenya dalam template aka terlihat seperti:

<!--share buttons-->

di bawahnya ada kode berikut:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Kalau tidak ada pasti bentuknya seperti ini:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus kode dibawah share button tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://bloggersstand.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-bs").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
<div class='bsd_horizontal_sharebar'>
<div class='Share_buttons'>
<ul>
<li class='share'>
<div class='share-bs' data-service='total'>
<div class='count h4'></div>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='bs_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='bs_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @bloggersstand - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-twitter'></i></div>
<div class="wrap">Tweet</div>
<div class='share-bs' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='bs_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class="wrap1"><i class='fa fa-google-plus'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='bs_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-pinterest'></i></div>
<div class="wrap">Pin</div>
<div class='share-bs' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='bs_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-linkedin'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
</b:if>


Demo telah di cobakan ke blog edittema ini.

SHARE YA:

Navigasi menu itu penting terutama bagi blog blog dengan niche khusus. Membuat tampilan muka sebuah blog menjadi menarik dan mudah di fahami oleh pengunjung. Menurut hemat kami Menu Navigasi yang baik itu harus responsive dan mobile friendly. Artinya dapat berfungsi dan atau di fungsikan dengan baik pada tampilan desktop dan hape. Terutama pada zaman sekarang yang serba mobile tampilan blogger pada ponsel cerdas menjadi amat penting!

Lihat Menu Navigasi hasil buatan kami:

Atau lihat DEMO
 Cara pembuatannya adalah:
(Sangat cocok diterapkan ke template awsome, sederhana dan Perjalanan yang sudah di modifikasi menjadi responsive dan mobile friendly.)
  1. Masuk ke pengaturan blogger
  2. Pilih Theme/Tema
  3. Pilih EditHTML
Langkah pertama: Tambahkan HTML
Pastikan template anda telah terpasang kode: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Jika sudah ada langsung saja cari kode </header> dengan jalan pintas menekan ctr+f pada keyboard dan enter. Jika sudah ketemu letakan kode berikut diatas kode </header> tersebut:


<!-- Top Navigation Menu -->
<div class='topnav'>
  <a class='active' href='/'>KotakPandoraSAtu</a>
  <!-- Navigation links (hidden by default) -->
  <div id='myLinks'>
    <a href='#news'><i aria-hidden='true' class='fa fa-file-text-o'/>News</a>
    <a href='#contact'><i aria-hidden='true' class='fa fa-phone'/>Contact</a>
    <a href='#about'><i aria-hidden='true' class='fa fa-globe'/>About</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>
    <i class='fa fa-bars'/>
  </a>
</div>


Langkah kedua Tambahkan CSS.
Caranya cari kode ]]></b:skin> dan letakan kode berikut diatasnya:

/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #6495ED;
position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}

/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Style the active link (or home/logo) */
.active {
background-color:#6495ED;
color: white;
}


Langkah ketiga Tambahkan JavaScript

Caranya cari kode </body> lalu letakan kode berikut diatasnya:

<script>/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById(&quot;myLinks&quot;);
if (x.style.display === &quot;block&quot;) {
x.style.display = &quot;none&quot;;
} else {
x.style.display = &quot;block&quot;;
}
}</script>


Langkah berikutnya SAVE template.

untuk melihat contoh lihat video tangkapan layar yang saya buat:
Catatan:
  • Ingat memasukan kode Js kedalam tag </body> harus selalu di awali dengan <script> dan kemudian di tutup dengan </script>
  • Kode warna  CSS yang kami tandai dengan sorotan warna pink muda dapat anda robah sehingga merobah warna tampilan navigasi bar. 


SHARE YA: