Cara Membuat Menu Navigasi Blog Melayang Saat Halaman Discroll ke Bawah

Membuat Blog Edukatif Part 2: Menu Navigasi Melayang

Sahabat. Sebelum pulang kerja, Ane sempatkan untuk membagikan cara mudah membuat menu navigasi melayang (tetap muncul) saat halaman di scroll (ditarik ke bawah). Artikel ini saya maksudkan untuk melengkapi artikel membuat blog menjadi semakin edikatif informatif kepada pembaca.
Jika Sobat menggeser halaman blog ini ke bawah, halaman menu navigasi akan tetap muncul dan melayang. Tentu hal ini akan sangat mempermudah rekan-rekan pembaca setia.

Pentingnya Halaman Navigasi Menu Tetap Muncul

Ketika Sobat sedang enak-enaknya membaca artikel dari blog ini, tiba-tiba di bagian akhir memerlukan bantuan dari link internal yang berada di menu navigasi. Maka langkah yang paling mungkin terjadi adalah menggeser scrool ke atas. Hal ini tentu sedikit banyak mengurangi kenyamanan pengunjung. Sehingga, dengan tips inilah akan mempermudah rekan-rekan dalam membaca ulasan-ulasan yang kami berikan.

Langkah-langkah Membuat Menu Navigasi Tetap Melayang

1. Berdo'a

2. Masuk akun blogger > Template > Edit Html

3. Copy paste kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Ganti kode elemen warna biru di atas #nav dengan kode elemen menu navigasi blog Sobat. Biasanya berupa kode .nav atau #menu atau .menu

5. Save template

6. Baca Hamdallah, aamiin.

OK Guys. Selamat mencoba and happy blogging.

(http://forumblogindo.blogspot.com/).*


Source:
http://www.contohblog.com/2014/05/menu-navigasi-blog-tetap-muncul-melayang.html

Cara Membuat Featured Post Metro Ul Style di blogspot - Edukatif

Pentingnya Blog Edukatif

Sobat. JIKA memperhatikan tampilan blog FBI (Forum Blogger Indonesia) ini, akan terlihat "Featured Post" yang sangat menarik, karena menggunakan gaya Metro Ul Style. Namun yang paling penting tidak sekedar tampilan yang elok nan rapih, namun juga harus bersifat edukatif, informatif dan user friendly (memudahkan pembaca setia). 

Hal itu memang menjadi acuan utama blog ini. Seperti saran dari para master blogger tentang salah satu parameter utama blog berkualitas adalah memberikan informasi yang edukatif dan informatif.

Sobat Forum Blogger Indo tidak usah khawatir. Dalam kesempatan ini akan saya bagi tips cara memasang featured post gaya Metro Ul Style. Tidak susah kok, yang penting mau berusaha dan berdo'a.

Langkah Memasang Featured Post Metro Ul Style (Muncul di semua Page)

1. Berdo'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='no'>

4. Ganti kode 'no' menjadi 'yes'. Jadinya seperti ini:

<b:section class='main' id='main' showaddelement='yes'>

5. Cari kode ]]></b:Skin>

6. Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:Skin>

#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUBrXDTeq5fM_o5rBD50WTBnhrL92ftcxj8iWpN4MbDiPePikqubDE_0r5KcqQ9idxHV6iEk-rEPE0k5mEq-I5dVhyxz3DOhIBUKFXNV6HhAh8H7pG7DJXWFylbcVPcbR44zVgJKJBxw/s48/Arrow%2520Right.png') 305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}

7. Save Template

8. Buka Dashboard blog > tata letak (layout) > add widget > HTML Java Script

9. Copas kode di bawah ini ke dalam widget baru tadi (pada langkah ke-8) > Save

