Sesuaikan tampilan Anda
Setelan hanya berlaku untuk browser ini
Latar belakang
  • Terang
  • Gelap
  • Bawaan sistem

Cara Membuat Banner Text UI di Blogger

Please wait 0 seconds...
Scroll Down and click on GET LINK for destination
Congrats! Link is Generated

Halo! selamat datang di situs web Bang Wahid, Anda sedang membaca dan mencari artikel tentang cara membuat Banner Text di Blogger.

Jika Anda bosan untuk membaca, jangan ragu untuk melewatkan informasi di bawah mengenai Banner Text di situs web yang Anda cari.

Banner Text: Apa Itu?

Secara umum, Banner Text adalah media informasi non-pribadi yang menyampaikan pesan tersemat kepada pengunjung situs, baik untuk menjual sesuatu atau untuk memperkenalkannya. 

Menurut sudut pandang yang berbeda, Banner Text mengacu pada media promosi atau publikasi yang dibuat menggunakan cetak digital dengan ukuran tertentu dan dalam orientasi potret atau vertikal. Banner Text memiliki desain yang dibuat di komputer menggunakan program pengolah gambar seperti Adobe Photoshop dan CorelDraw sebelum dicetak.

Ungkapan "Banner Text" sering digunakan di era digital untuk merujuk pada media promosi yang menyertakan grafik dan teks di situs web atau blog. Biasanya banner pada website atau blog disertai dengan link aktif yang ketika diklik akan membawa pengunjung website atau blog tersebut ke halaman yang sedang dipromosikan.

Tujuan dan Penggunaan Banner Text

Pada dasarnya, teks banner berfungsi sebagai alat pemasaran yang dapat digunakan untuk publikasi, iklan, promosi, dan berbagai hal lainnya. Sementara itu, tujuan dari pemasangan banner teks adalah untuk mengiklankan atau mempromosikan sesuatu agar lebih menarik perhatian orang ketika melihatnya.

Beberapa tujuan dariBanner Text adalah sebagai berikut, dengan mengacu pada definisiBanner Text yang diberikan di atas dalam artikel ini:

  1. Media informasi; Memasang spanduk teks, baik online maupun offline, di situs web atau blog, merupakan cara yang sangat efektif untuk menyebarkan informasi kepada khalayak umum.
  2. Banner Text dapat digunakan secara efisien sebagai media promosi selain media informasi. Namun, tentu saja pemasangan spanduk teks harus dilakukan di lokasi yang menonjol di mana publik akan sering melihatnya.
  3. Banner Text pada website atau blog dapat berfungsi sebagai identitas atau ciri khas website, membantu pengunjung mengingatnya dengan lebih cepat. Metode branding online lainnya adalah melalui spanduk teks di situs web.

Berbagai jenis spanduk dapat dibedakan berdasarkan ukuran dan bentuknya. Berikut ini adalah beberapa kategori banner teks:

  • Teks Spanduk ukuran standar biasanya digunakan untuk jendela iklan pop-up dan tujuan promosi lainnya.
  • Tombol & Spanduk Kami menggunakan spanduk teks gaya ini di blog atau situs web media di internet.
  • X-Banner Dengan dua tiang penyangga, spanduk ini berbentuk seperti huruf X. Biasanya tiang penyangga terbuat dari aluminium yang ringan dan mudah dibawa-bawa. Kita mungkin menggunakan X-Banner berulang kali, dan sangat baik untuk digunakan baik di dalam maupun di luar ruangan.
  • Compact X-Banner Mini X-Banner memiliki tampilan yang identik dengan X-Banner tetapi diperkecil. Spanduk semacam ini biasanya diletakkan di atas meja dan digunakan untuk mengiklankan informasi tertentu, seperti kalender acara atau menu.
  • Roll Banner Roll banner sangat berguna karena dibuat menjadi gulungan. Spanduk ini dapat kami akses secara keseluruhan dari atas ke bawah.

Demo

Cara Membuat Banner Text UI di Blogger

