Cara Membuat Menubar Dropdown Resonsive Simple di Blog

Cara Membuat Menubar Dropdown Simple Responsive di Blog. menubar atau bisa juga disebut navigasi blog atau menu navigasi blog, widget menubar saya katakan sangat wajib ada pada blog, karena hal ini untuk kemajuan blog anda dan yang paling utama untuk memudahkan pengujung menavigasi blog anda dengan menubar ini, bisa di ber tag label atau menu lainnya, seperti halaman about sitemap dan penambahan tag-tag lainnya, menubar ini juga bisa di terapkan fungsi yang lebih seperti penambahan dropdown menu, agar tag tidak penuh dan terlihat lebih profesional.

Disini saya akan membuat tutorial menubar yang sangat simple dan juga responsive, kode menubar ini saya ambil dari blog arlina blog, menubar yang responsive, hal ini guna untuk agar mudah di navigasi pada halaman dengan ukuran yang sangat kecil, dan bisa menyesuaikan dengan halaman tampilan blog anda.

Cara Membuat Menubar Dropdown Simple Responsive di Blog

1. Buka akun blogger anda.

2. Pilih menu template dan klik edit HTML.

3. Pertama, untuk kode cssnya.

/* Main Navigation */
#navi-arlina{height:45px;text-transform:uppercase;font-size:100%;background:#45a2db;color:#fff;font-family:Oswald;margin:0 15px}
#navi-arlina ul.menus{background:#45a2db;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navi-arlina a{display:block;line-height:45px;padding:0 15px;text-decoration:none;color:#fff}
#navi-arlina ul,#navi-arlina li {margin:0 auto;padding:0;list-style:none}
#navi-arlina ul {height:45px;}
#navi-arlina li {float:left;display:inline-block;position:relative}
#navi-arlina input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#navi-arlina label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#navi-arlina label span {font-size:16px;position:absolute;left:55px}
#navi-arlina ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#navi-arlina ul.menus a {color:#fff;line-height:55px}
#navi-arlina li a:hover {background:#3a91c7}
#navi-arlina li:hover ul.menus,#navi-arlina li:hover > ul {display:block}
#navi-arlina ul.menus a:hover {background:#444;color:#fff}
#navi-arlina li ul{background:#444;margin:0;width:150px;height:auto;position:absolute;top:45px;left:0;z-index:10;display:none}
#navi-arlina li li {display:block;float:none}
#navi-arlina li li:hover {background:#444}
#navi-arlina li li a:hover {background:#444;text-decoration:underline}
#navi-arlina li ul ul {left:100%;top:0}
#navi-arlina li li > a{display:block;padding:0 10px;margin:0;line-height:30px;text-decoration:none;color:#fff}
@media screen and (max-width:800px) {
#navi-arlina{position:relative}
#navi-arlina ul{background:#45a2db;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navi-arlina ul.menus{width:100%;position:static;padding-left:20px}
#navi-arlina li{display:block;float:none;width:auto}
#navi-arlina input,#navi-arlina label{position:absolute;top:0;right:0;display:block}
#navi-arlina input{z-index:4}
#navi-arlina input:checked + label{color:#fff }
#navi-arlina input:checked ~ ul{display:block;width:100%}
#navi-arlina li:hover > ul{width:100%}}

Selanjutnya untuk kode pemanggilnya

<nav id='navi-arlina' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
  <input type='checkbox'/>
  <label>MENU</label>
  <ul>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Advertise</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Portfolio</span></a></li>
    </ul>
  </li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Technology</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Bussiness</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Lifestyle</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
    </ul>
  </li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
    </ul>
  </li>
  </ul>
  </nav>

simpan template

Perbedaan Optimasi SEO Onpage dan SEO Offpage

Sebelum saya jelaskan mengenai Perbedaan Optimasi SEO Onpage dan SEO Offpage, saya akan jelaskan secara singkat mengenai apa itu seo?, bisa jadi anda baru belajar tentang seo dan bisa jadi anda belum terlalu paham apa yang dimaksud dengan seo, oh ya mengenai seo ini jika anda ingin mengetahui lebih detail anda bisa baca di artikel yang pernah saya tulis sebelumnya tentang  memahami apa itu seo untuk pemula, artikel tersebut sangat cocok untuk pemula agar bisa lebih memahami seo secara lebih baik.

Jika harus dijelaskan seo sebenarnya adalah singkatan dari srach enggine optimization, yaitu optimasi mesin pencari yang biasanya banyak dilibatkan dalam artikel postingan blog atau situs dengan tujuan agar si artikel yang dioptimasi tersebut lebih mudah ditemukan di hasil pencarian mesin pencari di posisi terbaik, seperti mesin pencari google yahoo atau bing dan mesin pencari lainnya.

Perbedaan Optimasi SEO Onpage dan SEO Offpage

Upaya seo biasanya selalu menggunakan pendekatan-pendekatan mesin pencari, seperti misalnya jika artikel blog ingin lebih mudah ditemukan di hasil pencarian google, maka teknik seo yang digunakan harus sesuai dengan pendekatan google rangking faktor yang dimiliki oleh google yang jumlahnya kurang lebih ada 200+ faktor, jika google melihat artikel postingan yang anda buat paling dianggap mendekati faktor-faktor yang terdapat pada google ranking, maka dapat dipastikan artikel tersebut akan lebih mudah ditemukan dan muncul di hasil pencarian google di posisi terbaik, bisa posisi ke #1, posisi ke #2 atau minimal bisa muncul di halaman pertama google (page one) tertangung tingkat kompetitifnya.

Ada 2 kategori SEO yang dikenal secara luas, yaitu optimasi seo onpage dan optimasi seo offpage, optimasi seo onpage adalah segala bentuk upaya optimasi yang dilibatkan oleh si pemilik situs di dalam situsnya itu sendiri, sedangkan optimasi seo offpage adalah segala upaya yang dilakukan oleh si pemilik situs di luar situsnya namun masih memberikan dampak untuk situsnya.

Perbedaan Optimasi SEO Onpage dan SEO Offpage

Untuk dapat lebih memahami Perbedaan optimasi seo onpage dan optimasi seo offpage maka anda harus mengetahui upaya yang harus dilakukan untuk setiap optimasi tersebut, sehingga dengan mengetahuinya maka anda akan mampu sendiri membedakan kedua upaya optimasi tersebut.

Cara kerja mesin pencari seperti google dan mesin pencari lainnya saat ini memiliki kinerja yang tidak jauh berbeda, biasanya mereka akan menilai, kualitas dan relevansi sebuah konten terhadap kata kunci yang dijadikan kata kunci pencarian dan juga akan melihat juga eksistensi pendukung yang memberikan vote terhadap sebuah artikel di dalam sebuah blog. jika kedua unsur tersebut dianggap terpenuhi kemungkian artikel akan dinilai layak untuk mendapatkan posisi terbaik di hasil pencarian. kedua cara kerja mesin pencari tersebut sangat erat kaitanya dengan seo, ketika upaya kita fokus ke kualitas konten maka itu sudah mewakili sebagian dari optimasi seo onpage, dan ketika upaya kita fokus untuk mencari vote untuks ebuah artikel dari luar situs itu sudah mewakili optimasi seo offpage.

Untuk lebih jelas, tentang perbedaan optimasi seo onpage dan seo offpage adalah sebagai berikut:

# Optimasi seo onpage

Sekali lagi optimasi seo onpage adalah segala upaya yang dilakukan oleh si pemilik blog atau situs di dalam situsnya itu sendiri dengan tujuan agar blognya mendapatkan reputasi yang baik di mata mesin pencari sehingga setiap artikel blognya lebih mudah ditemukan di hasil pencarian di posisi terbaik.Beberapa upaya optimasi seo onpage diantaranya adalah sebagai berikut:

a. Membuat artikel dengan melibatkan unsur-unsur seo onpage yang disukai oleh mesin pencari di dalamnya. Untuk membuat artikel yang seo onpagenya baik biasanya selalu menggunakan pendekatan google rangking faktor, dari mulai membuat judul postingan, melatekan kata kunci yang teroptimasi, membuat permalink yang teroptimasi dan lain sebagainya, 
Untuk optimasi artikel, siapapun bisa termasuk anda walupun anda adalah blogger pemula, yang penting anda menetahui bagaimana cara membuat artikel yang teroptimasi dengan baik.

b. Membenahi struktur Template sehingga banyak melibatkan unsur-unsur yang sesuai dengan rangking faktor, misalnya membuat template menjadi responsive sehingga mobile friendly ketika template diakses menggunakan perangkat mobile,  membenahi struktur template agar terhindar dari duplikat konten yang tidak disukai mesin pencari dan lain sebagainya.

Untuk membenahi struktur template agar mendukung seo onpage yang baik setidaknya anda harus mamahami struktur template dan juga memiliki kemampuan untuk membuat template, tapi jangan khawatir jika anda merasa kesulitan untuk membenahi template, cara paling praktis adalah mencari template blog gratisan yang sudah seo friendly yang banyak sekali dishare oleh teman-teman blogger, jadi anda tidak perlu repot-repot harus membenahinya sendiri.

Optimasi SEO Offpage

Sedangkan optimasi seo offpage adalah segala macam upaya yang dilakukan di luar situs itu sendiri namun masih memberi dukungan terhadap blog sehingga blog lebih mudah ditemukan di hasil pencarian. Untuk lebih memahami upaya apa saja yang dapat mendukung optimasi seo offpage setidaknya anda harus mengetahui google rangking faktor.

Beberapa upaya optimasi seo offpage adalah sebagai berikut:

a. Membangun backlink, anda bisa jadi bertanya apa itu backlink? backlink atau disebut juga sebagai inbound link atau link masuk adalah link di situs atau blog orang lain yang jika diklik akan menuju halaman blog anda, backlink sampai saat ini dianggap sebagai faktor yang dapat meningkatkan ranking halaman situs, semakin banyak link dan semakin baik kualitasnya ada banyak cara membangun backlink dan backlink sampai saat ini menjadi salah satu faktor yang bisa memberikan dampak meningkatkan rangking halaman blog di hasil pencarian, backlink seperti halnya vote untuk halaman situs, tentunya untuk membangun backlink perlu

b. Promosi, baik secara offline maupun online
Yang berikutnya adalah prmosi baik secara online maupun offline, promosi offline biasanya upaya mengenalkan alamat situs agar diketahui oleh publik apapun caranya, sedangkan promosi secara online misalnya melalui media sosial seperti facebook twitter google plush dan lain sebagainya, upaya-upaya tersebut dilakukan di luar situs namun akan memberikan dampak pada trafik blog atau situs.

Mengenal Blackhat SEO dan Whitehat SEO

Di dunia seo pun kita mengenal istilah blackhat seo dan whitehat seo, ini erat kaitannya dengan upaya seo yang dilakukan, upaya optimasi seo sebenarnya tidak bisa dilakukan secara sembarangan walaupun anda secara teori mengenal dan paham terhadap unsur-unsur seo namun pada prakteknya upaya tersebut dibatasi dengan rambu-rambu kebijakan mesin pencari.

Jika upaya seo yang kita lakukan sesuai dengan kebijakan google webmaster guideline, maka seo yang kita lakukan bisa disebut whitehat seo, sedangkan jika upaya yang kita lakukan walaupun sesuai dengan unsur seo namun tidak sesuai dengan kebijakan google, upaya seo seperti itu bisa kita sebut dengan blackhat seo.

Mana yang sebaiknya anda pilih white hat atau blackhat, tentu saja white hat, walaupun blackhat dalam beberapa kasus bisa mempengaruhi peringkat halaman situs di hasil pencarian, upaya seo seperti ini tidak akan mampu memberikan hasil yang maksimal dan biasanya tidak mampu bertahan lama, pada akhirnya akan memperburuk reputasi blog di mata mesin pencari, dan seiring dengan perkembangan algoritma mesin pencari hasil teknik blackhat seo lambat laun akan tenggelam.

Cara Menghapus Showing Posts with label

default pada blog widget label, jika kita klik link label, maka akan terbuka halaman label (label page) dengan tulisan di atasnya Showing Posts with label .... Itu teks default bawaan blogger.

Jika terasa mengganggu, dan Anda ingin menghilangkan atau menghapusnya, maka tips jitu dari Help Logger berikut ini cara menghapus tulisan Showing Posts with label di halaman label blog Anda:

LANGKAH 1
Klik Template > Edit HTML

LANGKAH 2
TEMUKAN (Ctrl+F) kode:

<b:includable id='status-message'>

Di bawah kode tersebut ada rangkaian kode lainnya. Kode selengkapnya:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

LANGKAH 3 Cara Menghapus Showing Posts with Label Blogger

HAPUS kode tersebut dan GANTI dengan kode berikut ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

 Save Template!

Silakan cek dengan klik salah satu label posting blog Anda, maka tulisan Showing Posts with label mestinya sudah lenyap alias tiada. Happy Blogging.

Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog

Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog. Sobat blogger, Pada kesempatan kali ini saya ingin membuat sebuah tutorial cara membuat kotak atau space iklan banner yang berukuran 125x125 yang mungkin anda bisa tempatkan di bagian sidebar atau bisa dimana saja, karena berhubung mungkin blog anda sudah memiliki popularitas yang memang sudah bisa kategorikan blog ramai pengunjung.

Maka menyediakan sebuah banner atau menyediakan space banner untuk pengiklan adalah suatu keharusan jika anda ingin mendapatka hasil yang lebih dari blog, karena yang sudah kita tahu, menyediakan space iklan bukan hanya untuk di prioritaskan google adsense saja, maka untuk membuka peluang mendapatkan uang dari blog, dengan menyediakan banner atau kotak iklan di blog adalah cara yang sangat efektif untuk mendapatkan uang selain dari adsense.

Cara Membuat / Memasang Widget Kotak atau Slot Iklan di Blog Untuk cara membuat space kotak iklan yang berukuran 125x125 ini sangat mudah sekali, anda juga bisa meletakan kotak iklan ini tidak harus di sidebar, namun bisa di letakan di tempat lain di blog, itu anda bisa kreasikan sendiri dan anda atur sendiri, namun disini saya akan membuat kotak iklan ini bisa terpasang di bagian sidebar blog.

Cara Membuat Widget Kotak atau Slot Iklan di Blog
1. Buka akun blogger anda.
2. Pilih menu template >> klik edit HTML.
3. Sekarang anda letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* space iklan 125x125 */
.space_iklan {text-align: center;}
.space_iklan  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.space_iklan  img:hover {border:1px solid #aaa}
.space_iklan  img.noborder {border:0;}

4. Save template.
5. Sekarang pilih menu tata letak >> tambah gadget / add widget >> HTML Java/script
6. Paste kode di bawah ini di kotak yang disediakan.

<div class="space_iklan">
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
</div>

7. Klik save.

Itu saja untuk artikel saya kali ini di tutorial cara memasang atau membuat kotak iklan diblog. kurang lebih mohon maaf, jika ada step / tutorial yang kurang jelas tanyakan saja dikomentar semoga sukses.. :)

Mengatasi Iklan Google Adsense Error, Tiba-tiba Hilang, Tidak Tayang

Mengatasi Iklan Google Adsense Error, Tiba-tiba Hilang, Tidak Tayang - Beberapa jam yang lalu ada sedikit kehebohan dimana iklan adsense tidak tampil di laman web/blog dimana Adsense Tiba-tiba Hilang. Setelah melakukan percarian, hampir seluruh dunia mengalaminya. Ada yang hilang tapi ada juga yang iklannya tetap tampil. Saat cek email juga tidak ada pemberitahuan tentang masalah ini. Ada banyak alasan untuk “Iklan Google Adsense Anda Berhenti Bekerja” tapi Jika anda merasa belum melanggar kebijakan apapun, ini mungkin bisa membantu anda.

Cara / Solusi Memperbaiki Iklan Google Adsense Berhenti Bekerja/Adsense Tiba-tiba Hilang atau tidak tayang:

1. Login ke Account Adsense anda.
2. Klik Iklan Saya, lalu klik Unit Iklan.
3. Sekarang klik pada unit iklan baru.
4. Buat unit Iklan baru, pilih salah satu opsi dari jenis Iklan.
5. Setelah membuat unit iklan baru, salin kode itu dan letakkan di manapun di situs Anda.
6. Tunggu 10-20 menit agar unit Iklan tersebut dapat ditayangkan di situs web Anda.
7. Setelah unit Iklan Anda ditayangkan, Anda akan melihat semua iklan Anda berfungsi dengan baik.

Saya mengalaminya juga, setelah mengikuti langkah diatas, adsense kembali tampil. Itulah tips untuk Adsense Tiba-tiba Hilang

Cara Membuat Template Default Blogger Menjadi Responsive

Cara Membuat Template Default Blogger Menjadi Responsive, Sobat blogger, tutorial membuat responsive template default blogger ini sangat cocok bagi anda yang ingin berkreasi untuk membangun sebuah template dari blogger yang responsive, biasnya yang ingin memodif template bawaan blogger ini sering terkendala karena templatenya tidak responsive, namun sekarang anda bisa membuat template tersebut menjadi responsive dengan mudah sekali sobat blogger, tak sesulit yang dipikir..dan untuk tutorial ini saya belajar dari KompiAjaib.

Bagi anda yang ingin membuat template default blogger ini menjadi responsive anda bisa ikuti tutorialnya disini, sekaligus kita belajar juga dan saya sudah prektekan dan hasilnya berhasil. :)