<div id="featured-post"><ul><li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhza2iRjWWP5FF8eE08mA8xSqCTjdB0OJNCj0PixyJ-_hUdb6-Rx94v2_qNA1mw5WmeO2VZsySN2fSe7gKQc5xUjNcmSDIANrxh1KiGmqBoMaozegzkAdfqEQqPn1wqasoc8m64MVibJPs/s1600/Humas+-+PR.jpg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-cepat-membuat-blog-terindeks.html">Cara Cepat Indeks Blog ke Google dalam Satu Menit</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcuzcn4oXeqYzKRSnuMN6ZGvu1_hADpKhzSRAh5hXZiufXHjegJzfN8BH_anjY622dclHs-EYvutJo_6am8ME90PMTd6fpAOoZ8RMNQoAS5JmhQ9jnj70Rd6JMIqY9Y6bqmSLfyczfhc/s1600/Email+saat+liburan+dapat+dihapus.jpg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/search/label/Template%20SEO">Template Super Responsive dan Super SEO</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYAfwi8Qllp5WRKKJ3tRzwUD6S3nLgJMddh5TmTWY5wZuP1Rh3iChrJEWyYtwlWqWvUXduZDKXLouhF_-FY6KPZyfJUxmgDItTKMP_2V9ZfmhMM5lcNMV-DdG1Ihd2r5qRb4ETecs_aE/s1600/media+baru.jpeg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-membuat-blog-berkualitas-seo-dan.html">Cara Membuat Blog Berkualitas dan Disukai Google</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiYuTlAKYheyC22YMmCzMiR2RaYekpRw_2aPAK-_Lk8Gb7adpN9yn7-Vzfk58ku1RXnqOTltvn8DbV36OmUKnwMa0yrPR8O7dm2_MtlLyGPFrhYBGAj7ss-BWFsN3Bko6oCRKz3D1WOMY/s1600/jurnalistik+-+jurnalisme.png" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-memilih-template-blogspot-yang.html">Cara Memilih Template Blog yang Benar Disukai Google</a></div></div></li>

</ul></div>

10. Cek perubahan blog Sobat.
11. Alhamdulillah, sudah berhasil (sambil senyum Guys)

***.Note:

1. Ganti warna merah dengan alamat URL link internal atau eksternal dari blog sobat (misalkan link Url Artikel populer sobat).
2. Ganti tanda # dengan alamat URL gambar Sobat yang ingin tampilkan.

Langkah di atas menjadikan menu Featured Post akan terlihat di setiap page/halaman ketika dibuka. Jika menginginkan hanya muncul di halaman homepages saja, silakan lakukan modifikasi tambahan di bawah ini:

Langkah Memasang Featured Post Metro Ul Style (Muncul di Home Page)

1. Baca do'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='yes'>

4. Bagi pengguna Template Pro Adsence V1, tampilan lengkapnya akan seperti di bawah ini:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url== data:blog.homepageUrl'>
<!-- 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:if>
</b:includable>

5. Tambahkan kode yang berwarna merah persis seperti format kode di atas

6. Save template

7. Lihat perubahan blog Sobat.

8. Alhamdulillah

Demikian tips membuat blog semakin edukatif dan informatif serta user friendly. Semoga menjadi berkualitas blog Sobat. Jika ada yang belum faham, silakan berdiskusi dengan Ane di forum blogger ini. Salam blogger.

(http://forumblogindo.blogspot.com/)

Sumber:

http://www.komunikasipraktis.com/2014/11/stylish-featured-post-image-for-blogger.html

Cara Cepat Membuat Blog Terindeks Google dalam 1 Menit

Siapa sih di antara kita yang tidak ingin blog atau websitenya cepat terindek google atau mesin pencari lainnya?

Saya kira pasti semua menginginkannya. Hal itu dirasa wajar mengingat pentingnya indeks google terhadap peningkatan rating blog kita. 

Selain daripada kualitas blog itu sendiri, ternyata ada beberapa langkah jitu guna mempercepat indeks google terhadap blog kita. 


Berikut langkah-langkahnya:

1. Ikuti cara pembuatan blog yang berkualitas sesuai saran google.
2. Lakukan optimasi dasar SEO blog (langkah ini hukumnya WAJIB bagi yang baru saja membuat blog baru). Yang sudah lama membuat dan belum menerapkan cara ini, maka juga dikenakan hukum wajib,hehe.
3. Optimasi Meta tag - Title tag - Description Tag, dan Keyword Tag
4. Breadcrumbs
5. Related Post
6. Media Social Book Marking (minimal ada fasilitas share ke Facebook, Twitter, Google Plus).
7. Read More otomatis.
8. Daftarkan blog Sobat (submit Sitemap) XML ke mesin pencari (Search Engine) dan Bing.
9. Daftarkan blog Sobat ke Google Webmaster Tools
10. Langkahnya cukup mudah, yakni buka Google Webmaster Tools > Tambahkan Situs (Add Site) > Tahbahkan Sitemap (Add Sitemap) > Masukkan warna merah di bawah ini:

• http://forumblogindo.blogspot.com/sitemap.xml
• http://forumblogindo.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
• http://forumblogindo.blogspot.com/feeds/posts/default?orderby=updat

Mungkin ada yang bertanya? Kenapa caranya banyak banget Gan? Padahal kan judul artikel ini cukup 1 menit?

Benar, cukup satu menit. Namun, hal ini akan tercapai jika Sobat sudah menerapkan langkah ke-1 s/d ke-7. Langkah pada point tersebut sebenarnya sudah tidak perlu dilakukan jika sobat sudah menggunakan template yang SEO User Friendly. 

Jika belum, maka harus menerapkan point ke-1 s/d 7 terlebih dahulu. Jika memang tidak ingin mengalami kesulitan, langsung pakai saja TemplateSEO User Friendly.

Sehingga, untuk melaksankan langkah ke-8 dan 9, hanya memerlukan waktu "1 menit" atau bahkan kurang.

Saya kira demikian tips kali ini.

(http://forumblogindo.blogspot.com/).*

Cara Memasang Navigasi Halaman Blog (Numbered Page Navigation) dengan Angka

Pentingnya Navigasi Halaman Blog bagi Pengguna (User)

Sobat. Salah satu parameter di dalam sebuah blog berkualitas adalah tersemat akan nilai "user friendly". Makna User Friendly adalah sebuah blog yang "akan mempermudah" pengguna atau pembaca. 

Forum blogger ini akan membagikan tips cara memasang navigasi halaman blog (numbered page navigation) dengan angka atau nomor. Apa pentingnya navigasi tersebut? Pada dasarnya, NAVIGASI akan bekerja seperti sebuah link baik berupa link internal atau eksternal. Link ini akan mengarahkan pengguna atau pembaca pada halaman tertentu sesuai dengan maksud dan arahan dari Admin blog, alias Anda sendiri.

Navigasi yang dibuat dengan menerapkan pola angka atau nomor ini sudah digunakan oleh para desainer website terkenal. Salah satu contoh penerapannya pada situs Petunjuk Islam.  Atau lihat saja di blog ini, sama kok.

Langsung saja berikut cara pemasangannya pada blog kita:
1. Masuk akun blogger
2. Template > cari kode ]]></b:skin>
3. Copy dan paste kode di bawah ini tepat di bawah kode ]]></b:skin>

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

