2 Cara Membuat Halaman Partner di Halaman Statis Blogger Keren & Responsive
Cara Membuat Halaman Partner di Halaman Statis Blogger - Selamat siang semuanya bertemu kembali dengan saya mimin enalblogger yang baik hati dan suka berbagi ini, pada kesempatan kali ini saya akan membagikan cara membuat halaman link partner di halaman blogger.
Membuat link partner dihalaman blog adalah salah satu langkah penting untuk perkembangan sebuah blog agar cepat berkembang. Tujuan dari halaman link partner ini adalah untuk menjalin ikatan kerjasama antar blogger demi membuat blog kita terlihat lebih profesional.
Dengan membuat suatu ikatan atau partner kepada sesama blogger tentu saja blog kita akan lebih banyak kedatangan visitor dari halaman partner tersebut, apalagi jika kita mempunyai partner blog website besar maka secara tidak langsung visitor blog kita akan ikut ramai seperti blog partner kita.
Nah selain dapat mendatangkan visitor, salah satu keuntungan membuat halaman partner adalah untuk menjalin ikatan kuat antar sesama penulis atau blogger, Tentu saja blog kita akan terlihat lebih profesional karena dapat menjalin hubungan dengan para blogger hebat.
Mungkin kamu tertarik untuk menjadi partner enalblogger, kamu bisa membaca syarat dan ketentuan untuk menjadi bagian dari partner enalblogger. tapi sebelum itu yang paling penting adalah membuat halaman link partner terlebih dahulu, saya telah menyediakan 2 tampilan halaman link partner kamu bisa memilih salah satunya sesuai selera.
Cara Membuat Halaman Link Partner di Blogger
1. Pertama-tama seperti biasa silakan login terlebih dahulu ke akun blogger masing-masing, nah setelah kamu berhasil masuk ke blog kamu.
2. Langkah selanjutnya adalah masuk ke halaman dan buat halaman baru, lalu pilih menu HTML bukan compose karena script dibawah hanya akan berkerja pada HTML.
3. Selanjutnya silakan kamu copy kode yang sudah saya siapkan ini lalu pastekan ke halaman blog anda ingat pastekan pada bagian HTML bukan compose.
<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Roboto");#link-partner{font-family:'Roboto',sans-serif!important;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;color:#686868;font-size:15px;line-height:1.4;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;min-height:50%}#link-partner *,#link-partner *:before,#link-partner *:after{box-sizing:inherit}#link-partner .link-partner-blogger{font-family:'Roboto',sans-serif!important;padding:16px 0;margin:0;list-style:none;position:relative}@media (max-width:767px){#link-partner .link-partner-blogger{padding:32px 0}}#link-partner .link-partner-blogger:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%}#link-partner .link-partner-blogger:after{content:'';position:absolute;top:0;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:2px}#link-partner .link-partner-blogger .box-partner{position:relative;padding:32px 0;z-index:2;visibility:hidden}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner{font-family:'Roboto',sans-serif!important;text-align:center;background:#fff;border-radius:3px;padding:16px;border:2px solid #0177FA}#link-partner .link-partner-blogger .box-partner:first-child{margin-top:16px}#link-partner .link-partner-blogger .box-partner + *{margin-top:32px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner{font-family:'Roboto',sans-serif!important;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#link-partner .link-partner-blogger .box-partner:before{opacity:0!importantant}}#link-partner .link-partner-blogger .box-partner:hover #link-partner .link-partner-blogger .box-partner .mas-tamvan:before{background:#0177FA}#link-partner .link-partner-blogger .box-partner:last-child:after{content:'';position:absolute;bottom:-16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%;visibility:visible}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner:last-child:after{bottom:-40px}}#link-partner .link-partner-blogger .box-partner a{color:#686868;text-decoration:none}#link-partner .link-partner-blogger .box-partner .mas-tamvan{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0177FA;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;position:relative;z-index:1}#link-partner .link-partner-blogger .box-partner .mas-tamvan:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:50%;-webkit-transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);z-index:1}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .mas-tamvan:after{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:32px;height:2px;background:rgba(1,119,250,0.25);z-index:-1}}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner .mas-tamvan{position:absolute;top:0;left: 50% !important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}}#link-partner .link-partner-blogger .box-partner .title-partner{margin:0}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .title-partner{margin:0 32px 0 0;text-align:right;width:400px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .deskripsi-partner{color:#a8a8a8;margin:0 0 0 32px;width:400px}}#link-partner .link-partner-blogger .box-partner:hover .mas-tamvan:before{-webkit-animation:pulse 1.5s infinite;box-shadow:0 0 0 0 rgba(90,153,212,0.5)}@-webkit-keyframes pulse{0%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9);box-shadow:0 0 0 0 rgba(90,153,212,0)}}</style>
<!--HTML LINK PARTNER-->
<br />
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">
<h3 class="title-partner">
<a href="https://www.showdzgn.com/" id="linkblog" title="Showdzgn">Show Design</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Show Design Tempatnya Berbagi Template dan Tutorial Blogger, SEO, Responsive, Gallery, jQuery, CSS, HTML, JavaScript, Widget, ...</div>
</li>
<li class="box-partner">
<h3 class="title-partner">
<a href="URL Blog" id="linkblog" title="Title blog">Nama Blog</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Diskripsi blog kamu disini</div>
</li>
</ul>
</div>
<!--JS LINK PARTNER-->
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js",document.body.appendChild(d)}function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://rawgit.com/mastamvan/backup/master/link-partner.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload,window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;
//]]>
</script>Terakhir silakan kamu simpan seperti biasa, dengan ini kamu telah berhasil membuat halaman link partner di blogTerakhir silakan kamu simpan seperti biasa, dengan ini kamu telah berhasil membuat halaman link partner di blog.
Hasil Dari Kode Diatas :
Nah buat kamu pengunjung setia enalblogger mungkin kamu mau ikutan menjadi partner enalblogger jika iya silakan cek halaman partner eb untuk membaca syarat dan ketentuannya. Partner EB.
Jika kamu ingin menambahkan orang baru silakan copy kode dibawah ini dan letakkan tepat diatas kode akhir </li>. jika kamu kurang tertarik dengan hasil diatas kamu bisa mencoba halaman link partner kedua yang sudah saya siapkan dibawah ini.
Halaman Partner Versi Kedua
Seperti biasa cara membuat halaman partner versi kedua ini nggak jauh beda sama versi pertama tapi bedanya kamu harus menambahkan kode dibawah ini ke template kalian tepat dibawah kode. </b:template-skin> Lalu pastekan kode dibawah ini tepat dibawahnya agar nanti tampilan halaman partner kalian full width dan tidak terlihat sempit.
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#comments-show{display:none;}
#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>
</b:if>Setelah kode diatas sudah dipastekan, selanjutnya adalah membuat halaman partner blog, seperti biasa kamu masuk ke halaman lalu buat halaman baru pilih menu HTML bukan compose, Lalu silakan kalian copy kode dibawah ini lalu pastekan di halaman HTML.
<style type="text/css">
#table p{
font-size: 40px;
text-align: center;
}
.tb-partner-amtread{
width: 99%;
float: left;
margin: 0 0.5%;
overflow: auto;
}
.niche-tabel{
width: 100px;
}
table{
width: 100%;
background-color: #dff9fb;
border-collapse: collapse;
border:none;
}
table .heading-table-partner{
background: linear-gradient(to right,#ff0080,#ff69b4);
height: 50px;
}
table a{
color: white !important;
text-decoration: none;
}
table a:hover{
color: #ff69b4 !important;
}
table tr:nth-child(even){
background-color: #ffcce6;
}
table tr{
border-bottom: 1px solid white;
padding:0 10px;
background:#ffe6f2;
}
table th{
border-left: 1px solid rgba(255,255,255,0.12);
border-right: aliceblue;
color: white;
border:none;
padding:10px;
width:40px;
font-size:15px;
text-align:center;
}
table td{
font-size: 20px;
padding: 10px 10px;
border:none;
text-align: center;
}
td.deskripsi-partner{
font-size:13px;
}
table td:nth-child(1){
background: linear-gradient(to bottom,#ff0080,#ff69b4);
border-top: 1px solid rgba(255,255,255,0.12);
color: white;
}
table td:nth-child(3){
background: linear-gradient(to bottom,#ff0080,#ff69b4);
border-top: 1px solid rgba(255,255,255,0.12);
color: white;
}
table td:nth-child(5){
background: linear-gradient(to bottom,#ff0080,#ff69b4);
border-top: 1px solid rgba(255,255,255,0.12);
color: white;
}
table tr:nth-child(1){
border:none;
}
td .td-logo-web{background:linear-gradient(to right,#ffcce6,#ffcce6);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;border-color:#003399;text-align:center}
</style>
<body>
<div class="tb-partner-amtread">
<table border="1px solid black">
<tr class="heading-table-partner">
<th>No</th>
<th>Logo</th>
<th>Nama Blog</th>
<th class="niche-tabel">Niche/Topik</th>
<th>Deskripsi</th>
<th>Link</th>
</tr>
<tr>
<td>1</td>
<td class="td-logo-web"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcGvQoDANF91-QAZukZf56QK6q-FeGWPO3dipbMilGaQ2SH9x_foqKFeBAtFBCd-7T_X50JAra5ukuR565PNEqqnTgiKNpknkr4Yje1jFNgs1K0kxSO_0nDmEZjqKlMA4LjQVDGeH9I4k/s320/Anirock%255B1%255D.jpg" /></td>
<td>Anirock Site/td>
<td class="niche-tabel">Personal Blog</td>
<td class="deskripsi-partner">Anirock Site adalah blog personal yang bertema blogger dimana Anirock Site merupakan media sharing pembelajaran dan pengetahuan seputar teknologi, tips, trick dan informasi umum lainnya yang akan berguna untuk menambah wawasan para pembaca termasuk pemilik website ini juga.</td>
<td><a href="https://www.enalblogger.com/" target="_blank"><span style="color: #222222; font-size: small;">Visit Now!</span></a></td>
</tr>
<tr>
<td>2</td>
<td class="td-logo-web"><img src="#" /></td>
<td>Judul Blog</td>
<td class="niche-tabel">?</td>
<td>Kamu Partner Berikutnya Ya :( </td>
<td><a href="https://www.partnerku.com/" target="_blank"><span style="color: #222222; font-size: small;">Visit Now!</span></a></td></tr>
</table>
</div>
</body>Nah setelah itu klik simpan maka lihat hasilnya, silakan kalian ganti nama blog dengan nama blog partner kamu lalu pada bagian deskripsi kamu ganti dengan deskripsi partner blog kamu untuk mengganti warna maka ganti kode warna, kamu bisa melihat kode warna pada bagian tools blog dibagian navigasi blog saya dengan nama Color Picker.
Akhir Kata : Nah begitulah 2 cara membuat halaman partner blog jika ada pertanyaan terkait artikel diatas silakan tanyakan melalui kolom komentar atau contact saya dan jangan lupa untuk berkomentar dibawah ini demi perkembangan blog ini kedepannya.
Label: BLOGGER, OPTIMASI BLOG
