Cara Membuat Satu Widget Untuk Banyak Sosial Media

Memperhatikan kepuasan pengunjung adalah salah satu kewajiban bagi pengelola sebuah situs web atau blog. Cara membuat banyak tombol sosmed di satu widget pada blog. Jika kita ingin mendapatkan banyak pengunjung ke blog, salah satu cara adalah membagikan artikel yang baru kita publikasi ke media sosial seperti Facebook, twitter, google plus dan lain-lain. Penempatan tombol-tombol sosmed di blog ini juga sangat penting, agar pengunjung dapat langsung menemukan dan bergabung dengan kita. Namun, saya peribadi menyukai jika widget nya di gabung satu widget saja, agar mereka langsung dapat mengikuti semua sosmed kita.

Widget yang saya buat ini sangatlah sederhana, namun sobat juga dapat mendesainnya kembali jika memang ingin menyesuaikan dengan template masing-masing, dapat sobat lihat pada gambar diatas, saya menggabungkan semua sosial media yang saya gunakan kedalam satu widget.

1. Memasang JavaScript Ke Template

Baiknya, yang pertama sobat lakukan adalah memasang JavaScript Facebook, Twitter dan Google ke template. Copy semua kode dibawah ini di atas </body> . Perlu diperhatikan jika sudah ada JavaScript nya di template masing-masing, sobat tidak perlu lagi meng-copy kode ini.

Letakkan diatas </body>

1. <!--JavaScript Facebook -->  
2. <div id="fb-root"></div>    
3. <script>//<![CDATA[   
4. (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.8&appId=345654185818007"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));//]]></script>   
5.   
6. <!--JavaScript Twitter -->  
7. <script>window.twttr = (function(d, s, id) {    
8.   var js, fjs = d.getElementsByTagName(s)[0],    
9.     t = window.twttr || {};    
10.   if (d.getElementById(id)) return t;    
11.   js = d.createElement(s);    
12.   js.id = id;    
13.   js.src = "https://platform.twitter.com/widgets.js";    
14.   fjs.parentNode.insertBefore(js, fjs);    
15.     
16.   t._e = [];    
17.   t.ready = function(f) {    
18.     t._e.push(f);    
19.   };    
20.     
21.   return t;    
22. }(document, "script", "twitter-wjs"));</script>    
23.   
24. <!--JavaScript Google-->  
25. <script src="https://apis.google.com/js/platform.js">  
26.   {lang: 'id'}  
27. </script>  
28. <script type="text/javascript" src="https://apis.google.com/js/plusone.js">  
29. {lang: 'id'}  
30. </script>  

2. Membuat CSS Untuk Box Widget Blog

Kita akan membuat CSS sederhana untuk menempatkan semua sosmed nantinya. Silahkan masuk ke Blogger dan cari ]]></b:skin> Letakkan kode dibawah ini sebelum ]]></b:skin>.

CSS Widget Sosmed

1. <!--created by Doni Juliansa www.info4you.my.id-->  
2. <!--start widget box semua sosmed-->  
3. .box-smed {  
4. width:100%;  
5. border: 1px solid #ccc;  
6. background: none;  
7. }  
8. .smed-fb {  
9. border-bottom: 1px dotted #ccc;  
10. padding-bottom: 6px;  
11. }  
12. .smed-tw {  
13. border-bottom: 1px dotted #ccc;  
14. padding: 8px 0 8px 4px;  
15. display:block;  
16. }  
17. .smed-rgplus {  
18. padding: 8px 0 8px 4px;  
19. display:block;  
20.   
21. }  
22. .smed-gplus {  
23. padding: 8px 0 6px 4px;  
24. display:block;  
25. background: #fdfdfd;  
26. border-bottom: 1px dotted #ccc;  
27. }  
28. <!--End widget box semua sosmed-->  

Keterangan: class box-smed adalah box yang menampung semua sosmed, silahkan hapus border jika tidak widget template sobat tidak menggunakan border (garis pembatas widget).

Class smed-fb adalah box untuk menampung Widget Fanspage, class smed-tw adalah untuk Twitter, class smed-rgplus adalah untuk tombol Rekomendasi ke Google, class smed-gplus adalah tombol follow Google Plus.

Jika sobat merasa latar belakang nya terlalu sederhana dan ingin mengubah dengan warna lain, silahkan ganti pada background atau ditambahkan sendiri properti background pada class yang tidak memiliki warna latar seperti class smed-rgplus dan smed-tw. Garis pembatas bawah (border-bottom) saya menggunakan style dotted (garis putus-putus), jika ingin garis normal silahkan di ganti menjadi solid.

Masih bingung dengan properti-properti CSS?
Silahkan jalan-jalan ke artikel

Mengenal Properti CSS Margin,Padding,Color,Background,Border Dan Penerapanya

3. Membuat HTML

Selanjutnya, kita akan membuat HTML untuk menampilkan widget nya di blog.
#1 Masuk ke Blogger
#2 Pada Tata Letak, silahkan Tambahkan Gadget dan pilih gadget HTML/JavaScript
#3 Silahkan berikan judul widget atau kosongkan saja. Paste kode dibawah ini di dalam kotak di bawahnya, lalu Simpan.

1. <div class="box-smed">  
2.   
3. <div class="fb-page smed-fb"    
4.  data-href="https://www.facebook.com/info4youmyid"    
5.  data-small-header="true"    
6.  data-adapt-container-width="true"    
7.  data-hide-cover="false"    
8.  data-show-facepile="true">     
9. </div>  
10.   
11. <div class="smed-tw">  
12. <a class="twitter-follow-button"    
13.    href="https://twitter.com/info4youmyid">    
14. </a><br />  
15. <a href="https://twitter.com/messages/compose    
16.    ?recipient_id=2322338384"    
17.    class="twitter-dm-button"    
18.    data-screen-name="@info4youmyid">    
19. Message @info4youmyid</a>  
20. </div>  
21.   
22. <div class="smed-gplus">  
23. <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/116240272219366125714" data-rel="author"></div>  
24. </div>  
25.   
26. <div class="smed-rgplus">  
27. <div class="g-plusone" data-size="tall" data-annotation="inline" data-width="450"></div>  
28. </div>  
29.   
30. </div>  

Silahkan ganti yang berlatar belakang warna kuning tersebut dengan Url atau ID sosmed masing-masing. Cara mengetahui ID Google Plus, silahkan sobat ketikkan di browser masing-masing atau langsung klik link ini plus.google.com/me di akhir Url nantinya akan berubah ke ID Google Plus masing-masing (harus login akun Google terlebih dahulu)

Untuk Mengetahui ID Twitter Silahkan Baca
Cara Mudah Membuat Tombol Follow, Messages dan Tweet Twitter Tampil Di Blog

Ketahui Juga Properti-Properti Widget Facebook Pada Artikel
Memasang Widget Fanspage Facebook Ke Blog

Sobat juga bisa menambahkan tombol subscribe youtube dengan menambahkan HTML nya, menggunakan CSS yang sudah ada juga tidak masalah. Jadi, sekian artikel kita kali ini, semoga dapat bermanfaat dan membantu sobat sekalian. Sampai jumpa.

Info4You Info4You Update Pada: February 28, 2017