4. Copy paste kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

5. Save template
6. Lihat perubahan blog sobat sekarang

Demikian tips kali ini. Semoga menambah baik kualitas blog Anda.

Source:

http://www.contohblog.com/2014/12/cara-membuat-navigasi-halaman-blog.html

Panduan Modifikasi Template Pro Adsence V1

Sobat. Beberapa hari yang lalu sudah saya shared template terbaru dari SL_Blogger, yakni Pro Adsence V1.

Dari ulasan yang saya berikan, bahwa template Pro Adsence V1 adalah sebuah template yang sangat SEO 100%, Responsive (user friendly), Super Fast Loading (grade A) dan Simple. Makna simple di sini adalah dengan tata kelola yang “mudah”, “minimalis” dan tentu sangat mendukung “iklan google adsence” sobat. Sobat bisa melakukan pengujian kembali melalui senjata wajib yang digunakan para blogger, baik pemula ataupun master.

Tidak perlu saya uraikan lebih lanjut pentingnya ciri-ciri template yang SEO, responsive (user friendly), fast loading dan tentu “mendukung” dan Pro Google Adsence. Yang pasti, jika template sobat tidak memenuhi kriteria tersebut, “back home” aja deh, karena saat ini sudah muncul perangkat google terbaru dengan kinerja “membabat” habis blog dengan tampilan yang tidak Responsive. Hal ini berlaku kemarin, tanggal 21 April 2015, tepatnya pada hari kartini.

:: Demo

PANDUAN PEMASANGAN TEMPLATE PRO ADSENCE V1

1. Mengaktifkan Desain Responsive

Fitur ini sebenarnya ketika tidak diaktifkan pun, juga akan bekerja jika “pengguna” device smart phone “memilih” membuka blog Anda dengan memilih “tampilan web”. Namun untuk secara default langsung mengarah ke tampilan web, lakukan pengaturan dasarnya, yakni:

Masuk akun blogger > pilih Klik icon “Gear” di bawah preview template seluler > dan pilih “Tidak. Tampilkan template seluler di perangkat seluler“ >Simpan

2. Edit Menu Navigasi

Cari kode berikut, dan sesuaikan dengan menu navigasi yang Sobat inginkan.

<ul id='nav'><li><a href='/'>Home</a></li><li><a href='#'>Menu 1</a>
<ul> <li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li> </ul>

3. Modifikasi Tampilan Template

Sobat dapat melakukan modifikasi terhadap tampilan template Pro Adsence V1 ini. Sobat bisa dengan mudah mengganti warna, background, dan juga font pada template ini. Caranya sangatlah mudah:

