Berbagai Cara

Cara Membuat Next Page Artikel Di Dalam Posting



Kali ini saya mau berbagi Cara Membuat Next Page Artikel Di Dalam Posting. Mungkin buat kamu yang sering baca-baca berita atau artikel sempat melihat artikel yang di bagi-bagi ke laman berikutnya tapi tetap di halaman tersebut.



Mungkin kalau kamu pernah bermain di wordpress berbayar kamu pernah menggunakan <!-- nextpage -->, nah kalau dalam blogger harus ada beberapa script yang dipasang. Untuk itu saya mau berbagi cara untuk membuat hal tersebut.



Langsung saja ke langkah-langkah pemasangan dan kode-kodenya.

1. Masuk ke Blogger kamu

2. Lalu masuk ke menu Tema terus Edit HTML

3. Setelah itu salin kode dibawah ini dan tempatkan tepat berada di atas kode ]]></b:skin> atau </style>.



/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}



4. Setelah itu cari kode </body> dan salin serta pastekan kode berikut di atas kode </body>



<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>



Untuk menambahkan halamannya kamu bisa merubah maxIndex=4; sesuai dengan yang kamu butuhkan. Setelah itu simpan template



5. Terakhir salin kode HTML di bawah dan pastekan ke dalam posting dalam Mode HTML (Jangan Compose).



<div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
</div>
</div>
<a class="movepg prever">prev</a>
<a class="movepg nexter">next</a>
</div>



6. Setelah itu Publish postingan kamu, dan lihat hasilnya




Silahkan cek demo di bawah ini




Sekian tutorial Membuat Next Page Artikel Di Dalam Posting yang saya bagikan ini, semoga bermanfaat untuk kamu sekalian. Tutorial ini di dapatkan dari arlinadzgn dan di publikasikan kembali oleh Kang Gira

Cara Membuat Button Keren Di Blogger



Hari ini saya mau berbagi kembali mengenai Cara Membuat Button Keren Di Blogger. Button ini sangat keren dan saya gunakan juga di template ini. Mengusung konsep 3D Flat Desain, dimana button ini memanfaatkan efek box-shadow ketika button normal, dan menipiskan box-shadow ketika button di tekan atau ketika terkena cursos.



Oleh karena itu tampilan button ini sangat cocok untuk template blog ini, memang sudah include juga sih saya hanya perlu menambahkan class pada saat ingin menggunakan button 3D Flat tersebut.



Nah untuk yang tidak menggunakan template SeoFastBlogger Responsive, kamu bisa mencoba button 3D flat desain tersebut. Untuk langkah-langkahnya kamu bisa mengikutinya dibawah ini ya.



Langkah pertama, kamu harus login terlebih dahulu ke Blogger.

Langkah kedua, kamu masuk ke menu Tema lalu Edit HTML.

Langkah ketiga, setelah itu kamu salin kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>



/* CSS button */
.gmr-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
.gmr-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
.gmr-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
.gmr-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
.gmr-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
.gmr-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
.gmr-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
.gmr-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
.gmr-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
.gmr-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
.gmr-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
.gmr-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
.gmr-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
.gmr-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
.gmr-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
.gmr-btn-block{width:100%;position:relative;display:block;text-align:center;}
.gmr-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}



Langkah Terakhir adalah pemasangan button nya, kamu bisa menempatkan button tersebut dimana saja di dalam postingan blog, contoh kamu ingin membuat tombol download, kamu hanya perlu menggunakan code : <a href="#" class="gmr-btn"></a> atau jika kamu ingin mengganti warnanya kamu hanya perlu menambahkan kode gmr-btn-red di dalam classnya, contoh: <a href="#" class="gmr-btn gmr-btn-red"></a>. Untuk contoh membuat button panjang, tinggal tambahkan code gmr-btn-block didalam class, contoh: <a href="#" class="gmr-btn gmr-btn-red gmr-btn-block"></a>. Nah untuk list button nya silahkan cek dibawah.




<button class="gmr-btn">Button 1</button>
<button class="gmr-btn gmr-btn-red">Button 2</button><br />
<button class="gmr-btn gmr-btn-green">Button 3</button>
<button class="gmr-btn gmr-btn-yellow">Button 4</button><br />
<button class="gmr-btn gmr-btn-gray">Button 5</button>
<button class="gmr-btn gmr-btn-purple">Button 6</button><br />
<button class="gmr-btn gmr-btn-orange">Button 7</button>
<button class="gmr-btn gmr-btn-dark">Button 8</button><br />
<button class="gmr-btn gmr-btn-dark gmr-btn-block">Button 9</button>



Nah tinggal cobain yang kamu sukai, untuk demo silahkan klik tombol demo dibawah.




Mungkin hanya segitu tutorial Membuat Button Keren dengan Style 3D Flat Desain Di Blogger. Tutorial ini saya dapat dari konfigurasi template blog ini sendiri yaitu dari kang gianmr dan di publikasikan kembali oleh Kang Gira. Semoga tutorial ini bermanfaat.



Jika ada kesulitan silahkan berkomentar.