Menampilkan Widget Hanya Pada Artikel Dengan Spesifik Label Tertentu

Kemarin-kemain kita sudah membahas tentang tag conditional, ada satu yang bingung, ternyata kita tidak bisa menggunakan tag conditional untuk menampilkan Widget hanya pada postingan dengan label tertentu. Misalnya saya ingin menampilkan Widget hanya pada postingan yang berlabel "Review Film" seperti yang saya terapkan pada blog lain yang saya kelola di allforyall.top. Disana saya ingin menampilkan daftar isi yang dapat langsung mengarah pada setiap sub judul didalam artikel tersebut, namun sialnya widget tersebut tampil semua di postingan yang berbeda sub judul di dalam postinganya.

Banyak cara yang telah saya gunakan, karena ilmu saya juga sedikit, saya mencoba-coba lah menggunakan tag conditional seperti <b:if cond='data:label.name == "Review Film"'> hal tersebut sama sekali tidak bekerja, saya mencoba lagi dengan tag cond lain, dengan menempatkan label Review Film di akhir dan mencoba dengan <b:if cond='data:label.isLast == "true"'> hasilnya tetap sama saja. Saya pun mencoba mencari pencerahan di mbah gugle, dan banyak menemukan forum-forum yang juga membahas ini, ternyata memang tidak mungkin untuk melakukan hal tersebut. Jika ingin melakukan hal tersebut, kita bisa menggunakan JavaScript, akhirnya saya pun mendapatkan pencerahan sedikit.

Namun sayang, sudah saya cari-cari kode JavaScript tersebut hingga sekarang tidak pernah ketemu. Mau buat sendiri pun tidak mengerti caranya, akhirnya saya menggunakan cara manual, caranya cukup sederhana, kita hanya perlu untuk menyembunyikan widget tersebut dari blog, lalu memanggilnya kembali di postingan yang kita tentukan.

Disini kita akan menyembunyikan terlebih dahulu Widget tersebut.
1. Silahkan masuk ke Dashbor Blogger.
2. Masuk ke Tempalte -> EditHTML.

3. Disini saya menganggap sobat sudah mengetahui ID dari widget yang ingin di tampilkan di postingan dengan label tertentu. Sebagai contoh Widget yang saya buat memiliki ID HTML1.
4. Silahkan sobat cari ]]></b:skin> dan kita akan membuat kode CSS sebelum ]]></b:skin>.

#HTML1 {display: none;}

Dengan kode diatas, Widget dengan ID HTML1 tidak akan pernah tampil di blog sobat.

5. Selanjutnya kita hanya perlu memanggilnya di setiap  postingan dengan label yang sobat tentukan sendiri. Saat sobat membuat postingan baru, silahkan masuk ke mode HTML, dan buat kode CSS untuk memanggil widget yang kita sembunyikan tadi. dapat dilihat di bawah ini.

<style>
#HTML1 {display: block;}
</style>

Sangat mudah bukan? dengan ini, saya sama sekali tidak membutuhkan JavaScript atau tetekbengek lainya. Walaupun hal ini cukup merepotkan karena kita harus membuat ulang kode diatas saat ingin menampilkanya pada postingan dengan label yang saya inginkan.

Namun sobat tidak perlu khawatir, kita dapat menggunakan fitur dari blogger agar tidak kerepotan.

Cara menampilkan teks, kode, url, tanda tangan otomatis saat membuat artikel baru.

1. Masuk ke Blogger
2. Klik Setelan lalu Pos, komentar, dan berbagi
3. Pada bilah kanan, silahkan klik Tambahkan pada Template Entry.
4. Kode yang kita buat didalam postingan dapat kita baut disini, agar tidak perlu repot-repot lagi membuatnya saat kita membuat artikel baru.

5. Terakhir klik Simpan Setelan

Sekarang kode tersebut akan selalu ada saat sobat membuat entri baru. Sobat hanya perlu menghapusnya dari mode HTML jika tidak ingin menampilkanya di postingan yang tidak di inginkan.

Satu hal lagi, sobat bebas meletakkan kode tersebut di awal, di tengah atau di akhir postingan, karena hasilnya akan sama saja.

Sekian Artikel kali ini, semoga dapat bermanfaat. Sampai jumpa.

Info4You Info4You Update Pada: February 25, 2017

Langkah Mudah Upgrade Akun Adsense Hosted ke Non-Hosted

Upgrade akun Adsense Hosted (Youtube/Blogspot) ke Non-Hosted. Ini adalah kali kedua saya mencoba upgrade akun Adsense ke Non-Hosted, yang pertama dulu saya ditolak karena tidak sesuai dengan kriteria Adsense, saya tidak tau apa artinya itu, dan Adsense juga tidak memberitahukan dengan rinci apa yang salah dengan situs saya, dan sekarang saya mencoba mengirimkan permohonan lagi dengan sedikit perubahan didalam situs, dan berharap kali ini Adsense dapat memberikan balasan yang memuaskan dan dapat saya mengerti agar blog saya sendiri dapat saya perbaharui. Saya orang nya sedikit pelupa, jadi tadi waktu mengirimkan permohonan ke Adsense, saya screenshot saja sampai selesai, dan jadilah postingan ala kadarnya ini.

Syarat untuk upgrade akun Adsense ke Non-Hosted tidaklah banyak, yang pertama sobat butuhkan adalah sebuah akun Adsense Hosted baik itu yang didaftarkan dari youtube atau blogger dengan sub domain blogspot yang di host oleh Google, dan yang kedua adalah sebuah situs yang tidak di host oleh Google, dengan domain TLD (com, net, id, dan lain-lain).

Belum punya akun Adsense Hosted? Silahkan kemari

• Cara Daftar Adsense Dari Blogger
• Mendaftar Adsense Melalui Youtube Panduan Pemula Lengkap

Saya akan menjelaskan dari pertama apa yang harus sobat lakukan sebelum mengirimkan permohonan ke Google Adsense.

#1 Hapus Semua Akun Google Yang Sedang Login

Jangan salah paham dulu, maksud saya disini bukanlah menghapus akun Google nya, melainkan menghapus data login saja, jika sobat memiliki lebih dari satu akun Google dan semuanya pernah login di satu browser, sebaiknya sobat melakukan penghapusan data login untuk semua akun tersebut dan menyisakan satu akun yang terhubung ke Google Adsense.

Mengapa hal ini penting? Karena Adsense hanya mengizinkan sobat mendaftar dengan akun Google default, Jadi saat ingin mendaftar ke Adsense, login lah ke Google hanya satu akun saja, saya tidak tau apakah saat review sedang berlangsung sobat boleh gonta-ganti akun, tapi sebaiknya jangan lakukan hal tersebut, karena pada halaman Masalah Permohonan - Bantuan Google Adsense  dikatakan Kami menyadari bahwa pendaftaran AdSense tidak mengizinkan penayang untuk beralih di antara beberapa Akun Google. Jadi, sebaiknya tetaplah login dengan akun yang terkait dengan Google Adsense tersebut sampai permohonan sobat sepenuhnya di setujui (Full Approve) untuk menghindari hal-hal yang tidak di inginkan.

