Pada sebuah blog atau website terkadang kita melihat tulisan yang berubah-ubah entah itu tayangan iklan dari pihak lain atau hanya sekedar menunjukan deskripsi singkat blog itu sendiri, bagi para blogger pemula mungkin akan bertanya-tanya bagaimana cara membuatnya, nah kali ini saya akan berbagi cara untuk membuat widget tersebut caranya cukup mudah.
langkah pertama silahkan anda copy script berikut ini :
<div class="headerright section" id="headerright" name="Header Ads"><div class="widget HTML" data-version="1" id="HTML1">
<div class="widget-content">
<div style="width:100%;height:90px;background:#0088ff;margin:0 auto;cursor: pointer;"> <div id="content1">
<div class="visible">
<p>
C-9
</p>
<ul>
<li>CREATIVE </li>
<li>EDUCATIVE </li>
<li>INNOVATIVE </li>
<li>INSPIRATIVE </li>
</ul>
</div>
</div></div>
<style scoped="" type="text/css">
#content1 {
width: 100%;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 45px;
line-height: 40px;
color: rgba(0, 0, 0, 0.5);
overflow: hidden
}
#content1 .visible {
font-weight: 700;
overflow: hidden;
height: 40px;
padding: 0 40px
}
#content1 .visible:after,
#content1 .visible:before {
position: absolute;
top: -5px;
color: rgba(0, 0, 0, 0.1);
font-size: 42px;
-webkit-animation: 2s linear 0s normal none infinite opacity;
animation: 2s linear 0s normal none infinite opacity
}
#content1 p {
font-weight: 300;
display: inline;
float: left;
margin: 0;
font-family: Bungee Inline;
color: #eee;
}
#content1 ul {
margin-top: 0;
padding-left: 100px;
text-align: left;
list-style: none;
-webkit-animation: 15s linear 1s normal none infinite change;
animation: 15s linear 1s normal none infinite change
}
#content1 ul li {
line-height: 40px;
margin: 0;
list-style-type:none;
padding:0;
font-family:Ruda;
color:#fff;
}
@-webkit-keyframes opacity {
0%, 100% {
opacity: 0
}
50% {
opacity: 1
}
}
@keyframes opacity {
0%, 100% {
opacity: 0
}
50% {
opacity: 1
}
}
@-webkit-keyframes change {
0%, 12%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%)
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%)
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%)
}
}
@keyframes change {
0%, 12%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%)
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%)
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%)
}
}
@media screen and (max-width: 800px) {
#content1 {
display: "6"
}
}
</style>
</div>
</div></div>
Selanjutnya masuk ke blog anda lalu pilih menu Tata Letak atau Layuot lalu tambahkan widget selanjutnya pilih widget html javascript paste kode diatas yang sudah anda copy, untuk judul biarkan kosong, ganti tulisan yang berwarna merah sesuai selera anda lalu klik save, tempatkan widget tersebut tepat diatas atau dibawah postingan jika anda melakukannya dengan benar hasilnya akan terlihat seperti dibawah ini :
Bagaimana mudah bukan ? selamat mencoba, demikian tutorial dari saya semoga bermanfaat buat kita semua.
Terimakasih.
Wawan St
 |
| DEMO |
Terimakasih.
Wawan St
No comments:
Post a Comment