Haikyū!! Blogger template
Yoooo, pengemar Haikyū!!, Season 2 udah kelar atau end, nunggu sesaon tiga, wkwkwkwk
Anime favorit, langsung saja lah!
Ditemplate ini,saya berikan sentuhan css3 animation dan warna radial pada menubar'a.untuk mengganti lin dan URL'a,pertama sobat buka blogger =>rancangan => edit HTML,lalu cari kode HTML seperti dibawah ini
<li class='icon-feed'><a href='http://anotherv2-template-blogger.blogspot.com/feeds/posts/default'>Feed</a></li>
<li class='icon-facebook'><a href='http://facebook.com/username'>Facebook</a></li>
<li class='icon-twitter'><a href='http://twitter.com/username'>Twitter</a></li>
<li class='icon-youtube'><a href='http://www.youtube.com/user/username'>Youtube</a></li>
<li class='icon-instagram'><a href='http://instagram.com/username'>instagram</a></li>
<li class='icon-skype'><a href='http://skype.com/username'>Skype</a></li>
<li class='icon-gplus'><a href='http://plus.google.com/username'>google plus</a></li>
<li class='icon-flickr'><a href='http://flickr.com/username'>flickr</a></li>
<li class='icon-lastfm'><a href='http://lastfm.com/username'>lastfm</a></li></ul>
<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#/' title='about'>about</a></li>
<li><a href='#' title='about'>CSS</a></li>
<li><a href='#' title='about'>HTML</a></li>
<li><a href='#' title='about'>Blogger templates</a></li>
</ul>
Ganti Tanda # atau link warna hijau, kamu tinggal ganti saja nama link dan url'a yang kamu inginkan..~
Slesai deh,kalau sudah simpan template~xD
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
by : ANGEL_BEATS_GIRLS_DEAD_MONSTER
Sabtu, 30 April 2016
Menu back top and back down
yo, kali saya akan posting cara menambah judul/tulisan di atas postingan, mungkin beberapa templete tak ada yang menggunakan ini, tapi templete yang saya gunakan menggunakan ini.
2. klik template
3. tambahkan css di bawah ini dan taruh diatas kode ]]></b:skin>
#backud {4. tambahkan html dibawah ini
position: fixed;
bottom: 0;
right: 0;
margin: 5px;
height: 51px;
background: #F00;width: 60px;
padding: 1px;
text-align: center;
color: transparent;
}
.backup, .backdown {
text-transform: uppercase;
font-weight: bold;
height: 25px;
background: #000;
width: 60px;
text-align: center;
color: transparent;
margin-bottom: 1px;
}
.backup a:hover, .backdown a:hover {
color: #fff;
}
<div id='backud'>dan taruh taruh di atas <div id='footer'> atau Cari Footer
<li class='backup'><a href='#header'>Up</a></li>
<li class='backdown'><a href='#footer'>Down</a></li></div>
Untuk warna kuning ganti warna sesuai keinginan anda
Untuk warna biru ganti warna sesuai ukuran keinginan kalian
Untuk warna Biru laut ganti tulisan tersebut sesuai keinginan kalian
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
by : ANGEL_BEATS_GIRLS_DEAD_MONSTER
Minggu, 17 April 2016
cara menambahakah background gambar pada judul footer dan sidebar
hallo semua, ane datang lagi, hahahaha
kali ini saya akan posting cara menambahakah background gambar pada judul footer dan sidebar, banyak template yang tidak menggunakan background gambar pada judul footer dan sidebar. mungkin itu di anggap kurang menarik. tapi untuk ane sih menarik dari pada polos atau warna doang.
untuk lebih jelasnya silahkan lihat klik disini
1. Buka blog kalian
2. klik kanan pada judul sidebar atau yang kalian inginkan, lalu pilih inspect Element (Q)
3. klik h2 dan ganti menjadi .sidebar h2
4. tambahkan css di bawah ini dan taruh di dalam kurung kurawal .sidebar h2 agar bisa melihat apakah gambar itu sudah pas apa belum
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikx07misgPcwVsmCAym_6Cd0C0mEwH_D2hPFX3qE-Yh5296PVQvcGGU6znexosaLNmbI5QST5fidtTlmp4DKbJhWv7xGVEmBowOVXAi1kQ3rkXARPMvaFtudnB81CIgJAMuhaFWZ2xfgkd/s320/boruto.png") no-repeat bottom right;5. klik template
background-size: 30%;
padding: 15px 85px 15px 10px;
margin: 0;
font-family: 'Overlock SC', cursive;
font-size: 17px;
color: #3f8fc7;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: left;
height: 14px;
border-bottom: 1px solid #f2b802;
6. Copy kode tersebut dan taruh diatas kode ]]></b:skin>
.sidebar h2 {5. lalu simpan
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikx07misgPcwVsmCAym_6Cd0C0mEwH_D2hPFX3qE-Yh5296PVQvcGGU6znexosaLNmbI5QST5fidtTlmp4DKbJhWv7xGVEmBowOVXAi1kQ3rkXARPMvaFtudnB81CIgJAMuhaFWZ2xfgkd/s320/boruto.png") no-repeat bottom right;
background-size: 30%;
padding: 15px 85px 15px 10px;
margin: 0;
font-family: 'Overlock SC', cursive;
font-size: 17px;
color: #3f8fc7;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: left;
height: 14px;
border-bottom: 1px solid #f2b802;}
Untuk warna kuning ganti kode tersebut sesuai warna keinginan kalian
Untuk warna biru ganti link sesuai keinginan kalian
Untuk warna Magenta ganti kode tersebut sesuai warna keinginan kalian
Untuk warna ungu ganti link sesuai dengan tinggi keinginan kalian
Untuk warna coklat ganti kode tersebut sesuai warna keinginan kalian
Untuk warna biru laut ganti ukuran tersebut sesuai tinggi ukuran judul tersebut
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
by : R_Geminius_XV
Senin, 11 April 2016
Cara merapikan tepi foto yang menggunakan background transparan
Yo bro, kali ini saya akan mengeshare tentang Cara merapikan tepi foto yang menggunakan background transparan. Mungkin ini info gag bermutu, tapi bagi yang belum tau, mungkin sedikit bermanfaat.
Ketika saya mencoba mengetik dan mencari di google tapi ketemunya bingkai dan border foto, saya mencoba mengganti kata apapun tetep saja gag ketemu, Akhirnya saya coba atik sendiri.
1. Siapkan foto dan buka Adobe Photoshop
2. Klik kanan pada Magic Tool lalu pilih Magic Wand Tool
3. Lalu klik dua kali pada layer biar gambar gembok berganti
4. Lalu klik ok
5. Lalu arahkan cursor pada background yang ingin di jadikan transparan, lalu tekan tombol del pada keyboard
Mungkin ini sudah selesai bagi kalian, tapi bagi saya belum selesai
Sebagai contohnya lihat berikutnya atau mungkin kalian bisa mempraktekan sendiri.
Ctrl+N atau klik file klik New..
Lalu buat background warna hitam
Lalu geser gambar yg sudah di edit tadi taruh ke background hitam menggunakan Move Tool
Masih terdapat sisa yg belum terhapus atau tidak ikut terhapus
Ok lanjut ke tujuan utama
6. Klik layer 2x, tepatnya yang saya beri tanda warna merah
7. Klik inner glow lalu centangkan juga
8. Klik tanda warna hijau lalu rubah warnya sesuai keinginan kalian, lalu klik ok dan lihat hasilnya
Sekian dan terima kasih, semoga bermanfaat
Ketika saya mencoba mengetik dan mencari di google tapi ketemunya bingkai dan border foto, saya mencoba mengganti kata apapun tetep saja gag ketemu, Akhirnya saya coba atik sendiri.
1. Siapkan foto dan buka Adobe Photoshop
2. Klik kanan pada Magic Tool lalu pilih Magic Wand Tool
3. Lalu klik dua kali pada layer biar gambar gembok berganti
4. Lalu klik ok
5. Lalu arahkan cursor pada background yang ingin di jadikan transparan, lalu tekan tombol del pada keyboard
Mungkin ini sudah selesai bagi kalian, tapi bagi saya belum selesai
Sebagai contohnya lihat berikutnya atau mungkin kalian bisa mempraktekan sendiri.
Ctrl+N atau klik file klik New..
Lalu buat background warna hitam
Lalu geser gambar yg sudah di edit tadi taruh ke background hitam menggunakan Move Tool
Masih terdapat sisa yg belum terhapus atau tidak ikut terhapus
Ok lanjut ke tujuan utama
6. Klik layer 2x, tepatnya yang saya beri tanda warna merah
7. Klik inner glow lalu centangkan juga
8. Klik tanda warna hijau lalu rubah warnya sesuai keinginan kalian, lalu klik ok dan lihat hasilnya
Sekian dan terima kasih, semoga bermanfaat
by : angel_beats_girls_dead_monster
Jumat, 01 April 2016
cara menambahkan media sosial dengan icon/gambar pada blog
hallo semua, ane orang baru. hahahaha
kali ini saya akan posting cara menambahkan media sosial dengan icon/gambar pada blog, banyak cara menambahkan link media sosial pada blog, tapi ane akan memberi cara menambahkan media sosial dengan icon/gambar.
untuk lebih jelasnya silahkan lihat klik disini
1. Buka blog kalian
2. klik template
3. tambahkan css di bawah ini dan taruh diatas kode ]]></b:skin>
.Abox {display: inline-block;width: 1000px;}4. tambahkan html dibawah ini dan taruh sesuai keinginan kalian, tapi ane saranin taruh di atas <div id='header-wrapper'>
.angel {list-style: none;margin: 0 0 0 10px;padding: 10px 0;width: auto;overflow: hidden;float: left;}
.angel li {float: left;margin-right: 10px;border: none;}
.icon-flickr a, .icon-instagram a, .icon-facebook a, .icon-gplus a, .icon-lastfm a, .icon-feed a, .icon-skype a, .icon-twitter a, .icon-youtube a {float: left;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left bottom;text-indent: -9999px;width: 32px;height: 32px;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-flickr a:hover, .icon-instagram a:hover, .icon-facebook a:hover, .icon-gplus a:hover, .icon-lastfm a:hover, .icon-feed a:hover, .icon-skype a:hover, .icon-twitter a:hover, .icon-youtube a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left top;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-feed, .icon-feed a {background-position: -160px bottom;}
.icon-feed:hover, .icon-feed a:hover {background-position: -160px top;}
.icon-facebook, .icon-facebook a { background-position: -64px bottom;}
.icon-facebook:hover, .icon-facebook a:hover { background-position: -64px top;}
.icon-twitter, .icon-twitter a {background-position: -224px bottom;}
.icon-twitter:hover, .icon-twitter a:hover {background-position: -224px top;}
.icon-youtube, .icon-youtube a {background-position: -256px bottom;}
.icon-youtube:hover, .icon-youtube a:hover {background-position: -256px top;}
.icon-instagram, .icon-instagram a {background-position: -32px bottom;}
.icon-instagram:hover, .icon-instagram a:hover {background-position: -32px top;}
.icon-skype, .icon-skype a {background-position: -192px bottom;}
.icon-skype:hover, .icon-skype a:hover {background-position: -192px top;}
.icon-gplus, .icon-gplus a {background-position: -96px bottom;}
.icon-gplus:hover, .icon-gplus a:hover {background-position: -96px top;}
.icon-flickr, .icon-flickr a {background-position: 0px bottom;}
.icon-flickr:hover, .icon-flickr a:hover {background-position: 0px top;}
.icon-lastfm, .icon-lastfm a {background-position: -128px bottom;}
.icon-lastfm:hover, .icon-lastfm a:hover {background-position: -128px top;}
.angel li:last-child {margin: 0;}
<div class='Abox'>5. lalu simpan
<ul class='angel'>
<li class='icon-feed'><a href='http://anotherv2-template-blogger.blogspot.com/feeds/posts/default'>Feed</a></li>
<li class='icon-facebook'><a href='http://facebook.com/username'>Facebook</a></li>
<li class='icon-twitter'><a href='http://twitter.com/username'>Twitter</a></li>
<li class='icon-youtube'><a href='http://www.youtube.com/user/username'>Youtube</a></li>
<li class='icon-instagram'><a href='http://instagram.com/username'>instagram</a></li>
<li class='icon-skype'><a href='http://skype.com/username'>Skype</a></li>
<li class='icon-gplus'><a href='http://plus.google.com/username'>google plus</a></li>
<li class='icon-flickr'><a href='http://flickr.com/username'>flickr</a></li>
<li class='icon-lastfm'><a href='http://lastfm.com/username'>lastfm</a></li>
</ul>
</div>
Untuk warna kuning ganti ukuran lebar sesuai keinginan kalian
untuk warna biru ganti link sesuai keinginan kalian
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
by : R_Geminius_XV
Langganan:
Postingan (Atom)
0 komentar:
Posting Komentar