SEPESER.COM

Tombol back to top V3 & V4 di Blogger. Setelah pada postingan sebelumnya admin telah berbagi tombol back to top menggunakan font awesome. Kesempatan ini admin akan berbagi tips trik cara memasang tombol back to top v3 dan v4 di Blogger.

Funsi tombol ini yaitu jika blog memposting artikel yang panjang sampai jauh ke bawah, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman awal artikel tanpa repot scroll ke atas. Cara memasang tombol back to top ini sangatlah mudah, berikut tutorianya.

Tombol Back To Top Menggunakan Font Awesome di Blogger. Hai sobat, pada kesempatan ini admin akan berbagi widget blog yaitu tombol back to top yang mungkin saja kamu tertarik ingin menggunakannya. Tombol back to top memiliki peranan cukup penting bagi blog dengan konten yang memiliki halaman yang panjang, pengunjung dapat dengan mudah kembali ke awal artikel tanpa harus scroll halaman.

Font awesome ini memberikan kemudahan dalam menggunakan icon pada website atau blog. Seperti font pada umumnya font awesome ini sangat mudah untuk di customize dengan berbagai style css seperti size, color, drop shadow dan lain sebagainya. Berikut ini admin akan bagikan tombol back to top menggunakan font awesome di Blogger.

Tombol back to top V2 di Blogger. Hai sobat, pada kesempatan ini admin akan berbagi widget blog yang mungkin saja kamu tertarik ingin coba menggunakannya di blog kamu.

Cara membuat tombol back to top v2 ini sangatlah mudah pemasangannya. funsi tombol ini yaitu jika blog memposting artikel yang panjang sampai jauh ke bawah, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artikel tanpa repot scroll ke atas.

Efek loading blog

Efek Loading Blog V4: Juggling Animation

Cara memasang Efek Junggling Loading Animation di Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Pada kotak yang tersedia, masukan kode di bawah ini:

<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>

<style>

#load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }

$circle-size:10vmin; * { box-sizing:border-box; position:relative; }

.circle{animation:spin 3s linear infinite both; background:#bada55; border-radius:100vmax; /* margin:calc(50vh - 5vmin) calc(50vw - 1vmin); */

/* Half the longest viewport width minus half the width/height of the circle. */

  margin:60vh calc(50vw - 1vmin); height:10vmin; position:absolute; width:10vmin}