Cara Membuat Widget Recent Post Tanpa Thumnail di Blogger




Kali ini saya mau berbagi Cara Membuat Recent Post di Widget Blog. Kebanyakan orang memasang widget  post itu hanya popular post saja, tapi disini saya mau berbagi cara membuat recent post atau post yang baru di update.



Recent post ini sangat sederhana, tanpa Thumbnail jadi sangat ringan untuk blog kamu. Jika kamu berminat memasang widget ini, silahkan ikuti langkah-langkah pemasangan untuk widget Recent Post Sederhana ini.



Langkah pertama, silahkan masuk ke Blogger terlebih dahulu.

Langkah kedua, Masuk ke menu Tema lalu Edit HTML tema nya.

Langkah ketiga, salin kode javascript di bawah ini tepat di atas kode </head>



<b:if cond='data:blog.isMobile == "false"'>
 <script type='text/javascript'>
 //<![CDATA[
  function recentpostslist(json) {
   document.write('<ul>');
   for (var i = 0; i < json.feed.entry.length; i++) {
    if (i == json.feed.entry.length) break;
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
     if (json.feed.entry[i].link[j].rel == 'alternate') {
      entryUrl = json.feed.entry[i].link[j].href;
      break;
     }
    }
    var entryTitle = json.feed.entry[i].title.$t;
    var item = '<li>' + '<a href="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</a></li>';
    document.write(item);
   }
   document.write('</ul>');
  }
 //]]>
 </script>
</b:if> 



Disana ada script yang saya block biru, itu fungsinya untuk tidak menampilkan widget tersebut dalam mode Mobile, tapi jika kamu ingin tetap menampilkan widget tersebut dalam mode mobile silahkan hapus kode <b:if cond='data:blog.isMobile == "false"'> dan </b:if> dibawahnya.



Langkah Terakhir, tinggal kamu masukkan kode dibawah dalam Tata Letak > buat widget HTML/Javascript baru.



<script src='/feeds/posts/default?orderby=published&amp;max-results=7&amp;alt=json-in-script&amp;callback=recentpostslist'/>



Jika kamu ingin menampilkan recent post per label tinggal tambahkan saja kode "/feeds/posts/default/-/LABEL". Untuk jumlah postingan yang ingin di tampilkan ganti max-result=7 sesuai keinginan kamu. Untuk demo silahkan lihat saja langsung di widget yang saya gunakan.



Nah sekian tutorial Cara Membuat Recent Post di Widget Blog, semoga tutorial ini bermanfaat untuk kamu. Jika ada yang ingin ditanyakan silahkan untuk berkomentar.

Cara Membuat Menu Navigasi Sederhana Responsive di Blog




Tutorial kali ini saya akan membahas tentang bagaimana Cara Membuat Menu Navigasi Sederhana Responsive di Blog. Template blog biasanya mempunyai dua navigasi, dibawah header dan di atas header, tapi kadang ada juga yang menggunakan hanya satu navigasi saja yaitu dibawah header.



Seperti judulnya disini saya akan memberikan cara membuat navigasi di atas header yang responsive. Menu navigasi yang mudah dan sederhana. Memang mungkin beberapa orang tidak menyukainya, tapi saya pribadi menyukai tampilan ini.



Untuk langkah-langkah pembuatan menu navigasi ini silahkan ikuti tutorial berikut:

Langkah pertama, login ke Blogger sobat.

Langkah kedua, masuk ke menu Tema dan Edit HTML.

Langkah ketiga, salin kode dibawah dan simpan css tersebut tepat diatas kode ]]></b:skin> atau </style>.



