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

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

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.

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 Widget Popular Post Menjadi Warna Warni

Cara Membuat Widget Popular Post Menjadi Warna Warni - Widget Popular Post / Artikel populer adalah artikel yang banyak dilihat oleh pengunjung. Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Elementdan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat. Untuk tampilan popular post akan terlihat seperti gambar dibawah ini.

Baca Juga Artikel : Cara Terbaru Membuat Blog atau Artikel Tidak dapat di Copy Paste

Cara Membuat Widget Popular Post Menjadi Warna Warni

Cara Membuat Widget Popular Post Menjadi Warna Warni yang pertama anda lakukan adalah memasang widget popular postnya terlebih dahulu, jika sudah tidak perlu memasang lagi, tetapi bagi yang belum tau cara memasangnya bisa melihat tutorial dibawah ini :

Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda

2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja, lakukan seperti gambar dibawah ini :

3. Masuk ke Edit HTML Blog lalu lakukan pencarian dengan menekan tombol CTRL + F nanti akan muncul kotak pencarian kecil , dan cari kode berikut ini :

]]></b:skin>

4. Jika sudah ketemu kode diatas, lalu letakkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

Kode CSS :

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;font-size:17px;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Kurang lebih akan jadi seperti ini :

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;font-size:17px;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
]]></b:skin>

4. terakhir klik Simpan Template

Selamat sekarang Anda mempunyai tampilan popular keren, unik, warna - warni dan menarik. Anda juga bisa mengganti warna tersebut dengan mengubah nilai pada CSS Pengaturan Warna.jika ada step yang kurang jelas, bisa tanyakan di komentar. Happy Blogging.