Showing posts with label Template. Show all posts

Setelah postingan sebelumnya yakni Cara Membuat Social Media Button untuk Blogger, pada kesempatan kali ini saya kan membagikan Tutorial Cara Membuat Sticky Social Media Bar. Kok judulnya hampir mirip sih, apa bedanya?

Sangat berbeda karena Sticky Social Bar ini akan mengikuti apabila kita Scroll kebawah atau keatas Blog, Sedangkan yang sebelumnya hanya berupa Button dan hanya berhenti tidak mengikuti layar Pengguna. Untuk lebih selengkapnya bisa dilihat di bagian kiri Blog saya dan pastikan untuk Follow semua akun media sosial saya ya...

Langsung saja kita mulai tutorialnya :

Langkah Pertama 1) :
-Tambahkan Link eksternal CSS berikut dan letakkan tepat dibawah tag ]]></b:skin>

Fungsi Ekternal CSS adalah untuk library dari Social Media Button yang akan digunakan sehingga bisa muncul di blog kalian apabila digunakan.

Langkah Kedua 2) :
-Langkah selanjutnya tambah tag HTML dan letakkan di bawah tag <body>

Catatan : untuk Jenis dan Jumlah Sosial Media yang akan ditampilkan bisa mengutak-atik pada syntax ini.

Langkah Ketiga 3) :
-Pada Langkah ini kita akan menambahkan CSS untuk styling Social Media Bar yang kita gunakan dengan menambahkan syntax

.icon-bar {
position: fixed;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}

.icon-bar a:hover {
background-color: #000;
}

.facebook {
background: #3B5998;
color: white;
}

.twitter {
background: #55ACEE;
color: white;
}

.google {
background: #dd4b39;
color: white;
}

.instagram {
background: #007bb5;
color: white;
}

.youtube {
background: #bb0000;
color: white;
}

.content {
margin-left: 75px;
font-size: 30px;
}

Catatan :

- Apabila kalian ingin merubah warna Background sosial media yang diinginkan bisa merubah pada CSS background dan rubah value warna Hex (#007bb5) menjadi sesuka kalian, untuk mencari warna dengan code Hex bisa searcing google dengan Keyword "Hex Color Picker".

- Pada CSS icon-bar pastikan isikan Postion Fixed agar Social bar mengikuti anda waktu sedang browsing keatas maupun ke bagian bawah blogger.

-Syntax Left pada CSS icon-bar bisa dirubah menjadi right tergantung selera anda apakah Social bar mau muncul dibagian kanan ataupun kiri blogger kalian, value 0 agar posisi Social bar bisa mepet dengan pojok Blog wkwkwk.

Langkah Keempat 4) :
-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian lainnya sesuai selera masing-masing.

Sekian dulu Tutorial Cara Membuat Sticky Social Media Bar yang sangat mudah digunakan dan bermanfaat untuk blog.
Apabila mengalami kesulitan bisa komentar langsung di blog ini atau
kalian bisa kunjungi Website Ini untuk lebih banyak guide menarik Website dan Blogger lainnya.
Sekian dan terimakasih.

Cara Membuat Sticky Social Media Bar

Wednesday, 25 July 2018

Comments : 0

Tag : Template, Tutorial

Akhirnya postingan kedua saya di tahun 2018 dan setelah tiga tahun hiatus, kali ini saya akan membagikan Tutorial Cara Membuat Tombol Back to Top sederhana. Postingan terakhir saya adalah Cara Membuat Social Media Button untuk Blogger, tutorial cara membuat Social Media Button dengan Back to Top Button caranya hampir sama.

Buat yang belum tahu Tombol Back to Top atau Tombol kembali keatas seperti namanya apabila anda sedang di halaman blog lalu scroll sampai mentok kebawah footer cara untuk kembali ke header dengan cepat adalah dengan menggunakan Tombol Back to Top ini karena apabila anda menekan tombol ini maka halaman blog akan otomatis kembali ke atas. Kurang lebih inilah penjelasan singkat Tombol Back to Top.

Untuk contoh bisa dilihat di blog saya pada pojok kanan bawah dan untuk demo nya silahkan scrol blog saya paling bawah kemudian klik tombol back to top nya yaa...

Kita mulai Tutorialnya :

Langkah Pertama 1):

-Tambahkan syntax HTML dibawah ini copy dan paste dan letakkan diatas tag <div class='fleft'> atau <div class='footer'> atau paling bawah blogger

Langkah Kedua 2):

