Tutorial Membuat Halaman Link Partner Keren dan Simple

Halaman link partner berguna untuk menambah banyak backlink maupun teman-teman dari pada blogger lainnya. Sebelumnya saya juga pernah membagikan tutorial membuat daftar di halaman statistic, manum berbeda dengan yang ini, karna tutorial ini memiliki disain yang keren dan simple milik Kang Wira.

Karna disainnya milik Kang Wira, jadi dsainnya pun seperti atau menyerupai Kang Wira. Seperti yang Anda lihat, tampilannya memiliki 2 column yang mampu memuat banyak sekali friend list pada halaman tersebut.

Cara Membuat Link Partner di Halaman Statistic Blog

Langkah pertama :

• Login ke "Blogger"
• Lalu pilih "Halaman"
• Selanjutnya "Halaman Baru"
• Silakan masukkan kode dibawah ini

<style type="text/css">

.kolbod {float:left; width:100%;}

.kolsah{float:left;width:50%;padding:10px;margin-bottom:20px;}

@media (max-width:728px){.kolsah{width:100%;padding:0;margin-bottom:20px;}}

.sahabat{max-height:120px;min-height:120px;background:#fff;padding:4px 20px 4px 4px;margin-left:35px;margin-bottom:10px;border-radius:50px 0 30px 50px;box-shadow:0 0 8px #888}

.sahabat img{margin-left:-35px;margin-top:6px;}

.sahabat hr{border-color: #e74c3c;display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: 79px;margin-right: auto;border-style: solid;border-width: 1px;}

.sahabat p1{display: block;white-space: nowrap;font-size: 130%;font-weight: 800;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;margin-left: 90px;margin-top: 10px;line-height: 25px;}

.sahabat p1 a{text-decoration:none}

.sahabat p1 a:link{color:#e74c3c}

.sahabat p1 a:visited{color:#e74c3c}

.sahabat p1 a:hover{color:#a81b0d}

.sahabat p2{display:block;max-height:53px;overflow:hidden;font-size:85%;margin-left:90px;word-spacing:3px;letter-spacing:1px;line-height:1.4}

.proff{float:left;position:static;width:100px;height:100px;border: 5px solid #e74c3c;border-radius:30px;box-shadow:0 0 10px #777;}

.sahabat img:hover{-webkit-animation:shake 0.4s;animation:shake 0.4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}

@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}

@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}

</style>

<div class="kolbod">

<div class="kolsah">

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 1</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 3</p2>

</div>

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 3</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 3</p2>

</div>

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 5</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 5</p2>

</div>

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 7</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 7</p2>

</div>

<div class="kolsah">

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 2</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 2</p2>

</div><div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 4</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 4</p2>

</div>

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 6</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 6</p2>

</div>

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 8</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 8</p2>

</div>

</div>

</div>

Silakan ganti tulisan yang saya tandai dengan Url gambar, deskripsi, dan nama partner Anda. Untuk menambahkan slot Partner baru, Anda cukup menambahkan kode dibawah ini  di atas kode </div> yang ke dua.

<div class="sahabat">

<img alt="Mister Design" class="proff" src="https://image.prntscr.com/image/7h1MJYudRGinnz2DGXVn2g.png"/>

<p1><a title="Arti Mimpi" href="#" rel="dofollow" target="_blank">Partner 5</a></p1>

<hr/>

<p2>Ini adalah deskripsi partner 5</p2>

</div>