Untuk membuang atau menghapus data login Google, silahkan sobat ikuti langkahnya dibawah ini.
1. Buka halaman logout ini accounts.google.com/logout
2. Silahkan klik Hapus pada sebelah kanan dibawah tampilan akun.
3. Klik tanda X yang berada di sisi kanan Akun.
Pastikan sobat menyisakan satu akun yang terkait dengan Adsense. Jika tidak sengaja terbuang semua, tidak apa-apa, sobat hanya perlu login lagi saja dengan memasukkan email dan password pada halaman login Google.

#2 Cara Mengirimkan Permohonan Upgrade Akun Ke Google Adsense

Setelah sobat login ke Google dengan satu akun saja yang terkait dengan Google Adsense, sekarang kita dapat lanjut ke tahap pengiriman permohonan untuk upgrade akun.

1. Buka situs Adsense
2. Pada bilah kiri, silahkan pilih My ads, lalu Other products
3. Masukkan Url situs sobat yang tidak di Host oleh Google, contoh: http://situsmu.com.
perlu diperhatikan, situs tersebut tidak terhubung dengan akun Adsense manapun.
4. Klik Kirim. Maka, permohonan akan dikirim, tapi belum sepenuhnya selesai.

5. Pada tahap ini, halaman Adsense akan refresh otomatis dan sobat akan mendapatkan sebuah kode, Copy semua kode tersebut dan parse terlebih dahulu, sobat dapat mencarinya di Google, banyak tersedia situs yang dapat membantu memparse kode HTML.

6. Letakkan kode yang telah di parse tersebut setelah tag <head>, dan Simpan template (jika dari blogger.com).

7. Kembali ke halaman Adsense, centang pada I've paste code into my site or emailed it to someone who will. Terakhir klik Done

Sekarang permohonan sobat benar-benar telah terkirim, dan Tim Adsense akan melakukan peninjauan terhadap situs yang dikirimkan, review bisa memakan waktu berhari-hari, atau berminggu-minggu, review permohonan saya sebelumnya pun memakan waktu dua minggu kalau tidak salah, jika sudah selesai melakukan peninjauan, sobat akan mendapatkan email dari Adsense apakah permohonan disetujui atau tidak. Bersabar saja dan jangan lupa untuk terus update artikel.

Sekian pembahasan kita kali ini tentang Langkah Mudah Upgrade Akun Adsense Hosted ke Non-Hosted, saya doakan, semoga yang sedang mengajukan permohonan dapat diterima.

*UPDATE

"Terima kasih atas minat Anda terhadap Google AdSense. Setelah melakukan peninjauan, pakar kami menyimpulkan bahwa permohonan Anda tidak memenuhi kriteria program kami. Oleh karena itu, kami tidak dapat menerima Anda untuk berpartisipasi dalam program kami.

Kami memiliki kebijakan tertentu yang berlaku yang kami yakin akan membantu memastikan keefektifan iklan Google untuk penayang maupun pengiklan kami. Kami meninjau semua penayang, dan kami berhak untuk menolak permohonan. Seiring perkembangan, kami dapat memutuskan untuk memperluas program agar melibatkan penayang web lainnya dengan variasi konten web yang lebih beragam.

Perhatikan bahwa kami mungkin tidak dapat menjawab pertanyaan mengenai alasan spesifik di balik keputusan kami. Terima kasih atas pengertian Anda."

Sudah dua kali saya mendapatkan email seperti diatas, banyak yang bilang itu karena niche gado-gado, jadi adsense tidak dapat menentukan iklan apa yang harus ditampilkan. Ada juga yang bilang Tidak apa-apa niche nya banyak, tapi artikel tiap niche harus lah memadai juga, memang waktu saya kirim permohonan, artikel untuk satu niche saya ada yang 2 artikel saja, hanya niche blogging yang 10 an. Sepertinya saya terlalu terburu-buru untuk mendaftar ke Adsense.

Baiklah, sampai bertemu untuk pembahasan permohonan Adsense selanjutnya (mungkin dalam waktu yang lama), jika blog ini sudah memadai akan saya kirimkan ulang, dan saya buat artikel lain untuk pembahasan nya, jadi silahkan berlangganan dan follow Info4You. Sampai jumpa.

Info4You Info4You Update Pada: February 16, 2017

Cara Membuat Halaman Sitemap Sederhana dan Ringan (Fast Loading)

Membuat halaman sitemap sederhana dan ringan saat loading adalah hal yang penting, jika artikel di blog sobat sudah sangat banyak, jika terlalu banyak perlak perlik dan memberatkan loading, akan sangat mengganggu pengunjung jika mereka menunggu lama atau bahkan tidak muncul sama sekali, karena rata-rata halaman sitemap dibuat menggunakan JavaScript untuk memanggil atau menampilkan semua artikel blog.

Fungsi halaman Sitemap sendiri memang untuk memudahkan pengunjung menemukan semua artikel yang ada di blog, khusus nya bagi sobat yang berniat mendaftarkan blog ke Google Adsense, akan sangat berguna halaman Sitemap ini, karena Adsense menyukai situs yang mudah navigasinya atau semua artikel blog yang mudah di temukan.

Info4You Info4You Update Pada: February 12, 2017

Postingan Blog Tidak Di Index Google? Lakukan Hal ini

Artikel tidak muncul dipencarian Google. Bagi blogger pemula seperti yang pernah saya alami dulu, sangatlah membingungkan mengapa artikel tidak langsung muncul di index Google setelah mempublikasikan artikel. Google tidak dapat langsung mengindex sebuah artikel baru, untuk memunculkan artikel di pencarian Google dibutuhkan waktu yang sangat lama. Hal inilah yang saya alami dulu saat baru memulai blog, bahkan sampai satu minggu, artikel belum terindex oleh Google.

Setelah melakukan berbagai perjalanan di mbah Google, saya mendapatkan cara untuk mengatasi masalah artikel tidak di index oleh Google atau sangat lama untuk di index Google.

1. Mengirimkan URL ke Google

Cara pertama ini hanya mengirimkan Url postingan ke Google, agar Google dapat langsung melakukan Index kepada Artikel tersebut, yang harus sobat lakukan adalah

Pergi ke Webmaster Tools Submit Url
Sobat akan melihat halaman seperti gambar dibawah ini, silahkan masukkan Url lengkap postingan yang sudah sobat publikasikan.
Contoh : http://www.situsblog.com/2017/02/nama-artikel.html
Selanjutnya, verifikasi Captcha dan klik Kirim Permintaan.

Tunggulah beberapa menit dan coba periksa di Google pencarian dengan memasukkan Url lengkap postingan tersebut, jika sudah terindex maka akan muncul artikelnya.

2. Mendaftarkan Situs Ke Google Search Console

Cara yang kedua ini sebenarnya adalah hal wajib dilakukan oleh pengelola sebuah situs, fungsi Google Search Console/Webmaster Tools ini sendiri bukan hanya sekedar agar postingan cepat di index Google, tapi juga dapat memantau sebuah situs, dan mengetahui bagaimana cara Google merayapi sebuah situs, sobat juga dapat mengetahui apakah ada sebuah kesalahan perayapan, atau Url yang sudah tidak aktif lagi yang kita pasang di sebuah postingan.