Cara Membuat Template Default atau Bawaan Blogger Menjadi Responsive
1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"
2. Sekarang cari kode di bawah ini :

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

3. Lalu ganti kode tersebut dengan kode dibawah ini.

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Selanjutnya cari kode dibawah ini :

 <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

5. Lalu ganti kode tersebut dengan kode di bawah ini :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>   

6. Sekarang letakan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

 7. Klik save template dan selesai.

Selesai sudah, dan anda sudah  membuat template default blogger menjadi responsive, mudah sekali bukan, silahkan di cek saja, terimakasih buat mas Adhy atas pelajarannya :) sekian tutorial "Cara Membuat Responsive Template Default Blogger"


Referensi : http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html

Cara Memasang Widget Recent Comment di Blogger

Cara Memasang Widget Recent Comment di Blogger - Membuat dan memasang recent komen di blog dapat memudahkan anda dan pengunjung untuk mengetahui komentar terkahir yang baru saja masuk ke blog anda . Di samping itu widget recent Comment ini juga dapat mengisi ruang yang kosong yang biasanya terletak pada sidebar blog , sehingga blog tidak tampak kosong ala kadarnya begitu saja. Namun jika terlalu banyak widget , blog juga tidak seo frendly untuk pengunjung , dikarenakan loading blog akan bertambah semakin berat .

