Membuat Halaman Blogroll Statis Yang Menarik

Jumat, 26 September 2014

Beberapa waktu kemudian ada Sahabat Kang Wira yang meminta di bagikan tutorial untuk menciptakan Halaman Blogroll Statis yang Menarik menyerupai yang ada di Halaman Sahabat di Blog ini.

Halaman Statis yang berisi Link teman-teman Blogger ini sengaja dibentuk Unik biar Menarik perhatian para blogger yang memburu backlink.

Untuk mengaplikasikannya di blog memang terhitung sangat mudah, tapi berdasarkan saya, untuk memasukkan link sahabat ke dalam list, memang agak rumit sebab harus masukkan URL secara manual.

Kenapa saya katakan rumit?

Sampai hari ini saya masih mencari beberapa cara untuk mempermudah teman-teman blogger ketika memasukkan URL / Link kedalam list tersebut secara Otomatis.

Karena kali ini yang akan dibahas ialah cara Membuat Halaman Blogroll Statis yang Menarik, sobat blogger sanggup eksklusif perhatikan langkahnya dibawah ini.

Membuat Halaman Blogroll Statis yang Menarik

Langkah pertama, pastikan kau sudah masuk kedalam akun blogger kamu.
Lalu buatlah sebuah Halaman Baru dengan judul sesukamu.

Beberapa waktu kemudian ada Sahabat Kang Wira yang meminta di bagikan tutorial untuk menciptakan H Membuat Halaman Blogroll Statis yang Menarik

Selanjutnya kau 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 kau masukan instruksi HTML ini sempurna 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 instruksi HTML diatas. Silahkan kau 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 biar script nya sanggup 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>

Selesai dan Siap kau Publish. Namun pratinjau dulu hasil nya.

Tambahkan CSS ini sempurna dibawah semua instruksi yang sudah kau edit tadi biar Mempercantik Tampilan Daftar Blogroll yang sudah kau 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 sanggup eksklusif melihat kesannya akan menyerupai teladan dibawah.
Untuk Melihat lebih terang pada Halaman Statis kau sanggup buka halaman Sahabat Kang Wira.