Awal mula saya memulai blog, saya memiliki dua situs abal-abal yang sekarang tidak terurus lagi namun tetap aktif, saya belum mengenal yang namanya Google search console, dan alhasil artikel-artikel yang saya publikasikan baru terindex beberapa minggu kemudian, sangat miris bukan, sedangkan kita harus berlomba-lomba untuk menduduki page one dengan saingan lain, itulah sebabnya penting untuk mengirim permintaan index ke google langsung setelah publikasi artikel.

Untuk cara mendaftar Google Search Console, silahkan sobat ke artikel saya tentang

Cara Mendaftar Google Webmaster dan Google Analytics

Disana sudah lengkap saya jelaskan tentang Google search console dan Google analytics, dan bagaimana cara submit Url, Sitemap serta menautkan Akun Google analytics ke Google Search Console.

#Tambahan - Masalah Postingan Blog Tidak Terindex Google Walau Sudah Submit Url Di Google Search Console.

Kemarin saya terkejut setelah mencoba-coba memeriksa semua Url artikel di pencarian Google, ada dua artikel saya yang tidak muncul di pencarian Google, padahal sudah beberapa minggu yang lalu saya buat, saya pun bingung mengapa hal tersebut bisa terjadi, padahal sudah submit Url di Google Webmaster Tools "Ambil sebagai Google". Saya memang tidak pernah memeriksa artikel apakah sudah terindex atau belum setelah submit, jadi saya tidak tau artikel tersebut memang tidak di index atau hilang dari SERP.

Namun, Alhamdulillah sekarang sudah terindeks, jika sobat mengalami hal ini juga, caranya sangatlah mudah.

Sobat hanya perlu submit ulang Url artikel tersebut dari halaman webmaster tools (Cara pertama yang kita bahas tadi), saya tidak tau apakah jika submit ulang Url dari "Ambil sebagai Google" di akun Google Search Console bisa menyelesaikan masalahnya atau tidak, karena saya hanya mencoba-coba saja submit Url dari halaman cara pertama tersebut dan beberapa menit kemudian dapat terindeks di Google.

Untuk kali ini hanya itu yang dapat saya bagikan, semoga dapat bermanfaat dan membantu masalah sobat sekalian. Sampai jumpa.

Info4You Info4You Update Pada: February 11, 2017

2 Cara Mudah Menampilkan Widget Blog Pada Versi Seluler

2 Cara Menampilkan Widget Pada Versi Seluler. Ada dua cara yang dapat kita gunakan untuk menampilkan widget pada versi mobile, dan dua cara ini sudah saya terapkan dan berhasil. Sekarang adalah jaman nya smarphone, jadi buat kita sebagai pengelola sebuah situs blog, sangat wajib untuk memperhatikan bagaimana tampilan blog kita saat versi mobile, jangan sampai pengunjung kesulitan untuk menavigasi situs karena kurangnya widget saat mereka browsing menggunakan smarphone.

Jika sobat malas buka browser dari smartphone, sobat dapat melihat bagaimana tampilan versi mobile situs blog dari komputer langsung, cara pertama dengan memberikan ?m=1 diakhir Url dan cara kedua melalui blogger lalu Template, pada bilah kanan, klik setingan Seluler (icon gear), lalu klik Pratinjau.

Baiklah, kembali ke topik, berikut adalah dua cara tersebut.

1. Cara Menampilkan Widget Versi Seluler Dengan Menambahkan Element Mobile Pada HTML Widget.

Cara yang satu ini terbilang sangatlah mudah, kita hanya perlu menambahkan elemen baru didalam tag <b:widget>. Sebagai contoh sobat dapat mencobanya di blog saya ini, untuk widget Archive versi desktop dan versi mobile tampilanya berbeda, sebenarnya saya membuat dua widget arsip, yang satu khusus tampilan desktop, dan yang satu lagi khusus tampilan mobile. Karena jika saya menggunakan widget arsip untuk desktop yang saya seting dengan gaya hierarki akan terlihat memanjang kebawah jika pada tampilan mobile, maka saya membuat satu lagi dengan gaya daftar flat.

Untuk caranya, silahkan sobat masuk ke blogger, pada Template -> Edit HTML carilah widget yang ingin sobat tampilkan pada versi mobile, contoh BlogArchive1,

Kode nya kira-kira akan terlihat seperti dibawah ini.

1.    
2. <b:widget id='BlogArchive1' locked='false' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Elemen yang akan kita tambahkan adalah mobile, ada tiga value yang dapat digunakan untuk elemen mobile ini, sebagai berikut

#1 Menampilkan Widget Pada Versi Seluler/Mobile

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='yes' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

mobile='yes' adalah perintah untuk menampilkan widget pada versi mobile juga, jadi selain pada versi desktop, sebuah widget yang diberi elemen ini akan tampil juga pada versi mobile.

#2 Menampilkan Widget Hanya Pada Versi Seluler/Mobile

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='only' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Sesuai namanya mobile='only' hanya akan menampilkan widget pada versi seluler saja, widget yang diberik elemen ini tidak akan tampil pada versi desktop.

#3 Menampilkan Widget Hanya Pada Versi Desktop

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='no' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Mungkin header sobat jadi aneh saat dilihat pada versi mobile, misalnya kebesaran atau kekecilan. Elemen mobile='no' dapat menyembunyikan widget yang tampil pada versi seluler tersebut.

2. Cara Menampilkan atau Menyembunyikan Widget Blog Versi Mobile Menggunakan Tag conditional

Dulu saya bertanya-tanya, saya sudah memiliki cara pertama, untuk apa lagi cara kedua ini yang terbilang cukup sulit untuk menghapal kode nya ketimbang cara pertama. Namun akhirnya saya tetap membutuhkan cara ini, memang bukan untuk menampilkan widget yang ditambahkan dari Gadget Tata Letak blog (tag <b:widget>), tapi untuk menyembunyikan widget yang di tanam langsung di template dengan tag lain, contoh nya pada blog ini, tombol back to up jadi menutupi beberapa tulisan postingan juga footer saat versi seluler, jadi saya menyembunyikanya, dan hanya menampilkan tombol tersebut tidak sticky berada di paling akhir situs.

berikut adalah tag conditional untuk menampilkan atau menyembunyikan widget.

1.    
2. <b:if cond='data:blog.isMobileRequest == "true"'>  
3. Konten / widget  
4. </b:if>  
5.    

Kondisi diatas adalah untuk menampilkan apapun yang dibungkus oleh tag condition tersebut hanya pada versi seluler. Sedangkan, jika sobat ingin menyembunyikan apapun, silahkan ganti true menjadi false. Terlihat seperti dibawah ini.

1.    
2. <b:if cond='data:blog.isMobileRequest == "false"'>  
3. Konten / widget  
4. </b:if>  
5.    

Catatan: Jika terjadi error, saat menyimpan template, coba ganti " menjadi &quot; Contoh &quot;true&quot; atau &quot;false&quot;.

Baca Juga Terkait conditional Tags

12 Macam Serta Kebergunaan Conditional Tags Pada HTML

2 Trik Mudah Menyembunyikan Widget Pada Halaman Tertentu Blog

