Membuat Daftar Isi Berdasarkan Kategori

Cara Membuat Daftar Isi Berdasarkan Kategori - Daftar isi merupakan daftar yang menampilkan beberapa isi/judul dari sebuah artikel dari blog, Dalam Daftar Isi dapat mempermudah pengunjung untuk mencari artikel yang ingin visitor di carinya untuk daftar isi kita juga dapat mempermudah visitor untuk mencari artikel lama, mempermudah mencari artikel dan visitor semakin betah jika artikel di daftar isi tersebut bermanfaat

Nah bagi anda yang ingin membuat daftar isi di blog,silahkan anda ikuti tutorialnya di bawah ini :

  1.Masuk ke akun blogger anda
  2.Lalu buat entri baru dan pilih modus HTML
  3.Copy kode di bawah ini :
<script style="text/javascript" src="http://alfadlys.googlecode.com/files/daftar_isi.js"> </script> <script src="http://alfadlys.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

GANTI :
http://x-maty.blogspot.com/ dengan URL blog anda

  4.Simpan !

Mengganti Warna Background Blog Dengan Gambar

Cara Mengganti Warna Background Blog Dengan Gambar - Mungkin untuk yang pertama kali terjun di dunia blog pasti belum bisa mengganti warna background atau mengganti background dengan gambar, Sebenarnya cara ini sangat mudah sekali bagi blogger karna hanya mengganti warna background saja, ya tapi berhubung anda belum bisa mengganti latar belakang blog, maka saya akan memberikan tutorialnya di bawah ini :

Cara Mengganti Background Blog
  1.Masuk Ke Akun Blogger Anda Anda
  2.Pilih ke menu Template
  3.Kemudian klik Edit HTML
  4.Centang Expand Widget Template
  5.Kemudian cari kode yang mirip di bawah ini :
body{ background:#FFF; color:#28261A; font:12px verdana,arial,Sans-erif; text-align:left; margin:0; line-height:1.6em; }

ganti kode  #FFF dengan kode warna yang anda inginkan, Anda juga dapat memilih kode warna di sini
  6.Simpan !

Cara Mengganti Background Blog Dengan Gambar
Caranya sangat mudah
cukup berikan url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNJUNFK0OcWHKsKz4_yWHo6CjLrlBfzCK83AvHRURzIv8d0Yz5ZQbGnwbWoiSMexJGt2y5b7u2rLCe0rBcvfDF1mtdq-VSh-R7qy44j0SJT_5cynwsVG0PkBVVQGpXtB9rbgNFHVtrME/s1600/bg-banner-pattern.gif ) di sebelah background:#FFF

