Cara membuat border Disidebar

Cara Membuat Border Di sidebar

Pada tutorial kali ini JUNTAKX akan memposting artikel tentang Cara Membuat Border di Sidebar karena ada banyak cara untuk membuat  blog agar kelihatan enak dipandang. walaupun EFA sendiri kadang kadang merasa malu juga dengan pengunjung yang singgah di Education for all kareana blog EFA ini juga masih blepotan. Nah salah satunya adalah dengan membuat blog kita  lebih indah jika dilihat.  Kali ini yang kita bahas adalah bagaimana cara membuat Border binti Frame binti bingkai di sidebar blog. sebenarnya bukan cuma di sidebar  tetapi kita juga bisa membuatnya di posting ataupun di halaman lain yang kita mau. Kita ketahui banyak sekali fungsi dari border ini diantaranya kita bisa membuat suatu skat untuk catatan tertentu misalnya, atau juga untuk pengunguman and soon. Ok lah to the point aja, dibawah ini adalah beberapa contoh dasar Script pembuatan border yang sederhana. sobat blogger mania pemula bisa mencobanya di blog sobat dengan cukup mengcopy kodenya. 

1. Solid

<div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

2. Dashed

<div style="border: 1px dashed #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

3. Dotted

<div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

4. Double

<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

5. Groove

<div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

6. Outset

<div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

7. Ridge

<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulis disini...
</div>

Dari 7 contoh kode di atas, sobat blogger mania bisa mencobanya semua. Untuk merubah warna backroundnya sobat blogger mania tinggal merubah kode warna saja. sedangkan untuk lebar border, sobat blogger mania cukup mengganti ukuran width (lebar) sesuai dengan yang sobat blogger mania inginkan.

Cara memasangnya sobat blogger mania cukup ikuti langkah langkah berikut

Pertama login ke akun blogger sobat.

Kedua pilih rancangan

ketiga pilih tambah gadget lalu pilih HTML Java script dan pastekan script script diatas.

kemudian pada tulisan tulis disini silahkan ganti dengan kode script sobat. misalnya script buku tamu atau apalah yang sobat mau.

terakhir dan paling utama simpan. dan lihat hasilnya.

Semoga bermanfaat.

Read More

Cara Membuat Tempat Komentar Terlihat Keren

Cara Membuat Tempat Komentar Terlihat Keren

Hay sobat Pororo-artikel !! , Sekarang Saya akan Share Cara membuat tempat komentar terlihat Keren di blog sobat sendiri , Keren kan ok langsung saja saya bacakan..


1.Login ke akun blogger dan masuk ke Edit HTML
2.Centang "Expand Widget HTML" ( bila perlu ) kalo saya sih di centang biar terjamin ;)
3. Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code

/*------------- START juntakx.blogspot.com Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

/*------------- End juntakx.blogspot.com Blogger Threaded Comments  -------------*/ 

 

nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin>

<style type='text/css'>

         

/*Start Modif kotak Komentar*/

.comments .comments-content .icon.blog-author{

background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);

}

.comments .comments-content .datetime a{float:right;

}

.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;

}

.comment-actions a{

background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;

}

.comments .comment .comment-actions a:hover,.comments .continue a:hover{

text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;

}

.avatar-image-container{

-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;

}

.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;

}

.deleted-comment{color:gray;font-style:italic;

}

/*End Modif kotak Komentar*/

</style>

4.Kemudian simpan dan lihat hasilnya….! 

Catatan: Ganti nama Web di code yang paling awal ( /*------------- START juntakx.blogspot.com Threaded Comments  -------------*/) dan /*------------- End juntakx.blogspot.com Blogger Threaded Comments  -------------*/  Dengan nama web sobat sobat sendiri Ok Hanya segitu dari saya, Kalo gk ada yg jelas Komentar ya :)

Read More

cara mengganti Favicon pada blog

Cara Mengganti Favicon pada Blog

Favicon merupakan ikon/gambar yang muncul di pojok kiri address bar yang disertakan pada hampir semua situs web atau blog sekaligus merupakan logo dari blog tersebut. Seperti contoh dibawah ini :

Ukuran gambar yang dipakai usahakan tidak lebih dari 100KB atau Anda bisa meng-upload gambar terlebih dahulu di FavIcon from Pics, berikut cara meng-uploadnya :

