From Galeri Template

Latest Posts

Untuk Pemula: Blogger Itu Seperti Petani, Ngeblog Ibarat Bertani

Untuk Pemula: Blogger Itu Seperti Petani, Ngeblog Ibarat Bertani
POSTING ini ditujukan untuk newbie blogger, pemula, yang baru ngeblog. Ketahuilah, blogger itu seperti petani. Ngeblog itu ibarat bertani. Bertani dan Blogging butuh proses, kesabaran, dan keuletan sebelum panen, menuai hasil.

Petani, misalnya petani padi, tidak ujug-ujug panen saat punya sawah. Sawah itu harus digarap dulu, disiapkan untuk ditanam padi, lalu ditanami padi, dirawat, diairi, dijaga dari serangan hama, dan sebagainya, baru kemudian bisa panen di kemudian hari.

Butuh proses, perlu waktu. Demikian pula ngeblog. Begitu membuat blog, tidak akan tiba-tiba banyak pengunjung lalu diterima AdSense dan menghasilkan uang.

Blogging itu seperti bertani tadi. Kita harus mempersiapkan lahan, sawah, yakni blognya, dengan baik, sebelum ditanami padi.

Sawah itu Blog. Tanamannya itu Postingan atau Konten.

Untuk menyiapkan blog yang baik, perhatikan dua hal berikut ini:

  1. NAMA BLOG. Nama atau judul blog (Blog Title) yang sebaiknya ringkas, mudah diingat, dan relevan dengan tema, konten, atau niche blog yang dipilih.
  2. TEMPLATE. Gunakan Template Blog SEO Friendly. Jika tidak menggunakan tema seo, maka pastikan setting dashboard blogger Anda dengan baik, khususnya di bagian Deskripsi dan Preferensi Pencarian (Meta Tags).
Template SEO Friendly adalah tema/theme atau template blogger yang ramah seluler (mobile-friendly) atau responsive dan ringan (fast-loading).

Gunakan template yang sederhana, simple, atau kalaupun berupa magazine style, pastikan ia ringan, tidak berat.

Setelah sawah disiapkan dengan baik, blog sudah dibuat, langkah berikutnya adalah sebagai berikut:
  1. NICHE BLOG. Ibarat jenis tanaman yang dipilih, niche blog adalah tema postingan. Tulislah postingan tentang topik atau tema yang Anda kuasai, pahami, dan sukai.
  2. KONTEN UNIK. Buatlah postingan yang unik, karya sendiri, bukan Copy Paste. Jangan paksakan  menulis konten tentang masalah yang tidak Anda kuasai.
Postingan Copas memang bisa membuat blog Anda cepat diindeks Google, namun suatu saat akan menjadi masalah, misalnya kena banned karena dugaan plagiat dan sudah pasti konten salinan atau postingan hasil Copas akan membuat blog Anda tidak diterima menjadi publisher Google AdSense.

Nah, itu saja dulu panduan dan inspirasi buta blogger pemula. Sekali lagi, Untuk Pemula: Blogger Itu Seperti Petani, Ngeblog Ibarat Bertani.

Kita harus melalui proses, harus sabar, tekun, dan terpenting... jangan menjiplak konten atau tulisan orang lain. Buatlah karya tulis sendiri, sehingga konten blog Anda unik, asli, orisinal, fresh, dan nantinya akan disukai mesin pencari dan pembaca.

Ketahuilah, konten berkualitas atau postingan unik dan asli, itulah teknik SEO terbaik!

Semoga tamsilan blogging = bertani membuat kita termotivasi dan sadar, ngeblog itu butuh proses, harus sabar dan tekun, baru bisa menuai penen, hasilnya, menjadi blogger sukses yang populer dan menghasilkan uang.

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

Sekarang Ganti Template Lebih Mudah: Sesuai Dengan Demo

Sekarang Ganti Template Lebih Mudah: Sesuai Dengan Demo
SEKARANG mengganti template blog lebih mudah. Caranya tetap sama, yakni klik menu Tema > Cadangkan/Pulihkan, lalu upload file tema blogger yang berupa file ekstensi .xml.

Kenapa disebut lebih mudah? Karena, blog dijamin tampil sesuai dengan demonya. 

Caranya, selain upload file seperti di atas, juga bisa dilakukan dengan cara sebagai berikut:

1. Buka file template/tema blog Anda di Notepad
2. Ke dashboard blogger Anda
3. Klik Tema > Edit HTML > HAPUS SEMUA kode yang ada hingga kosong.
4. Copas file template yang sudah dibuka di Notepad tadi.
5. Save!