/* Navigation Menu */
.central{max-width:950px;margin:0 auto}
#menu{background: #fff;overflow: hidden; border-bottom: 3px solid #3498DB}
#menu .menu{float: left;margin: 0;padding: 0;}
#menu .menu .current-menu-item a{color:#000}
#menu .menu li{list-style: none;margin: 0;float: left;}
#menu .menu li a{float:left;position:relative;color:#000;padding:0 15px;font-size:14px;line-height:45px;font-family:'Open Sans',sans-serif;}
#menu .menu li a:hover{text-decoration:none;color:#fff;background:#3498DB}
.menubawah{height:40px;line-height:40px;background:#444;color:#eee;padding:0 15px;font-family:'Open Sans',sans-serif;font-size:12px}
.search{float:right;}
#search {padding: 6px;}
input.search_input{border: 1px solid #eeeeee;width: 200px;color: #383838;border-radius: 4px;padding: 9px 10px;background: #eeeeee;}


/* Responsive */
@media screen and (max-width:640px) {
#outer-wrapper{width:98%;margin:0 auto;padding:10px;}
#main-wrapper{float:none;width:100%;margin:0 auto;padding:0;} 
#sidebar-wrapper{width: auto;float:none;display:block;margin:0 auto;padding:0;}
#content-wrapper{margin: 0 auto;}
#header-inner{text-align:center}
#header1{float:none;text-align:center;max-width:100%}
.sidebar-kiri,#header2,#rdp-wrap{display:none}
#menu,.post-inner .main.section{float:none;width:100%;}
#menu .menu{float:none;border-left:0;border-right:0}
#menu .menu li{float:left;width:50%;border-right:0;border-left:0}
#menu .menu li a{display:block;float: none;color:#000;text-align:center;padding:0}
.search{float:none;width:auto;margin:0 auto;}
.search #form #s{border-left:0;border-right:0}
input.search_input{border:1px solid #eeeeee;width:99%;color:#383838;border-radius:0;padding:5px 10px}



Langkah terakhir, salin kode html dibawah ini  dan simpan tepat di bawah kode <body>



<div id='menu'>
<div class='central'>
<ul class='menu' id='menu-menu'>
<li class='current-menu-item' id='menu-item-0' itemprop='url'><a href='/' itemprop='name' title='Home'>Home</a></li>
<li class='menu1' id='menu-item-1' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='About'>JUDUL</a></li>
  <li class='menu1' id='menu-item-1' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
<li class='menu2' id='menu-item-2' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
<li class='menu3' id='menu-item-3' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
  <li class='menu5' id='menu-item-5' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
</ul> 
</div>
</div>



Simpan dan lihat hasilnya.



Untuk demo kamu bisa lihat di navigasi yang saya gunakan di atas header, saya juga menggunakan kode diatas, saya lebih suka seperti itu karena lebih mudah di cari dari pada menyimpan link-link penting di bawah.



Oh iya mungkin ada beberapa template yang membuat menu ini berantakan, tapi saya menggunakan template SeoFastBlogger ini pas sekali dan terlihat lebih baik.



Sekian tutorial Membuat Menu Navigasi Sederhana Responsive di Blog, jika kamu kesulitan atau ada yang ingin ditanyakan silahkan berkomentar disini.

Cara Memasang Widget Instagram di Blog




Jika kamu adalah orang yang ingin membuat blog dengan niche Desain atau Photografi, blogger memang pilihan yang tepat. Karena banyak template yang tersdia gratis serta banyak jenis juga untuk promosi desain atau hasil jepretan kamu di google.



Tapi kamu pernah sempat berfikir juga kan, kalau ingin menampilkan juga gambar kamu yang ada di instagram di blogger kamu kan? Nah pada kesempatan kali ini saya mau coba berbagi cara untuk memasang widget instagram di blog. Gunanya apa? Selain untuk menampilkan gambar instagram kamu, kamu juga bisa menambah folower dari blogger kalau blogger kamu banyak pengunjungnya.



Ada beberapa langkah yang harus kamu lakukan, jika kamu berminat ikutilah langkah-langkah dibawah ini ya.

Langkah pertama kamu harus login terlebih dahulu ke Blogger

Langkah kedua kamu masuk ke menu Tata Letak lalu buat Widget baru HTML/Javascript

Langkah ketiga salin kode dibawah untuk di masukkan ke widget tadi.



<div class='media-left'>
<div class='table-cell-m'>
  <h4 class='widget-title'>Instagram</h4>
    <a class='btn btn-default' href='//instagram.com/gilang__R__' rel='me'>Follow Us</a>

  </div>
</div>

<div class='instagram-footer'>
<div class='dark-wrapper'>
 
           
      <div class='cf'/>    
      <ul id='instafeed' class='insta-slick'>   
</ul>   
</div> 

<script type='text/javascript'>//<![CDATA[   
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 3818481741,   
  limit:14,   
  sortBy:'random',  
  accessToken: '3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145',
   after: function () {

     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 5,
  slidesToScroll: 2,
autoplay: false,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
   template: '<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left"><div class="img-box"><img src="{{image}}" /></div> <div class="info-box"><div class="info-content"><div class="insta-likes"><i class="fa fa-heart"></i>{{likes}}</div> <div class="insta-com"><i class="fa fa-comment-o"></i>{{comments}}</div>   </div></div></div></a></li>',   
 resolution: 'standard_resolution'   
 });   
 feed.run();   

 });
//]]>   
</script></div></div>



Langkah keempat kamu butuh akses token untuk menampilkan gambar yang ada di instagram tersebut, silahkan klik tombol Generate Instagram Access Token dibawah, tenang saja meskipun kamu memberi akses tersebut, IG kamu akan tetap aman, karena aplikasi tersebut adalah aplikasi dari Instagram sendiri.




Generate Instagram Access Token



Setelah mendapatkan akses tokennya, silahkan ganti kode akses token diatas dengan akses token yang kamu dapat tadi. Simpan token 3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145 tepat di tulisan yang saya blok biru, nah untuk userId kamu gunakan nomor paling depan yang saya kasih warna merah.



Langkah terakhir Simpan kode tersebut, dan tempatkan di bagian footer, karena ini style untuk bagian footernya.



Nah saya ada beberapa style untuk kamu tempatkan di Sidebar, caranya sama seperti diatas ko.



Grid Style untuk Sidebar

<ul id='instaside'>   
</ul>   
<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 15920822,   
  limit:9,
  sortBy:'random',  
 accessToken:'1531863919.1677ed0.0184dae01d2745a0be5ddea16e4fd8ef', 
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'   
 });   
 instaside.run();   

 });