1. Masuk ke Dashboard blogger > pilih Template > Sesuakan > Tingkat Lanjut
2. Pilih menu sesuai dengan modifikasi yang Sobat inginkan

4. Pemasangan Iklan Google Adsence

Bagi rekan-rekan yang ingin memasangan iklan google adsence di template ini, yakni cara memasang iklan adsence pada umumnya. Namun mengenai masalah ukuran lebar dan panjang iklan, sebaiknya berukuran (728x90 px) di bawah menu navigasi.

1. Masuk ke Dashboard AdSense milik sobat > Iklan Saya > Unit iklan baru.

2. Masukan nama unit iklan dan pada bagian Ukuran iklan pilih “Unit iklan responsif (BETA)”

3. Simpan dan dapatkan kode iklan Adsence Anda. 
4. Letakan kode unit iklannya pada blog sobat melalui menu Add Gadget > HTML/JavaScript.

3. SEO

Untuk masalah SEO pada template ini sudah saya setting semaksimal mungkin sesuai dengan pengetahuan saya. Sobat tidak perlu melakuan modifikasi apapun pada template ini. Namun untuk lebih memaksimalkan lagi sobat bisa baca-baca postingan tentang SEO di blog saya www.forumblogindo.blogspot.com.

Demikian panduan singkat terhadap template Pro adsence V1 ini, semoga menjadikan blog anda menjadi berkualitas dan disukai oleh mesin pencari, aamiin. Silakan tunggu perkembangan template Pro Adsence V2. Salam blogger.

Salam blogger.

6 Senjata Blogger Pemula yang Wajib Digunakan (ampuh 100%)

Sobat. Ketika kita ingin membangun sebuah blog berkualitas, tentu tidak sekedar mempunyai "bakat" desainer atau menulis. Namun, masih perlu memerlukan "bantuan" baik dari rekan-rekan senior blogger atau memepelajari tools dasar blogger bagi para pemula/newbie seperti saya ini. 

Senjata yang saya maksud di sini adalah beberapa tools dasar blogger yang tentu sudah digunakan oleh para master blogger, yang nantinya kita jadikan acuan untuk menilai seberapa jauh "value" blog kita berdasarkan acuan tersebut.

Beberapa senjata dasar blogge ini sebenarnya sudah saya kategorikan ke dalam senjata blogger. Jika sudah menerapkan pola dasar acuan di dalam senjata dasar bagi para blogger ini, silakan untuk meneruskan kedalam senjata lain yang juga tak kalah ampuh (lebih pada kesempurnaan pengembangan blog).

Apa saja senjata dasar blogger tersebut? Silakan simak ulasan berikut !

1. Chkme
2. GT Metrik
3. Feed Burner
4. Web Master Tools
5. Google Richnippets
6. Troy

Ke-6 tools di atas sangat penting bagi kelangsungan blog baru ke depannya. 
1. Chkme
Tools ini berguna untuk megecek skor SEO sebuah template yang kita gunakan. Sejauh mana pentingnya sebuah template dengan skor SEO 100% bagi blog kita? Silakan baca artikel ini. Untuk menggunakannya cukup mudah, silakan kunjungi Chkme dan masukkan alamat URL blog Anda.

2. GT Metrik
Tools ini berguna untuk megecek skor kecepatan loading blog Anda.

Kalau loading blog Anda sangat lemot alias lelet alias berat saat dibuka, walaupun dengan tampilan desain yang sangat luar biasa bagus, maka segera ganti template Anda. Karena google sangat tidak suka dengan blog yang lelet.

Alangkah lebih baik untuk membaca pentingnya kecepatan loading bagi blog. Sejauh mana pentingnya sebuah template dengan skor SEO 100% bagi blog kita? Silakan baca artikel ini. Untuk menggunakannya cukup mudah, silakan kunjungi Chkme dan masukkan alamat URL blog Anda.

Cara menggunakan tools ini juga cukup mudah. Silakan berkunjung ke GTmetrik, dan masukkan alamat URL blog Anda. Kalau memang sangat lambat, lebih baik menggunakan template yang jelas Super Fast Loading. Jika memang ingin mempercepat loading blog Anda, silakan baca artikel ini [klik di sini].

3. Feed Burner
Feed burner merupakan sebuah tools yang berfungsi untuk media penyebaran informasi terbaru artikel kita, yang akan secara otomatis masuk kepada langganan pembaca blog kita. Tentu hal ini akan sangat berguna jika ada pembaca setia blog kita.

4. Web Master Tools
Web Master Tools merupakan sebuah tools yang berguna untuk mempercepat indeks blog dan artikel terbaru kita ke mesin pencari google. Selain daripada itu, web master tools juga dapat memberikan informasi perkembangan trafik blog kita.