Itu saja yang dapat saya bagikan kali ini, semoga dapat bermanfaat, jika masih ada yang masih bingung, silahkan komentar. Sampai Jumpa.

Info4You Info4You Update Pada: February 11, 2017

2 Trik Mudah Menyembunyikan Widget Pada Halaman Tertentu Blog

2 Cara menyembunyikan atau menampilkan widget di halaman tertentu pada blog. Saya membuat artikel ini untuk melengkapi artikel saya sebelumnya yang membahas tentang conditional tags, disana saya hanya membahas tag condison apa saja yang dapat digunakan di blog, dan sekarang kita akan membahas cara pengunaanya untuk menyembunyikan atau menampilkan widget di halaman tertentu misalnya menyembunyikan widget di halaman depan (homepage) pada blog, halaman statis, halaman posting, dan lain-lain.

Ada dua trik yang akan kita gunakan, silahkan sobat tentukan cara mana yang lebih simpel. Walaupun saya bilang dua trik, namun kedua cara ini sama sama melalui edit HTML dan menggunakan tag condition, perbedaanya nanti akan terlihat saat pembahasan.

1. Cara Menyembunyikan Widget Satu Persatu Pada Halaman Tertentu

Disini saya tidak menjelaskan lagi apa itu tag conditional dan kegunaanya, karena saya sudah menjelaskan nya pada artikel lain (link artikel ada akhir postingan ini). Kita akan langsung saja.

#1 Cara Menampilkan Widget Hanya Pada Halaman Statis & Posting

a. Silahkan sobat masuk Template -> Edit HTML pada blogger
b. Pada pilihan Lompat ke widget silahkan pilih widget nya, sebagai contoh, saya ingin menampilkan widget Profile hanya pada halaman posting dan halaman statis. maka carilah widget tersebut, kalau hanya memiliki satu widget untuk profile, biasa namanya adalah Profile1.

c. Pada HTML Widget yang dipilih, silahkan klik ... sampai terbuka semua, dan paste kode dibawah ini setelah <b:includable id='main'>

<b:if cond='data:blog.url == data:post.url'>

Setelah itu beri penutup </b:if> sebelum </b:includable>

d. Simpan template dan periksa blog masing-masing, apakah selain Halaman statis dan halaman posting, widget tersebut tidak tampil.

Jika ingin kebalikanya (Menyembunyikan widget dari Halaman Statis dan Posting saja) Silahkan sobat ganti == menjadi != . Contoh

<b:if cond='data:blog.url != data:post.url'>

#2 Cara Menampilkan Widget Hanya Pada Homepage

Mulai dari sini, saya tidak akan panjang lebar lagi, karena cara penerapanya sama dengan Cara #1 diatas. Berikut adalah tag cond nya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
content
</b:if>

2. Cara Mudah Menyembunyikan Banyak Widget Sekaligus Pada Halaman Tertentu

Cara yang satu ini sangatlah sederhana, dan benar-benar simpel serta membantu jika sobat ingin menyembunyikan banyak widget sekaligus pada suatu halaman. Sebagai contoh saya ingin menyembunyikan semua widget pada Halaman Statis saja. Maka kita akan menggunakan tag conditional dibawah ini.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Selanjutnya, yang kita lakukan adalah membuat CSS ID dari semua widget. Jika sobat tidak yakin apa ID widget yang akan sobat pilih, silahkan masuk ke bagian blogger Tata Letak terlebih dahulu, lalu klik edit pada widget yang ingin disembunyikan. Pada Url nya, diujung (Paling Akhir) adalah ID widget tersebut, terlihat pada gambar dibawah ini, widgetId=BlogArchive2 adalah ID Widget dari Arsip di blog saya.