//]]>   
</script>



Slider Style untuk Sidebar



<ul id='instaside'>   
</ul>   
<script type='text/javascript'>//<![CDATA[   
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 381848181,   
  limit:9,
  sortBy:'random',  
 accessToken:'381848181.1677ed0.14b2e5f55b6842a2a898da10ef99cb54', 
 after: function () {
     
     var owl = $('#instaside');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 800,
 prevArrow: '<div class="slider-nav-prev"></div>',
 nextArrow: '<div class="slider-nav-next"></div>',
  arrows:true,
  slidesToShow: 1,
  slidesToScroll: 1,
 fade: true,
  cssEase: 'linear',
autoplay: true,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'
 });   
 instaside.run();   
 });
//]]>   
</script>




Untuk demo widget instagram di footer silahkan klik demo dibawah




Sekian tutorial Cara Memasang Widget Instagram di Blog, jika kamu memiliki pertanyaan silahkan berkomentar ya.

Cara Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger




Pada kesempatan kali ini saya mau berbagi Cara Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger. Apa itu Mega Menu Drop Down? Jika kalian pernah mengunnjungi website Magazine dan terdapat menu navigasi dengan posting yang memperlihatkan gambar dan judul posting sesuai label atau kategori, itu adalah Mega menu.



Mega menu sendiri sudah banyak di gunakan di template blogger gratisan, saya sering menemukannya di semplate Sora atau creator template lainnya.



Nah kali ini saya mau mencoba memberikan tutorial untuk Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger, langsung saja simak langkah-langkahnya.



Langkah pertama, kamu harus login terlebih dahulu ke Blogger

Langkah kedua, masuk ke menu Tema lalu Edit HTML

Langkah ketika, salin kode tersebut dan simpan tepat di atas kode ]]></b:skin> atau </style>



/*Mega Menu Bar*/
.admenus *{margin:0;padding:0}ul.admenus{list-style:none;line-height:1;overflow:visible!important}ul.admenus:after{margin:0;padding:0;content:' ';display:block;height:0;clear:both}ul.admenus li{float:left;display:inline;position:relative;font-size:14px;font-weight:400;text-transform:uppercase}ul.admenus li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#2c2c2c;font-family:'Oswald';font-size:13px;font-weight:400;transition:all .3s ease-in-out}ul.admenus li a:hover,ul.admenus li a.hoverover{background:#f54325;color:#fff}ul.admenus ul{position:absolute;display:none;top:100%;border:1px solid #ccc}ul.admenus li:hover > ul{display:block}ul.admenus ul li{z-index:72;float:none;min-width:160px;background:#f5f5f5;text-shadow:none}ul.admenus ul li a{text-transform:none;font-weight:400;color:#aaa;font-family:'Arial'}ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover{background:#f54325}ul.admenus ul ul{display:none;left:100%;top:0}ul.adajaxmenu li div.submenu{position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;background:#f0f0f0;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#929292;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all .3s ease-in-out}ul.adajaxmenu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.adajaxmenu ul,ul.adajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}ul.adajaxmenu ul li{background:none!important;float:none!important}ul.adajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#202020}ul.adajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px!important;background:none}ul.adajaxmenu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px !important}ul.adajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}ul.adajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}ul.adajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all .3s ease-in-out}ul.adajaxmenu ul.postslist li a:hover{color:#f54325;background:transparent}ul.adajaxmenu .loader{background:url(http://1.bp.blogspot.com/-CHnyuvNxRys/Vd11gDwxWeI/AAAAAAAAAxc/NArLcwZL-Jw/s1600/loading%2B%25282%2529.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.adajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#adajaxmenu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:1100px;margin:0 auto;padding:0}li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}li.search-form .searchbar{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}li.search-form .searchbar:focus{border:none;outline:none;background:#fafafa;color:#666}li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all .3s ease-in-out}li.search-form .searchsubmit:hover{opacity:.9}.search-alert{color:#f9f9f9;padding:2px 15px 2px 40px;display:none;margin:5px;background:#333 url(http://2.bp.blogspot.com/-YwQrdhu_gJg/Vd11gFu4sLI/AAAAAAAAAxY/p3YYWFA-Fyo/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}



Langkah keempat, masukkan kode javascript berikut tepat diatas kode </body>

<script src='https://rawgit.com/mastamvan/backup/master/megamenu.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});
</script>



Langkah terakhir adalah memasukkan kode HTML berikut tepat dibawah kode </head>



<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
<li><a href="/search/label/HTML">HTML</a></li>
<li><a href="/search/label/Tools">Tools</a></li>
<li><a href="/search/label/Widget">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="/search/label/Widgets">Widgets</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="/search/label/Tutorials">Tutorials</a></li>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/WordPress<">WordPress</a></li>
<li><a href="/search/label/Earning">Earning</a></li>
<li><a href="/search/label/Domain Finder">Domain Finder</a></li>
</ul>
</li>
<li><a href="/search/label/Password Maker">Password Maker</a></li>
<li><a href="/search/label/">Contact</a></li>
<li><a href="/search/label/">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>