-Tambahkan syntax CSS agar tombol back to top terlihat bagus, Tambahkan syntax CSS copy dan paste lalu letakkan di bawah tag <b:skin><![CDATA[

.tombolbacktotop a, .tombolbacktotop a:visited{color: #666;}
.tombolbacktotop {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: fixed;
font-size: 25px;
border-radius: 50px;
width: 30px;
height: 30px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 35px;
background: #fff;
color: #666;
text-shadow: -3px 0px 0px #ddd;
bottom: -10px;
right: 10px;}
a.comment-link {float: left;
text-align: left;
width: 100%;}

Langkah Ketiga 3) :

-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian padding, font-size dan juga width nya sesuai selera.

Mungkin sekian dari saya, Semoga postingan ini bisa bermanfaat untuk teman-teman.
Untuk tombol back to top ini saya ambil dari salah satu Template milik Djogzs karena cukup mudah dan sederhana tanpa menggunakan Javascript yang cukup rumit untuk pemula.
Tutorial Tombol Back to Top yang lain bisa dilihat disini

Apabila mengalami kesulitan bisa langsung ditanyakan di kolom komentar.
Sekian dan Terimakasih.

Cara Membuat Tombol Back to Top Sederhana

Tuesday, 5 June 2018

Comments : 0

Tag : Template, Tutorial

Akhirnya Postingan saya yang pertama tahun 2018, setelah hiatus selama tiga tahun lebih. Postingan terakhir saya adalah Akame ga Kill Blogger Template. Di postingan yang pertama setelah hiatus ini adalah Cara Membuat Social Media Button untuk Blogger.

Buat yang belum tahu Social Media Button, adalah sebuah tombol yang apabila di klik maka akan mengalihkan pengguna ke link yang sudah ditentukan, misalnya ketika kita klik tombol Sosial Media Facebook atau Instagram maka kita akan dialihkan ke profil pengguna. Kurang lebih singkatnya seperti itu.

Untuk contoh Social Media Button sendiri bisa dilihat pada halaman atas kiri bagian header blog saya ini disitu terdapat Social Media Button untuk Facebook, Twitter, Google Plus dan Instagram. Silahkan tes dengan mengklik tombol tersebut dan follow akun saya yaa...

Berikut ini adalah tutorialnya

Langkah Pertama 1) :
-Tambahkan Link eksternal CSS berikut dan letakkan tepat dibawah tag ]]></b:skin>

-Tambahkan tag HTML, untuk tag HTML ini penempatannya bebas, dalam contoh ini saya letakkan milik saya di bawah tag <header>

Di atas adalah Social Media Button yang dapat digunakan, apabila terlalu banyak dan tidak memiliki semua Media Sosial diatas bisa gunakan seperlunya saja, Dalam contoh ini saya hanya menggunakan Sosial media Facebook, Twitter, Google Plus dan Instagram

Langkah Kedua 2) : (Untuk tombol sosial media kotak)
-Langkah kedua adalah tambahkan CSS untuk Social Media Button yan sudah dibuat agar terlihat lebih menarik. Letakkan CSS dibawah <b:skin><![CDATA[

.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: #125688;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
background: #00aff0;
color: white;
}

.fa-android {
background: #a4c639;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

.fa-vimeo {
background: #45bbff;
color: white;
}

.fa-tumblr {
background: #2c4762;
color: white;
}

.fa-vine {
background: #00b489;
color: white;
}

.fa-foursquare {
background: #45bbff;
color: white;
}

.fa-stumbleupon {
background: #eb4924;
color: white;
}

.fa-flickr {
background: #f40083;
color: white;
}

.fa-yahoo {
background: #430297;
color: white;
}

.fa-soundcloud {
background: #ff5500;
color: white;
}

.fa-reddit {
background: #ff5700;
color: white;
}

.fa-rss {
background: #ff6600;
color: white;
}

(Untuk tombol media sosial lingkaran)
-Apabila kalian lebih suka sama tombol lingkaran daripada kotak gunakan syntax berikut dengan mengganti syntax CSS .fa {

.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

Syntax CSS diatas tidak perlu digunakan semua, hanya gunakan syntax CSS yang sesuai dengan Social Media Button yang digunakan.

Langkah Ketiga 3) :
-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian padding, font-size dan juga width nya sesuai selera.

Mungkin sekian dari saya, Semoga postingan saya yang pertama setelah hiatus selama tiga tahun ini bisa bermanfaat. Apabila ada yang mengalami kesulitan bisa dibuka website Ini
Atau bisa langsung ditanyakan di kolom komentar.
Sekian dan Terimakasih.

Cara Membuat Social Media Button untuk Blogger

Thursday, 31 May 2018

Comments : 0

Tag : Template, Tutorial

君の名は

ZFaqih-Share

Minatozaki Sana GIF

Recent post

Showing posts with label Template. Show all posts

Cara Membuat Sticky Social Media Bar

Cara Membuat Tombol Back to Top Sederhana

Cara Membuat Social Media Button untuk Blogger

Popular Post