5. Google Richnippets
Google Richnippets merupakan tools yang akan berfungsi untuk menguji sejauh mana kevalidan struktur data di dalam template yang kita gunakan. Pentingkah itu? Dalam perkembangan struktur data di dalam sebuah template yang terkadang memerlukan sebuah keseragaman dengan perkembangan yang ada, sangat diperlukan nilai kevalidan struktur data template yang kita gunakan. Namun juga ada beberapa master blogger yang mengatakan hal ini kurang begitu berdampak pada nilai SEO blog kita. Namun buat Ane, bisa kita ibaratkan menggunakan perangkat terbaru dan lama.

6. Troy
Troy merupakan tools yang akan digunakan untuk mengecek tingkat responsive tidaknya sebuah template yang kita gunakan. Jika Anda menggunakan template yang tidak ramah smarphone, bisa dipastikan akan dilibas oleh goole. Berikut keterangannya. So, jangan kaget jika sebelumnya trafik blog anda tinggi dan tiba-tiba menurun tajam, hal itu dikarenakan adanya logaritma terbaru google yang akan menilai tingkat responsive tidaknyas sebuah template. Jika tidak ingin dilibas google, silakan gunakan template yang benar-benar responsive.

Demikian ulasan tentang 6 Senjata Blogger Pemula yang Wajib Digunakan (ampuh 100%) ini. Dan terapkan cara memilih template yang baik dan benar guna melakukan efisien waktu kita. Semoga menjadikan blog sobat berkualitas, aamiin.

Cara Memasang Kolom Komentar Facebook di Blogspot

Sobat. Kali ini akan kita shared cara paling mudah untuk memasang kolom komentar facebook pada blogspot. Mungkin sebagian orang agak berfikiran "tidak perlu" dengan alasan "akan memperberat" loading blog kita.

Namun hal itu hanya sekedar "mitos" dan "asumsi" yang belum terbukti Guys. Jika tidak percaya, silakan buktikan blog ini, insyalloh berada pada "grade A" di atas 90% versi GTmetrik.

Nih,penampakan kecepatan loading blog ini, yang notabene juga menggunakan kolom komentar facebook ala Pro Google Adsence V1 blogger template, persembahan dari modifyed Sl Templates. Masih, tidak percaya, silakan buktikan sendiri njeh [klik di sini].

Sobat. Tujuan saya memberikan artikel ini tidak lain untuk memudahkan pengunjung yang akan memberikan ulasan, pendapat atau tambahan artikel kita ketika terdapat kekurangan. Selain daripada itu, saat ini tidak bisa dipungkiri, bahwa pengguna facebook sudah seantero jagat. Jadi, akan lebih beijaksana apabila kita memberikan kemudahan kepada pembaca untuk berkontribusi memberikan masukan, pendapat kepada kita.

Langkah-langkah Memasang Kolom Komentar Facebook

Kalau sobat mencari tutorial artikel dengan bahasan yang sama kali ini, kebanyakan menggunakan cara yang ribet dan susah. Oleh karena itu, berikut Ane berikan cara termudah yang pernah Ane peroleh:

1. Baca do'a
2. Buka akun blogger
3. Pilih Template > Edit HTML cari kode berikut <div class='comments' id='comments'>
4. Paste kode berikut tepat di bawah kode <div class='comments' id='comments'> tadi:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>
5. Save template
6. Baca Do'a

***. Note: 

1. Ganti IDFANPAGEFACEBOOK dengan Kode/ No / Id Fanspage Facebook yang anda punya.
2. Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10222222222xxxx
3. Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
4. Sesuaikan Ukuran atau panjang Kolom Komentar facebook dengan Ukuran blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
5. Apabila kode terduapat dua kode <div class='comments' id='comments'>, pilih salah satu.

Semoga bermnafaat, aamiin.