Cara menyembunyikan widget blog dengan CSS sangatlah mudah, ID pada CSS umumnya ditulis menggunakan Hastag (#) diawal nama ID. Contohnya #BlogArchive2. Ini adalah ID dari Widget Arsip saya, lalu property CSS untuk menyembunyikan nya adalah display:none; dengan begitu widget Arsip akan menghilang dari blog (semua halaman). Namun, dengan membatasi nya dengan tag conditional kita dapat menyembunyikan widget tersebut pada halaman yang telah ditentukan oleh conditional tags yang kita buat.

Seperti yang sudah saya bilang sebelumnya, sebagai contoh saya akan menyembunyikan sebagian atau semua Widget hanya pada Halaman Statis saja, untuk menghemat tulisan, sobat bisa menggabung beberapa ID untuk 1 property yang sama dengan dipisahkan oleh koma, CSS yang kita buat adalah sebagai berikut.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><style>
#BlogArchive2, #HTML1, #HTML2, #Label1 { display: none; }
</style></b:if>

Diatas itu hanyalah sebagai contoh saya menyembunyikan empat widget hanya pada static page, buatlah kode diatas tepat dibawah </b:skin> atau sebelum </head> , untuk tag <style> sangat penting, jangan sampai lupa, karena itu untuk menegaskan bahwa teks yang dikurung di dalam <style> adalah kode CSS.

Apakah tag conditional hanya itu saja yang dapat digunakan? Tentu saja tidak!

Silahkan Kemari: 12 Macam Serta Kebergunaan conditional Tags Pada HTML

Silahkan sobat cari tag conditional yang dibutuhkan pada artikel saya diatas, disana sudah saya terangkan apa saja kegunaan dari ke 12 tag conditional tersebut, dan penerapanya, sama dengan yang telah kita bahas diatas.

Sekian artikel saya kali ini, semoga dapat bermanfaat dan berguna untuk memperindah tampilan blog sobat dengan memfilter tampilan widget. Sampai jumpa.

Info4You Info4You Update Pada: February 09, 2017

12 Macam Serta Kebergunaan Conditional Tags Pada HTML

Apa itu tag conditional? Tag conditions sering kita jumpai didalam sebuah template, dan tag yang satu ini memang sangatlah wajib dan berguna, apa sih fungsi condition tag? Tag cond adalah untuk memfilter sebuah objek didalam HTML agar dapat ditampilkan pada sebuah halaman yang telah ditentukan. Sebagai contoh saya ingin menampilkan widget A hanya tampil pada halaman statis atau postingan saja, maka tag conditional inilah yang kita gunakan.

Penting untuk memfilter sebuah objek didalam sebuah situs, agar web / blog terlihat rapi. Misal pada halaman sitemap / daftar isi saya ingin menghilangkan semua widget, seperti artikel terbaru, label, archive, dan lain-lain, karena sitemap tersebut sudah menampilkan seluruh artikel di situs kita, jadi akan terlihat indah jika menyembunyikan widget yang menampilkan artikel juga. Maka, kita dapat menggunakan tag cond untuk sebuah Url.

Sebelum kita mengetahui macam-macam tag conditional, ada baiknya kita mengetahui terlebih dahulu bagaimana cara kerja tag conditional. Saya tidak akan panjang-panjang menjelaskanya, silahkan sobat lihat dibawah ini, saya berikan sebagai contoh.

Cara Kerja Tag conditional Didalam HTML

Kondisi 1
<b:if cond='data:blog.url == data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

Kondisi 2
<b:if cond='data:blog.url != data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

Apakah perbedaan dari kedua kondisi diatas? mungkin terlihat jelas perbadaanya, yaitu perintah == dan != . Fungsi dari kedua perintah tersebut adalah sebagai berikut:

1. Apapun yang dibungkus oleh Kondisi 1 maka hanya akan tampil di homepageUrl (Halaman Utama Web / Blog). Sedangkan,

2. Apapun yang dibungkus oleh Kondisi 2 maka elemen/objek tersebut akan disembunyikan dari homepageUrl (Halaman Utama Web / Blog)

Sekarang kita akan membahas apa saja tag conditional yang dapat digunakan, serta apa fungsinya.

Berikut Adalah 12 Macam Tag Conditional

#1 Tag condition Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

 Fungsi nya sudah saya jelaskan sebelumnya dari contoh diatas.

#2 Tag conditional Halaman Statis

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
....Elemen Disini....
</b:if>

conditional diatas berfungsi untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman statis (Laman: www.urlblog.com/p/***.html).

#3 Tag conditional Halaman Posting

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
....Elemen Disini....
</b:if>

conditional ini berfungsi untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman posting / artikel saja,

#4 Tag conditional Halaman Statis dan Artikel Blog

<b:if cond='data:blog.url == data:post.url'>
....Elemen Disini....
</b:if>

conditional diatas jika sobat ingin menampilkan objek contoh nya widget hanya pada Halaman Statis dan Halaman Posting saja. Selain dua halaman ini, maka widget tidak akan tampil.

#5  Tag conditional Halaman Arsip

 <b:if cond='data:blog.pageType == &quot;archive&quot;'>
....Elemen Disini....
</b:if>

conditional diatas untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman Arsip, bagi yang bingung halaman Arsip itu yang mana, lihat gambar dibawah ini.

#6 Tag conditional Halaman Pencarian

 <b:if cond='data:blog.searchQuery'>
....Elemen Disini....
</b:if>

Conditional searchQuery adalah untuk menampilkan objek hanya di halaman pencarian. Halaman pencarian adalah yang terlihat seperti www.namablog.com/search?q=...... Untuk kondisi diatas adalah hanya menampilkan apapun yang dibungkus dengan tag condition tersebut hanya pada searchpage.

#7 Tag conditional Halaman Label

 <b:if cond='data:blog.searchLabel'>
....Elemen Disini....
</b:if>

 Hampir sama dengan tag condition pencarian, searchLabel adalah untuk menampilkan apapun yang dibungkus dengan tag tersebut pada halaman Label, Url halaman Label terlihat seperti ini info44ryou.blogspot.com/search/label/Tips%20Blog

#8 Tag conditional Post Pertama

 <b:if cond='data:blog.isFirstPost'>
....Elemen Disini....
</b:if>

condition isFirstPost adalah gabungan dari homepageUrl, searchQuery, searchLabel dan archive. Jadi, objek apapun yang dibungkus denga tag cond isFirstPost maka, objek tersebut hanya akan tampil pada Halaman Utama, Halaman Label, Halaman Pencarian dan Halaman Arsip saja. Ini sangat berguna jika sobat tidak ingin menampilkan sesuatu misalnya widget di Halaman Statis sekaligus Postingan Blog.

#9 Tag conditional Index

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
....Elemen Disini....
</b:if>

Tag cond Index hampir sama dengan isFirstPost sebelumnya, dengan Tag ini sobat dapat menampilkan atau menyembunyikan widget di Halaman Utama, Halaman Label dan Halaman Pencarian saja. Perintah tag diatas adalah apapun yang dibungkus oleh tag conditional index maka hanya akan tampil pada Homepage, Halaman Label dan Halaman Pencarian Saja, jika ingin menyembunyikan apapun dari ke tiga Halaman tersebut, sobat hanya perlu mengganti == menjadi != seperti yang sudah saya jelaskan sebelumnya.

#10 Tag conditional Error Page

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
....Elemen Disini....
</b:if>

conditional tag diatas memerintahkan untuk menampilkan apapun yang dibungkus oleh tag tersebut pada Halaman Error, Halaman error adalah dimana halaman yang tidak terdapat sebuah artikel (missing page) atau sering dikenal dengan error 404.

#11 Tag conditional Halaman Tertentu

<b:if cond='data:blog.pageType == &quot;PASTE URL DISINI&quot;'>
....Elemen Disini....
</b:if> 

Jika sobat ingin menampilkan sebuah objek contohnya widget hanya pada halaman/artikel tertentu saja, silahkan gunakan tag conditional ini, sobat dapat menentukan Halaman manapun dengan mengganti PASTE URL DISINI dengan Url halaman yang sobat tentukan.

#12 Tag conditional Mobile

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
....Elemen Disini....
</b:if>

Tag condition yang satu ini akan menampilkan objek apapun yang dibungkus hanya tampil pada versi mobile, jika ingin sebaliknya (menyembunyikan objek apapun pada versi mobile) sobat dapat mengganti true menjadi false, hal ini sangat berguna, contohnya pada template yang saya gunakan ini, tombol back to top menutupi beberapa tulisan di bagian footer pada versi mobile, maka saya menyembunyikanya pada versi mobile.

Sebelumnya sudah saya jelaskan dan saya beri contoh, tapi akan saya katakan lagi untuk mengingatkan, perintah == adalah dimana objek/widget tersebut hanya ditampilkan pada halaman dengan kondisi yang ditentukan, sedangkan perintan != adalah dimana widget tersebut akan disembunyikan dari kondisi yang ditentukan.

Silahkan Kembali Keatas untuk melihat lagi contoh dan cara kerja tag conditional.

Lanjutan: 2 Trik Mudah Menyembunyikan Widget Pada Halaman Tertentu Blog

Berakhir sudah artikel saya kali ini, semoga dapat bermanfaat buat sobat sekalian. Sampai jumpa.

Info4You Info4You Update Pada: February 09, 2017

Cara Membuat Box Untuk Menempatkan Kode Di Postingan

Membuat Box Untuk Menempatkan Kode HTML CSS atau JavaScript di sebuah postingan sebenarnya sobat dapat menggunakan tag pre, code, ataupun textarea inilah yang umum digunakan, namun default dari tag tersebut sangat sederhana karena hanya berupa sebuah pewarna background, atau tidak ada background sama sekali.

Nah, apa yang akan kita pelajari adalah membuat box untuk menempatkan kode dipostingan dengan menggunakan tag <div> saja, dan yang perlu kita tambahkan hanyalah sebuah class, tentu saja class ini akan kita buat manual dengan properti CSS.

Jika sobat sudah siap, silahkan siapkan Notepad atau sejenis nya, atau sobat bisa langsung masuk ke Edit HTML jika dari blogger (bisa ditulis sebelum </head> atau sebelum ]]></b:skin>).

Cara Membuat Box Sederhana Untuk Menempatkan Kode Di Postingan Dengan Tag Div

Perlu diketahui, untuk membuat sebuah class didalam template, kita menggunakan titik (.) diawal (sebelum nama class). Jadi, silahkan sobat tentukan masing-masing dari nama tersebut, yang mudah diingat saja, sebagai contoh disini saya akan memberikan nama class nya dengan untukkode. Maka, penulisan nya akan menjadi .untukkode { } didalam kurung tersebut lah kita akan memberikan properti CSS, silahkan lihat contoh paling sederhana dibawah ini.

<style>
.untukkode {
  width: 100%;
  background: whitesmoke;
  margin: 10px 0 10px 0;
  padding: 8px 12px 15px 6px;
  word-wrap: break-word;
}
</style>

Dengan kode CSS diatas, tampilan box nya akan seperti diatas itu, silahkan dicoba-coba untuk mengganti value dari properti nya.

Keterangan: Silahkan sobat ganti background nya dengan warna latar sesuai selera, untuk margin dan padding adalah untuk menentukan jarak antar objek, dan antar konten ke objek 10px 0 10px 0 atau 8px 12px 15px 6px adalah untuk menentukan jarak atas kanan bawah kiri . Untuk lebih mengenal margin dan padding lebih lanjut dan bagaimana cara kerjanya, sobat dapat mengunjungi artikel saya

Mengenal Properti CSS Margin, Padding, Color, Background, Border dan Penerapanya .

Untuk width tersebut tidak perlu diganti, karena 100% adalah untuk mengatur agar box nya menjadi pas dengan ukuran lebar badan postingan, dan ini juga berguna untuk menyesuaikan ukuran jika template yang sobat gunakan adalah responsive, berbeda jika sobat menggunakan pixel (px) maka ukuran box tidak akan dapat menyesuaikan dengan tampilan resolusi yang lebih kecil. Sedangkan untuk word-wrap: break-word berfungsi untuk membatasi teks yang berada didalam tag div nantinya agar teks tidak keluar dari box div yang kita beri class ini.

Lalu untuk menerapkanya pada postingan, ketikkan manual dalam mode HTML bukan compose sebagai berikut.

<div class="untukkode">Konten (Teks / Gambar / Video / Apapun) Disini</div>

Contoh diatas hanyalah contoh yang benar-benar sangat sederhana, sobat dapat mengembangkan nya dengan menambahkan border, shadow, dan lain-lain.

Baiklah, kita akan mengembangkan box sederhana sebelumnya, menjadi terlihat cukup menarik dengan menambahkan CSS dan CSS3 lainya.

Final - Cara Membuat Box Yang Menarik Untuk Menempatkan Kode Di Postingan Blog

Dari CSS sebelumnya, kita akan menambahkan class baru juga, jadi yang akan kita buat adalah double box. Box pertama untuk pemanis diluar, dan box kedua untuk menempatkan kode (teks) nya.
Sebagai contoh, disini saya membuat class baru dengan nama boxdalam. Jadi, kita memiliki 2 class yaitu untukkode dan boxdalam.

CSS

<style>
.untukkode {
box-shadow: 0 0 2px #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
background: whitesmoke; }

.untukkode:hover {
box-shadow: 1px 1px 4px #000;
}

.boxdalam {
background: white;
border-left: 4px solid green;
margin: 14px 0 14px 18px;
padding: 2px 12px 2px 12px;
word-wrap: break-word; }

.boxdalam:hover {
background: whitesmoke;
transition: 1s;
}
</style>

Keterangan: hover adalah sebuah perintah dimana saat cursor mengarah ke objek, maka properti akan diakifkan, Latar belakang warna kuning tersebut adalah kode dari CSS3, sebelumnya sudah pernah saya bahas pada artikel lain dengan lengkap tentang box shadow dan transitions, silahkan nanti dibaca

Cara Membuat Efek Shadow dan Transitions Pada Teks atau Box

Jika ingin mengganti warna pembatas sebelah kiri, atau kurang besar pembatasnya, silahkan di ganti value pada border-left: 4px solid green 4px adalah ukuran (tebalnya) dan green adalah warna nya. Untuk warna latar belakang, silahkan diganti pada properti background, jika sobat bingung tentang warna-warna HTML, silahkan ke color-hex.com untuk melihat warna yang dapat digunakan, contoh #000 untuk hitam, #FFF untuk putih, dan masih banyak lagi. Untuk keterangan properti lain, sepertinya sudah saya bahas pada keterangan pertama tadi, Cara menerapkan CSS tersebut ke postingan sama dengan yang telah kita bahas sebelumnya, sobat hanya perlu membuat tag div pada mode HTML didalam postingan. Berikut penampakanya.

HTML

<div class="untukkode">
<div class="boxdalam">
Konten (Teks / kode / gambar / video / apapun) Disini
</div>
</div>

Mudah bukan? sobat dapat mendesain ulang CSS tersebut, buatlah jadi lebih menarik dan sesuaikan dengan template, selamat mencoba. Jika ada yang kurang jelas, silahkan berkomentar. Semoga artikel kali ini dapat bermanfaat. Sampai jumpa.

Info4You Info4You Update Pada: February 08, 2017

Mengatasi Masalah Postingan Tidak Tampil Semua Di Homepage (Halaman Depan) Blog

Menampilkan artikel terbaru dihalaman depan blog adalah hal yang penting, tapi masalah yang sering kita hadapi adalah postingan hanya tampil satu atau tidak sesuai dengan jumlah yang telah kita tentukan pada halaman depan blog tersebut. Saya pernah mengalami ini, artikel saya yang sudah lumayan banyak, namun dihalaman depan atau homepage blog hanya tampil 2 postingan, saya sempat panik dan berpikir ada yang ngambil, namun saya langsung istighfar dan pikiran jahat tersebut dapat saya tepis, karena berpikir ini blog belum genap 1 bulan dan saya juga tidak pernah buat masalah dengan orang lain ataupun hacker, saya coba mencari pencerahan dari mbah gugle dengan kata kunci postingan saya hilang namun yang muncul kebanyakan membahas postingan hilang dari SERP, semakin kuatlah dugaan saya sebelumnya, mungkin hanya saya yang mengalami hal ini dan bahwa postingan di homepage saya ada yang ambil, namun begitu tetap dapat saya tepis pikiran jahat tersebut.

Info4You Info4You Update Pada: February 05, 2017

Cara Membuat Nav Menu Atas Responsive Sederhana

Cara membuat menu diatas header blog itulah yang akan kita bahas, umumnya menu navigasi diatas header dipakai untuk memudahkan pengunjung dalam menemukan informasi tentang blog, atau juga kontak, dan lain sebagainya, tidak sedikit template yang menggunakan dua navigasi menu, diatas header dan dibawah header. Jika tempalte sobat tidak memiliki navigasi menu atas, silahkan gunakan kode yang telah saya buat dibawah ini.

Sumber kode CSS dan JavaScriptnya saya dapat dari w3school, namun telah saya desain ulang, mulai dari mengganti warna latar, memberi border, shadow, dan lain-lain. Jadi, silahkan sobat desain ulang juga untuk menyesuaikannya dengan template masing-masing, karena tidak lucu kan jika template sobat adalah Dark namun menggunakan menutop light alias keputih-putihan. Disana sudah saya tambahkan keteranganya juga, jadi akan mudah dimengerti kegunaan dari CSS tersebut.

Berikut adalah tampilan Nav Menu Responsive.

Info4You Info4You Update Pada: February 03, 2017

Cara Membuat Efek Shadow dan Transitions Pada Teks atau Box

Membuat Shadow Effect dan Transitions Effect ternyata cukup mudah, kita hanya perlu melakukan pengembangan pada kode CSS nya saja dan menambahkan kode baru dari CSS3. Apakah sobat pernah melihat sebuah tombol atau teks yang memiliki efek shadow? atau sebuah gambar dipostingan yang memiliki efek bayangan pada pembatas-pembatasnya? atau juga pernah melihat saat cursor mouse diarahkan ke suatu box, maka box tersebut akan membersar secara perlahan?Sekarang kita akan mencoba untuk membuat semua itu.

Sebagai contoh, jika dulu saya ingin membuat sub judul yang terlihat keren, saya menggunakan gambar yang dibuat dari photoshop, atau sebuah tombol (button) yang mentereng pasti juga menggunakan gambar yang dibuat dari photoshop atau sejenisnya. Sekarang kita tidak perlu lagi melakukan hal tersebut. karena sobat akan bisa membuatnya sendiri hanya dengan menambahkan beberapa kode didalam CSS, dengan hasil seperti dibawah ini.

Kita coba dulu untuk memberi shadow pada sebuah teks, misalnya saya ingin membuat sub judul pada postingan dengan efek shadow, seperti dibawah ini.

Mari kita coba buat sebuah Class saya beri contoh akan membuat class dengan nama .subjudul .

CSS

.subjudul {
  display: block;
    font-size: 25px;
    margin: 10px 0 10px 0;
    text-shadow: 1px 1px 3px red;
}

HTML

<span class="subjudul">Contoh Sub Judul Dengan Efek Shadow</span>

Output

Contoh Sub Judul Dengan Efek Shadow

Silahkan sobat bereksperimen, ganti font-size sesuai selera, ganti warna pada text-shadow sesuai selera, disana saya buat red jika ingin mengganti warna teks nya, silahkan di tambah properti baru didalam CSS nya yaitu color contoh color: blue; baiklah, kita akan lanjut ke yang lain.

Cara Membuat Efek Box Shadow

Sekarang kita akan coba membuat box shadow, mari kita buat class baru, beri nama sesuai selera, misal saya ingin membuat sebuah box shadow untuk button dan diberi nama tombolku , berikut CSS, HTML serta Output yang akan dihasilkan.

CSS

.tombolku {
    background-color: blue;
    border: 1px solid red;
    color: white;
    padding: 6px 20px;
    text-align: center;
    font-size: 20px;
    margin: 4px 2px;
    box-shadow: 3px 3px 5px #333; }

HTML

<button class="tombolku">Ini Tombol</button>

Output

Silahkan dicoba-coba untuk mengganti background, border, warna teks, teks size, dan juga box shadow nya.

Cara Membuat Efek Transitions

Mungkin sudah banyak dari sobat yang tau apa itu transition effects (efek transisi), transition adalah jenis dari CSS3 sama dengan efek shadow, bagaimana bentuk efek transition itu, dapat sobat demo dibawah ini, silahkan arahkan cursor ke kotak yang saya buat ini.

Cursor Kesini / Tap Disini (pengguna mobile)

Baiklah, sekarang kita akan membuat seperti yang diatas terlebih dahulu. Saya berikan contoh lagi akan membuat sebuah class dengan nama .transisiku , yang sobat perlukan selanjutnya hanya menambahkan kode CSS transition, dapat sobat lihat dibawah kode lengkap yang saya gunakan untuk membuat seperti diatas barusan.

CSS

.transisiku {
    width: 100px;
    height: auto;
    text-align: center;
    background: red;
    transition: width 2s linear 0.5s;
}

.transisiku:hover {
    width: 300px; }

HTML

<div class="transisiku">Cursor Kesini / Tap Disini (pengguna mobile)</div>

Output

Cursor Kesini / Tap Disini (pengguna mobile)

Keterangan: transition: width 2s artinya adalah saat objek tersebut ber-transisi akan memakan waktu 2 detik, sedangkan linear 0.5s adalah waktu yang dibutuhkan saat hendak ber-transisi, jadi jika sobat ingin transisi nya tidak delay saat cursor mengarah ke objek, silahkan di hapus properti linear nya.

Diatas adalah contoh sederhananya saja, karena transisi dapat sobat kembangkan untuk macam-macam kebutuhkan, misalnya menjadi sebuah efek untuk navmenu atau input box, sebagai contoh, kita buat transisi untuk sebuah kotak input search box atau kotak pencarian, kita buat dulu class contoh saya beri nama .box-pencarian

CSS

.box-pencarian {
width: 100px;
transition: width 1s;
}

.box-pencarian:focus {
width: 300px;
}

HTML

Cari: <input class="box-pencarian" />

Output

Cari:

Keterangan nya sama dengan yang sebelumnya, jadi tidak perlu saya jelaskan lagi ya.

Sepertinya hanya itu yang dapat saya sampaikan. Namun, sebelum saya tutup, bagaimana jika kita coba menggabungkan semua yang telah kita bahas diatas untuk diterapkan pada sebuah gambar didalam postingan, kita dapat memberi efek bayangan serta transition.

Cara Membuat Efek Transform dan Transition Pada Gambar Postingan

Baiklah untuk yang terakhir ini, kita tetap menggunakan class. Mengapa saya selalu menggunakan class, karena jika saya langsung memberikan kode CSS ke elemen ( <div> / <span> / <img> atau yang lainya) maka itu akan mempengauri semua yang ada di dalam postingan yang menggunakan tag tersebut. Jadi, akan lebih baik jika menggunakan class karena dapat kita atur objek mana yang akan diberikan efek.

Disini contohnya saya memberikan nama class .efekgambar nama class dapat sobat tentukan sesuka hati, yang penting tidak terdapat simbol atau angka diawal nama, misalnya .8efekgambar nama class ini tidak dapat di terima, sobat boleh menggunakan angka untuk penamaan class, namun tempatkan angka tersebut di tengah atau diakhir nama, seperti yang sudah saya jelaskan pada postingan sebelumnya yang berjudul Mengenal Properti Margin, Padding, Border, Color dan Backround Pada CSS Serta Penerapanya

Berikut adalah kode CSS lengkap, serta penerapanya pada HTML.

CSS

.efekgambar{
border: 1px solid #ccc;
box-shadow: 0 0 2px;
transition: all 0.5s;   /* atau pindahkan ke img:hover dan hasil nya akan berbeda*/
}

.efekgambar:hover {
border: 1px solid #333 !important;
box-shadow: 2px 2px 5px;
transform: scale(1.1);   /* properti tambahan: atur scale sesuai kebutuhan */
}

HTML

<img class="efekgambar" src="https://lh3.googleusercontent.com/-HPlGvkscQ_s/WJGBr_ilcOI/AAAAAAAAAOU/Pn7HxLyQNJAAP2oOLwWRImVKowu2OljZACEw/w140-h140-p/contact-form-image.jpg" />

Output

Silahkan di Bereksperimen dan dikembangkan sendiri apa yang telah kira bahas diatas, semoga artikel kali ini dapat membantu sobat sekalian, jika ada yang ingin ditanyakan, silahkan jangan sungkan.

sumber referensi : w3schools.com

Info4You Info4You Update Pada: February 01, 2017