1. Kunjungi situs http://www.html-kit.com/favicon/ 
2. Pada Create a Favicon from any picture, klik 'Browse'.
   
3. Kemudian klik 'Generate FavIcon.ico'
4. Setelah itu jika Anda menginginkan favicon animasi, download dalam format gif dan simpan gambar.
   
5. Kemudian upload gambar pada free image hosting dan ambil link gambarnya, atau bisa Anda lihat caranya disini.

Selanjutnya kita akan memasang favicon pada blog, berikut langkah-langkahnya :

Cara pertama :

1. Login akun blogger Anda. 
2. Pilih 'Tata Letak' pada menu dropdown. 
3. Klik 'Edit' di bagian Favicon, lihat gambar!
   
4. Klik 'Browse', kalau sudah di upload klik 'Simpan'.
   

Cara kedua :

1. Login akun blogger Anda. 
2. Klik Template ---> Edit HTML ---> beri tanda centang pada kotak Expand Widget Template. 
3. Tambahkan kode dibawah ini tepat diatas </head>
   <link href='URL ICON' rel='icon' type='image/gif'/>
   Keterangan:
   Ganti 'URL ICON' dengan URL atau link gambar yang Anda upload tadi. 
4. Simpan template.

Nah, sekian postingan cara mengganti favicon pada blog dan semoga bermanfaat. Jika Anda masih mengalami masalah silahkan hubungi kami melalui contac.

Read More

cara menghapus teman fb sekali gus

Cara Menghapus Teman Facebook Sekaligus

Cara Menghapus Teman Facebook Sekaligus - menghapus teman di facebook dapat dilakukan dengan memanfaatkan fitur yang telah disediakan oleh pihak facebook, namun jika anda ingin menghapus banyak teman harus dilakukan satu-persatu yang pada akhirnya akan menghabiskan waktu anda hanya untuk menghapus teman.

namun ada cara yang paling mudah dan cepat untuk menghapus teman di facebook sekaligus dengan menggunakan tool yang disediakan oleh pihak ketiga yakni dengan menggunakan add ons greasemonkey yang dapat di install pada peramban mozilla firefox.

add ons greasemonkey memudahkan dalam menghapus teman dengan jumlah yang banyak, jadi tidak perlu susah payang menghapusnya satu-persatu. untuk anda yang ingin mencoba cara menghapus teman di facebook dengan jumlah banyak sekaligus dapat mengikuti langkah-langkah berikut.

langkah pertama yakni download add ons greasemonkey di https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/ setelah halaman terbuka klik Add to Firefox

Selanjutnya akan muncul pop up, klik install now dan tunggu hingga proses install selesai

Setelah selesai install kemudian restart Firefox dengan cara klik Restart Now (pada bagian atas)

Tahap selanjutnya adalah dengan mengujungi dan menginstall Delete Facebook Friends di http://userscripts.org/scripts/show/150411

Setelah terbuka klik tombol Install yang ada di kanan atas halaman.

akan muncul pop up seperti gambar, kemudian klik Install

selanjutnya akan muncul notifikasi berhasil tidaknya, jika ada tulisan installed successfuly berarti proses instal berhail, selanjutnya klik Ok dan restart kembali firefox anda.

langkah terakhir yaitu login pada facebook, selanjutnya pilih daftar teman pada profil fb anda, maka akan muncul menu untuk menghapus teman yang berada di kanan atas (seperti pada gambar) jika menu tersebut tidak muncul coba di reload kembali halaman tersebut.

Untuk menghapus teman dengan cara klik kotak kecil di samping foto profil teman, jika ingin menghapus semua teman dapat memilih select all, selanjutnya tinggal klik Delete Selected Friends, maka teman yang anda pilih akan terhapus.

Read More

cara membuat scrip iklan di blog melayang

Cara Membuat Iklan Melayang di Kanan Kiri Blog 