(http://forumblogindo.blogspot.com/).*

Source:
http://www.contohblog.com/2014/02/cara-pasang-kotak-komentar-facebook-di.html

Cara Mengganti Warna Header dan Body Blogspot

Pentingnya Desain Sebuah Blog

Dengan memahami pentingya sebuah desain terhadap kualitas blog kita, maka sudah seharusnya kita juga memperhatikan "poin penting" tersebut, walapun pada dasarnya desain blog tidaklah mejadi faktor penentu kualitas sebuah blog. Namun perlu diingat pepatah lama, bahwa:

"cinta muncul pada pandangan pertama", betul tidak?

So, kali ini akan kita bagi tips cara merubah warna dasar header dan body sebuah blog. Selain daripada itu, akan saya berikan cara-cara lain. Tidak susah kok Sob, tinggal diawali dengan do'a insyalloh akan dimudahkan, aamin.

Langkah cara merubah warna background pada blog :

1. Masuk ke akun blogger
2. Dashboard
3. Tata Letak/ layout
4. Edit HTML > cari kode di bawah ini dengan menggunakan [ctrl + F]

Cara merubah warna background header pada blog

Cari kode  #header-wrapper
#header-wrapper {
background:#000000;

Merubah warna background body pada blog

Cari kode body {
body {
background:#000000;

Merubah warna background Main body (halaman postingan)

Cari kode #main-wrapper {

#main-wrapper {
background:#000000;

Merubah warna background pada sidebar di blog

Cari kode #sidebar-wrapper

#sidebar-wrapper
background:#000000;

Merubah warna background footer di blog

Cari kode #footer {

#footer {
background:#000000;

Keterangan :
ganti warna biru dengan warna sesuai selera.

***. Note:
1. Kode #000000 merupakan kode warna merah.
2.  Ganti kode warna (warna merah di atas) dengan kode warna sesuai selera Sobat. Jika masih belum mendapatkan kode warna, silakan lihat kode warna htmml komplit [klik di sini]

Demikian, semoga bermanfaat, aamiin.

(http://forumblogindo.blogspot.com).*

5 Alasan Membuat Blog Menggunakan Blogspot

Alasan Ngeblog Harus dengan Blogspot

Sobat. Sudah tidak asing lagi bagi rekan-rekan blogger tentang sebuah tools ngeblog yang OK Punya, yakni Blogspot.
Di Balik semua asusmsi itu, mungkin ada beberapa rekan-rekan yang masih menggunakan tools ngeblog lain, misalkan "wordpress.com". 

Mungkin ada juga rekan-rekan yang memang belum mengetahui secara pasti alasan kenapa ngeblog menggunakan blogspot tidak menggunakan wordpress atau yang lain?
Dengan mengetahui secara mendalam alasan tersebut, sobat akan nyaman, tenang dan tidak was-was kedepannya. Karena beberapa alasan tersebut menjadi parameter keberlangsungan blog kita nantinya sangat dipengaruhi akan "rasa kecintaan" Anda dalam menggunakan tools blogging yang digunakan. 

Jika tidak mengetahui dan asal ngeblog, takutnya "kecewa" di waktu yang akan datang karena beru tahu"kelebihan dan kekurangannya" sekarang.

So, simak dan baca ulasan berikut.

Perlu Sobat ketahui. Blogspot merupakan sebuah tools ngeblog yang sangat "luar biasa elok", karena Ia adalah buatan Google yang notabene sebagai mesin pencari no "wahid" alias no satu di dunia saat ini. Bisa dikatakan, blogspot sebagai "anak kesayangannya" google. Dari faktor itu saja, blogspot sudah unggul dari mdia yang lain.

Jika dilihat lagi dari segi Trafik page rank, misalkan menggunakan tools Alexa Rank, kita akan dapatkan informasi yang sangat jelas, bahwa Google dan Blogspot berada di top 10 situs terpopuler di Indonesia, yang mana Google berada di urutan no satu, dan blogspot berada di urutan ke-5.

Top 10 Sites in Indonesia

Berikut top situs terpopuler versi Alexa:

1. Google.com
2. Google.co.id
3. Facebook.com
4. Youtube.com
5. Blogspot.com
6. Yahoo.com
7. Detik.com
8. Lazada.co.id
9. Kaskus.co.id
10. Wordpress.com

Dari daftar di atas, sudah sangat jelas bahwa Google dan Blogspot lebih unggul dibandingkan dengan tools ngeblog lain, yakni Wordpress.

5 Kelebihan Blogspot dibangingkan Wordpress

Berikut beberapa alasan kenapa Sobat sebaiknya membuat blog menggunakan blogspot:

1. Anak kesayangan Google
Sudah sangat jelas sekali penjelasannya di atas.


2. HTML Base
Dengan keunggulan ini, kita dapat melakukan "modifikasi" sebaik mungkin, baik dari segi desain tampilan, perubahan template dan lain-lain. Dengan begitu, kita akan semakin mahir dan lebih menambah wawasan dalam membuat desain sebuah blog.

3. Custom Domain
Dengan melakukan costom domain, sobat bisa menggunakan nama domain punya Agan sendiri, tentunya aman dan Anda mendapatkan hosting gratis.

4. Terintegrasi dengan Google Plus, Google Analytic, Google Drive, Youtube dll
Dengan media Google plus, kita dapat melakukan "marketing" setiap artikel baru yang kita buat dengan terintegrasi secara otomatis di google plus. Itu artinya, kita sudah mempunyai "kolega" yang sama-sama kepunyaan Google.

5. Terintegrasi dengan Gmail
Sama halnya dengan google plus, cara kerjanya juga akan sama. Sobat juga bisa memanfaatkan semua layanan Google-Google Analytic, Google Drive, album foto Picasaweb Google, Google Scholar, Google Book, Google Map, dan banyak lagi, termasuk otomatis punya akun Youtube.

Itulah beberapa alasan yang sangat mendasar dan "rasional" yang dapat Anda jadikan pijakan dalam langkah awal membuat sebuah blog berkualitas. Untuk lebih memperdalam pemahaman ini, silakan simak artikel kelebihan dan kekurangan blogspot dan wordpress.

So, Salam blogger.

(http://www.forumblogindo.com/).*

Cara Memilih Template Blog yang Baik dan Benar (SEO & Disukai Google)

Pentingnya Menggunakan Template yang Berkualitas

Sobat, dalam kesempatan ini akan saya coba ulas cara memilih template yang baik dan benar. Mungkin Sobat agak sedikit kurang “cocok” dengan judul artikel kali ini, dan prediksi saya pada perkataan “baik dan benar”. 

Hal itu memang bisa saya fahami dan mengerti. Karena pada dasarnya, makna kata “baik dan benar” itu adalah relatif dan setiap orang mempunyai “acuan” serta “tolok ukur” sendiri-sendiri. 

Tujuan saya menggunakan “kata” baik dan "benar" adalah karena artikel ini berhubungan dengan artikel sebelumnya, yakni cara membuat blog berkualitas SEO dan disukai google. Jadi, tidak sekedar mengikuti apa kata hati saya, namun lebih pada “memahami” pemenuhan nilai SEO blog dan menuruti keinginan google.

Kenapa google?

Karena google merupakan “mesin pencari” utama saat ini (no 1) di dalam setiap browsing. Jika tidak percaya, silakan diuji menggunakan tools Alexa Rank, dan pastinya google berada pada peringkat no 1 di dunia (walaupun saat ini beredar kabar ada mesin pencari canggih, yakni MEMEX). Karena faktor itulah, kita “mengarahkan” kualitas blog kita di mata Google sebagai mesin pencari “no wahid” saat ini.

Kembali pada topik bahasan. Tentu dengan memahami artikel sebelumnya tadi, sobat akan mengetahui maksud dan tujuan utama dalam memilih template. Template yang baik dan berkualitas inilah nantinya akan menjadi “pondasi” blog Anda. Semakin kuat “pondasinya”, pasti akan semakin kuat keberadaan serta eksistensi blog Anda. Jika tidak, bisa dipastikan tidak akan bertahan lama, pasti tergerus dengan perkembangan teknologi gadget saat ini.

KRITERIA TEMPLATE BLOG YANG DISUKAI GOOGLE
Bahwasanya, keberadaan template yang berkualitas dipengaruhi 4 (empat) parameter utama, yaitu:

1. Skor SEO
2. Kecepatan loading
3. Tingkat responsif
4. User friendly/ memudahkan pengguna

Keempat parameter tersebut memang Wajib melekat di dalam sebuah template berkualitas. Jika salah satu saja “tidak ada”, maka akan mengurangi “nilai esensi” kualitas template itu sendiri, lebih khusus pada kualitas blog secara umum. Oleh karena itu, silakan gunakan template yang memang sudah mempunyai keempat kriteria di atas. 

1. Skor SEO 100%
Skor SEO 100% ini tidak sekedar bermakna “angka” saja, namun juga dinilai dari segi kevalidan struktur data penyusun sebuah template. Jika sudah mencapai skor SEO 100%, maka “bisa dipastikan” orang yang telah mendesign atau memodifikasi template tersebut sudah “menerapkan” optimasi dasar dalam meningkatkan kualitas sebuah blog. Paling tidak mencapai nilai 90% (grade A).



Misalkan saja dalam meningkatkan “rating” di dalam mesin pencari atau search engine, bagi orang awam, pemula (newbie) seperti saya ini, akan mengalami kendala dalam melakukan setting di dalam struktur data template tersebut, yang isinya berupa bahasa pemrograman HTML. Wah, perlu “study” lanjut donk Guys, hehe. 

Oleh karena itu, daripada “ribet” dan “pusing” dalam membuat atau memodifikasi sebuah template agar memenuhi SKOR SEO 100%, alangkah baik dan tidak ada dampak negatifnya Anda langsung menggunakan template yang sudah memenuhi kriteria tersebut. 

Jika rekan-rekan mengalami kesulitan dalam mencari template yang berkualitas dengan ke-4 kriteria di atas, rekan-rekan bisa langsung menggunakan template di label pada sidebar situs ini. Banyak kok, keren-keren abis pokokonya.

Semua template tersebut SEO dan user friendly yang telah teruji. Hal itu bisa diuji menggunakan parameter:

1. Skor SEO yang sudah 100% versi Chkme;
2. Kecepatan loading yang baik dan stabil, yakni grade A; 
3. Super responsif;
4. Dan user friendly (memudahkan pengunjung);

Jika rekan-rekan belum mengetahui tools úntuk menguji ke-4 kriteria di atas, silakan baca artikel senjata ngeblog para master bloger.

2. Kecepatan Loading Blog
Kecepatan loading sebuah blog menjadi faktor penentu dalam menarik hati pengunjung. Mana ada sih rekan-rekan yang mau menunggu lama karena blognya terasa berat, lelet, lemeot saat dibuka? 

Padahal saat itu lagi kebutuhan mendesak memerlukan informasi dari blog tersebut? Yang ada pengunjung akan mencari “alternatif lain” dengan “berlabuh hati” pada blog yang lain, walaupun mungkin dengan informasi yang di bawah blog yang lelet (berat saat dibuka tadi). 

Hal itulah yang menjadi dasar pentingnya template yang super fast loading alias super cepat saat dibuka.

3. Tingkat Responsif

Makna responsif di sini terkait dengan semakin maraknya teknologi smart phone. Karena berkembangnya teknologi gadget yang sangat luar biasa, maka sebagian orang “sudah beralih” menggunakan smart phone saat browsing. 

Itu artinya, blog Anda harus enak dilihat, nyaman dibaca dan digunakan oleh pembaca setia, dengan menggunakan berbagai device apapun, baik smart phone atau komputer tablet. 

Oleh karena itu, makna kata Responsif di sini melekat pada aspek kebutuhan pembaca yang disesuaikan dengan “ukuran” layar smart phone mereka masing-masing.

Jika masih ada yang belum tahu cara menguji tingkat responsif tidaknya suatu template blog, silakan baca artikel berikut [klik di sini] atau ke [sini].

Kali ini Ane menggunakan template dengan model berbeda, yakni mobile friendly. Tengok saja newsugeng2015 blogger template. Berikut tampilan lewat mobile:

Tampilan www.forumblogindo.com mobile friendly

Best Blogger Template 2015

Kali ini ada upadate template terbaru, yakni SL Super Fast. Nih kelebihannya:

Demo | Premium Template

Fitur:

1. SEO Ready
2. The design of premium blogger template
3. Two columns
4. Super responsive
5. Simple, minimalist dan premium design
6. Fast loading
7. Breadcrumb
8. For a personal blog or company
9. more and more...

Jika berminat, silakan hubungi forumbloggerindo@gmail.com

4. User Friendly

User friendly sebenarnya hampir mempunyai makna yang sama dengan point ketiga, yakni responsif tidaknya sebuah template. Namun perbedaannya pada segi desain dan fungsi. Template user friendly bermakna memudahkan pembaca. Sehingga, cakupan responsif termasuk salah satu aspek user friendly. Sehingga, sebuah template dengan kategori responsive belum tentu dinilai user friendly. Karena selain responsive, user friendly lebih luas cakupannya.

Berikut ciri-ciri sebuah template blog yang user friendly:

1. Responsif
2. Pemilihan warna yang baik;
3. Tidak menyilaukan mata; 
4. Penggunaan susunan kata yang enak dibaca dan tidak menggunakan bahasa yang sumbang;
5. Terdapatnya “menu wajib ada pada blog”

Kesimpulan

Dari uraian penjelasan di atas, bahwa ke-4 parameter di atas memang Wajib melekat di dalam sebuah template berkualitas. Jika salah satu saja “tidak ada”, maka akan mengurangi “nilai esensi” kualitas template itu sendiri, lebih khusus pada kualitas blog secara umum. 

Oleh karena itu, silakan gunakan template yang memang sudah mempunyai ke empat kriteria di atas.

Salam hangat.
****. Note:
Jika ada hal yang perlu didiskusikan, silakan sampaikan pada kolom diskusi njeh. Bisa menggunakan akun facebook atau ID Google di bawah.

(www.forumblogindo.com).*