Ganti semua label dengan label yang kamu punya, simpan template dan lihat hasilnya.

Keterangan Tambahan: Jika mega menu tidak tampil, cek labelnya kalau menggunakan full domain seperti: https://gilangramadhan11.blogspot.com/search/label/Tips%20Blogger, usahakan cek lagi http nya yang agan pake, pake https atau http, kalau tidak sama biasanya tidak muncul.

Atau tambahkan kode berikut tepat di atas kode </head>



<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>



Mungkin cukup sekian untuk tutorial Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger, jika ada yang ingin kamu tanyakan silahkan berkomentar.

Cara Membuat Loading Progres Bar Seperti IOS 7 di Blogger




Pada kesempatan kali ini saya mau mencoba berbagi Cara Membuat Loading Progres Bar Seperti IOS 7 di Blogger. Loading ini sama halnya kita memasang loading pada umumnya cuman style nya yang mirip IOS 7 membuatnya sangat menarik.



Nah jika kamu berminat untuk loading progres bar ini silahkan ikuti langkah langkahnya dibawah.

Langkah pertama login dahulu ke blogger sobat

Langkah kedua masuk ke menu Tema dan Edit HTML

Langkah ketiga salin kode dibawah dan tempatekan tepat diatas </body>



<style>
#page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#fff url('https://4.bp.blogspot.com/-em3dCU44d0M/WZDRQ_zBsxI/AAAAAAAABvk/FPiMTjwfZGEUIC9X1wjBEIwIErJZeSuxACLcBGAs/s1600/iOS7Loader.gif') no-repeat 50% 30%;
        color: #000;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#page-loader').fadeIn(000).delay(6000).fadeOut(000);
});
//]]>
</script>

Simpan template dan lihat hasilnya.



Sekian tutorial Membuat Loading Progres Bar Seperti IOS 7 di Blogger, jika ada kesulitan atau hanya sekedar bertanya, silahkan berkomentar ya.

Cara Membuat Sosial Media Share Button Di Blogger






Untuk membuat blog kamu dikenal oleh semua orang, sosial media merupakan hal utama yang perlu kamu pertimbangkan. Selain banyak pengguna yang memakai sosial media, ternyata cara itu cukup efektif untuk mencari pengunjung.






Kamu harus memanfaatkan sosial media untuk ajang mempromosikan  blog kamu supaya lebih banyak yang mengenal blog kamu. Trafik yang kamu dapatkan pun cukup tinggi dari sosial media.



Supaya pengunjung blog menyimpan linknya di sosial media tanpa harus copas link yang panjang dan ribet, kamu bisa memberikan fasilitas sosial media share untuk para pengunjung. Ini akan memudahkan para pengunjung untuk share link ke akun sosial medianya.



Oleh karena itu kita membutuhkan tombol sosial share supaya blog lebih banyak fiturnya. Seperti judulnya, disini saya mau berbagi cara membuat "Sosial Media Share Button Di Blogger", untuk lebih jelas silahkan ikuti langkah-langkah berikut ya.



Berikut ini adalah Sosial Media Share Button yang saya kumpulkan dari berbagai sumber di google, kamu bisa menempatkannya di bawah judul posting atau di akhir artikel.


Style Pertama






Cara pemasangannya:

1. Silahkan Ke menu Tema > Edit HTML

2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>

3. Setelah ketemu silahkan pastekan kode dibawah ini:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Setelah itu silahkan CTRL+F lagi dan cari kode <data:post.body/>, kemungkinan ada lebih dari satu kode <data:post.body/> silahkan coba satu-satu. Untuk penempatan tombolnya kalau ingin dibawah judul silahkan paste di atas kode <data:post.body/> kalau di bawah artikel paste di bawah kode <data:post.body/>



<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
                <li><a class='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'/>Share</a></li>
                </ul>
         </div> </b:if>  

5. Kemudian simpan template tersebut, dan lihat di post nya, kalau penempatannya benar biasanya langsung muncul sosial button nya.


Style Kedua






Cara pemasangannya:

1. Silahkan Ke menu Tema > Edit HTML

2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>

3. Setelah ketemu silahkan pastekan kode dibawah ini:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Setelah itu silahkan CTRL+F lagi dan cari kode <data:post.body/>, kemungkinan ada lebih dari satu kode <data:post.body/> silahkan coba satu-satu. Untuk penempatan tombolnya kalau ingin dibawah judul silahkan paste di atas kode <data:post.body/> kalau di bawah artikel paste di bawah kode <data:post.body/>