Dalam membuat widget Recent Comment ini tidaklah terlalu sulit , kita hanya tinggal pakai widget dari para mastah yang sudah membuat dan membagikanya , jadi anda tidak usah memikirkan koding css dan javascript yang bikin kepala pusing tujuh keliling , kecuali jika anda sudah terbiasa , maka tidak sulit bagi anda untuk meodifikasi widget recent Comment ini atau bahkan menciptakan widget yang jauh lebih keren lagi.

credit image : blog.kangismet.net

Bagi sobat yang belom tahu seperti apa itu recent comment dan sekaligus mematangkan sobat tentang pemahaman sobat mengenai widget ini ( sudah baca artikel diatas tadi ) silahkan sobat melihat gambar diatas , Nah nantinya widget recent komentar yang akan kita buat seperti itu

Tutorial / Cara Membuat Widget Recent Comment Keren di Blogger

Kelebihan widget recent komen ini adalah sudah valid html5 , jadi bagi anda pecinta validator , tidak usah susah - susah untuk mengeditnya lagi , selain itu widget recent comment ini juga di lengkapi dengan wajah avatar orang yang berkomentar sehingga kita dapat mudah siapa saja yang berkomentar , oke langsung saja ke tiknya :

1. Pastikan sobat sudah masuk terlebih dahulu ke dasbhor blog sobat
2. Lihat menu pada bagian samping kiri , pilih menu Tata Letak => Tambah Gadget => Html/Javascript
3. Lalu salin kode dibawah ini dan tempelkan di dalam kolom html/javascript tadi :

