Cara Membuat Halaman Partner Responsive dan Menarik di Blogger

Post a Comment

 Partner pada umumnya adalah sebuah kerjasama dengan orang lain untuk menjalin hubungan yang baik sehingga menghasilkan sesuatu dan menguntungkan untuk kedua belah pihak atau lebih.

Langkah Membuat Halaman Partner

Cara Membuat Halaman Partner

#Tahap ke-1

1. Buka Dasboard Blogger.com

2. Pili menu Tema/Template

3. Cari kode </head>

4. Letakan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>@import url(&quot;https://fonts.googleapis.com/css?family=Roboto&quot;);#link-partner{font-family:&#39;Roboto&#39;,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:&quot;liga&quot; 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:100%}#link-partner *,#link-partner *:before,#link-partner *:after{box-sizing:inherit}#link-partner .link-partner-blogger{font-family:&#39;Roboto&#39;,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:&#39;&#39;;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:&#39;&#39;;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:&#39;Roboto&#39;,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:&#39;Roboto&#39;,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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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;font-family:&#39;Raleway&#39;, Arial, sans-serif;}}#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>

Sumber kode:droidide.com

5. Lalu simpan template

#Tahap ke-2

1. Buat halaman statis

2. Pilih mode HTML, ingat, jangan mode Compose

3. Copy dan Paste kode ini

<!--HTML LINK PARTNER MAS TAMVAN--> <!-- RISMAX.ID -->
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">       <h3 class="title-partner">
<a href="URL BLOG 1" id="linkblog" title="Judul Blog 1">Nama Blog 1</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 1</div>    
</li>

<li class="box-partner">       <h3 class="title-partner">
<a href="URL Blog 2" id="linkblog" title="Judul Blog 2">Nama Blog 2</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 2</div>
</li>
<li class="box-partner">       <h3 class="title-partner">
<a href="URL BLOG 3" id="linkblog" title="Judul Blog 3">Nama Blog 3</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 3</div>
</li>
</ul>
</div>

<!--JS LINK PARTNER MAS TAMVAN--> 
<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>

Sumber kode:droidide.com

Keterangan:

Silahkan ganti warna merah dengan URL domain blog partner sobat

Silahkan ganti warna biru dengan nama blog partner sobat

Silahkan ganti warna hijau dengan deskripsi blog partner sobat

4. Terakhir klik Publikasikan

5. Selesai

Silahkan cek dan lihat hasilnya.

Semoga tutorial cara membuat partner diblogger yang responsive dan menarik diatas dapat bermanfaat, terimakasih!

Admin Blogseger
Saya suka berbagi tutorial dan informasi yang bermanfaat untuk setiap manusia

Related Posts

Post a Comment