From Galeri Template

Latest Posts

Kerugian Menggunakan Dropdown Menu

Kerugian Menggunakan Dropdown Menu
Kerugian Menggunakan Dropdown Menu. Solusinya: Gunakan Seminimal Mungkin dan Hindari JavaScript.

Menggunakan Dropdown Menu menjadi trend desain navigasi menu. Rasanya "gak kekinian" jika menu blog kita tidak menggunakan dropdown.

Bagaimana kaitan Menu Dropdown dengan SEO?

Kaitannya dengan SEO, Menu Dropdown tidak akan terindeks mesin pencari, karena ia tersembunyi, sedangan mesin telusur hanya mengindeks yang muncul atau tampak di halaman.

Menu Dropdown lebih terkait dengan pengalaman pengguna (user experience, UX). Jika terlalu berlebihan, banyak banget, maka akan memusingkan pengguna. Pembaca tidak suka dengan terlalu banyak pilihan di menu.

Menurut Webmastery Made Simple, Dropdown Menu, khususnya yang menggunakan Javascript, adalah ide buruk. "JavaScript + Menus = bad idea," tulisnya.

Alasannya:
  • The Google, Bing, Yahoo!, etc, search engine spiders visiting your website to make it searchable are not able to navigate across JavaScript-created menus. (That means AJAX too.) Basically, you're preventing Google from reading the content beyond the home page, so those pages will never appear in search results.
  • Many site visitors will have JavaScript disabled by default (mostly for security reasons). They will never see your submenus appear at all.

Mesin telusur Google, Bing, Yahoo !, dll, spider mesin telusur yang mengunjungi situs web Anda agar dapat ditelusuri tidak dapat menavigasi menu yang dibuat JavaScript. (Itu berarti AJAX juga.) 

Pada dasarnya, dengan menggunakan Dropdown Menu, Anda mencegah Google membaca konten di luar beranda, sehingga halaman tersebut tidak akan pernah muncul dalam hasil pencarian.

Banyak pengunjung situs akan menonaktifkan JavaScript secara default (sebagian besar untuk alasan keamanan). Mereka tidak akan pernah melihat submenu Anda muncul sama sekali.

Lalu, bagaimana solusinya?

Gunakan Dropdown Menu seperlunya saja. Mungkin hanya satu Dropdown Menu dan listnya jangan terlalu banyak. Sebaiknya gunakan Dropdown Menu CSS & HTML tanpa Javascript.

Demikian ulasan tentang Kerugian Menggunakan Dropdown Menu. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll
Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Melengkapi tips Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, kali ini CB share kode dan cara membuat widget sidebar tetap muncul, statis, saat halaman digeser ke bawah.

Istilahnya banyak: Static, Fixed, Sticky, dan Floating Sidebar Widget. Artinya sama: widget tetap muncul alias melayang saat halaman discroll ke bawah.

Langsung saja kita ke tutorial pemasangan kodenya sebagaimana dishare laman Making Different berikut ini.

1. Tema >  Edit HTML
2. Simpan kode berikut ini di atas kode </head>

<script type='text/javascript'>
/*<![CDATA[*/
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>

3. Copas kode berikut ini di atas kode </body> 

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickybar&quot;).sticky({topSpacing:0});
});
</script>

4. Simpan kode berikut ini di atas kode ]]></b:skin> 

#mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px;color:#474747;}

Save Template!

5. Pasang Static Sidebar Widget
  • Layout > Pilih Widget yang akan dijasikan tatis atau melayang
  • Klik "Edit"
  • Copy ID Widget nya di address bar.
Copy ID Widget


6. Kembali klik Template > Edit HTML
7. Press CTRL + F untuk menemukan Widget ID yang akan distatiskan.

Misalnya:

<b:widget id='HTML1' locked='false' title='Widget Title' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

8. Copas kode berikut ini di bawah kode <b:includable id=’main’>

<div id="mdstickybar">

9. Masukkan kode </div> setelah kode <data:content/>

Jadinya seperti ini:

<b:widget id='HTML1' locked='false' title='Widget Title' type='HTML'>
<b:includable id='main'>
<div id="mdstickybar">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Save!

Cara lain memasang Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll.

Kode CSS
Simpan di atas kode ]]></b:skin>

#sticky-sidebar{width:100%;max-width:300px}
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Kode JS
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID Widget yang akan distatiskan
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Save!

Demikian cara membuat Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll.

Susah? Mending gak usah pasang aja. Ojo neko-neko lah. Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll hanya akan memperlambat loading blog Anda. Apalagi kodenya jQuery.

Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome

Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome
Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome

BLOGGER tentu memiliki akun media sosial. Selain sebagai media pertemanan dan membangun jaringan (networking), media sosial juga berperan dalam meningkatkan SEO blog.

Media sosial termasuk salah satu pilar SEO.

Social Signal menjadi salah satu faktor pemeringkat Google di halaman hasil pencarian.

Berikut ini salah satu cara memasang link akun media sosial di sidebar blogger, yakni dengan menggunakan font awesome, sehingga lebih ringan. Ini tampilannya:

Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome

Desain tampilan lainnya bisa Anda lihat di Halaman Label Media Sosial.

Cara Memasang Link Media Sosial di Sidebar Blog

1. Layout > Add a Gadget 
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukka kode berikut ini:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

#fawesomeicons {text-align: center;margin-bottom:10px;}
#fawesomeicons a {background: #666;color: #fff;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;
margin: 0 1px 6px;}
#fawesomeicons a:hover{background: #hover-color;}
</style>
<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Linkedin" target="_blank" rel="nofollow"><i class="fa fa-linkedin"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>

Link ke kode Awesome Font yang berwarna merah tidak usah diikutkan jika di template blog Anda sudah ada.

Ganti URL_HERE dengan Url link akun media sosial Anda.

Save!

Demikian Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome. Desain tampilan lainnya bisa dicek di sumber. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Download Video Youtube, Facebook, Twitter, dan Instagram dengan Mudah

Cara Download Video Youtube, Facebook, Twitter, dan Instagram dengan Mudah
Cara Download Video Youtube, Facebook, Twitter, dan Instagram dengan Mudah.

SEKADAR menyimpan catatan tentang Cara Download Video Youtube, Facebook, Twitter, dan Instagram dll dengan mudah, cepat, dan tanpa harus install sofware.

Untuk apa download video? 

Unduh video utamanya untuk kita simpan dan bisa ditonton saat sedang offline.

Bagi Anda yang punya koneksi internet "lemot" atau "pas-pasan" (kuota terbatas), download video menjadi alternatif utama biar nontonya nyaman dan "fast loads".

File Video juga diperlukan jika kita ingin memperkaya postingan agar lebih SEO Friendly dengan Video. Baca: SEO Terbaru Utamakan Video.

Cara Download Video Youtube

Kita mulai dulu dengan cara download video Youtube. Ada tiga situs yang biasa digunakan untuk mendownload Video Youtube.

Yang paling sering digunakan Nomor 1. Ketiga situs video downloader di bawah ini bukan cuma bantu kita download video, tapi juga mengkonversinya (mengubah file video) menjadi MP3, MP4, atau 3GP.

Cara downloadnya mudah. Tinggal buka video yang mau didownload, lalu COPY LINK-nya yang ada di Address Bar, dan PASTE di kolom yang disediakan ketiga situs downloader video berikut ini:

1. Catch Video
2. Listen to Youtube
3. Save From 

Situs nomor 3 bahkan membantu kita download file dari situs-situs penyimpanan file terkemuka, seperti Rapid Share, File Factory, Vimeo, dll.

Selain ketiga situs tadi, masih banyak situs downloader video lainnya. CB simpan tiga ini buat memudahkan CB jika mau download video. Di-share di sini, siapa tahu ada yang belum tau :)

Cara Download Video Facebook

Sekarang car download video Facebook. Kita bisa gunakan
1. Pilih Video yang akan didownload
2. Klik kanan pada video yang Anda ingin download > Show Video URL

Cara Download Video Facebook

3. Copy URL video tersebut.
4. Buka Tab Baru
5. Paste URL yang dicopy tadi
6. Ubah URL dengan menambahkan huruf m di depan.

Contoh:
https://www.facebook.com/manchesterunited/videos/10155155870357746/
Ganti:
m.facebook.com/manchesterunited/videos/10155155870357746/
7. Klik Enter. Video akan tampil di versi mobile.
8. Putar Videonya!
9. Klik kanan pada video tersebut > klik Save video as

Beres!

Cara lain: Gunakan  Save From Net. Untuk Android, gunakan aplikasi Facebook Video Downloader.

Cara Download Video Twitter

1. Klik kanan > Copy Video Address.

Copy Video Address.


2. Bukal Save Video
3. Paste URL yang dicopy tadi ke dalam kolom yang tersedia.
4. Tekan tombol "Download".
5. Akan muncul video yang bisa dipilih.
6. Pilih "Save as" dari dalam menu -- ganti nama file sesuai yang diinginkan dan tekan enter.