.circle + .circle { animation:spin 3s linear 1s infinite both; background:#10aded; }

.circle + .circle + .circle { animation:spin 3s linear 2s infinite both; background:#a991e5; }

@keyframes spin {

    0% { transform:rotate(360deg) translate(0vmax,-10vmax); } 50% { transform:rotate(180deg) translate(0vmax,0vmax); } 100% { transform:rotate(0deg) translate(0vmax,-10vmax); }

}

</style>

<div id="load-page-seocips">

<div class="loader">

  <div class="circle"></div>

  <div class="circle"></div>

  <div class="circle"></div>

</div>

</div>

4. Save.

Contoh Video Tutorial

efek blog

Efek Animasi di Blog

Cara Membuat Efek Animasi di Blogger

Efek Daun Berguguran

Memasang Efek Daun Berterbangan + Efek Lainnya

Efek loading blog

Efek Loading Blog V3

Cara membuat Efek Loading Blog V3 di Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<link href="https://raw.githack.com/Brando07/sepeser.com/main/loadingv3-santa.css" rel="stylesheet" type="text/css"></link>

<script src="https://raw.githack.com/Brando07/sepeser.com/main/loading-www.sepeser.com.js"></script>

<div id="loadingHalaman">

</div>

4. Save.

Video Tutorial

Penutup

Fixed Recent Post widget

Fixed Widget Recent Post

Tata letak HTML / Javascript

<style>

.bw-seocips a:link,.bw-seocips a:visited{color:#222;text-decoration:none}

.bw-seocips a:hover,.bw-seocips a:active{color:#222;text-decoration:none}

.bw-seocips {background:#fff;width:300px;margin:0;padding:0 10px 10px 10px;border:1px solid #ddd;box-shadow:0 2px 2px #ccc;font:13px arial;line-height:1.7em;position:fixed; bottom:1%; right:1%; z-index:9999; box-shadow:0 3px 4px #ddd; border:1px solid #ddd; -moz-animation:seocips-kiri 4s;-webkit-animation:seocips-kiri 4s;animation:seocips-kiri 4s;}

.bw-seocips ul, .bw-seocips li, .bw-seocips ul li {padding:7px 7px ;border-bottom:1px dotted #ddd;list-style:none;}

.bw-seocips a:link, bw-seocips a:visited {color:#222;text-decoration:none}

.bwTitle-seocips {Font:15px arial;border-bottom:1px solid #ddd;margin-bottom:10px;margin-left:-10px;margin-right:-10px;padding:12px;background: repeating-linear-gradient(45deg,transparent 0,transparent 70%,#6aa84f 100px,#6aa84f 1000px);box-shadow:0 2px 2px #ddd;}

.bwcontent-seocips{border:1px solid #ddd;padding: 5px 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}

#rcp2-seocips { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }

#rcp2-seocips:hover {  overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }

#rcp2-seocips ul { list-style-type:none; margin:0; padding:0; }

#rcp2-seocips li { list-style:none; height:80px; padding:10px; border:dotted #ddd 1px; margin:5px; background-color:#FFFFFF; }

#rcp2-seocips li:hover { border:solid #ddd 1px; }

#rcp2-seocips a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }

#rcp2-seocips .news-title { margin-bottom:5px; font-size:12px; color:#990000; }

#rcp2-seocips .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }

#rcp2-seocips img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:4px double #6aa84f; box-shadow:0 0 2px #e06666; }

@-webkit-keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

@keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/XedRcpSeocips.js"></script>

<div class="bw-seocips">

  <div class="bwTitle-seocips">

 <i class="fa fa-plus fa-spin"></i> <b>Recent Post</b>

    </div>

  <div class="bwcontent-seocips">

    <div class="bwcontent-seocips2">

  <!-- start -->

<!-- script start -->

<script type="text/javascript">

var speed = 400;

var pause = 3500;

$(document).ready(function(){

rivaiscript();

interval = setInterval(rivaiscript, pause);

});

</script>

<div >

<ul id="rcp2-seocips">

<script style="text/javascript">

var numposts = 10;

var numchars = 0;

</script>

<script

src="https://www.sepeser.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>

</ul>

</div> <!-- script end -->

  <!-- /end -->

</div></div></div>

Setting Widget:

Video Tutorial

Penutup

efek slide kiri ke kanan

efek slide kanan ke kiri

Widget Facebook Efek Slide

Cara Membuat Widget Fanspage Facebook Efek Slide di Blogger

HTML/JavaScript

Efek Slide dari kiri ke kanan

<style>

.fb-btn-haisob {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;}

.fb-btn-haisob {padding:5px ;color:#fff;font-size:120%;}

.fb-btn-haisob a:link, .fb-btn-haisob a:visited {color:#ffcc00;}

.fb-btn-haisob a:hover {color:#fff;}

.fb-btn-haisob2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}

.fb-btn-haisob2 {padding:3px ;color:#fff;font-size:120%;}

@-webkit-keyframes atas{

from{transform:translate(0px, -2000px)}

to{transform:translate(0px,0px)}

}

@keyframes atas{

from{transform:translate(0px, -2000px)}

to{transform:translate(0px,0px)}

}

@-webkit-keyframes kiri{

from{transform:translate(-30000px, 0px);}

to{transform:translate(0px,0px);}

}

@keyframes kiri{

from{transform:translate(-30000px, 0px);}

to{transform:translate(0px,0px);}

}

</style>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-btn-haisob">

<div class="fb-btn-haisob2">

<div class="fb-page" data-href="https://www.facebook.com/sepeserdotcom" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sepeserdotcom"><a href="https://www.facebook.com/sepeserdotcom">sepeser.com</a></blockquote></div></div>

</div>

</div>

Efek Slide dari kanan ke kiri