<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px 
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Mas Yadi';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

4. Terkahir Klik Simpan

Namun sebelum menyimpanya sobat harus perhatikan dulu , kode - kode diatas , yaitu dengan menyesuaikan kode diatas dengan blog sobat , seperti menentukan jumlah komentar yang ingin di tampilkan dan lain sebagainya , untuk jelasnya silahkan perhatikan kostumisasinya.

Kostumisasi Widget Recent Comment With Avatar

Untuk membuat tampilan berbeda, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Kang Ismet' (nama admin blog, wajib diganti)

Nah gimana bro cara membuat recent comment sendiri di blog ? begitu gampang sekali bukan ? saya yakin jika anda membaca dan mengikuti tutorial diatas insya Allah bisa , bahkan newbie sekalipun yang baru saja mengenal blog kemaren sore , bisa mempraktekan hal semacam ini.

Apa yang terjadi jika sering mengganti Template pada Blog?

 Apa yang terjadi jika sering mengganti Template pada Blog?  Sering gonta ganti template adalah sudah jadi tradisi seorang blogger yang masih pemula di dunia blogging, dan mungkin hal ini juga adalah suatu hobby yang mengasikan, yah memang benar, tak dipungkiri, ketika saya masih baru menginjak di dunia blogging, saya juga paling hobby sekali mengganti template dan mengeditnya dengan segala macem widget, saya selalu tertarik dengan sebuah template yang tampilannya baru dan tak ayal, yang bikin tertarik adalah dengan iming-iming template SEO friendly