<div class="don-share" data-bubbles="top" data-limit="3">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-hackernews"></div>
<div class="don-share-buffer"></div>
<div class="don-share-xing"></div>
<div class="don-share-pocket"></div>
<div class="don-share-fancy"></div>
<div class="don-share-yummly"></div>
<div class="don-share-scoopit"></div>
<div class="don-share-weibo"></div>
<div class="don-share-vk"></div>
<div class="don-share-mailru"></div>
<div class="don-share-odnoklassniki"></div>
<div class="don-share-hatena"></div>
</div>
<script type="text/javascript"> 
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>
<style>
.don-share .don-share-total {
    line-height: 18px;
    margin-right: 30px;
    display: none !important;
    position: static;
}
.don-share .don-share-expand {
    color: #333;
    display: none !important;
    background-color: #fff;
    border-color: #ccc;
}
</style>

5. Kemudian simpan template tersebut, dan lihat di post nya, kalau penempatannya benar biasanya langsung muncul sosial button nya.



Style Ketiga (Pop-up)






Cara pemasangannya:

1. Silahkan Ke menu Tata Letak > Tambah HTML

2. Lalu pilih HTML/Javascrip

3. Setelah itu silahkan pastekan kode dibawah ini:

<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58748ec649faba2e"></script>



5. Kemudian simpan widget nya, lalu lihat hasilnya.



Note: Untuk style pop-up ini ada yang perlu kamu ketahui, yaitu kode diatas merupakan dari pihak ketiga yaitu dari AddThis.com. Jika kamu ingin membuat sosial media share pop-up sendiri kamu tinggal daftar di website tersebut. Karena saya disini hanya memperpudahnya saja, jadi kamu hanya memakai sosial media pop-up yang sudah saya buatkan.



Tidak ada dampak buruk jika kamu menggunakan kode pop-up diatas, tapi alangkah baiknya kamu daftar dan membuat sendiri di AddThis.com ya.



Style Ke Empat:


































Cara pemasangannya:

1. Silahkan Ke menu Tema Edit HTML

2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>

3. Setelah ketemu silahkan pastekan kode dibawah ini:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Setelah itu silahkan CTRL+F lagi dan cari kode <data:post.body/>, kemungkinan ada lebih dari satu kode <data:post.body/> silahkan coba satu-satu. Untuk penempatan tombolnya kalau ingin dibawah judul silahkan paste di atas kode <data:post.body/> kalau di bawah artikel paste di bawah kode <data:post.body/>





<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<br />
<div id="social-1">
    <ul class="bhero-s1-social" id="bhero-cssanime">
        <li class="bhero-s1">
            <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel="nofollow" target="_blank"><span tooltip="Share on Google+"><img src="https://4.bp.blogspot.com/-v4tyRwEwo0w/WUOjAMlvo6I/AAAAAAAAPIU/oYeWmzJ02_g1q9TDgFlvoTne95amsd1HQCLcBGAs/s200/033-google-plus.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel="nofollow" target="_blank"><span tooltip="Share on Twitter"><img src="https://1.bp.blogspot.com/-l6v7erRZEEM/WUOi-FwoWXI/AAAAAAAAPHw/h0246d3RBrEPLMUm-5WpfyKnPMZ4a0LigCLcBGAs/s200/008-twitter.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://2.bp.blogspot.com/-0oizDSjz2fk/WUOjAsJNWNI/AAAAAAAAPIY/FErb5GoXYSYztsLsS61NbK-mN5yRDGA0QCLcBGAs/s200/036-facebook.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://1.bp.blogspot.com/-EgUpK6aEXBY/WUOi_0ovmXI/AAAAAAAAPIM/aVGRq6H7OyoL49JXdcNvdmKlrmpFEQDAgCLcBGAs/s200/029-instagram.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://4.bp.blogspot.com/-gKJyME6lcnk/WUOi-HNQeiI/AAAAAAAAPH0/T1wpOujWj84JV2t8B2rs8nGJKLAzUSzTQCLcBGAs/s200/005-whatsapp.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://3.bp.blogspot.com/-y07UpWztmws/WUOi-rVmk-I/AAAAAAAAPH8/4eT6qhWp5hsgIDSdFaHY1ImpCTKaEwYMwCLcBGAs/s200/009-tumblr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-eA7WXoU1S-U/WUOi-PF_crI/AAAAAAAAPH4/dI94x1nm8sc2wsAePS98x6py8S9QW7oEwCLcBGAs/s200/001-youtube.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://4.bp.blogspot.com/-veIqXpojZBg/WUOi_qsRicI/AAAAAAAAPII/BdYKa0oUEF0YkQnNx0Jxdx6jXylWmrqkQCLcBGAs/s200/027-linkedin.png" /></span></a>
        </li>
    </ul>
</div>



Style Kelima


































Cara pemasangannya:

1. Silahkan Ke menu Tema Edit HTML

2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>

3. Setelah ketemu silahkan pastekan kode dibawah ini:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Setelah itu silahkan CTRL+F lagi dan cari kode <data:post.body/>, kemungkinan ada lebih dari satu kode <data:post.body/> silahkan coba satu-satu. Untuk penempatan tombolnya kalau ingin dibawah judul silahkan paste di atas kode <data:post.body/> kalau di bawah artikel paste di bawah kode <data:post.body/>





