Sunday, January 1, 2017

Membuat Halaman Blogroll Statis yang Menarik

Chat on Whatsapp

Beberapa waktu lalu ada Sahabat Kang Wira yang meminta di bagikan tutorial untuk membuat Halaman Blogroll Statis yang Menarik seperti yang ada di Halaman Sahabat di Blog ini. 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.

Membuat Halaman Blogroll Statis yang Menarik

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.

Membuat Halaman Blogroll Statis yang Menarik


  • Langkah pertama, pastikan kamu sudah masuk kedalam akun blogger kamu.
  • Lalu buatlah sebuah Halaman Baru dengan judul sesukamu.
  • Buat Halaman Baru
  • 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>
  • Selanjutnya silahkan kamu masukan kode HTML ini tepat dibawah JavaScript tadi.
  • <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.
  • <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>
  • Selesai dan Siap kamu Publish. Namun pratinjau dulu hasil nya.

Tambahkan CSS ini tepat dibawah semua kode yang sudah kamu edit tadi agar Mempercantik Tampilan Daftar Blogroll yang sudah kamu buat.


<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}}.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){.ArticleTeaser{text-align:center;background:#fff;border-radius:3px;padding:16px;border:2px solid #0177FA}.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. Jangan lupa baca juga cara 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.

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

No comments