Hal ini memanglah sangat wajar bagi seorang blogger yang masih pemula, ya namanya juga pemula, anggap sajalah suatu kenang-kenangan yang nantinya jadi masa lalu, namun disini saya bukan ingin membahas kalian ini pemula atau bukan, hanya saja ini adalah sebuah pembelajaran, karena pekerjaan seperti ini mempunyai dampak yang bisa membuat anda tidak pernah maju, ko bisa? apa saja sih dampak dari sering gonta ganti template?


Apa yang terjadi jika sering mengganti Template pada Blog?

1. Menurunkan Pageviews atau Visitor pada Blog
Kenapa bisa? jelas hal ini akan membuat pusing bot crawler google, karena setiap kita mengganti sebuah template blog, bot google akan merayapi ulang struktur-struktur template blog anda, karena hal tersebut akan tampak asing, apalagi anda tidak tahu bagaimana cara mengganti template yang baik, seperti kesalahan yang sering dilakukan adalah mengganti keseluruhan kode yang terdapat pada template blog anda, tanpa mengamankan kode-kode penting yang harus di amankan terlebih dahulu.

Solusi agar tidak kehilangan pengunjung saat mengganti template blog adalah anda harus backup meta tag terlebih dahulu dan menyiapkannya ke template yang akan anda pasang.

