Halaman Statis yang berisi Link teman-teman Blogger ini sengaja dibuat Unik agar Menarik perhatian para blogger yang memburu backlink.
Untuk mengaplikasikannya di blog memang terhitung sangat mudah, tapi menurut saya, untuk memasukkan link sahabat ke dalam list, memang agak rumit karena harus masukkan URL secara manual.
Kenapa saya katakan rumit?
Sampai hari ini saya masih mencari beberapa cara untuk mempermudah teman-teman blogger saat memasukkan URL / Link kedalam list tersebut secara Otomatis.
Karena kali ini yang akan dibahas adalah cara Membuat Halaman Blogroll Statis yang Menarik, sobat blogger bisa langsung perhatikan langkahnya dibawah ini.
Baca juga: Membuat Halaman Khusus untuk Kategori
Membuat Halaman Blogroll Statis yang Menarik
- Langkah pertama, pastikan kamu sudah masuk kedalam akun blogger kamu.
- Lalu buatlah sebuah Halaman Baru dengan judul sesukamu.
- Selanjutnya kamu Masukkan JavaScript dibawah ini pada Tab HTML bukan di tab Compose ya.
<script async src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js' type="text/javascript"></script><center>
<body-luar>
<div class="Container">
<ul class="BlogList">
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title"><a title='DESKRIPSI' rel="nofollow" target='_blank' href="URL BLOGROLL">NAMA BLOG SAHABAT</a></h3>
<div class="ArticleTeaser-bubble"></div>
<div class="ArticleTeaser-date">DESKRIPSI BLOG</div>
</li>
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title"><a title='DESKRIPSI' rel="nofollow" target='_blank' href="URL BLOGROLL">NAMA BLOG SAHABAT</a></h3>
<div class="ArticleTeaser-bubble"></div>
<div class="ArticleTeaser-date">DESKRIPSI BLOG</div>
</ul>
</div>
</body-luar>
</center>Perhatikan pada penulisan yang sudah saya tandai pada kode HTML diatas. Silahkan kamu rubah sesuai keperluan kamu
| Jenis | Perubahan |
|---|---|
| DESKRIPSI | Ubah menjadi Judul atau Deskripsi Singkat Blog |
| URL BLOGROLL | Ubah menjadi URL / Link Tujuan |
| NAMA BLOG SAHABAT | Ubah menjadi Nama Blog |
| DESKRIPSI BLOG | Ubah menjadi Deskripsi Panjang dari Blog Tujuan |
- Selanjutnya Masukkan JavaScript dibawah agar script nya dapat bekerja dan menampilkan Daftar Blog yang sudah di buat.
<!--JS LINK PARTNER-->
<script async src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js' type="text/javascript"></script>
<script type="text/javascript">
function run(){forEach($articles,function(e,t){articleAnim(t,e),articleHover(t)})}function articleAnim(e,t){var i=new TimelineMax;i.set(e,{visibility:"visible"}).from(e.querySelector(".ArticleTeaser-bubble"),.5,{scale:0,delay:.75*t,ease:Elastic.easeOut.config(1.5,1)},"article-bubble").from(e,.5,{delay:.75*t,opacity:0,ease:Elastic.easeOut.config(1.5,1)},"article-bubble").from(e.querySelector(".ArticleTeaser-title"),.5,{x:"25%",opacity:0,ease:Elastic.easeOut.config(1.5,1)},"article-teaser").from(e.querySelector(".ArticleTeaser-date"),.5,{x:"-25%",opacity:0,ease:Elastic.easeOut.config(1.5,1)},"article-teaser")}function articleHover(e){var t=e.querySelector(".ArticleTeaser-title a");e.timeline=new TimelineMax({paused:!0}),e.timeline.to(e.querySelector(".ArticleTeaser-bubble"),.15,{scale:1.25}),t.addEventListener("mouseenter",function(){e.timeline.play()},!1),t.addEventListener("mouseleave",function(){e.timeline.reverse()},!1)}var optimizedResize=function(){function e(){a||(a=!0,window.requestAnimationFrame?window.requestAnimationFrame(t):setTimeout(t,66))}function t(){r.forEach(function(e){e()}),a=!1}function i(e){e&&r.push(e)}var r=[],a=!1;return{add:function(t){r.length||window.addEventListener("resize",e),i(t)}}}(),forEach=function(e,t,i){for(var r=0;r<e.length;r++)t.call(i,r,e[r])},$articles=document.querySelectorAll(".ArticleTeaser");setTimeout(run,500),optimizedResize.add(function(){forEach($articles,function(e,t){window.matchMedia("(min-width: 768px)").matches?TweenMax.set(t.querySelector(".ArticleTeaser-bubble"),{x:"0%",y:"0%"}):TweenMax.set(t.querySelector(".ArticleTeaser-bubble"),{x:"-50%",y:"-50%"})})});
</script>Tambahkan CSS ini tepat dibawah semua kode yang sudah kamu edit tadi agar Mempercantik Tampilan Daftar Blogroll yang sudah kamu buat.
<!--CSS LINK PARTNER-->
<style>
body-luar{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:100%;width:100%}body-luar *,body-luar *:before,body-luar *:after{box-sizing:inherit}.Container{max-width:800px;margin:0 auto;padding:0 16px}.BlogList{padding:16px 0;margin:0;list-style:none;position:relative}@media(max-width:767px){.BlogList{padding:32px 0;list-style:none;}}.BlogList:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%}.BlogList:after{content:'';position:absolute;top:0;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:2px}.ArticleTeaser{position:relative;padding:32px 0;z-index:2;visibility:hidden}@media(max-width:767px){.BlogList{list-style:none;}.ArticleTeaser{text-align:center;background:#fff;border-radius:3px;padding:16px;border:2px solid #0177FA;list-style:none;}.ArticleTeaser:first-child{margin-top:16px}.ArticleTeaser + *{margin-top:32px}}@media(min-width:768px){.ArticleTeaser{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}.ArticleTeaser:before{opacity:0!important}}.ArticleTeaser:hover .ArticleTeaser-bubble:before{background:#0177FA}.ArticleTeaser: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){.ArticleTeaser:last-child:after{bottom:-40px}}.ArticleTeaser a{color:#686868;text-decoration:none}.ArticleTeaser-bubble{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}.ArticleTeaser-bubble: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){.ArticleTeaser-bubble: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){.ArticleTeaser-bubble{position:absolute;top:0;left:50%!important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}}.ArticleTeaser-title{margin:0}@media(min-width:768px){.ArticleTeaser-title{margin:0 32px 0 0;text-align:right;width:50%}}@media(min-width:768px){.ArticleTeaser-date{color:#a8a8a8;margin:0 0 0 32px;width:50%}}
</style>Maka Kamu bisa langsung melihat hasilnya akan seperti contoh dibawah.
Untuk Melihat lebih jelas pada Halaman Statis kamu bisa buka halaman Sahabat Kang Wira.
Demikianlah Trik kali ini tentang Membuat Halaman Blogroll Statis Yang Menarik.
baca juga: Membuat Halaman Daftar Isi Yang Menarik
Jika ada pertanyaan atau pesan yang ingin di sampaikan, jangan sungkan untuk mengisi komentar dibawan ini.
Semoga Artikel kali ini bermanfaat.