Bagi pengguna ponsel Android, Anda bisa mengunduh video Twitter dengan menggunakan aplikasi Video Gif Downloader.

Cara Download Video Instagram 

1. Buka link video yang ingin Anda download
2. Copy link dari video tersebut yang ada di adress bar.

Copy link dari video
4. Masukkan link dari video Instagram tadi pada kolom video URL
5. Klik DreDown!
6. Tunggu beberapa saat. Akan muncul beberapa link. Klik pada Download as MP4 Video.

Download Video Instagram di Android: Gunakan Video Instagram Downloader

Anda punya referensi lain soal Cara Download Video Youtube, Facebook, Twitter, dan Instagram dengan mudah dan cepat? Please, share...!

Happy Video Downloading & Blogging (www.contohblog.com).*

Neo Johny Wuss - Template Blog SEO New Johny Wuss Versi Terbaru (V4) Gratis!

Neo Johny Wuss - Template Blog SEO New Johny Wuss Versi Terbaru (V4). Gratis. Free Download.

BANYAK yang menanyakan update terbaru template New Johny Wuss (NJW) Series. Mereka ingin yang ORI, asli, bukan NJW cloningan yang banyak beredar dan menambahkan nama NJW V4, V5, bahkan ada yang menamakan V7.

CB sudah membatasi NJW hanya sampai V3 saja. Makanya, template New Johny Wuss Versi 4 atau terbaru ini, CB namakan NEO JOHNWY WUSS saja. Masih gratis, free download, dengan SEO yang sudah dioptimalkan dengan SEO terbaru.

Neo Johny Wuss


Neo Johny Wuss

Neo Johny Wuss -- Template Blog SEO Friendly Responsive Terbaru New Johny Wuss Versi 4 Gratis Download. Release Date: 25 September 2017.

SEO Score for http://neojohnywuss.blogspot.co.id/
100 %
Congratulations!

Page is mobile-friendly
This page is easy to use on a mobile device

Page is mobile-friendly

Neo Johny Wuss - Template Blog SEO New Johny Wuss Versi Terbaru (V4) Gratis! Silakan download dan gunakan untuk meningkatkan jumlah pengunjung blog Anda.

PANDUAN SETTING
  • Tambahkan label Headline (dengan H besar) pada postingan yang akan ditampilkan di Slider atau Featured Posts halaman depan.
  • No More Support for Free Template. 

Good Luck & Happy Blogging! (www.contohblog.com).*

Sujud Syukur dan Cium Tangan Pemain Sepakbola, Apa Maknanya?

Sujud Syukur dan Cium Tangan - Kearifan Global Pesepakbola Muslim dan Kearifan Lokal Pemain Muda Indonesia.


Sujud Syukur Cium Tangan Sepakbola
SUJUD syukur usai mencetak gol menjadi pemandangan biasa di lapangan sepakbola. Pemain Muslim umumnya melakukan sujud syukur usai mencetak gol.

Tidak hanya para pemain Muslim Indonesia yang melakukannya, pemain Muslim di Liga Inggris dan Liga Eropa lainnya pun banyak yang melakukannya.

Misalnya, striker Liverpool Mohamed Salah (Mesir) biasa melakukannya. Demikian juga Arda Turan (Turki) di Barcelona.

Sujud syukur merupakan ekspresi rasa terima kasih kepada Allah SWT atas berkah gol yang terjadi.

PSSI bahkan pernah mewajibkan pemain Muslim melakukan selebrasi gol dengan sujud syukur.

Cium Tangan
Aksi cium tangan juga menjadi fenomena di kalangan pemain cilik Indonesia saat bertanding. Para pemain cilik Indonesia yang berlaga di ajang Danone Nations Cup (DNC) 2017, misalnya, biasa mencium tangan wasit sebagai penghormatan kepada orang yang lebih tua.

Aksi cium tangan pemain cilik Indonesia menuai pujian sebagai kearifan lokal Indonesia yang hormat dan santun kepada orang yang lebih tua.

Lucunya, pemain Afrika Selatan juga menirunya, tapi dengan mencium tangan pemain Indonesia, seperti pada gambar di bawah ini.




Jangan Hapus Postingan Blog, Alihkan Saja Linknya ke Tulisan Lain!

Jangan Hapus Postingan Blog
Jangan Hapus Postingan Blog, Alihkan Saja Linknya ke Tulisan Lain!

ANDA suka menghapus poting atau tulisan di blog Anda? Jangan lagi dan jangan pernah! Itu buruk buat blog Anda. Jangan pernah menghapus postingan blog.

Daripada dihapus, jauh lebih baik diperbarui, diaupdate, atau ganti isinya. Pertahankan permalinknya karena sudah terindeks Google dengan baik.