Semua kode yang ada di blog demo akan otomatis terbawa dan terpasang di blog Anda, termasuk kode HTML/Javascript yang ada di Sidebar, bahkan gambar logo blog demo pun ikutan!

Ini belaku buat file template yang didownloa dalam dua-tiga bulan terakhir dari blog demo. Silakan lakukan uji coba. 

Jika Anda beli template premium di Galeri Template CB, maka tinggal pasang saja, dijamin sesuai dengan demonya.

Good Luck! (www.contohblog.com).*

Cara Mudah Pasang Fans Page Like Box di Sidebar Blogger

Cara Mudah Pasang Fans Page Like Box atau Kotak Halaman Facebook di Sidebar Blogger. Bisa juga dipasang di mana saja, misalnya di bawah postingan blog.

Tampilannya seperti gambar di bawah ini atau seperti di sidebar blog CB ini. Yang belum "like", ya segera "like" dong! :)

Cara Mudah Pasang Fans Page Like Box di Sidebar Blogger

Fungsi atau tujuan memasang Fans Page Like Box di Sidebar Blogger ini untuk untuk menambah likers atau follower, sekaligus bagian dari usaha Pengoptimalan Media Sosial (Social Media Optimizations/SMO) blog kita.

Cara Mudah Pasang Fans Page Like Box di Sidebar Blogger

Cukup copas kode berikut ini.

<div style=".background-color:#F4F4F4;width:300px;padding:0;height:250px;height:250px;overflow:hidden;"><div style="height: 250px; overflow: hidden;">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/cbblogger&amp;width=300&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Jangan lupa ganti https://www.facebook.com/cbblogger dengan link fanspage Anda.

Cara Pasangnya:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode di atas
3. Save!

Beres. Fanspage Anda sudah terpasang di sidebar blog.

Baca Juga: Cara Pasang Fanspage Box Pop Pup / Muncul Melayang

Jika cara di atas tidak lancar --pastinya lancar sih-- silakan cek cara pasang fanspage yang lain.

Demikian Cara Mudah Pasang Fans Page Like Box di Sidebar Blogger, juga bisa di blog WordPress. Good Luck & Happy Blogging! (www.contohblog.com).*

Hoax! Tidur Orang Berpuasa Itu Ibadah

Hoax! Tidur Orang Berpuasa Itu Ibadah
JANGAN percaya jika ada yang mengatakan tidur orang berpuasa adalah ibadah. Itu HOAX (baca: hoks) alias informasi palsu.

Demikian yang CB dengar dari penceramah tarawih malam ini, Selasa (30/5/2017), di masjid dekat rumah CB.

Lalu ustadz menjelaskan bahwa haditsnya lemah (dhoif) sehingga tidak bisa dijadikan sandaran hukum.

Parahnya lagi, orang yang menyebarkan hadits lemah itu bisa-bisa berdosa karena berbohong atas nama hadits Nabi Muhammad Saw.

CB coba Googling dengan kata kunci "Tidur Orang Berpuasa Itu Ibadah". Hasilnya, memang demikian... hoax!

Salah satunya dari laman Islamqa yang diasuh Muhammad Al-Munajjid berikut ini:

TANYA: Saya mendengar salah seorang khatib menyampaikan salah satu hadits Nabi sallallahu ’alaihi wa sallam, yaitu: “Tidurnya orang yang berpuasa adalah ibadah”. Apakah hadits ini shahih?

JAWAB: Hadits ini tidak shahih. Tidak ada ketetapan dari Nabi sallallahu’alaihi wasallam. Diriwayatkan oleh Baihaqi di kitab “Syu’abul Iman”, 3/1437, dari Abdullah bin Abu Aufa radhiallahu ’anhu sesungguhnya Nabi sallallahu ’alaihi wa sallam bersabda:



نَوْمُ الصَّائِمِ عِبَادَةٌ ، وَصَمْتُهُ تَسْبِيحٌ ، وَدُعَاؤُهُ مُسْتَجَابٌ ، وَعَمَلُهُ مُضَاعَفٌ

“Tidurnya orang puasa adalah ibadah, diamnya adalah tasbih, doanya terkabulkan dan amalannya dilipat gandakan”.