– Lokasi / posisi / letak iklan sangat menentukan apakah iklan tersebut berkinerja dengan baik atau tidak. Iklan yang di pasang di blog tidak boleh asal-asalan penempatanya. Yakni harus dipasang di lokasi yang strategis agar selalu bisa dilihat dan diklik oleh pemirsa blog.
Salah satu letak iklan yang paling bagus adalah iklan floating atau melayang. Lokasi iklan jenis ini akan selalu kelihatan meskipun scroll browser di naik turunkan, pasti akan selalu dilihat oleh pengunjung blog. Hanya saja, jenis iklan ini kurang disukai oleh pengunjung. Selain itu, untuk iklan PPC (Pay Per Click) tidak diperbolehkan memasang iklan seperti ini, karena hal itu melanggar kebijakan program PPC. Namun, apabila iklan mandiri, akan sangat dianjurkan, karena para advertiser cenderung berani membayar dengan harga tinggi untuk memasang iklan di posisi ini.
Bagi anda yang mempunyai interest yang tinggi dalam make money from blogging, terutama membuka iklan mandiri di blog anda, anda bisa mencoba membuka space iklan model ini, karena hal itu sangat menguntungkan. Jangan sampai ruang kosong di blog anda di anggurin, karena anda akan rugi besar

Beberapa waktu yang lalu saya sudah membahas tentang Cara Membuat Ikan Teks Sendiri sebagai panduan praktis bagi anda yang ingin belajar membuat iklan teks. Dalam kesempatan kali ini saya akan share tetang cara bikin iklan pop up melayang di kanan kiri blog. Berikut adalah langkah-langkahnya.

Cara Membuat Iklan Melayang di Kanan Kiri Blog

1. Silahkan copas seluruh script berikut ini:

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script><br />
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script><br />
<!--start: floating ads masanwar.com--><br />
<div id="teaser2" style="width:autopx; height:autopx; text-align:left; display:scroll;position:fixed; bottom:0px;left:0px;">
<div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPbb3QLkLGnlMdsipA9Y5JzOJbHxpBUWG9Jmsa4jx63U78FMUr9irtn88hSA9hUfVcmvc-h-TK7soXLJW8oYlYQ5KgREH8ww-2KtpNgfg_sDl9rvcHd8wPsfyk9EFRQno-zYCwG5qcSZr/s1600/PhoXo2.png'/></center>
</a><br />
</div>
<!--Mulai Iklan Kiri--><br />
<a title="simanjuntak" href="http://www.juntak.com/pasang-iklan-murah/" target="_blank"><img alt="Advertisement" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSy789iDYyFRkwdN-FjLnuyGq9sH04_yU3JBdm0hJmZ6el7MKIlVNjWwaP9DrJaobZerEMALulynlWV5zcDwmuvMn78zOZu9d7y_eyO7Br8ZntnyxI3tMst-JMBjLpJW0Z6nX40Oe7OsM/s1600/pimbcr.jpg" width="160px" height="600px"/></a><br />
<!--Akhir Iklan Kiri--><br />
</div>
<div id="teaser3" style="width:autopx; height:autopx; text-align:right; display:scroll;position:fixed; bottom:0px;right:0px;">
<div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPbb3QLkLGnlMdsipA9Y5JzOJbHxpBUWG9Jmsa4jx63U78FMUr9irtn88hSA9hUfVcmvc-h-TK7soXLJW8oYlYQ5KgREH8ww-2KtpNgfg_sDl9rvcHd8wPsfyk9EFRQno-zYCwG5qcSZr/s1600/PhoXo2.png'/></center>
</a><br />
</div>
<!--Mulai Iklan Kanan--><br />
<a title="simanjuntak" href="http://www.juntak.com/pasang-iklan-murah/" target="_blank"><img alt="Advertisement" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSy789iDYyFRkwdN-FjLnuyGq9sH04_yU3JBdm0hJmZ6el7MKIlVNjWwaP9DrJaobZerEMALulynlWV5zcDwmuvMn78zOZu9d7y_eyO7Br8ZntnyxI3tMst-JMBjLpJW0Z6nX40Oe7OsM/s1600/pimbcr.jpg" width="160px" height="600px"/></a><br />
<!--Akhir Iklan Kanan--><br />
</div>

Keterangan:
Kode warna biru kode iklan anda dengan ukuran 160×600 vertikal
Kode Warna merah kode iklan anda dengan ukuran 160×600 vertikal
2. Pasang iklan di blog dengan cara log in di blog anda
3. Dashboard > Tata Letak > Tambahkan Widget
4. Pilih widget HTML/JavaScript > Paste seluruh scrip tadi > Klik save

Read More