From Galeri Template

Latest Posts

Cara Memasang Posting Terbaru Fast Loading di Sidebar Blog

Cara Memasang Posting Terbaru Fast Loading di Sidebar Blog
Cara Memasang Posting Terbaru (Recent Post) Fast Loading di Sidebar Blog - Memunculkan Daftar Judul Tulisan Terbaru.

MELENGKAPI dua postingan sebelumnya tentang widget recent post, Mengatasi Judul Widget Sidebar yang Suka Hilang dan Cara Pasang Posting Terbaru di Sidebar Blog, berikut ini kode lain yang juga memunculkan tulisan terbaru.

Selain itu, tutorial kali ini dilengkapi dengan cara menampilkan recent post atau lates post per label (daftar tulisan berdasarkan label), selain Fast Loading.

Cara Pasang Recent Posts

1. Theme > Edit HTM:L
2. Copas kode berikut ini di atas kode </head> atau </body>

<script type="text/javascript">
 //<![CDATA[
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
//]]>
</script>

3. Save!
4. Sekarang klik Layout > Add a Gadget > pilih HTML/JavaScript
5. Copas kode berikut ini

<ul>
<script type="text/javascript">var numposts = 5;var standardstyling = true;</script><script type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

CARA ALTERNATIF: Lebih Mudah

Anda juga bisa pasang kode tersebut sekaligus tanpa masuk ke template.
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode berikut ini

<script type="text/javascript">
 //<![CDATA[
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
//]]>
</script>
<ul>
<script type="text/javascript">var numposts = 5;var standardstyling = true;</script><script type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

3. Save!


Cara Pasang Recent Posts Per Kategori/Label

Cara memasang recent post per label sama dengan cara di atas. Namun, kodenya hanya diubah sedikit, yaitu penambahan nama label di bagian /feeds/posts/default menjadi

/feeds/posts/default/-/NamaLabel

Misalnya:

/feeds/posts/default/-/Blogging (Jika Labelnya satu Kata)
/feeds/posts/default/-/Tips%20SEO (Jika Nama Labelnya Dua Kata)
/feeds/posts/default/-/Tips%20SEO%20Blog {Jika Nama Labelnya Tiga Kata)

Demikian Cara Memasang Posting Terbaru (Recent Post) Fast Loading di Sidebar Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger

Cara Membuat Tombol Kembali ke Atas
Cara Memasang, Menampilkan, atau Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger.

DI blog ini sudah banyak tutorial cara memasang tombol kembali ke atas (Back to Top Button), termasuk Cara Memasang Back to Top untuk Blogger Ringan Responsive.

Kali ini kembali CB share tentang cara memasang kode tombol kembali ke atas yang lebih oke, ringan, responsive, menggunakan Font Awesome.

Demonya bisa dilihat di Code Pen yang menjadi sumber kode Back to Top Button for blogger blog ini.

Tombol ini menjadikan blog kita ramah pengguna (user friendly) dan merupakan trend tambilan website masa kini. Back to Top Button ini memudahkan pengunjunh kembali ke halaman teratas blog dalam satu klik atau satu tap.

Desain tampilannya persis seperti gambar ilustrasi di postingan ini.

Cara Memasang Tombol Kembali ke Atas (Back to Top Button)

1. Klik Theme/Tema > Edit HTML
2. Masukkan (Copas) tiga kode Tombol Kembali ke Atas untuk Blogger berikut ini.

KODE CSS:
Simpan di atas ]]></b:skin>

#return-to-top{position:fixed;bottom:20px;right:20px;background:#000;background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all .3s linear;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}