Silakan ketik "Don't delete your blog post" di Google. Anda akan menemukan banyak saran dari blogger luar sana, yang mengatakan jangan pernah menghapus posting blog.

Silakan cek:
Intinya, jangan menghapus postingan lama di blog karena itu tindakan bodoh dan merugikan blog Anda.

Solusinya? Itu tadi, update saja, atau kalo malas update, alihkan permalinknya ke postingan lain! 

Cara Mengalihkan Permalink (URL) Postingan Blog ke Tulisan Lain

Berikut ini cara mengalihkan url link posing blog ke tulisan yang lain.

Postingan ini sekaligus melengkapi tips sebelumnya tentang cara mengalihkan (riderect) blog lama ke blog baru alias mengganti nama blog tanpa kehilangan trafik.

Kali ini, bukan mengalihkan alamat blog, melainkan mengalihkan link postingan ke posting yang lain.

Cara ini juga bisa untuk mengalihkan posting lama yang terhapus ke postingan lain.

Ini Caranya

1. Klik Setting (Setelan) > Search preferences (Preferensi penelusuran).
2. Pada bagian Custom Redirect (Pengalihan Khusus) > klik  Edit.
3. Isi kolom yang tersedia.

Masukkan hanya bagian judul saja, alamat blog tidak dimasukkan. Misalnya:

Dari: 
https://namablog.blogspot.com/2017/08/template-blog-keren-seo-friendly.html

Ke:
https://namablog.blogspot.com/2017/08/koleksi-template-blog-keren-seo-friendly.html


Custom Redirect (Pengalihan Khusus)

Copas atau masukkan hanya bagian judul saja, dari: /tahun/bulan/judul-posting-html

Save! Simpan.

Demikian. Jadi, Jangan Hapus Postingan Blog, Alihkan Saja Linknya ke Tulisan Lain! Good Luck & Happy Blogging ! (www.contohblog.com).*

Mau Ngeblog Tapi Gak Bisa Nulis? Ini Solusinya!

Mau Ngeblog Tapi Gak Bisa Nulis? Ini Solusinya!
Solusi bagi blogger yang tidak bisa menulis atau malas menulis.

BLOGGING sangat menantang. Selain bisa "eksis" dan ekspresi diri, nge-blog juga bisa menghasilkan uang, misalnya dengan menjadi penayang iklan Google (AdSense Publisher).

Menghasilkan uang dari blog disebut make money blogging. Google menyebutnya "monetisasi".

Karena blog banyak manfaatnya, maka banyak orang --jika sudah sadar pentingnya blog-- membuat blog. Cara membuat blog itu mudah.

Yang susah, mengisinya. Mau diisi apaan kalo blog sudah jadi?

Banyak blogger baru yang MAIN COPAS tulisan blog orang lain. Mending kalo menyebutkan sumbernya. Ini mah copas begitu saja.

Tentu saja, copas tanpa menyebutkan sumbernya itu ilegal. Akan menjadi masalah besar jika blognya suatu saat diterima jadi penayang iklan Google AdSense.


Buat Blog Foto atau Video

Mau Ngeblog Tapi Gak Bisa Nulis? Ini Solusinya!
Kembali ke soal mau ngeblog, mau membuat blog, tapi gak bisa menulis. Solusinya adalah isi saja blog Anda dengan foto, gambar, atau video.

Ubah blog Anda menjadi Phlog alias Photo Log atau Photography Blog, yakni Blog Foto. Gunakan template blog foto.

HP atau SmatPhone Anda pasti punya fitur kamera. Jepret saja apa yang menurut Anda menarik, lalu upload, dan kasih caption atau keterangan.

Selain blog foto, jika Anda merasa tidak bisa menulis, atau "malas" mengisi blog dengan tulisan, maka buatlah Vlog, Video Blog, atau Blog Video.

Caranya, gunakan template blog video. Gunakan fitur video di HP Anda, lalu upload ke Youtube, dan pasang kode tempel (embed) di blog Anda. Tambahkan keterangan tentang video yang diunggah.

Itu dia solusi bagi blogger yang tidak bisa menulis atau malas menulis.

Sebenarnya, semua orang bisa menulis. Mulai saja dengan menuliskan pengalaman. Anda tentu pernah berwisata ke mana gitu, nah... tulisa saja perjalanan dan kesan Anda di objek wisata tersebut.

Setiap orang pasti punya pengalaman. Tulis saja pengalaman itu. Happy Blogging! (www.contohblog.com).*

Contact Form

Name

Email *

Message *