Home / Blog / Tutorial / Cara Memasang Social Media Widget with Opacity Ringan di Blog

Cara Memasang Social Media Widget with Opacity Ringan di Blog

Sedikit Info Seputar Cara Memasang Social Media Widget with Opacity Ringan di Blog Terbaru 2017 - Hay gaes kali ini team Serba Neka Android, kali ini akan membahas artikel dengan judul Cara Memasang Social Media Widget with Opacity Ringan di Blog, kami selaku Team Serba Neka Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Serba Neka Android. semoga isi postingan tentang Artikel Blog, Artikel Tutorial, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Memasang Social Media Widget with Opacity Ringan di Blog Terbaru
link: Cara Memasang Social Media Widget with Opacity Ringan di Blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Memasang Social Media Widget with Opacity Ringan di Blog Terbaru dan Terlengkap 2017


Haloo Sobat Joa, kali ini Joa akn share tentang tutorial blog yang baru saja Joa cobain dan berhasil. Sebelunya, Joa ingin menempelkan widget like facebook, follow twitter, dan lain sebagainya. Udah berhasil sih, namun gak tau kenapa widget tersebut mengurangi kecepatan loading blog Joa ini. Haddeh..

"Ku cari dan sealu ku cari, jalan terbaik..." lirik lagu tersebut selalu memotivasi Joa agar tetap berusaha mencari jalan keluar. Akhirnya, ketemu deh solusi terbaiknya. Kini Joa udah nemuin witget sosmed lengkap yang menurut joa tidak begitu jelek, melainkan simpel dan begitu ringan.

Tampilannya seperti gambar di atas sob. Ketika kursoor diarahkan, lambang/logo sosmed tersebut akan menyala. Yuhuu.. Langsung tutorialnya aja yah sob!


Note : Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head>:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Pertama-tama sobat harus log ini ke blogger. Kemudian masuk ke Template > Edit HTML

2. Salin kode CSS berikut sebelum kode </style>

Note : Tekan  tombol CTRL + F untuk mempermudah pencarian kode.

/* CSS Social Media */#sosmed{margin:20px 0;padding-top:15px;}.nengah{text-align:center!important}.smGlobalBtn{display:inline-block;position:relative;width:40px;height:40px;padding:0px;text-align:center;color:#fff!important;font-size:20px;font-weight:normal;line-height:2em;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px}.facebookBtn{background:#3b5998;opacity:0.4}.facebookBtn:before{font-family:"FontAwesome";content:"\f09a"}.facebookBtn:hover,.twitterBtn:hover,.googleplusBtn:hover,.linkedinBtn:hover,.pinterestBtn:hover,.rssBtn:hover{color:#fff;opacity:1}.twitterBtn{background:#00ABE3;opacity:0.4}.twitterBtn:before{font-family:"FontAwesome";content:"\f099"}.googleplusBtn{background:#e13138;opacity:0.4}.googleplusBtn:before{font-family:"FontAwesome";content:"\f0d5"}.linkedinBtn{background:#0094BC;opacity:0.4}.linkedinBtn:before{font-family:"FontAwesome";content:"\f0e1"}.pinterestBtn{background:#26ae91;opacity:0.4}.pinterestBtn:before{font-family:"FontAwesome";content:"\f0d2"}.rssBtn{background:#fb5a03;opacity:0.4}.rssBtn:before{font-family:"FontAwesome";content:"\f09e"}

3. Setelah udah, Save / Simpan Tempatle sob. Jika udah, next ke langkah berikutnya.

4. Lanjutkan dengan menuju ke Tata Letak > klik Tambahkan Gadget (ingin ditampilkan dimana saja terserah kamu sob) > tambahkan HTML/JavaScript.




5. Terapkan HTML berikut ini pada kolom pengisian (text area) HTML/JavaScript, kemudian klik Simpan.

<div class="sosmed"><div class="nengah"><a rel="nofollow" class="facebookBtn smGlobalBtn" title="Facebook" href="#" target="_blank"></a><a rel="nofollow" class="twitterBtn smGlobalBtn" title="Twitter" href="#" target="_blank"></a><a rel="nofollow" class="googleplusBtn smGlobalBtn" title="Google +" href="#" target="_blank"></a><a rel="nofollow" class="linkedinBtn smGlobalBtn" title="Linkedin" href="#" target="_blank"></a><a rel="nofollow" class="pinterestBtn smGlobalBtn" title="Pulsk" href="#" target="_blank"></a><a rel="nofollow" class="rssBtn smGlobalBtn" title="RSS Feeds" href="#" target="_blank"></a><br><br></div></div>

6. Terakhir nih sob, ganti tanda # dengan pranala (tautan) milikmu. Misal pada "facebookBtn smGlobalBtn" , pada bagian "#"nya  Joa ganti menjadi "https://www.facebook.com/SobatJoa".

Gimana sob ? Mudah kan ? Sekian dari Joa, semoga artikel ini bermanfaat. Jika masih ada pertanyaan, silahkan tulis di kolom komentar. Salam #SobatJoa

Itulah sedikit Artikel Cara Memasang Social Media Widget with Opacity Ringan di Blog terbaru dari kami

Semoga artikel Cara Memasang Social Media Widget with Opacity Ringan di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Serba Neka Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Memasang Social Media Widget with Opacity Ringan di Blog

Share this