1. Masuk ke akun Blogger dan buka Tema.

2. Kemudian Klik Ikon Bawah dan Pilih Edit HTML.

3. Salin kode dibawah ini, kemudian cari kode ]]></b:skin> dan paste kode diatasnya

/* Banner Text Bang Wahid */
.desC{
  font-family:var(--font-bodyAlt);
  text-align:center;
  font-size:13px;
  padding-bottom:0px;line-height:1.6em;
} .desC:after{
  content:'';
  width:0px;
  display:block;
  position:relative;
  bottom:-6px;
  border-bottom:1.5px solid #989b9f;
  margin:3px auto;
  animation:animatebord 3s infinite;
  -webkit-animation:animatebord 3s infinite;
}
@-webkit-keyframes animatebord{
  0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}} .learn{font-size: 1.3rem;} 
.slebew {
  background: linear-gradient(330deg,red 0,#31e400 25%,#00f7ff 50%,#7f00ff 75%,#232222 100%); 
  background-size: 200% auto; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  animation: 3s linear infinite animate;
}
.stw-feature{
  padding:5px;
  text-align:center;position:relative;
}
.stw-feature h2{
  font-size:1.6em;
  line-height:1.6em;
  margin-bottom:0;
  padding-bottom:0;
}
.stw-feature ul{
  clear:both;
  margin:15px 0 20px;width:100%;
  display:flex;
  padding:0;
  flex-wrap:wrap;
  justify-content:space-between;
}
.stw-feature.icon-p-2 li{
  position:relative;
  width:30%;
  list-style:none;
  line-height:1.3em;
  text-align:center;
  border-radius:10px;
  margin:6px 0;
  background:var(--contentB);
  box-shadow:0 5px 35px rgb(0 0 0/7%);
  padding:6px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stw-feature li a{
  display:block;
  text-decoration:none;
  color:var(--fontC)
}
.stw-feature li svg{
  margin:3px 0;
  width:35px;
  height:35px;
  display:inline-block;
}
.stw-feature li span{
  display:block;
  padding:0 3px;
}
.drK .stw-feature li{
  background:var(--darkBa);
}

(.drK) Jika template Anda memiliki fitur mode gelap, dan jika Anda menginginkan warna yang berbeda saat dalam mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan Anda. Setiap template dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan, Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap template Anda.

4. Salin kode dibawah ini, kemudian cari kode <b:section cond='data:view.isHomepage' id='top-widget' showaddelement='true'> dan paste kode bawahnya.

<!-- Banner Text Bang Wahid -->
<b:widget id='HTML1' locked='true' title='' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<!--[ you can only edit this widget from HTML theme ]-->]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<div class='stw-feature coll-3 icon-p-2'> 
  
  <!--[ Category Layout Title ]-->
  <center>
    <div class='outer-circle'>
      <div class='inner-circle'/>
    </div>
    
    <div class='banner_text'>
      <div class='learn slebew'>Learn <span class='txt-rotate' data-period='2000' data-rotate='[ &quot;AdSense&quot;, &quot;Blogger&quot;, &quot;WordPress&quot;, &quot;YouTube&quot;, &quot;SEO&quot;, &quot;Android&quot; ]'/>
      </div>
    </div>
  </center>
  <p class='desC'>Bang Wahid - Website Yang Menyediakan Berbagai Informasi Teknologi, Tutorial, Programming, Internet, Sosial Media, Tips &amp; Trik dan Berbagai Teknologi Lainnya</p>
  
  <h2><span><data:title/></span></h2> 
  
  <ul> 
    <!--[ Layout 01 ]-->
    <li> 
      <!--[ Link and Title ]-->
      <a href='/search/label/Adsense' title='Adsense'>
        <!--[ Link Icon ]-->
        <svg height='512px' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='comp_x5F_7-adsense'><g><path d='M475.071,262.35c-2.495-3.96-6.884-6.351-11.548-6.351H320.417l-98.702,212.076c-2.251,4.84-7.109,7.923-12.428,7.923    h-0.03c0.01,0,0.02,0.001,0.029,0.001h164.56c5.322,0,10.173-3.083,12.421-7.924l89.683-192.5    C477.926,271.313,477.592,266.31,475.071,262.35z'/><path d='M390.017,55.58c1.974-4.261,1.672-9.268-0.849-13.228c-2.524-3.961-6.886-6.352-11.577-6.352H240.464    c-5.32,0-10.173,3.08-12.42,7.946L36.063,456.44c-1.979,4.264-1.672,9.244,0.849,13.204c2.521,3.957,6.884,6.354,11.573,6.354    H185.58h0.03c5.319,0,10.177-3.083,12.428-7.923l98.702-212.076L390.017,55.58z'/></g></g><g id='Layer_1'/></svg>
        <!--[ Link Name ]-->
        <span>Adsense</span>
      </a>
    </li>  
    
    <!--[ Layout 02 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/Blogger' title='Blogger'>
        <!--[ Link Icon ]-->
        <svg id='Icons' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M27.4,12h-0.9c-0.8,0-1.5-0.7-1.5-1.5C25,5.8,21.2,2,16.5,2h-6C5.8,2,2,5.8,2,10.5v11c0,4.7,3.8,8.5,8.5,8.5h11  c4.7,0,8.5-3.8,8.5-8.5v-6.9C30,13.2,28.8,12,27.4,12z M11,8h5c1.7,0,3,1.3,3,3s-1.3,3-3,3h-5c-1.7,0-3-1.3-3-3S9.3,8,11,8z M20,24  h-9c-1.7,0-3-1.3-3-3s1.3-3,3-3h9c1.7,0,3,1.3,3,3S21.7,24,20,24z'/></svg>
        <!--[ Link Name ]-->
        <span>Blogger</span>
      </a>
    </li> 
    
    <!--[ Layout 03 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/WordPress' title='WordPress'>     
        <!--[ Link Icon ]-->
        <svg height='512px' id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M255.9,64C150.2,64,64,150.2,64,256.1C64,361.9,150.2,448,255.9,448c8.5,0,16.8-0.5,24.9-1.8  c85.7-11,153.8-78.7,165.3-164.1c1.3-8.5,1.9-17.2,1.9-26C448,150.2,361.8,64,255.9,64z M83.4,256.1c0-25,5.4-48.8,15-70.2  l82.3,225.5C123.1,383.4,83.4,324.3,83.4,256.1z M278.3,427.3c-7.3,0.9-14.8,1.4-22.4,1.4c-16.9,0-33.2-2.5-48.6-7.1l18.8-55h0.1  l32.7-95.5L312,416.5c0.4,0.8,0.9,1.6,1.3,2.3C302.1,422.8,290.4,425.6,278.3,427.3z M279.8,175.1c10.4-0.5,19.7-1.6,19.7-1.6  c9.4-1,8.2-14.8-1.1-14.2c0,0-28,2.2-46,2.2c-16.9,0-45.5-2.2-45.5-2.2c-9.2-0.6-10.4,13.7-1,14.2c0,0,8.7,1.1,18.1,1.6l26.9,73.7  l-37.8,113.3l-62.9-187c10.5-0.5,19.8-1.6,19.8-1.6c9.2-1,8.2-14.8-1.1-14.2c0,0-27.9,2.2-46,2.2c-3.3,0-7.1-0.1-11.1-0.2  c30.8-46.8,83.9-77.7,144.1-77.7c45,0,85.9,17.2,116.6,45.2c-0.8,0-1.5-0.1-2.3-0.1c-17,0-29,14.8-29,30.7  c0,14.2,8.2,26.2,16.9,40.4c6.6,11.5,14.3,26.3,14.3,47.6c0,14.8-4.4,33.4-13.1,55.7l-17.3,57.6L279.8,175.1z M342.7,405.3  l13.7-39.7l39-112.8c9.9-24.6,13.1-44.3,13.1-61.8c0-6.3-0.4-12.3-1.1-17.8c13.5,24.6,21.2,52.8,21.2,82.9c0,8-0.5,15.8-1.5,23.5  C419.7,333.3,387.6,379.2,342.7,405.3z'/></svg>
        <!--[ Link Name ]-->
        <span>WordPress</span>
      </a>
    </li>
  </ul>
  
  <ul> 
    <!--[ Layout 04 ]-->
    <li> 
      <!--[ Link and Title ]-->
      <a href='/search/label/HTML' title='HTML, CSS, JS'>
        <!--[ Link Icon ]-->
        <svg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><title/><g><path d='M24.8452,25.3957a6.0129,6.0129,0,0,0-8.4487.7617L1.3974,44.1563a5.9844,5.9844,0,0,0,0,7.687L16.3965,69.8422a5.9983,5.9983,0,1,0,9.21-7.687L13.8068,48l11.8-14.1554A6,6,0,0,0,24.8452,25.3957Z'/><path d='M55.1714,12.1192A6.0558,6.0558,0,0,0,48.1172,16.83L36.1179,76.8262A5.9847,5.9847,0,0,0,40.8286,83.88a5.7059,5.7059,0,0,0,1.1835.1172A5.9949,5.9949,0,0,0,47.8828,79.17L59.8821,19.1735A5.9848,5.9848,0,0,0,55.1714,12.1192Z'/><path d='M94.6026,44.1563,79.6035,26.1574a5.9983,5.9983,0,1,0-9.21,7.687L82.1932,48l-11.8,14.1554a5.9983,5.9983,0,1,0,9.21,7.687L94.6026,51.8433A5.9844,5.9844,0,0,0,94.6026,44.1563Z'/></g></svg>
        <!--[ Link Name ]-->
        <span>HTML, CSS, JS</span>
      </a>
    </li>  
    <!--[ Layout 05 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/SEO' title='SEO'>
        <!--[ Link Icon ]-->
        <svg enable-background='new 0 0 32 32' id='Glyph' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z' id='XMLID_223_'/></svg>
        <!--[ Link Name ]-->
        <span>SEO</span>
      </a>
    </li> 
    <!--[ Layout 06 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/Template' title='Template'>     
        <!--[ Link Icon ]-->
        <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/><path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V19C12 19.5523 11.5523 20 11 20H5C4.44772 20 4 19.5523 4 19V13Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/><path d='M16 13C16 12.4477 16.4477 12 17 12H19C19.5523 12 20 12.4477 20 13V19C20 19.5523 19.5523 20 19 20H17C16.4477 20 16 19.5523 16 19V13Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>
        <!--[ Link Name ]-->
        <span>Template</span>
      </a>
    </li>
  </ul>

</div>
</div>
</b:includable>
</b:widget>

Ubah kode SVG sesuai icon yang anda butuhkan. Anda bisa mencarinya disini ICON SVG.

5. Salin kode dibawah ini, kemudian cari kode </body> dan paste kode diatasnya.

<script type='text/javascript'> /*<![CDATA[*/
var TxtRotate = function (t, e, i) { this.toRotate = e, this.el = t, this.loopNum = 0, this.period = parseInt(i, 10) || 2e3, this.txt = "", this.tick(), this.isDeleting = !1 }; TxtRotate.prototype.tick = function () { var t = this.loopNum % this.toRotate.length, e = this.toRotate[t]; this.isDeleting ? this.txt = e.substring(0, this.txt.length - 1) : this.txt = e.substring(0, this.txt.length + 1), this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>"; var i = this, s = 300 - 100 * Math.random(); this.isDeleting && (s /= 2), this.isDeleting || this.txt !== e ? this.isDeleting && "" === this.txt && (this.isDeleting = !1, this.loopNum++, s = 500) : (s = this.period, this.isDeleting = !0), setTimeout(function () { i.tick() }, s) }, window.onload = function () { for (var t = document.getElementsByClassName("txt-rotate"), e = 0; e < t.length; e++) { var i = t[e].getAttribute("data-rotate"), s = t[e].getAttribute("data-period"); i && new TxtRotate(t[e], JSON.parse(i), s) } var o = document.createElement("style"); o.type = "text/css", o.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }", document.body.appendChild(o) };
/*]]>*/
</script>

6. Setelah semua dipasang dengan benar, tinggal klik Save.

Cara Simple Cara Memasang Banner Text

1. Masuk ke akun Blogger dan buka Tata Letak.

2. Kemudian Pilih Tambah HTML/JavaScript.

3. Salin kode dibawah ini, kemudian paste kode tersebut.

<style>
<!-- Banner Text Bang Wahid -->
.desC{
  font-family:var(--font-bodyAlt);
  text-align:center;
  font-size:13px;
  padding-bottom:0px;line-height:1.6em;
} .desC:after{
  content:'';
  width:0px;
  display:block;
  position:relative;
  bottom:-6px;
  border-bottom:1.5px solid #989b9f;
  margin:3px auto;
  animation:animatebord 3s infinite;
  -webkit-animation:animatebord 3s infinite;
}
@-webkit-keyframes animatebord{
  0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}} .learn{font-size: 1.3rem;} 
.slebew {
  background: linear-gradient(330deg,red 0,#31e400 25%,#00f7ff 50%,#7f00ff 75%,#232222 100%); 
  background-size: 200% auto; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  animation: 3s linear infinite animate;
}
.stw-feature{
  padding:5px;
  text-align:center;position:relative;
}
.stw-feature h2{
  font-size:1.6em;
  line-height:1.6em;
  margin-bottom:0;
  padding-bottom:0;
}
.stw-feature ul{
  clear:both;
  margin:15px 0 20px;width:100%;
  display:flex;
  padding:0;
  flex-wrap:wrap;
  justify-content:space-between;
}
.stw-feature.icon-p-2 li{
  position:relative;
  width:30%;
  list-style:none;
  line-height:1.3em;
  text-align:center;
  border-radius:10px;
  margin:6px 0;
  background:var(--contentB);
  box-shadow:0 5px 35px rgb(0 0 0/7%);
  padding:6px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stw-feature li a{
  display:block;
  text-decoration:none;
  color:var(--fontC)
}
.stw-feature li svg{
  margin:3px 0;
  width:35px;
  height:35px;
  display:inline-block;
}
.stw-feature li span{
  display:block;
  padding:0 3px;
}
.drK .stw-feature li{
  background:var(--darkBa);
}
</style>
/* Banner Text Bang Wahid */

<div class='widget-content'>
<div class='stw-feature coll-3 icon-p-2'> 
  
  <!--[ Category Layout Title ]-->
  <center>
    <div class='outer-circle'>
      <div class='inner-circle'/>
    </div>
    
    <div class='banner_text'>
      <div class='learn slebew'>Learn <span class='txt-rotate' data-period='2000' data-rotate='[ &quot;AdSense&quot;, &quot;Blogger&quot;, &quot;WordPress&quot;, &quot;YouTube&quot;, &quot;SEO&quot;, &quot;Android&quot; ]'/>
      </div>
    </div>
  </center>
  <p class='desC'>Bang Wahid - Website Yang Menyediakan Berbagai Informasi Teknologi, Tutorial, Programming, Internet, Sosial Media, Tips &amp; Trik dan Berbagai Teknologi Lainnya</p>
  
  <h2><span><data:title/></span></h2> 
  
  <ul> 
    <!--[ Layout 01 ]-->
    <li> 
      <!--[ Link and Title ]-->
      <a href='/search/label/Adsense' title='Adsense'>
        <!--[ Link Icon ]-->
        <svg height='512px' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='comp_x5F_7-adsense'><g><path d='M475.071,262.35c-2.495-3.96-6.884-6.351-11.548-6.351H320.417l-98.702,212.076c-2.251,4.84-7.109,7.923-12.428,7.923    h-0.03c0.01,0,0.02,0.001,0.029,0.001h164.56c5.322,0,10.173-3.083,12.421-7.924l89.683-192.5    C477.926,271.313,477.592,266.31,475.071,262.35z'/><path d='M390.017,55.58c1.974-4.261,1.672-9.268-0.849-13.228c-2.524-3.961-6.886-6.352-11.577-6.352H240.464    c-5.32,0-10.173,3.08-12.42,7.946L36.063,456.44c-1.979,4.264-1.672,9.244,0.849,13.204c2.521,3.957,6.884,6.354,11.573,6.354    H185.58h0.03c5.319,0,10.177-3.083,12.428-7.923l98.702-212.076L390.017,55.58z'/></g></g><g id='Layer_1'/></svg>
        <!--[ Link Name ]-->
        <span>Adsense</span>
      </a>
    </li>  
    
    <!--[ Layout 02 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/Blogger' title='Blogger'>
        <!--[ Link Icon ]-->
        <svg id='Icons' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M27.4,12h-0.9c-0.8,0-1.5-0.7-1.5-1.5C25,5.8,21.2,2,16.5,2h-6C5.8,2,2,5.8,2,10.5v11c0,4.7,3.8,8.5,8.5,8.5h11  c4.7,0,8.5-3.8,8.5-8.5v-6.9C30,13.2,28.8,12,27.4,12z M11,8h5c1.7,0,3,1.3,3,3s-1.3,3-3,3h-5c-1.7,0-3-1.3-3-3S9.3,8,11,8z M20,24  h-9c-1.7,0-3-1.3-3-3s1.3-3,3-3h9c1.7,0,3,1.3,3,3S21.7,24,20,24z'/></svg>
        <!--[ Link Name ]-->
        <span>Blogger</span>
      </a>
    </li> 
    
    <!--[ Layout 03 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/WordPress' title='WordPress'>     
        <!--[ Link Icon ]-->
        <svg height='512px' id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M255.9,64C150.2,64,64,150.2,64,256.1C64,361.9,150.2,448,255.9,448c8.5,0,16.8-0.5,24.9-1.8  c85.7-11,153.8-78.7,165.3-164.1c1.3-8.5,1.9-17.2,1.9-26C448,150.2,361.8,64,255.9,64z M83.4,256.1c0-25,5.4-48.8,15-70.2  l82.3,225.5C123.1,383.4,83.4,324.3,83.4,256.1z M278.3,427.3c-7.3,0.9-14.8,1.4-22.4,1.4c-16.9,0-33.2-2.5-48.6-7.1l18.8-55h0.1  l32.7-95.5L312,416.5c0.4,0.8,0.9,1.6,1.3,2.3C302.1,422.8,290.4,425.6,278.3,427.3z M279.8,175.1c10.4-0.5,19.7-1.6,19.7-1.6  c9.4-1,8.2-14.8-1.1-14.2c0,0-28,2.2-46,2.2c-16.9,0-45.5-2.2-45.5-2.2c-9.2-0.6-10.4,13.7-1,14.2c0,0,8.7,1.1,18.1,1.6l26.9,73.7  l-37.8,113.3l-62.9-187c10.5-0.5,19.8-1.6,19.8-1.6c9.2-1,8.2-14.8-1.1-14.2c0,0-27.9,2.2-46,2.2c-3.3,0-7.1-0.1-11.1-0.2  c30.8-46.8,83.9-77.7,144.1-77.7c45,0,85.9,17.2,116.6,45.2c-0.8,0-1.5-0.1-2.3-0.1c-17,0-29,14.8-29,30.7  c0,14.2,8.2,26.2,16.9,40.4c6.6,11.5,14.3,26.3,14.3,47.6c0,14.8-4.4,33.4-13.1,55.7l-17.3,57.6L279.8,175.1z M342.7,405.3  l13.7-39.7l39-112.8c9.9-24.6,13.1-44.3,13.1-61.8c0-6.3-0.4-12.3-1.1-17.8c13.5,24.6,21.2,52.8,21.2,82.9c0,8-0.5,15.8-1.5,23.5  C419.7,333.3,387.6,379.2,342.7,405.3z'/></svg>
        <!--[ Link Name ]-->
        <span>WordPress</span>
      </a>
    </li>
  </ul>
  
  <ul> 
    <!--[ Layout 04 ]-->
    <li> 
      <!--[ Link and Title ]-->
      <a href='/search/label/HTML' title='HTML, CSS, JS'>
        <!--[ Link Icon ]-->
        <svg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><title/><g><path d='M24.8452,25.3957a6.0129,6.0129,0,0,0-8.4487.7617L1.3974,44.1563a5.9844,5.9844,0,0,0,0,7.687L16.3965,69.8422a5.9983,5.9983,0,1,0,9.21-7.687L13.8068,48l11.8-14.1554A6,6,0,0,0,24.8452,25.3957Z'/><path d='M55.1714,12.1192A6.0558,6.0558,0,0,0,48.1172,16.83L36.1179,76.8262A5.9847,5.9847,0,0,0,40.8286,83.88a5.7059,5.7059,0,0,0,1.1835.1172A5.9949,5.9949,0,0,0,47.8828,79.17L59.8821,19.1735A5.9848,5.9848,0,0,0,55.1714,12.1192Z'/><path d='M94.6026,44.1563,79.6035,26.1574a5.9983,5.9983,0,1,0-9.21,7.687L82.1932,48l-11.8,14.1554a5.9983,5.9983,0,1,0,9.21,7.687L94.6026,51.8433A5.9844,5.9844,0,0,0,94.6026,44.1563Z'/></g></svg>
        <!--[ Link Name ]-->
        <span>HTML, CSS, JS</span>
      </a>
    </li>  
    <!--[ Layout 05 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/SEO' title='SEO'>
        <!--[ Link Icon ]-->
        <svg enable-background='new 0 0 32 32' id='Glyph' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z' id='XMLID_223_'/></svg>
        <!--[ Link Name ]-->
        <span>SEO</span>
      </a>
    </li> 
    <!--[ Layout 06 ]-->
    <li>
      <!--[ Link and Title ]-->
      <a href='/search/label/Template' title='Template'>     
        <!--[ Link Icon ]-->
        <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/><path d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V19C12 19.5523 11.5523 20 11 20H5C4.44772 20 4 19.5523 4 19V13Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/><path d='M16 13C16 12.4477 16.4477 12 17 12H19C19.5523 12 20 12.4477 20 13V19C20 19.5523 19.5523 20 19 20H17C16.4477 20 16 19.5523 16 19V13Z' stroke='#4A5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>
        <!--[ Link Name ]-->
        <span>Template</span>
      </a>
    </li>
  </ul>

</div>
<script type='text/javascript'> /*<![CDATA[*/
var TxtRotate = function (t, e, i) { this.toRotate = e, this.el = t, this.loopNum = 0, this.period = parseInt(i, 10) || 2e3, this.txt = "", this.tick(), this.isDeleting = !1 }; TxtRotate.prototype.tick = function () { var t = this.loopNum % this.toRotate.length, e = this.toRotate[t]; this.isDeleting ? this.txt = e.substring(0, this.txt.length - 1) : this.txt = e.substring(0, this.txt.length + 1), this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>"; var i = this, s = 300 - 100 * Math.random(); this.isDeleting && (s /= 2), this.isDeleting || this.txt !== e ? this.isDeleting && "" === this.txt && (this.isDeleting = !1, this.loopNum++, s = 500) : (s = this.period, this.isDeleting = !0), setTimeout(function () { i.tick() }, s) }, window.onload = function () { for (var t = document.getElementsByClassName("txt-rotate"), e = 0; e < t.length; e++) { var i = t[e].getAttribute("data-rotate"), s = t[e].getAttribute("data-period"); i && new TxtRotate(t[e], JSON.parse(i), s) } var o = document.createElement("style"); o.type = "text/css", o.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }", document.body.appendChild(o) };
/*]]>*/
</script>

4. Save

5. Selesai!

GET LINK
Posting Komentar
close