Sanadnya dilemahkan oleh Baihaqi, dia berkata: Ma'ruf bin Hasan (salah seorang perawi hadits ini) lemah, dan Sulaiman bin Amr An-Nakha’i lebih lemah dari beliau. Al-Iraqi berkomentar dalam Takhrij Ihya’ Ulumuddin, 1/310: Sulaiman An-Nakha’i adalah salah seorang pendusta. Dilemahkan juga Al-Manawi di kitab Faidhul Qadir, 9293. Al-Albany mencantumkannya dalam kitab Silsilah Al-Ahadits Ad-Dhaifah, no. 4696, dia berkata: (Hadits ini) lemah.

Seharusnya umat Islam secara umum –lebih ditekankan lagi para khatib dan penceramah- agar meneliti sebelum menyandarkan hadits kepada Rasulullah sallallahu ’alaihi wa sallam. Tidak dibolehkan menyandarkan kepada beliau apa yang tidak beliau katakan. Karena beliau sallallahu ’alaihi wa sallambersabda:



إِنَّ كَذِبًا عَلَيَّ لَيْسَ كَكَذِبٍ عَلَى أَحَدٍ ، مَنْ كَذَبَ عَلَيَّ مُتَعَمِّدًا فَلْيَتَبَوَّأْ مَقْعَدَهُ مِنَ النَّارِ (رواه البخاري، رقم 1391 ورواه مسلم في مقدمة صحيحه، رقم 4)

“Sesungguhnya berbohong kepadaku tidak seperti berbohong kepada orang lain. Barangsiapa yang berbohong kepadaku dengan sengaja, maka disediakan baginya tempat di neraka”. (HR. Bukhari, no. 1391, dan diriwayatkan oleh Muslim dalam muqadimah shahihnya, no. 4)

Wallahu a’lam
.

Jika kita searching lagi, banyak juga hoax seputar ramadhan lainnya, seperti 12 Hadits Lemah dan Palsu Seputar Ramadhan.

Wah, hati-hati kawan, jangan sampai jadi penyebar hoax ya! Kata ustadz saja, nyebarin hoax itu dosa lho. Kata polisi, nyebarin hoax bisa dipidana. Hiii, ngeri! 

Happy Blogging! (www.contohblog.com).*

Cara Membuat Top Navigasi Menu Statis Responsive di Atas Header Blog

Cara Membuat Top Navigasi Menu Statis Responsive di Atas Header Blog. Kode Sticky Top Navigation Menu Bar di atas header blog ini diambil dari Template Fresh View. Demonya juga ada di sana.

Cara Membuat Navigasi Menu Statis Responsive di Atas Header Blog

Dilengkapi link media sosial dan kotak pencarian. Namun, kelemahannya, link media sosial dan kotak pencariannya tidak muncul di mobile version.

Cara Membuat Top Navigasi Menu Statis Responsive di Atas Header Blog

KODE CSS:
Pasang di atas kode </head>