2. Menghabiskan waktu dan tidak menguntungkan
Anggap saja anda sudah sebulan ngeblog, dan pekerjaan anda hanyalah memperhatikan tampilan blog dan sering gonta ganti template, ketika ada rilis template baru, maka langsung ganti, sebenarnya ini tidak masalah jika anda membuat blog hanya untuk tempat curhat saja, tapi jika anda membuat blog untuk masa depan, maka hal ini akan membuang buang waktu tanpa menghasilkan apapun, coba anda tanya pada diri sendiri, apa yang sudah di dapat dari sering gonta ganti template?

3. Artikel tidak bertambah karena keasikan mengganti Template
Karena saking asiknya memperhatikan tampilan blog dan sering gonta ganti template, maka jelas anda akan lupa untuk membuat posting blog itu sendiri, padahal yang paling penting dalam blog adalah isinya, (Content Is King) Jika anda ada niat untuk membuat posting, maka sudah pusing duluan karena terlalu lama di depan pc, tapi hanya memperhatikan template saja, maka pemikiran pun akan buyar dan gak konsen.

4. Kalah Saing dan Tertinggal oleh Blogger Lain, dan mulai timbul rasa jenuh
Bagaimana tidak kalah saing? inti dari blogging adalah isinya, yaitu konten blog, orang lain sudah membuat seribu artikel, anda hanya memperhatikan template saja, orang lain sudah mempunyai pengunjung anda hanya melongo saja, lalu dalam hati berkata? kenapa blogku sepi?