<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<br />
<div id="social-1">
    <ul class="bhero-s1-social" id="bhero-cssanime">
        <li class="bhero-s1">
            <a href="Your-Link-Here#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://1.bp.blogspot.com/-leSBZibeu5M/WUNdh5YGaaI/AAAAAAAAPEM/w9aWDEUfVjwnMorbHd0EYuIc3wgX0wo8QCLcBGAs/s1600/facebook.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Twitter"><img src="https://3.bp.blogspot.com/-S3bv_9E4a5o/WUNdlggX6-I/AAAAAAAAPEw/2ipAApzSYCMWKIl0DsqDOYPWyWWyVSsnwCLcBGAs/s1600/twitter.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://2.bp.blogspot.com/-XzrFLmmHMDQ/WUNdiFaKbxI/AAAAAAAAPEU/dQPkhg5yC6AyZE9hrW1EecpExo4GaOo4QCLcBGAs/s320/google-plus.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://4.bp.blogspot.com/-ZXkFGtnoX00/WUNdijWzRsI/AAAAAAAAPEY/0HajV8T_XjQWD7AWT_PpEmVaET-5jGqdACLcBGAs/s1600/instagram.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Connect on Instagram"><img src="https://1.bp.blogspot.com/-i5nsxLozWAM/WUNdjnOCn3I/AAAAAAAAPEg/25E8nSqylWAIaf4CCcYRcBPKPMegR1SwQCLcBGAs/s1600/linkedin.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="
#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://1.bp.blogspot.com/-HpkZLVfvv-o/WUNdlgfywjI/AAAAAAAAPE0/3Cbfhy_AtXwRaugcolEILAYmJN8zZhzJwCLcBGAs/s1600/tumblr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Find on Flickr"><img src="https://3.bp.blogspot.com/-WGx9AQ9LPmU/WUNdiKefccI/AAAAAAAAPEQ/cdrLAdFC2dEd8cDyo3d_3VxJkkAnjvE9gCLcBGAs/s1600/flickr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Pinterest"><img src="https://3.bp.blogspot.com/-lKWhyuESFoY/WUNdkRVfGOI/AAAAAAAAPEo/wk9vs2hJBHwF3tqhy23Pjm93aqXwjq3iwCLcBGAs/s1600/pinterest.png" /></span></a>
        </li>
    </ul>
</div>



Style Keenam





































<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<div id="social-1">
    <ul class='bhero-s1-social' id='bhero-cssanime'>
        <li class='bhero-s1'>
            <a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://3.bp.blogspot.com/-v90Bvnz4vz8/WUNgFMrPeXI/AAAAAAAAPFM/foSb6BgdYQ48BbxdiXVrbqLnZDyUI1nlgCLcBGAs/s320/051-facebook.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://1.bp.blogspot.com/-1OzXF-K5OpA/WUNgKNd_5YI/AAAAAAAAPGY/X46T5Ac3V1Y-_5V7jPNE6cGzsosr19B5wCLcBGAs/s320/051-twitter.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://2.bp.blogspot.com/-gr0Z__ebbWA/WUNgGBhhkbI/AAAAAAAAPFc/eLWdg_5lQiYgyoh3ZMWX0HHVIlW3wRHsQCLcBGAs/s1600/051-google-plus.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://2.bp.blogspot.com/-R-4rHK-mwSw/WUNgGnswGNI/AAAAAAAAPFk/1HCZz5_K9M81BylOIZJW5EDffjeXIToAgCLcBGAs/s320/051-instagram.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on Instagram"><img src="https://1.bp.blogspot.com/-0hbQ9qtaPMk/WUNgHVi7uBI/AAAAAAAAPFw/RpIUFVo_1aQlDI2MblCp_p8uYXiuPGFwgCLcBGAs/s320/051-linkedin.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://4.bp.blogspot.com/-uxdGeLAxwG8/WUNgJdw7A_I/AAAAAAAAPGU/JkO3jdKFWXwm4k5llUmlqJAfT_GM9qwKACLcBGAs/s320/051-tumblr.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Pinterest"><img src="https://2.bp.blogspot.com/-4dxut2dt_jA/WUNgHuQPiII/AAAAAAAAPF0/6j6Q2Du8cF8gSZuskLJdvk3TTcRRlOuwQCLcBGAs/s320/051-path.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://3.bp.blogspot.com/-TTGCUMAW0U8/WUNgITj1BpI/AAAAAAAAPGA/uEIvLJXU1ys_7tff6y3Vl9VEGSlhlwtBQCLcBGAs/s320/051-rss.png" /></span></a>
        </li>

    </ul>
</div>



Style Ke tujuh





