Kode JavaScrip Tombol "Kembali ke Atas"
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
 $(window).resize(function () {
  var w = $(window).width();
  if (w > 800 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
//]]>
</script>

KODE HTML Back to Top Button
Simpan di atas kode </body>

<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>

See the Pen Return to Top Arrow by rdallaire (@rdallaire) on CodePen.


Demikian Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

Membuat Navigasi Menu Tetap Muncul
CARA Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah (Sticky Navigation Bar) sudah pernah CB share di posting sebelumnya: Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali kode yang membuat menu blog Anda melayang, floating, sticky, atau tetap muncul saat halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi trend desain blogger masa kini dan masa depan. 

Sticky Menu ini ramah mengguna, user friendly, karena memudahkan pengguna untuk membuka link ke konten blog yang lain setelah selesai membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan membuat navigasi menu baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.


Cara Membuat Navigasi Menu Tetap Muncul 

KODE CSS

1. Tema > Edit HTML 
2. Simpan kode berikut ini di atas kode ]]></b:skin>

Atau bisa juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas kode berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:
Simpan kode berikut ini di atas kode </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

KODE HTML
"Bungkus" kode navigasi menu blogger Anda dengan kode seperti di bawah ini:

<sticknav> 

Kode HTML Navigasi Menu Anda di Sini

</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=' dst hingga </nav> atau <div id=' dts.. hingga </div>

KODE JAVASCRIPT
Simpan di atas kode </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke kode jQuery.

Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

Cara Mempercantik Subjudul Postingan Blog (Subheading H3)
Cara Mempercantik Subjudul Postingan Blog - Styling Subheading h3

SUBJUDUL atau subheading adalah bagian dari desain tampilan postingan teks agar lebih user friendly, juga membantu meningkatkan SEO Posting Blog --dengan memasukkan kata kunci.

Mempercantik tampilan subheading h3 ini mirip dengan mempercantik judul widget di sidebar blog.

Salah seorang blog ini bertanya tentang cara mempercantik  Subjudul Postingan Blog (Subheading H3).

"Bagaimana cara membuat garis putus-putus pada sub judul "Posting Blog User Friendly" di artikel ini ya?"

Pertanyaannya di posting Cara Menulis Posting Blog yang Baik - User Friendly sudah dijawab sebagai berikut:

<style>
.post h3 {border-bottom:1px dashed #ddd}
.post-body h3 {border-bottom:1px dashed #ddd}
</style>

Simpan di atas kode </head>. Nanti subjudulnya pake subheading

 subheading

Ada yang kurang, lengkapnya, jika tampilan subjudul (subheading) h3 seperti blog ini, maka kodenya sebagai berikut:

<style>
.post h3, .post-body h3 {
    padding: 10px 0;
    color: #444;
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
    font-weight: 700;
    margin: 15px 0;
    font-size: 18px;
}
</style>

Cara Mempercantik Subjudul Postingan Blog (Subheading H3)

Sebagai alternatif, CB share postingan dari MBT tentang  how to create some Sub-heading styles for blogger berikut ini.

1. Theme/Tema > Edit HTML
2. Cari kode ]]></b:skin>
3. Di atas kode tersebut, copas salah satu kode CSS berikut ini.

Subheading H3 Style No.1- Knife Style with Shadow!

Subheading H3 Style No.1- Knife Style with Shadow!

CSS CODE:

.post h3 { border: 1px dashed #C7C7C7; padding: 3px; box-shadow: 2px 2px 5px; padding-left: 10px; margin-bottom: 7px; border-radius: 10px; border-bottom-color: #000; background: rgba(218, 218, 218, 0.04); border-bottom-right-radius: 100px; }

Style No-2 Black Theme with FontAwesome

Style No-2 Black Theme with FontAwesome

CSS CODE:
.post h3 { padding: 3px; text-shadow: -2px -1px 1px #060606; box-shadow: -3px 2px 3px #000; padding-left: 10px; margin-bottom: 7px; background: #303030; color: #F7F7F7; } .post h3:before { font-family: FontAwesome; position: relative; content: '\f054'; font-size: 17px; padding-right: 10px; }

Style No. 3 White Theme with Font Awesome

Style No. 3 White Theme with Font Awesome

CSS CODE:

.post h3 { padding: 3px; text-shadow: -1px -1px 0px #000000; box-shadow: -2px 2px 3px #000; padding-left: 10px; margin-bottom: 7px; } .post h3:before { font-family: FontAwesome; position: relative; content: '\f02d'; text-shadow: 0px 0px 0px #000; color: #000; font-size: 17px; padding-right: 10px; }

Style No. 4- Playing With Some Gradient!

Style No. 4- Playing With Some Gradient!

CSS CODE:

.post h3{ padding: 3px; padding-left: 10px; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-color: #FEBD17; border-radius: 9px; box-shadow: 2px 2px 2px; border: #000 1px solid; } .post h3:before { font-family: FontAwesome; position: relative; content: '\f061'; font-size: 17px; padding-right: 10px; }

Tampilan Subjudul h3 Style No.5 

Style No.5- By Nafees

CDD CODE:

.post h3 { margin: 0px 0px 10px; padding: 10px; background-color: #00ABC5; box-shadow: 0px 3px 0px #4ACCDF; color: #FFF; font-size: 16px; line-height: 16px; font-family: "Bree Serif",serif; font-weight: normal; text-decoration: none; text-transform: uppercase; }

Style No. 6 Shadow & Background Mix

Style No. 6 Shadow & Background Mix

CSS CODE:

.post h3 { background: transparent url("http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg") repeat-x scroll 0px 0px; color: #FFF; font-size: 20px; font-weight: 200; letter-spacing: 0px; font-family: fantasy; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 1px 6px 3px #000; padding: 10px 2px 10px 10px; text-shadow: 0px 1px #000; text-transform: uppercase; }

Bonus
Jika tidak ada salah satu tampilan subjudul h3 di atas yang cocok, bisa lihat pula di Blogger Spice. Salah satunya begini:

Subjudul Postingan Blog (Subheading H3)

KODE CSS:

.post h3{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #05A8FC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
  border-left:10px solid #FC2B2C;
}

Itu dia Cara Mempercantik Subjudul Postingan Blog (Subheading H3) dengan beberapa alternatif tampilan. Jika hanya akan memperbesar kepunyaa, eh... memperbesar hurufnya saja, maka tinggal cari kode h3 dan font-size-nya diubah. 

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

Top 10 Situs Penyedia Template Blogger Gratis SEO Friendly Terbaru

Top 10 Situs Penyedia Template Blogger Gratis
Top 10 Situs Penyedia Template Blogger Gratis SEO Friendly Terbaru. Download di blog resmi desainernya.

BANYAK desainer template menyediakan template atau tema blog (blogger theme), baik gratis maupun berbayar (premium).

Banyak juga blogger yang mengoleksi template, membuat blog khusus download template.

Blogger niche blog koleksi template yang rajin, mereka download dulu template gratisnya, lalu diedit dengan menambahkan injeksi atau sisipan link blognya di bagian footer, lalu diupload ulang ke situs penyimpanan file seperti Box, Media Fire, atau Google Drive.

Jika ingin aman dari injeksi link tambahan tersebut, selalulah download dari blog resmi desainernya.

Postingan ini update dari posting sebelumnya: Top 5 Situs Penyedia Template Blogger

Top 10 Situs Penyedia Template Blogger Gratis

Berikut ini Daftar Website Resmi Penyedia Template Blogger Gratis. Mohon maaf, CB nomor satu ya. Masak menomorsekiankan blog sendiri :)

  1. CB Blogger - Free Templates
  2. Mastemplates
  3. Templateism
  4. Bloggertheme9
  5. ThemeExpose
  6. Soratemplates
  7. Seoblogertemplates
  8. Templatesyard
  9. Bthemez
  10. Deluxtemplates

Itu dia Top 10 Situs Penyedia Template Blogger Gratis. Anda akan dibuat bingung memilihnya, sebgaimana Anda juga bingung memilih template di Galeri Template CB :)

Tips: Untuk download file template di blog resmi desainernya, klik link desainer di bagian footer blog demo, lalu klik menu Template di blog sang desainer, Anda akan menemukan postingannya dan link downloadnya yang resmi.

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

10 Rahasia Sukses Blogging dari Blogger Terbaik

10 Rahasia Sukses Blogging dari Blogger Terbaik
10 Rahasia Sukses Blogging dari Blogger Terbaik (Papan Atas).

SEBELUMNYA CB sudah berbagi tentang 7 Rahasia Sukses CB Blogger. Di poin ke-7 CB sebutkan rahasia sukses blogging dari para blogger papan atas sebagai salah satu sumber referensi menulis posting blog agar ramah mesin pencari (seo friendly).

Berikut ini CB sadur rahasia sukses blogging dari para blogger papan atas tersebut. Kita bisa menerapkan kunci sukses para blogger papan atas itu agar bisa sukses juga seperti mereka. Jika disarikan, intinya ada dua, yakni konten berkualitas dan link building.

Belajar dari blogger yang sudah sukses sangat penting, tapi bukan dengan cara copas postingannya, melainkan menerapkan atau meniru cara mereka membuat tulisan yang cepat dan mudah terindeks Google, sehingga muncul di halaman pertama hasil pencarian.

10 Rahasia Sukses Blogging dari Blogger Terbaik Dunia

Berikut ini 10 rahasia sukses blogging dari top blogger yang CB sadur dari Blogging Secrets form Top Blogs. Biar lebih mantap, silakan langsung buka sumbernya yang berbahasa Inggris. CB terjemahkan secara bebas plus tambahan dari CB sendiri.

1. Rahasia Link

Sertakan minimal satu link internal dan satu tautan eksternal di postingan. Link internal adalah tautan ke posting lain yang relevan --bukan ngelink ke halaman yang sedang dibuka. Contohnya seperti di alinea pertama postingan ini.

Tautan eksternal adalah link ke blog lain. Kita juga bisa membuat link ke Wikipedia atau situs populer lainnya. Contohnya seperti link sumber postingan ini yang disebutkan di bawah subjudul di atas.

Tautan internal tersebut sangat bagus untuk pengoptimalan mesin telusur (SEO) dan bisa membuat pengunjung berlama-lama membuka blog kita, sehingga bisa menaikkan jumlah halaman yang dibuka (pageviews).

Jadi, pastikan untuk menautkan ke entri lain di arsip blog Anda di awal posting blog. Selain itu, cobalah untuk menunda memasukkan tautan eksternal di entri blog Anda sampai setidaknya setelah paragraf pertama, dan jangan gunakan frase kata kunci di anchor text untuk tautan eksternal. Simpan frase kata kunci tersebut untuk tautan internal.

Hindari menggunakan terlalu banyak link di postingan blog atau blog Anda mungkin ditandai sebagai spam oleh mesin telusur seperti Google.

2. Rahasia Kata Kunci (Keywords)

Kata kunc yang dimaksud bukan keywords di meta tags dalam kode template, tapi kata kunci yang menjadi topik bahasan di postingan.

Blogger papan atas menempatkan kata kunci di judul postingan dan di awal tulisan --di kalimat pertama alinea pertama.

Pastikan Anda menggunakan kata kunci di awal posting Anda jika Anda bisa. Namun, hindari membuat posting Anda terdengar seperti daftar kata kunci. Kualitas posting Anda atau kalimat yang Anda susun seharusnya tidak memburuk saat Anda memasukkan kata kunci. 

Mengulang terlalu banyak kata kunci akan membuat postingan blog Anda dianggap sebagai spam. Bisa saja, sebuah blog atau web banyak mengulang kata kunci, sehingga kalimatnya jadi tidak enak dibaca, dan berhasil menempati peringkat atas halaman satu Google. Namun, lambat-laun blog Anda akan kena penalti dan masuk penjara Google Sandbox.

3. Rahasia Frekuensi Posting

Blog teratas mempublikasikan banyak konten. Kunjungi Mashable.com dan lihat berapa jumlah posting yang dipublikasikan per hari.

Kebanyakan blogger tidak mungkin menghasilkan jumlah konten itu setiap hari. Namun, semakin banyak konten yang Anda publikasikan setiap hari, semakin baik peluang blog Anda untuk tumbuh.

Terserah Anda untuk memutuskan berapa banyak konten yang dapat Anda realisasikan secara realistis di blog Anda setiap minggunya, namun lebih banyak konten biasanya setara dengan lebih banyak pertumbuhan.

4.  Rahasia sabar

Top blogger tahu bahwa kesuksesan tidak terjadi dalam semalam. Anda harus tetap dengan blog Anda, posting secara konsisten, dan bersiaplah untuk sabar dan gigih.

5. Rahasia Fokus

Penting untuk tetap fokus pada pertumbuhan blog Anda, termasuk fokus ke kualitas konten atau postingan blog.

Sangat bagus buat SEO jika Anda menyebarkan postingan blog di media sosial, seperti Twitter , Facebook , LinkedIn , dan sebagainya. Namun, kualitas konten dan aktivitas blog Anda tidak boleh menderita karena Anda telah melakukan diversifikasi kehadiran online Anda.

Pastikan blog Anda selalu menjadi fokus utama Anda, karena jika kualitas blog Anda memburuk, tidak ada yang mau mengunjungi tidak peduli berapa banyak Anda mempromosikannya di Twitter dan Facebook.

6. Rahasia Niche

Blog teratas atau blogger sukses, populer, dan ternama dimulai dengan fokus pada niche tertentu. Pilihlah niche Anda dan tetaplah dengan itu.

Seiring pertumbuhan blog Anda, mungkin ada peluang untuk memperluas niche Anda dan menulis tentang topik terkait di blog Anda, namun tujuan utama Anda adalah menyediakan konten yang terkait dengan niche Anda. Konsistensi sangat penting dalam membangun brand dan blog.

Baca Juga: Niche Blog vs General Blog untuk memahami pengertian niche dan cara memilihnya.

7. Rahasia Judul Postingan (Post Title)

Top blogger tahu bahwa judul posting blog atau judul tulisan yang hebat dapat membantu mengarahkan lalu lintas pencarian dan lalu lintas sosial ke blog mereka. Itulah sebabnya The Huffington Post menghabiskan banyak waktu dan usaha untuk melakukan A / B menguji judul posting blognya sampai tim tersebut dapat mengidentifikasi dalam hitungan detik judul mana yang paling mengarahkan lalu lintas dan langsung beralih ke judul itu.

Orang akan melihat judul posting blog Anda di Twitter, Facebook, RSS feed , dan banyak lagi. Anda perlu mempertimbangkan kata kunci, rasa ingin tahu, dan minat saat menulis judul posting blog.

Intinya, buatlah judul tulisan posting yang menarik, menimbulkan rasa ingin tahu, dan bermanfaat. Tapi jangan membuat judul yang menipu --dikenal dengan sebutan umpan klik (clickbait), misalnya menggunakan judul bombastis-sensasional: Wow! Ternyata! Inilah! Begini! Ini Dia! Anda Akan Terkejut! dan sejenisnya.

Jika judulnya berupa umpan klik, maka orang hanya akan sekali saja membuka blog Anda, selanjutnya blog Anda akan dicuekin dan dikenal sebagai blog penipu!

8. Rahasia Konten Asli

Alasan mengapa blog top atau blogger sukses sering menjadi pemberhentian pertama bagi orang yang mencari informasi di ceruk (niche) blog itu, karena blog tersebut secara konsisten mempublikasikan konten yang bagus.

Jangan copas! Jangan menyalin konten dari blog dan situs lain. Tidak apa-apa untuk membahas cerita yang sama dengan blog atau situs lain yang membicarakan atau membahasnya, namun postingan Anda harus unik, ada yang berbeda, tidak persis sama (copas).

Konten Copas bisa saja menempati posisi bagus di halaman Google, namun lambat-laun akan ketahuan sebagai konten salinan, misalnya dilaporkan oleh pemilik postingan aslinya.

9. Rahasia Kontributor

Top blog atau blogger sukses memiliki orang yang tepat menulis konten. Ada banyak blog di luar sana yang bagus, tapi blog teratas menonjol karena kontributornya sangat berpengalaman dan berpengetahuan luas dalam topik yang mereka tulis atau kepribadian mereka menular dan menghibur.

Pastikan orang yang tepat menulis blog Anda atau kesempatan Anda untuk sukses akan sangat terbatas.

Catatan: Poin 9 ini khusus buat blog yang diisi oleh lebih dari satu orang atau blog kelompok, atau juga blog pribadi yang menerima guest post atau memuat postingan blogger lain.

10. Rahasia Visual

Cara blog Anda terlihat memiliki efek signifikan dalam kesempatannya untuk sukses. Top blogger tahu ini, jadi mereka membuat panduan gaya untuk kontributor untuk diikuti.

Ini memastikan semua tulisan terlihat konsisten dalam desain dari judul ke penempatan gambar dan semua yang ada di antaranya.

Blog Anda perlu menarik secara visual , jadi gunakan gambar untuk memecah halaman teks berat dan mendukung topik posting blog.

Selain itu, gunakan video untuk menawarkan elemen pendengaran dan visual di blog Anda. Luangkan waktu mempelajari rahasis sukses blogging dari blogger ternama. Anda akan melihat semua trik ini digunakan untuk kesuksesan blog Anda.

Demikian 10 Rahasia Sukses Blogging dari Blogger Terbaik atau Blogger Papan Atas. Tidak disebutkan blog mana saja yang dikaji, namun dipastikan hasil studi terhadap blog yang mendominasi halaman hasil pencarian Google.

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

Pengertian dan Pentingnya Blog Mobile-Friendly

Pengertian dan Pentingnya Blog Mobile-Friendly
Pengertian dan Pentingnya Blog Mobile-Friendly -- Disukai Mesin Pencari Google dan Pengunjung.

Mobile is changing the world. Mobile sedang mengubah dunia. Demikian kata Google.

Saat ini, lanjut Google, setiap orang memiliki smartphone, terus berkomunikasi dan mencari informasi. Di banyak negara, jumlah smartphone telah melampaui jumlah komputer pribadi. 

Karenanya, memiliki situs web (blog) yang ramah seluler (mobile-friendly) merupakan hal penting untuk eksis di dunia online. "Having a mobile-friendly website has become a critical part of having an online presence," jelasnya.

Mayoritas pengguna yang datang ke situs Anda cenderung menggunakan perangkat seluler. 

Di Amerika Serikat, 94% orang yang punya ponsel cerdas (smartphone) mencari informasi lokal di ponsel mereka. 

Menariknya, 77% penelusuran seluler terjadi di rumah atau di tempat kerja, tempat di mana komputer desktop cenderung hadir. Artinya, meski ada komputer, laptop, atau netbook, kebanyakan orang justru mengunakan HP untuk mencari informasi.

Para blogger atau webmaster harus memastikan blog atau situs webnya sesuai dengan Pengalaman Pengguna (UX) tersebut --mudah diakses di perangkat seluler alias mobile-friendly.

Pengertian Mobile-Friendly

Mobile Friendly --Google menyebutnya "Ramah Seluler" dalam bahasa Indonesia-- adalah istilah bagi situs web atau blog yang mudah diakses dan cepat tampil di perangkat mobil (handphone/smartphone).

Pengertian Mobile-Friendly


"Saat membuat situs web di komputer desktop, ingat bahwa banyak di antara pengunjung Anda yang akan mengunjungi situs dari ponsel. Pastikan situs Anda ramah seluler (mobile-friendly), yaitu dapat dimuat dan ditampilkan dengan baik di perangkat seluler, sehingga pengunjung dapat memperoleh pengalaman terbaik," tulis Google.

Mobile-Friendly juga dikenal dengan istilah Responsive dan Adaptif. Para blogger lebih akrab dengan istilah Responsive, karena banyaknya Template Blog Responsive.


Pentingnya Blog Mobile-Friendly

Di atas sudah disebutkan pentingnya blog kita ramah seluler (mobile-friendly). Jika tidak, seperti disebutkan Elegant Theme: Responsive or Go Home!

Google bahkan sudah meluncurkan algoritma MobileGeddon pada 21 April 2015 yang mengutamakan blog atau website yang mobie-friendly.

Dikutip Tempo, jumlah pengunjung yang meninggalkan situs yang tidak ramah seluler semakin tinggi. Riset menunjukkan 74 persen pengguna cenderung lebih ingin kembali pada situs yang mobile-friendly.

 Pentingnya Blog Mobile-Friendly
credit: thewebsitedesigncompany.com


Google mengatakan, mobile-friendly  hanyalah satu dari 200 sinyal untuk mengevaluasi hasil pencarian terbaik. Ini tidak berarti bahwa situs yang tidak mobile-friendly akan hilang dari pencarian melalui seluler. 

Situs yang memiliki konten berkualitas tinggi tetapi tidak mobile-friendly, masih bisa berperingkat tinggi jika situs tersebut memiliki konten yang relevan untuk kueri pengguna.

Cara Menguji Blog Mobile-Friendly atau Tidak

Google menyediakan laman khusus untuk menguji blog kita apakah sudah mobile-friendly apa belum, yaitu Mobile-Friendly Test.

Kita tinggal buka dan masukkan alamat blog di kolom yang tersedia. Halaman tersebut akan menganalisis dan menampilkan hasilnya, seperti ini:

Pentingnya Blog Mobile-Friendly

Selain halaman yang disediakan Google, kita juga bisa menggunakan laman tes mobile-friendly lainnya, seperti:
  1. Am I Responsive
  2. Troy Labs Daum
Am I Responsive memunculkan hasil tes berupa tampilan desktop, tablet, dan HP. Di Troy lebih lengkap lagi, dari berbagai jenis ukuran HP ada. Coba saja cek blog Anda.

Jika blog Anda tidak mobile-friendly, segera Ganti Template Mobile-Friendly

Namun, jika Anda menggunakan template bawaan blogger, tinggal disetting saja, kecuali Template Bawaan Blogger Terbaru yang sudah otomatis mobile-friendly.

Demikian ulasan ringkas tentang Pengertian dan Pentingnya Blog Mobile-Friendly. Happy Blogging! (www.contohblog.com).*

Judul Widget Bawaan Blogger Suka Hilang

Judul Widget Bawaan Blogger Suka Hilang
Judul Widget Bawaan Blogger Suka Hilang, yaitu widget Posting Terbaru (Recent Post) yang menggunakan widget Feed. Bagaimana cara mengatasinya?

Demikian juga judul widget Feed dari Blog lain. Suka hilang juga.

Saat klik LAYOUT (TATA LETAK), muncul notifikasi "Beberapa pengaturan gadget mungkin tidak mempengaruhi tampilan tema Anda saat ini" atau --dalam bahasa Inggris-- "Some of the gadget settings might not affect the appearance of your current theme."

Terpaksa, lakukan edit dan kasih judul lagi. Muncul lagi tu Judul Widget. Tapi suka hilang lagi. Ada apa dengan Blogger?

Ada yang punya pengalaman? Soalnya, di Google Product Forum juga ada keluhan seperti di atas.

"I also get this message, 'Some of the gadget settings might not affect the appearance of your current theme' when I click on Layout which began the same time I was having page break issues..." tulisnya.

Tak ada jawaban. Why?

Lalu, bagaimana cara mengatasi judul widget yang hilang?

Gampang. Jangan gunakan widget Feeds bawaan blogger untuk menampilkan Posting Terbaru dan Feeds atau posting dari blog lain. Demonya ada di Footer dan Sidebar (Terbaru) di blog ini.

Mengatasi Judul Widget Feeds Bawaan Blogger Suka Hilang

1. Layout > Add a Gadget > pilih HLM/JavaScript
2. Masukkan Kode di bawah ini.
3. Kasih judul widget
4. Save!

KODE RECENT POSTS:

<!-- Recent Posts Start -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts -->

KODE RECENT POST PER LABEL

<!-- Recent Posts Start -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="/feeds/posts/summary/-/Label?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts -->

KODE FEEDS DARI BLOG LAIN:

<!-- Recent Posts Start -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://namablog.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts -->

KODE LAIN

Kode lain untuk Recent Posts:

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></scr" + "ipt>");
//]]>
</script>

Demikian cara mengatasi Judul Widget Bawaan Blogger Suka Hilang, khususnya widget Feeds untuk menampilkan Posting Terbaru, Recent Posts per Label/Kategori, dan Feeds dari Blog lain.

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

Contact Form

Name

Email *

Message *