Contoh :
body{background:#FFF url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNJUNFK0OcWHKsKz4_yWHo6CjLrlBfzCK83AvHRURzIv8d0Yz5ZQbGnwbWoiSMexJGt2y5b7u2rLCe0rBcvfDF1mtdq-VSh-R7qy44j0SJT_5cynwsVG0PkBVVQGpXtB9rbgNFHVtrME/s1600/bg-banner-pattern.gif ) repeat-x;color:#28261A;font:12px verdana,arial,Sans-erif;text-align:left;margin:0;line-height:1.6em;}
7.Selesai.....

Membuat Komentar Admin Berbeda di Blog

Cara Membuat Komentar Admin Berbeda di Blog - Warna Komentar Admin Berbeda - Kotak Komentar Admin Berbeda - Pada kali ini saya akan memberikan cara untuk mempercantik komentar pada blog kita, untuk membuat komentar admin berbeda dengan visitor caranya sangat mudah sekali dan sangat simple untuk tutorial ini juga dapat memberikan warna dan memprindah tampilan komentar blog anda.Untuk contoh komentar admin berbeda bisa anda lihat di bawah ini

Nah bagi anda yang sudah tidak sabar lagi untuk melihat tutorial cara membuat komentar admin berbeda bisa anda lihat di sini :

Cara Membuat Komentar Admin Berbeda di Blog

   1.Masuk Ke Akun Blogger Anda Anda

   2.Pilih ke menu Template

   3.Kemudian klik Edit HTML

   4.Centang Expand Widget Template

   5.Kemudian cari kode </body> 

   6.Lalu copas/copy paste script di bawah ini,Lalu letakan di atas atau sebelum kode  </body> 

<script src='http://code.jquery.com/jquery-latest.js'/> <!--admin comment --> <script> $(function() { function highlight(){ $('.user.blog-author,.ssyby').closest('.comment-block') .css('border', '1px solid #1919B3 ') .css('background','#1919B3 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXnsolVo7jsjrKJdR6b590PR2gVo-F5jvVxZ_ul_FsJIka4COQOdrJ2gpcCH7udzWrXYdieA3g6HBqzEoahi1LybUKKbQSPGRcrCWb1okAHNdIFT9Tw5hErviY4kyVdV8ZPwoLajsIwo/s1600/admin2.png") no-repeat bottom right') .css('padding', '10px'); } $(document).bind('ready scroll click', highlight); }); </script> <!-- admin comment end-->

 7.Simpan !

Tambahan :
Jika ingin mengubah warna background dan border, silahkan ganti kode  #1919B3 dengan kode warna yang anda sukai, Untuk melihat kode warna HTML bisa anda lihat di sini
Untuk mengganti tulisan admin silahkan hapus/ganti kode  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXnsolVo7jsjrKJdR6b590PR2gVo-F5jvVxZ_ul_FsJIka4COQOdrJ2gpcCH7udzWrXYdieA3g6HBqzEoahi1LybUKKbQSPGRcrCWb1okAHNdIFT9Tw5hErviY4kyVdV8ZPwoLajsIwo/s1600/admin2.png

Membuat/Bikin Spoiler di Blog

Anda pasti tahu mengenal spoilerkan ? spoiler biasanya di temukan di forum-forum seperti kaskus,spoiler juga bisa menghemat tempat dan bisa menyembunyikan konten seperti foto,teks dll dengan sistem buka tutup

Untuk contoh spoilernya bisa anda lihat di bawah ini :

SEXY GIRL:

Cara Membuat Spoiler di Postingan Blog
   1.Login ke akun blogger anda
   2.Pilih Entri Baru/New Post
   3.Lalu pilih mode Edit HTML
  4.Copy paste kode di bawah ini  taruh pada mode Edit HTML

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Tuliskan Teks Anda di Sini atau kode script gambar/video ! <br> </div> </div> </div>

  5.Selesai dech.....

Widget Share Media Sosial di Blog

Cara Memasang Widget Share Media Sosial di Blog dengan Float | Bos Tutorial - Cara Memasang Widget Share Media Sosial di Blog dengan Float. Sebelumnya Bos Tutorial membagikan Cara Membuat-Memasang Spoiler di Blog. Kini akan membagikan Tutorial bagaimana Cara Memasang Widget Share Media Sosial di Blog dengan Float.

Saya pernah berjanji akan memberikan tutorial apa-apa saja yang terkandung di dalam blog ini, baik tanmpilan blog maupun widget-widget yang ada.

Cara Memasang Widget Share Media Sosial di Blog dengan Float
Tutorial Cara Memasang Widget Share Media Sosial di Blog dengan Float tidak lah susah. Tutorial ini berasal dari hasil pencarian yang bos tutorial temukan, dan bos tutorial praktekkan dan berhasil ditampilkan di blog ini. Saya akan mencoba membagikan tutorialnya yah. Oh iya, Cara Memasang Widget Share Media Sosial di Blog dengan Float juga merupakan Cara Mempercantik Tampilan Blog.

Beginilah Cara Memasang Widget Share Media Sosial di Blog dengan Float.
1. Seperti biasa, bukalah Akun Blog anda sendiri yah.
2. Masuklah ke rancangan / template blog anda pada Tata Letak.
3. Pilih elemen Add Widget atau Tambah Gadget Baru, lalu pilih Add HTML/Javascript.
<!--SideBar Floating Share Buttons Code Start--> <style> #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br/><div style="clear: both;font-size: 12px;text-align:center;"> <a href="http://bos-tutorial.blogspot.com/2012/07/cara-memasang-widget-share-media-sosial.html" target="blank"><font color="black">Get This<font></font></font></a></div> </div>
4. Simpan Gadget yang ditambahkan. Lalu simpan Template blog anda.
5. Selesai dan lihat hasilnya.