Tutorial Creating Links page Cool and Simple Partner - Hello friend sopintar.blogspot.com SCIENCE & NEWS, In the article that you read this time with the title Tutorial Creating Links page Cool and Simple Partner, we have prepared this article well for you to read and retrieve information in it. hopefully fill in the post Artikel TUTORIAL, what we write can you understand. OK, happy reading.


link : Tutorial Creating Links page Cool and Simple Partner

Tutorial Creating Links page Cool and Simple Partner - Link partner page is useful to add many backlinks and friends from other bloggers. Previously I also shared a tutorial to make a list on the statistics page, manum different from this one, because this tutorial has a cool and simple design belongs to Kang Wira.

Tutorial Creating Links page Cool and Simple Partner

Because the design belongs to Kang Wira, so dsainnya also like or resemble Kang Wira. As you can see, it has 2 columns that can load a lot of friend lists on the page.

How to Create Link Partners in Statistic Blog Page

The first step :
                    - Login to "Blogger"
                    - Then select "Pages"
                    - Next "New Pages"
                    - Please enter the code below

<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>

Please change the text I marked with your partner's image, description, and partner description. To add a new Partner slot, you simply add the code below above the second </ div> code.

<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>

This is the article Tutorial Creating Links page Cool and Simple Partner

So many articles Tutorial Creating Links page Cool and Simple Partner this time, hopefully it can benefit you all. OK, see you in another article.

Tutorial Creating Links page Cool and Simple Partner

You are now reading the article Tutorial Creating Links page Cool and Simple Partner with the link address http://sopintar.blogspot.com/2018/05/tutorial-creating-links-page-cool-and.html

Share this post

Berlangganan update artikel terbaru via email: