Cara Mudah Membuat Menu Sidebar Keren Melayang
Cara Mudah Membuat Menu Sidebar Keren Melayang - Setelah anda membuat sebuat blog pasti ada keinginan membuat blog nya terlihat cantik dan menawan , banyak para blogger yang menghabiskan waktunya hanya untuk mempercantik penampilan blog mereka , ada yang menambahkan jam , menambahkan efek salju ataupun bintang , mengganti kursor blog mereka , membuat burung twitter terbang di blog , dan juga menambahkan animasi keren lainnya. Itu semua tak lepas dari hasrat para blogger menciptakan blog mereka yang indah dipandang dan tidak membosankan. Tapi ingat ya , terlalu banyakpun tidak baik. Cukup gunakan seperlunya saja , karena sangat berpengaruh terhadap loading blog apalagi SEO blog kita. Baiklah sekarang kita akan membahas Cara Mudah Membuat Menu Sidebar Keren Melayang :
Login Akun Blog > Desain
Buka Template > Edit HTML > Expan Template Widget
Cari kode ]]></b:skin>
Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>
/* social button siicunn.blogspot.com*/
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0jh4g_1_ztk88LFGwrJbWLXHRT7TPWbf6y4ErLNjHQMTsXPHJ5-t1uOp9RA3KGKI4DdcmThlqkyAVlJGXzBKtxc0Usg_Bt-DyGaHQSJY-fWWiI7V4rAvLVme26L6vg16wPXGQKCz0bc/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0jh4g_1_ztk88LFGwrJbWLXHRT7TPWbf6y4ErLNjHQMTsXPHJ5-t1uOp9RA3KGKI4DdcmThlqkyAVlJGXzBKtxc0Usg_Bt-DyGaHQSJY-fWWiI7V4rAvLVme26L6vg16wPXGQKCz0bc/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0jh4g_1_ztk88LFGwrJbWLXHRT7TPWbf6y4ErLNjHQMTsXPHJ5-t1uOp9RA3KGKI4DdcmThlqkyAVlJGXzBKtxc0Usg_Bt-DyGaHQSJY-fWWiI7V4rAvLVme26L6vg16wPXGQKCz0bc/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0jh4g_1_ztk88LFGwrJbWLXHRT7TPWbf6y4ErLNjHQMTsXPHJ5-t1uOp9RA3KGKI4DdcmThlqkyAVlJGXzBKtxc0Usg_Bt-DyGaHQSJY-fWWiI7V4rAvLVme26L6vg16wPXGQKCz0bc/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0jh4g_1_ztk88LFGwrJbWLXHRT7TPWbf6y4ErLNjHQMTsXPHJ5-t1uOp9RA3KGKI4DdcmThlqkyAVlJGXzBKtxc0Usg_Bt-DyGaHQSJY-fWWiI7V4rAvLVme26L6vg16wPXGQKCz0bc/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-moz-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-webkit-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
/* C6969 BLOGGER - siicunn.blogspot.com */
<div class='staticbar'>
<div class='login'>
<div id='rt-login-button'>
<a class='loginbtn buttontext' href='http://blogger.com' target='_blank' title='Login Blogger'>
<span class='desc'>Blogger Login</span></a>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{"width":420, "height":405, "iframe": true}' href='LINK ANDA DISINI' id='rt-twitter-btn' title='Twitter'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{"width":300, "height":430, "iframe": true}' href='LINK ANDA DISINI' id='rt-facebook-btn' title='Facebook'>
<span> Facebook Fanspage</span></a>
<a href='LINK ANDA DISINI' id='rt-buzz-btn' target='_blank' title='Google Plus'>
<span>Circle Me On Google Plus</span></a>
<a href='LINK ANDA DISINI' id='rt-rss-btn' target='_blank' title='Subscribe RSS'>
<span>RSS Feed</span></a>
</div></div></div>
/* C6969 BLOGGER - siicunn.blogspot.com */
Note : Saya tidak bertanggung jawab atas kerusakan/crash karena terjadi kesalahan pribadi dalam penambahan widget yang anda lakukan.Sebelum mencoba kode HTML/CSS diatas ,ada baiknya anda mem-backup template anda terlebih dahulu untuk menghindari hal yang tidak di inginkan.
Nah itulah tadi mengenai Cara Mudah Membuat Menu Sidebar Keren Melayang , semoga dapat bermanfaat bagi sobat-sobat semua , Jika artikel-artikel yang kami terbitkan membantu silahkan tinggalkan komentar ataupun +1 anda (seberapa penting +1 anda buat kami) pada artikel ini dan sobat juga dapat berlangganan artikel dengan siicunn.blogspot.com baik itu melalu RSS Feed ataupun melalu akun email anda untuk mendapatkan pemberitaan postingan lebih cepat dari yang lainnya melalui email anda.
Silahkan tinggalkan komentar anda dibawah ini.
BalasHapusKomentar yang bersifat spam akan langsung di hapus oleh admin blog.
Terima Kasih.
kata para master kalo yang melayang itu mengurangi SEo lho mas...
BalasHapuscuma saran sih, ayo kunjungi aku balik...
Makasih sebelumnya Gumiho , maaf balasannya agak telat ..
Hapuskarena saya juga ada kesibukan di blog lain :)
Pendapat yang kamu kemukakan emang ada benarnya ..
Tapi pada dasarnya semua tergantung si pengguna widget juga ..
untuk mengurangi masalah dalam loading serta terinjeknya blog di mesin telusur memang kita harus bisa menggunakan widget yang benar benar berguna dan memilih serta menggunakannya sebaik mungkin dan tidak berlebihan ..
Tapi tidak jarang juga para blogger yang ingin blog nya terlihat ramai widget (walaupun dia tau bermasalah pada seo-nya) .
jadi tak ada salahnya saya berbagi bagi mereka pemburu widget ^_^
Terimakasih sekali lagi masukannya , kunjungan baliknya akan segera meluncur ^_^