<style>
.wrapper { width: 1000px; margin: auto; }
#responsive-menu { display: none; }
#main-nav-wrap { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 40px; background-color: #fff; box-shadow: 0px 1px 4px rgba(0,0,0,0.08); }
#menu-main-nav {margin:0;}
#main-nav li { position: relative; height: 40px; float: left; border-left: 1px solid #eee; line-height: 40px;margin:0;list-style:none; }
#main-nav li:last-child { border-right: 1px solid #eee; }
#main-nav a { display: inline-block; height: 40px; float: left; color: #444; padding: 0 12px; font-size: 12px; font-weight: 600; line-height: 42px; text-transform: uppercase; transition: background .3s; }
#main-nav a:hover {background-color: #F5F5F5;}
.drop-sign { float: right; margin-left: 3px; color: #FA7700; }
#main-nav ul li ul { position: absolute; left: -1px; top: 33px; z-index: 100; display: none; float: none; border: 1px solid #eee; background-color: #fff; }
#main-nav ul li:hover > ul { display: block; }
#main-nav ul li ul li { height: auto; clear: both; margin-left: 0; line-height: normal; border-right: none; border-left: none; border-bottom: 1px solid #eee;; }
#main-nav ul li ul li:last-child { border-right: none; border-bottom: none; }
#main-nav ul li ul a { min-width: 208px; padding: 0 12px; margin-top: 0; font-size: 12px; font-weight: 400; line-height: 42px; transition: all .3s; border: none; }
#main-nav ul li ul .current-menu-item a { background-color: transparent; }
#main-nav ul li ul .current-menu-item a:hover { background-color: #F5F5F5; }
#main-nav ul li ul ul { left: 100%; top: -1px; }
#nav-elements { height: 40px; float: right; }
#nav-social {float: left;}
#nav-social li { height: 40px; float: left; border-left: 1px solid #eee;margin:0;list-style:none; }
#nav-social li:last-child {border-right: 1px solid #eee;}
#nav-social a { display: block; width: 40px; height: 40px; background: url(//2.bp.blogspot.com/-M7xDlNkYDtM/V6hyLsl94_I/AAAAAAAACPI/-D2lIyqMLIAahtchRb2UJxeyNZnV98Q8ACK4B/s1600/nav-social.png) no-repeat; text-indent: -9999px; transition: background .3s; }
#nav-social ul {margin:0;}
#nav-social a:hover {background-color: #F5F5F5;}
#nav-social .facebook a {background-position: -39px 0;}
#nav-social .instagram a {background-position: -78px 0;}
#nav-social .youtube a {background-position: -117px 0;}
#nav-social .soundcloud a {background-position: -156px 0;}
#nav-social .google a {background-position: -195px 0;}
#nav-social .vimeo a {background-position: -234px 0;}
#nav-search-icon { display: block; width: 40px; height: 40px; float: right; margin-left: -1px; border-left: 1px solid #eee; border-right: 1px solid #eee; background: url(//1.bp.blogspot.com/-ZaRDueIFZsA/V6hxyGma9TI/AAAAAAAACPA/cuM2muGOiI4g1sEO4FlwMwxW5OMtd0gYQCK4B/s1600/header-search-icon.png) no-repeat; cursor: pointer; transition: background .3s; }
#nav-search-icon:hover, #nav-search-icon .visible-search { background-color: #F5F5F5; }
#nav-search { position: absolute; top: 40px; display: none; width: 252px; height: 44px; border: 1px solid #eee; background-color: #fff; }
#nav-search #s { width: 157px; height: 34px; color: #777; padding-right: 75px; padding-left: 10px; margin: 4px 0 0 4px; border: 1px solid #eee; background-color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; }
#nav-search #s:focus { color: #444; outline: none; }
#nav-search #searchsubmit { position: absolute; right: 7px; top: 7px; height: 30px; color: #fff; padding: 0 9px; border: none; background-color: #444; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; line-height: 29px; text-transform: uppercase; cursor: pointer; transition: background .3s; }
#nav-search #searchsubmit:hover {background-color: #FA7700;}
@media screen and (max-width:960px) {
#sb-search{float:none!important;}
#responsive-menu { position: relative; z-index: 15; display: inline-block; height: 40px; float: left; padding: 0 11px; color: #444; border-right: 1px solid #eee; border-left: 1px solid #eee; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 42px; text-transform: uppercase; transition: background .3s; }
#responsive-menu:hover {background-color: #F5F5F5;}
#main-nav .menu { position: absolute; left: 0; top: 41px; z-index: 4000; display: none; border-right: 1px solid #eee; border-left: 1px solid #eee; background-color: #fff; }
#main-nav li { height: 39px; clear: both; float: none; line-height: 34px; border-left: none; border-bottom: 1px solid #eee; }
#main-nav li:last-child {border-right: none;}
#main-nav a {min-width: 250px;}
#main-nav li a:hover, #main-nav ul li ul .current-menu-item a:hover {color: #555;background-color: transparent;}
#main-nav ul li ul li {height: 39px;}
#main-nav ul li ul li:last-child {border-bottom: 1px solid #eee;}
#main-nav ul li ul li a {padding-left: 30px;}
.drop-sign, #main-nav ul li ul .drop-sign {display: none;}
#main-nav .menu li ul { position: static; display: block !important; float: none; clear: both; border: none; } #main-nav ul li ul a {font-weight: 600;}}
}
</style>

KODE HTML:
Pasang di atas kode header blog atau di bawah kode <body>

<div id='main-nav-wrap'>
<div class='wrapper group'>
<div id='responsive-menu'><i aria-hidden='true' class='fa fa-align-justify'></i> Menu</div>
<nav id='main-nav'>
<div class='menu-main-nav-container'><ul class='menu' id='menu-main-nav'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-5017' id='menu-item-5017'><a href='#'>Dropdown <i aria-hidden='true' class='fa fa-angle-down'></i></a>
<ul class='sub-menu'>
<li class='menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2607 current_page_item menu-item-5023' id='menu-item-5023'>
<a href='#'>Dropdown 1</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5021' id='menu-item-5021'>
<a href='#'>Dropdown 2</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5018' id='menu-item-5018'>
<a href='#'>Dropdown 3</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5022' id='menu-item-5022'>
<a href='#'>Dropdown 4</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5020' id='menu-item-5020'>
<a href='#'>Dropdown 5</a></li>
</ul>
</li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5025' id='menu-item-5025'>
<a href='#'>Fashion</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5026' id='menu-item-5026'>
<a href='#'>Music</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5024' id='menu-item-5024'>
<a href='#'>Movies</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5027' id='menu-item-5027'>
<a href='#'>Contact</a></li>
</ul></div>
</nav>
<div id='nav-elements'>
<div id='nav-social'>
<ul>
<li class='twitter' title='Twitter'>
<a href='#' target='_blank'>Twitter</a></li>
<li class='facebook' title='Facebook'>
<a href='#' target='_blank'>Facebook</a></li>
<li class='instagram' title='Instagram'>
<a href='#' target='_blank'>Instagram</a></li>
<li class='youtube' title='YouTube'>
<a href='#' target='_blank'>YouTube</a></li>
<li class='soundcloud' title='SoundCloud'>
<a href='#' target='_blank'>SoundCloud</a></li>
</ul>
</div>
<span id='nav-search-icon'></span>
<div id='nav-search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value='Enter search term ...'/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>
</div>
</div>
</div>
  <div class='clear'/>

KODE JAVASCRIPT
Pasang di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$("#nav-search-icon").on("click", function() {
    $("#nav-search").fadeToggle(250);
    $(this).toggleClass("visible-search");
});
var $navFormValue = $("#nav-search #s").val();
$("#nav-search #s").blur(function() {
    if (0 === this.value.length) this.value = $navFormValue;
});
$("#nav-search #s").focus(function() {
    if (this.value === $navFormValue) this.value = "";
});
var $formValue = $(".widget #s").val();
$(".widget #s").blur(function() {
    if (0 === this.value.length) this.value = $formValue;
});
$(".widget #s").focus(function() {
    if (this.value === $formValue) this.value = "";
});
var $errorFormValue = $(".error-wrap #s").val();
$(".error-wrap #s").blur(function() {
    if (0 === this.value.length) this.value = $errorFormValue;
});
$(".error-wrap #s").focus(function() {
    if (this.value === $errorFormValue) this.value = "";
});
$("#responsive-menu").on("click", function() {
    $("#main-nav ul").slideToggle(250);
});
$(window).resize(function() {
    var a = $(window).width();
    var b = $("#main-nav ul");
    if (a > 1010 && b.is(":hidden")) b.removeAttr("style");
});
//]]>
</script>

Save template!

Jangan lupa link menu dan url media sosialnya diubah di Kode HTML.

Demikian Cara Membuat Navigasi Menu Statis Responsive di Atas Header Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Penulisan Kata Ramadhan yang Benar: Ramadhan, Ramadan, Ramadlan?

Penulisan Kata Ramadhan yang Benar: Ramadhan, Ramadan, Ramadlan?
Penulisan Kata Ramadhan yang Benar: Ramadhan, Ramadan, Ramadlan? Kata Baku: Ramadan.

Penulisan Kata Ramadhan yang Benar: Ramadhan, Ramadan, Ramadlan

CB "terusik" soal penulisan kata Ramadhan ini setelah menemukan banyak versi penulisan kara Ramadhan ini.

Jika mengacu pada Kamus Besar Bahasa Indonesia (KBBI), penulisan kata Ramadhan yang benar (baku) adalah Ramadan.

Ra.ma.dan n bulan ke-9 tahun Hijriah (29 atau 30 hari), pada bulan ini orang Islam yang sudah akil balig diwajibkan berpuasa (KBBI).

Namun, menyatakan bahwa penulisan kata Ramadan yang baku adalah Ramadan, menjadi bertentangan dengan panduan literasi Arab-Indonesia atau Alih Aksara Arab ke Latin.

Ramadhan, bahasa Arab, terdiri dari huruf Ra, Mim, Dhod, dan Nun. Nah, dalam pedoman alih aksara Arab ke Latin, Dhod (ض) itu dh sehingga mestinya penulisan yang benar Ramadhan.

Namun, rupanya diubah dari dh menjadi d saja, seperti halnya kata-kata dhu'afa`, haidh, ridha, 'Idul Adhha menjadi duafa, haid, rido, Idul Adha. 

Demikian sekilas penulisan Ramadan yang benar. Bebas lah, mau Ramadan, Ramadhan, atau Ramadlan, yang penting maksudnya sama, yakni bulan ke-9 Hijriyah itu, bulannya umat Islam berpuasa.

Toh melanggar "aturan kata baku" bukan tindak pidana :) 

Selamat Berpuasa Ramadhan & Happy Blogging! (www.contohblog.com).*

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).*

Contact Form

Name

Email *

Message *