Home TUTORIAL Membuat Halaman Partner List Ala GoSEO

Membuat Halaman Partner List Ala GoSEO

        
Membuat Halaman Partner List Ala GoSEO
Membuat Halaman Partner List
GoSEO.id - Pada hari ini saya membuat halaman Partner List yang setelah berkonsultasi dengan berbagai suhu bahwa halaman ini mempunyai fungsi yang amat besar yaitu backlink. Dengan adanya backlink, visitor akan bertambah dan rank halaman blog lebih kuat pada mesin pencarian.


Setelah saya mempublish dan share halaman Blog Partners, ternyata ada teman sesama blogger dari grub whatsapp yang menanyakan bagaimana "Membuat Halaman Partner List Ala GoSEO"?

Oleh karena itu saya akan menuangkannya dalam artikel ini, silahkan ikuti tahapan berikut ini :

Membuat Halaman Partner List Ala GoSEO

  1. Masuk ke akun blogger.com milikmu.
  2. Setelah itu masuk ke menu Tema => lalu klik tombol Edit HTML.
  3. Kemudian copy CSS dibawah ini dan letakkan kode tersebut diatas </head>.
    <!-- CSS Partner List GoSEO.id -->
<style type="text/css">
.bg-merah{
  background-color: #EC7777 !important;
}
.timeline{
  border-left: 5px solid #B0B0B0;
  margin:0px;
  padding: 0px;
  height: 100%;
  padding: 10px;
  padding-top: 0px;
  margin-left:50px;
}
.timeline li{
  list-style: none;
  margin-top:10px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.timeline li .bulet{
  width: 30px;
  height: 30px;
  margin-left: -49px;
  padding: 3px;
  color: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  border-radius:100px;
  position: absolute;
  text-align: center;
}
.timeline li .box-time{
  width: 60px;
  padding: 5px;
  background-color: #F26248;
  color: #fff;
  height: 20px;
  box-shadow:0 3px 4px #949494;
  margin-left: -70px;
  position: relative;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-top: -50px;
}
.timeline li .box .header{
  padding: 3px;
  height: 20px;
  border-bottom: 1px solid #BDBDB3;
  margin-bottom: 3px;
}
.timeline li .box .link{
  color: #888875;
  float: right;
  font-size: 12px;
}
.timeline li .box a{
  color: #64A8B7;
  font-size: 16px;
  font-family: calibri;
  font-weight: bold;
  text-decoration: none;
}
.timeline li .box a:hover{
  color: #468A99;
}
.timeline li .box small{
  color: #666659;
  font-size: 16px;
}
.timeline li .box-attachment{
  margin-top: 10px;
  margin-left: 20px;
  background-color: #EAEAEA;
  padding: 5px;
}
.timeline li .footer{
  width: 30px;
  height: 30px;
  margin-left: -49px;
  padding: 3px;
  color: #fff;
  background-color: #C8C8BF;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  border-radius:100px;
  position: absolute;
  text-align: center;
  top:100%;
}
.box{
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border:1px solid #ccc;
  line-height: 20px;
  font-family: calibri;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.btn{
  padding: 5px;
  font-size: 12px !important;
  border:none;
  text-decoration: none;
  color: #fff !important;
  margin-right:10px;
  clear: both;
  cursor: pointer;
  border-radius: 3px;
}
.btn:hover{
  opacity: 0.8;
}
.row{
  margin:5px;
  margin-left: 0px;
}
</style>
  4. Setelah selesai meng-copy kode CSS tersebut, selanjutnya klik tombol Simpan Tema.
  5. Kemudian masuk ke menu Halaman => lalu klik tombol Halaman Baru (untuk membuat halaman list partner)
  6. Silahkan copy kode dibawah ini dan paste dengan mode HTML (bukan Compose).
    <ul class="timeline">
<li><span class="box-time">Partner List</span></li>
<li>
<span class="bulet bg-merah">1</span>
<div class="box">
<div class="header">
Partner <a href="https://www.goseo.id/" rel="supported" target="blank_" title="GoSEO.id">GoSEO.id</a><span class="link">goseo.id</span></div>

<a href="https://www.goseo.id/" rel="supported" target="blank_" title="GoSEO.id"><img height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="GoSEO.id" width="200" /></a>

GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
<div class="row">
</div>
</div>
</li>

<li>
<span class="bulet bg-merah">2</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>
</ul>
    Ganti yang saya ditandai dan sesuaikan dengan data partner kamu.
  7. Setelah itu silahkan klik Simpan dan lihat hasilnya.
  8. Jika ingin menambahkan list partner lainnya, silahkan copy kode dibawah ini dan letakkan tepat diatas </ul> dari kode tahap 6 tadi.
    <li>
<span class="bulet bg-merah">3</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>
  9. Maka hasilnya nanti akan jadi seperti ini :
    <ul class="timeline">
<li><span class="box-time">Partner List</span></li>
<li>
<span class="bulet bg-merah">1</span>
<div class="box">
<div class="header">
Partner <a href="https://www.goseo.id/" rel="supported" target="blank_" title="GoSEO.id">GoSEO.id</a><span class="link">goseo.id</span></div>

<a href="https://www.goseo.id/" rel="supported" target="blank_" title="GoSEO.id"><img height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="GoSEO.id" width="200" /></a>

GoSEO.id merupakan blog yang mengulas seputar internet, baik itu sebuah solusi internet, pemasaran internet atau lainnya.
<div class="row">
</div>
</div>
</li>

<li>
<span class="bulet bg-merah">2</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>

<li>
<span class="bulet bg-merah">3</span>
<div class="box">
<div class="header">
Partner <a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER">NAMA BLOG PARTNER</a><span class="link">LINK BLOG PARTNER</span></div>

<a href="LINK BLOG PARTNER" rel="supported" target="blank_" title="TITLE BLOG PARTNER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbq8S4GABhsCfnnqtA4WhC8o4at4PxwULMMk5zxSiKRIRSRZiRNNnv9dUFcJz3YzZpWGbM5sGassBxR5d0U8FJYQ-XquPjfDsEGkDyynIdjOpUdZ4xWpu9rCN_i1WJWR3hjlxzWXbhIJJ/s320/logo+-+2.png" title="TITLE BLOG PARTNER" width="100" /></a>

DESKRIPSI BLOG PARTNER
<div class="row">
</div>
</div>
</li>
</ul>
Semoga tutorial "Membuat Halaman Partner List Ala GoSEO" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak dipahami.
Pinterest
More
Less
Tumblr
Mix
GMail
LinkedIn
Reddit
XING
WhatsApp
Hacker News
VK
Telegram
Line
Show comments
Hide comments

0 Comments

Posting Komentar