Cara Membuat Logo Brand atau Komunitas seperti Blog auqri

auqri - Cara membuat logo brand atau komunitas seperti blog auqri. Ada yang coba melakukan inspek element blog saya dan menerapkan di blognya sendiri, alhasil tidak akan pernah berhasil haha. 

Karena didalam template blog auqri saya menggunakan framework tailwinds dan bootstrap, sehingga kalau kamu menyalin kode lalu menerapkannya di blog kamu maka akan error. 

Nah kalau kamu ingin memiliki tampilan logo brand atau komunitas seperti blog auqri, simak langkah-langkah pembuatannya dibawah ini:

Cara Membuat Logo Komunitas di Blogger

Membuat logo untuk brand atau komunitas sebenarnya sama saja, disini blog auqri hanya menggunakan kode css dan html saja. Selanjutnya ada beberapa hal yang harus kamu siapkan, diantaranya:

1. Siapkan gambar dari logo setiap brand atau komunitas yang dimiliki
2. Pikirkan logo tersebut akan diterapkan dibagian mana (sidebar, footer, header)
3. Backup template blog

Jika hal-hal diatas sudah kamu persiapkan, berikut langkah-langkah cara membuatnya:

A. Logo Brand atau Komunitas Blog Biasa

Logo brand atau komunitas blog biasa ini mirip seperti blog auqri.blogspot.com, jadi posisi berada ditengah lalu diisi dengan logo-logo yang ingin disematkan. 

Jika menginginkan tampilan yang seperti ini silahkan salin kode dibawah ini lalu terapkan di blog kamu, tinggal ganti beberapa url gambar yang ada dengan url gambar yang sudah kamu siapkan.

<style>
  .logo img
  {
    width:auto;
    height:50px;
    margin: 0 5px;
  }
  
  .logo {
  display: flex;
  position: relative;
}
</style>
<div class="logo">
  <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt="">
  <img src="https://i.postimg.cc/d14GzKHn/brand-4.png" alt="">
  <img src="https://i.postimg.cc/x8ZM13Sz/brand-5.png" alt="">
  <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt="">
  <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt="">
</div>

Lihat Demo

***

B. Logo Brand atau Komunitas Bergerak (Infinite Carousel) 

Jika kamu menginginkan tampilan logo brand atau komunitas yang bisa bergerak secara otomatis, kamu bisa menyalin kode dibawah ini lalu tempelkan di blog kamu. 

<style>
  .wrap{
  width:100%;
  height:100px;
  position:relative;
  overflow:hidden;
}

.slide-container{
  position:absolute;
  left:0;
  height:50%;
}

.slides{
  display:flex;
  flex:row;
  flex-wrap:no-wrap;
  height:100%;
  margin:0;
  padding:0;
}

.animate{
  animation: moveSlideshow 20s linear infinite;
}

@keyframes moveSlideshow {
  100% {
    transform: translate3d(calc(-100% + 100vw), 0, 0);
  }
}

.slides li{
  display: block;
  box-sizing:border-box;
  width:23.33vw;
  height:100%;
  align-items: center;
  justify-content: center;
  text-align:center;
}

.slides li > div{
  display:flex;
  padding:0;
  margin:0;
  box-sizing:border-box;
  border-radius: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-align:center;
  justify-content: center;
  align-self: center;
}

.slides li span{
  display:block;
  font-size:40vh;
  line-height:100vh;
  font-weight:800;
  letter-spacing: -.06em;
  color:#00509A;
}

</style>
<div class="wrap">
  <div class="slide-container">
    <ul class="slides">
      <li><img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt=""></li>
      <li><img src="https://i.postimg.cc/d14GzKHn/brand-4.png" alt=""></li>
      <li><img src="https://i.postimg.cc/x8ZM13Sz/brand-5.png" alt=""></li>
      <li><img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt=""></li>
      <li> <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt=""></li>
    </ul>
  </div>
</div>

<script>
  $(document).ready(function(){
  $slides = $('.slides');
  $slides.bind('contentchanged', function(){
    animate($slides);
  });
  animate($slides);
});

function animate($slides){
  var slidesLength = $slides.find('li').length;
  if(slidesLength>3){
    $slides.find('li:nth-last-child(-n+3)').clone().prependTo($slides);
    $slides.addClass('animate');
    $slides.css('animation-duration', slidesLength*2+'s');
  }
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Lihat Demo

***

Nah gimana, cantik bukan? Demikianlah tutorial cara membuat logo brand atau komunitas seperti di blog auqri. Semoga bermanfaat, terima kasih.