5. Bosan, Frustasi, dan mengakibatkan Berhenti Menulis artikel / ngeblog
Jika anda sudah bosan karena blognya tidak ada pengunjung, maka akan ada titik jenuh yang akhirnya anda akan berhenti ngeblog, dan mungkin suatu saat kembali lagi dan mungkin aka melakukan hal yang sama.

KESIMPULAN.
Menurut saya ini adalah hal yang wajar, tapi jika anda sudah menyadari hal ini, yang harus anda lakukan adalah harus menjadi blogger sejati, yeah blogger yang tidak pernah menyerah dan konsisten dalam dunia blog, jika anda ingin maju, maka perbaiki kesalahan yang pernah dibuat, belajar lagi dan belajar lagi untuk menjadi blogger yang besar,  pada intinya seorang blogger yang sudah sukses adalah awalnya juga seorang pemula, maka jika mereka bisa sukses, kita pun bisa seperti mereka. :)

1 lagi yang terpenting bagi seorang penulis / blogger adalah KONSISTEN

Membuat Box Download Seperti Samehadaku NET

Membuat Box Download Seperti Samehadaku NET -  mungkin kebanyakan dari kalian pemilik blog download anime / ost atau apapun itu bingung karena ingin membuat box download mirip seperti milik situs samehadaku net,  karena apa? dengan membuat tabel seperti foto berikut, akan membuat tampilan link didalam postingan menjadi rapi & juga mempermudahkan pengunjung yang ingin mendownload.

Sebenarnya membuat model download box seperti diatas tidaklah terlalu sulit, karena kita tinggal Inspect element saja template yang di pakai situs tersebut, nanti kita akan bisa melihat kode-kode tersebut atau juga kita bisa mengintipnya lewat source (ctrl + u).

Namun memang bagi yang belum paham betul tentang kode HTML, hal ini dirasa mungkin agak sulit, maka untuk itu saya buatkan tutorial ini untuk mempermudah sobat bagi yang mau membuat link download seperti situs samehadaku.net.

Membuat Box Download / Tabel Link Seperti Samehadaku NET

1. Buka akun blogger anda.
2. Pilih menu template >> Klik edit HTML
3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> :

.download-eps {
    font-size: 9px;
    font-weight: bold;
    background: none repeat scroll 0% 0% #F5F5F5;
    padding: 10px;
    margin: 10px 0px;
}
.download-eps ul {
    margin: 0px;
    padding: 0px;
    list-style: outside none none;
}
.download-eps ul li {
    background: none repeat scroll 0% 0% #E4E4E4;
    margin-bottom: 2px;
    line-height: 26px;
    padding: 0px 5px;
    font-size: 15px;
}
.download-eps ul li strong {
    background: none repeat scroll 0% 0% #1e7ce5;
    border-right: 2px solid #F5F5F5;
    width: 150px;
    display: block;
    float: left;
    margin-left: -5px;
    margin-right: 2px;
    color: #FFF;
    padding: 0px 5px;
    text-align: left;
} 

Nahh untuk membuat kode pemanggilnya silahkan sobat copy code dibawah ini dan letakan di mode HTML saat membuat artikel.

 <div class="download-eps">
<ul>
<li style="text-align: center;">
<strong>360p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
<li style="text-align: center;">
<strong>720p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
<li style="text-align: center;">
<strong>1080p</strong>
<a href="URLANDA" target="_blank" rel="nofollow">Solidfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Tusfiles</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Acefile</a> |
<a href="URLANDA" target="_blank" rel="nofollow">Mirror</a>
</li>
</ul>
</div> 

Silahkan ganti nama "URLANDA" atau sobat sesuaikan dengan link dan nama situs downloadnya.