<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<div id="social-1">
    <ul class='bhero-s1-social' id='bhero-cssanime'>
        <li class='bhero-s1'>
            <a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://3.bp.blogspot.com/-IGNlTQAPYFY/WUNiLUwIA0I/AAAAAAAAPGs/JVd3DAy-t6UjGJWCXItC0Of686UrTcLiQCLcBGAs/s320/021-facebook.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://3.bp.blogspot.com/-U8Gic3xXXIU/WUNiORakl2I/AAAAAAAAPHY/YpLkfAJ8WL89TteC1OzlnRQqFMVIEbr4QCLcBGAs/s320/021-twitter.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://4.bp.blogspot.com/-y6xjCYmaVfo/WUNiMMbTeTI/AAAAAAAAPG0/GpDjWA6B5Tc1uMQ6k9ELse-vVh3ngfuAQCLcBGAs/s320/021-google-plus.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://1.bp.blogspot.com/-Vr7GzDThF7E/WUNiMcKZR0I/AAAAAAAAPG8/VGDGT8FUs9Uud32wKbHttJPg5H_KImgmQCLcBGAs/s320/021-instagram.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on WhatsApp"><img src="https://2.bp.blogspot.com/-6HsOUQLGyqg/WUNiOoImmNI/AAAAAAAAPHc/fUmc0a6QQIY2YPHAq6GOjZ5jyc0xCJEugCLcBGAs/s320/021-whatsapp.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://4.bp.blogspot.com/-ZUFtPSWmM7w/WUNiOKMkPvI/AAAAAAAAPHU/OxGCK9Ep_ownVVwbc9IQNdvFJiJboUuWACLcBGAs/s320/021-tumblr.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-d5qyYhcl3ro/WUNiOguBOYI/AAAAAAAAPHg/hiYOXlwcHwgcsKhEyq-3CfVonluCz8MygCLcBGAs/s320/021-youtube.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://4.bp.blogspot.com/-q9DAWhAAiko/WUNiM04EDvI/AAAAAAAAPHA/jp-xseTG6cIbK-yxLqAPEBnWoHWQLWFzgCLcBGAs/s320/021-rss.png" /></span></a>
        </li>

    </ul>
</div>



Style ke delapan



























<style>
* {
    box-sizing: border-box;
}
#bhero-cssanime:hover li { opacity:0.2; }
#bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#bhero-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#bhero-cssanime li:hover { opacity:1; }
#bhero-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Mobile Responsive */
@media only screen and (max-width : 900px) {
ul.bhero-s1-social {
    margin: 6% 5%;
    float: none;
    padding: 0!important;}
li.bhero-s1 {
    width: 50px;
    height: 50px;
    margin: 5px;
    list-style: none;
    display: inline-block;
}
li.bhero-s1 {
  
    width: 55px;
    height: 55px;
}
}
@media only screen and (min-width : 900px) {

li.bhero-s1 {
    list-style-type: none;
    width: 50px;
    height: 50px;
    list-style: none;
    display: inline-block;
    margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 14px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: calc(100% + 30px);
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Like On Facebook"><img src="https://3.bp.blogspot.com/-N4iaIYYQJPo/WUnpHL3XOQI/AAAAAAAAPJg/wr2yjB7jHuYwse4qKYalc1ReCV3sNw9VQCLcBGAs/s200/facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://1.bp.blogspot.com/-1qabvZYIof4/WUnpHWJtMYI/AAAAAAAAPJk/bq4iDVtIWm8QGFb6EuoNeyz8WBMElbvlACLcBGAs/s200/google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" target="_blank"><span tooltip="Follow on Twitter"><img src="https://4.bp.blogspot.com/-0ojsrS3cXVU/WUnpIG0BoLI/AAAAAAAAPJw/vHb1HvcqKpA25DF6u3S7k5unBLQi0o7lACLcBGAs/s1600/twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://3.bp.blogspot.com/-qhbBAl5m9XI/WUnpHB5YitI/AAAAAAAAPJc/08qvdaFIN6s0WFKmdw7OPH7jBJzrsQGqwCLcBGAs/s200/instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://1.bp.blogspot.com/-R4qH70XoBQ8/WUnpIgXJfaI/AAAAAAAAPJ8/VBZUcglMcyIz39M2SqHxaOAB5AT_J_0ugCLcBGAs/s1600/whatsapp.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-ncOY3ut362I/WUnpIYGmraI/AAAAAAAAPJ4/9NWuulvKiAwUjECKf0Jx1vd1Wv81CdYYQCLcBGAs/s1600/youtube.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://1.bp.blogspot.com/-oftGi2pSulg/WUnpHhJCQHI/AAAAAAAAPJo/30lSH8jigkwVh-bmhdKDPf9XU0pEFbkEQCLcBGAs/s1600/linkedin.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe to RSS"><img src="https://1.bp.blogspot.com/-ylfL7K7iZYg/WUnpH2IqWeI/AAAAAAAAPJs/PgkMMtB00Q8RBdTrUOW3CHVQ9ZgGfCY3ACLcBGAs/s1600/rss.png" /></span></a>
</li>
</ul>
</div>


Keterangan: Silahkan ganti <a href="#" rel="nofollow" target="_blank"> dengan link share atau link social media kamu sendiri.



Hanya delapan style yang saya bagikan, kenapa? karena yang menurut saya bagus akan saya share, nanti akan saya tambahkan kembali jika menemukan tombol sosial media share lagi. Jadi silahkan berlangganan ya.