ZFaqih-Share

Cara menghemat data ketika bermain Instagram

Thursday, 26 July 2018

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

Siapa yang tidak kenal Group Idola asal Jepang yang populer ini, apabila di Indonesia kita punya JKT48, di Jepang sendiri ada Idol Group "Kakak"nya JKT48 yakni AKB48.
AKB48 didirikan pada tahun 2005 dan masih aktif sampai sekarang ini dan bahkan popularitas yang meningkat setiap tahunnya.
AKB48 sendiri memiliki jumlah lagu yang sangat banyak bahkan sampai ratusan dan apabila semua lagu Sister Group AKB48 digabung kemungkinan bisa sampai ribuan lagu.....Wow,

Cukup sampai sini intronya
kita mulai dari 10 Lagu Favorit saya yakni sebagai berikut :

1. #Sukinanda (2017)

Kita mulai dari lagu yang pertama yakni #Sukinanda merupakan lagu senbatsu untuk single ke-49 yang dirilis pada tanggal 30 Agustus 2017 dengan Center Sashihara Rino. Saya suka lagu ini karena lagunya enak mudah dihafal, MV nya bagus, Durasi Cerita di MV nya cukup lama dan center andalan kita semua yakni Mbak Sashihara Rino.

2. Kokoro no Placard (2014)

Suka banget sama lagu ini karena liriknya yang gampang, Dancenya yang imut sama mudah dihafal dan MV nya yang berbeda dari MV Single sebelumnya yang imut2 ditambah lagi center lagu ini adalah Watanabe Mayu yang super imut.

3. Kimi no C/W (2012)
Oke satu lagi lagu yang masuk dalam daftar ini yaitu Kimi no C/W (Coupling With) atau Bahasa Inggrisnya Coupling of yours dinyanyikan oleh tiga member Team Surprise yakni Watanabe Mayu, Shimazaki Haruka dan Takajo Aki

4. 365 Nichi no Kamihikouki (2017)

Arti lagu ini adalah Pesawat Kertas 365 hari yang merupakan Coupling Song dari 42nd single Kuchibiru ni Be My Baby, lagunta enak slow buat yang bosen lagu-lagu rap atau tempo cepat AKB48 hehehe....

5. Kanpeki Gu~no ne (2009)
Yess, penggemar Anime Fairy Tail pasti tahu lagu ini, yak benar ini merupakan lagu Ending 1 Anime Fairy Tail. Lagu ini dinyanyikan oleh Unit AKB yang bernama Watarirouka.

6. Kimi wa Melody (2016)

Di lagu Kimi wa Melody ini semua member Kami7 tampil dalam Music Videonya dan nyanyi bareng member lainnya, yang bikin lagu ini mantap adalah Center baru kita yups dia adalah Miyawaki Sakura atau akrab dipanggil Sakuchan yang sekarang lagi booming banget dia gara2 ikut acara Idol Survival di Korea yaitu PRODUCE48, satu lagi yang bikin saya suka lagu ini adalah di MV nya para member pake Kimono loh, tau sendiri kan Cewek Jepun kalau pake Kimono nambah imutnya? Hehehe...

7. Kanashii Uta wo kikitakunatta (2016)

lagu ini adalah Coupling Song dari Shoot Sign yakni Graduation Song untuk salah satu member Kami7 Kojima Haruna-san, saya suka lagu ini karena yang nyanyiin lagu ini Duo MayuYukirin awww, eits bukan Duo Macan yaa hehehe...

8. 11 Gatsu no Anklet (2018)

Saya suka banget sama lagu ini karena lagu ini merupakan Graduation Song untuk Oshi kita semua siapa lagi kalau bukan Watanabe Mayu-Chan

9. High Tension (2016)

High Tension adalah Graduation Song untuk salah satu member Legend Shimazaki Haruka, saya suka lagu ini karena sesuai judulnya lagu ini bertempo cepat, MV nya yang penuh warna dan melibatkan banyak orang jadinya seru deh

10.Koisuru Fortune Cookie (2013), Heavy Rotation (2011)
Yak lagu yang hampir semua anak muda di Indonesia, kayaknya Heavy Rotation sama Koisuru Fortune Cookie udah sepaket ya hehe, karena dua lagu ini juga saya jadi suka sama AKB48 hehehe...

Daftar lagu AKB48 Favorit Saya

Tuesday, 17 July 2018

Comments : 0

Tag : Music

Baik teman-teman kita mulai lagi postingan Tutorial terbaru dari Blog ZFaqih-Share. Tutorial kali ini adalah Cara Install Adobe Flash Player di Linux khususnya Linux Ubuntu.

Mungkin teman-teman ada yang kesulitan dengan masalah flash player pada Linux sehingga tidak bisa main game flash, nonton video pada browser di Internet. Pada Windows kita dapat dengan mudah instalasi Adobe Flash Player dengan cara download di situs resminya kemudian setelah selesai download kita tinggal jalankan setup.exe dan tunggu prosesnya hingga selesai.

Namun Instalasi Adobe Flash Player di Linux tidak semudah dengan cara instalasi Flash Player seperti di Windows. Untuk Tutorialnya langsung saja kita mulai.

Langkah Pertama 1): Menunjungi situs resmi adobe dan download
-Kunjungi situs resmi download Adobe Flash Player

https://get.adobe.com/flashplayer/

-Pilih Versi Adobe Flash Player dengan ekstensi tar.gz

-Kemudian Download Now

Langkah Kedua 2): Extract file tar.gz dan install file ekstensi tar.gz

Cara Extract file tar.gz

Buka Console atau Terminal
Kemudian gunakan perintah cd Downloads, agar masuk ke directory sama
Kemudian tulis command "tar xvzf NAMAPAKET.tar.gz" Kemudian enter
Setelah itu isi file tar.gz adobe akan ter ekstrak dan terdiri dari dua file readme dan libflashplayer.so

-Berikut adalah syntax dari Console/ Terminal

Langkah Ketiga 3): Mengcopy file libflashplayer.so ke Firefox Plugin
-Langkah terakhir adalah mengcopy file libflashplayer.so yang sudah di extract dari tar.gz ke lokasi plugin browser Mozilla firefox.

Plugin Mozilla Firefox biasanya terletak di

/usr/lib/firefox-addons/plugins

-Cara Copy libflashplayer.so ke Mozilla Firefox plugin

Langkah Keempat 4): Penyelesaian
-Setelah file libflashplayer.so sudah dicopy ke Mozilla Firefox Plugin maka selanjutnya adalah me-restart program Firefox dengan cara close program lalu di buka lagi.

-Sedikit tambahan untuk cara install flashplayer di Google Chrome Linux hampir sama namun perbedaannya terletak di directory plugin.

Sekian Tutorial singkat ini apabila mengalami kesulitan bisa tanya langsung di kolom komentar.

Cara Install Adobe Flash Player di Linux Ubuntu 16.04

Thursday, 7 June 2018

Comments : 2

Tag : Komputer, Linux, 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

Cara menghemat data ketika bermain Instagram

Cara Membuat Sticky Social Media Bar

Daftar lagu AKB48 Favorit Saya

Cara Install Adobe Flash Player di Linux Ubuntu 16.04

Cara Membuat Tombol Back to Top Sederhana

Cara Membuat Social Media Button untuk Blogger

Popular Post