Memodifikasi Widget Label Cloud Flat UI Style

Memodifikasi Widget Label Cloud Flat UI Style - Helo Sobat, Kali ini saya akan membagikan artikel tentang bagaimana cara membuat Memodifikasi Widget Label Cloud Flat UI Style keren ala Saya sendiri RZKCODE, untuk membuat Widget Label ini hanya perlu menambahkan atau mengedit ulang css label cloud yang sebelumnya sudah ada, berikut screenshot nya :

Berikut Tutorial nya :

1. Sebelum membuat Widget Label ini sobat masuk ke Tata Letak > Klik "Edit" pada Widget Label atau Buat Widget Label baru apabila sobat belum membuat Widget nya, setelah itu buat seperti ini :

2. Apabila sudah langsung saja menuju Template > Edit HTML , Cari kode CSS Label Cloud blog sobat, lalu hapus saja css yang lama dan ganti dengan kode css dibawah ini, namun apabila di template blog sobat belum terdapat kode CSS Label Cloud langsung saja sobat tambahkan kode CSS berikut :

/*CSS Label*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #1abc9c;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background:#16a085; }
.Label a:after{
content: &quot;&quot;;
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;
}

3. Selesai.

Sekian artikel saya hari ini, maaf atas segala kekurangan atau kelebihannya, Wassalam.

Cara Membuat Template Blogger Lengkap

Cara Membuat Template Blogger Lengkap - bosen dengan template buatan orang lain dan ingin membuat template sendiri yang elegant...??? Mulailah membangun template blogger kamu sendiri dengan mengikuti tutorial membuat template blogspot/blogger dibawah ini:

1. Mengenal Struktur Dasar Template Blogger
2. Bagian 1 dasar element / Pola
3. Bagian 2 Body dan Outer Wrapper
4. Bagian 3 Header
5. Bagian 4 Block Sidebar
6. Bagian 5 Main Wrapper, Post dan Kotak komentar
7. Selesai Bagian 6 Footer 
8. Mengganti header dengan gambar
9. Selamat Berkreasi . . .

Diatas merupakan list tutorial sederhana bagaimana membuat template blogger sendiri, menciptakan template blogspot, cara membuat blogger template.

Mengganti Header Dengan Gambar

Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?

Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti dibawah ini :

/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919;  warna latar header hitam dengan kode warna #191919

Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.

Kedua  : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.

Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :

#header-wrapper {
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}

Dan rubah kode warna biru background:#191919; 

Menjadi :

background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}

Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {
width:960px;
height:150px;
background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg) top center no-repeat;
}

Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg dengan URL gambar yang telah dibuat

Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.

URL Gambar 1 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyrOk9bN6fojrBBf6w9OyrxOxpT4YrhicGBOortFnXKiMNbsnUXfpexwZXHDboyFRtqby_UPS3ih98wUUY2fcDUN7XWodkVuRo193A8R9-xivoPjhQTmJSD37CvPh8Y9pCAoiZzN_OcY2P/s1600/header1.jpg


URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg


URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPjaBlPsJilZSrIf6tLqs2cc1SGJVHwDQOyglrNREIcPxtbDbHn966xkrzw86N4zF2tCNK3x8WaC_d6wSqAW7M4AOe9JHG_T00H5G0L8LQo-nn3KSFfp0OVqjzICXuTWHJOeXFjaMfTwc/s1600/header3.jpg


URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVCjVysXxoKvBSAR6ZdVLkbCMZvd4u-Jyf4dVcmrXcDhmgJl168zqdWvyVEqaKJBLKNoWmmg3Mh1x_NMAz1KJHBHSr9z5lk-pVMMXkoKG-tqKiT5kUwe9DjtVCuGg7Y5cy2UtEbVSHFFG/s1600/header4.jpg


URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdC4Ef9BpP06Z6pQw7thn0d5ZPvhYx6zjUG3FUi30PpDnN1ZxMI2DCAvAdnR4Qqi5j5OWmtSC2ic563J4ZjV7O6_YZShwx55dLgISe4e-QmyDupBOzCAlQxC7Wj0MshSOaYPks94GJqgs/s1600/header5.jpg