J-LMA

Yo, udah lama ane gag ngepost. Banyak kesibukan di dunia nyata, dan juga akhir bulan bulan ini internet mahal. Jadi ane agak males sih buka laptop.
Mumpung ane masih inget triknya daripada ane lupa mending gua post aja.
Mungkin dari ente-ente semua banyak yang belum bisa atau belum mahir ataupun belum ngerti, bagi yang sudah tau, tolong ajarin bagi yang ingin belajar.

1. Login/buka blogger ente
2. Klik tema lalu klik edit HTML 

3. Tekan Ctrl+F (klik cursor di kotak HTML), lalu cari PopularPosts2
Bila ada tanda panah yang seperti ane lingkarin berwarna biru, klik saja panahnya

4. Lalu cari <li> lalu ganti dengan <li class='jhoepop'>

5. Lalu cari code <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>, lalu taruh code <div class='jhoe-pop'><div id='jhoe-pop'/></div> di atasnya

6. Tambahkan code di bawah ini, diatas code ]]></b:skin> 

.jhoe-pop {z-index: -1;position: relative;float: left}
#jhoe-pop {z-index: 1;opacity: 1;float: left;height: 72px;width: 72px;margin: 5px 5px 5px 0;}
li.jhoepop #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVOEABWbfFohZPnV4t8ZvVv6t3wxhjOuU4QloDxoFv-nyL4yklLVCDO5if_K72IjmiJ-Wwc63OZWDd5ng7QGNpcqv2C6AVsodM_DHajMXNxBxHGKFiDLtu-5i-2u4xcBbUJmGylemb6w/s320/urabe+1.jpg") no-repeat;
background-size: 100%;}
.PopularPosts .item-thumbnail {
float: left;
margin: 5px 5px 5px 0;
position: absolute;}

7. Lalu klik save

CATATAN : u/ warna kuning silahkan ganti gambar sendiri paling tidak ukurang gambarnya harus sama (pxl)

Selamat mencoba

hallo semua, ane orang baru. hahahaha
kali ini saya akan posting cara menambahkan media sosial dengan icon/gambar pada blog, banyak cara menambahkan link media sosial pada blog, tapi ane akan memberi cara menambahkan media sosial dengan icon/gambar.


untuk lebih jelasnya silahkan lihat klik disini

1. Buka blog kalian
2. klik template
3. tambahkan css di bawah ini dan taruh diatas kode ]]></b:skin>

.Abox {display: inline-block;width: 1000px;}
.angel {list-style: none;margin: 0 0 0 10px;padding: 10px 0;width: auto;overflow: hidden;float: left;}
.angel li {float: left;margin-right: 10px;border: none;}
.icon-flickr a, .icon-instagram a, .icon-facebook a, .icon-gplus a, .icon-lastfm a, .icon-feed a, .icon-skype a, .icon-twitter a, .icon-youtube a {float: left;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left bottom;text-indent: -9999px;width: 32px;height: 32px;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-flickr a:hover, .icon-instagram a:hover, .icon-facebook a:hover, .icon-gplus a:hover, .icon-lastfm a:hover, .icon-feed a:hover, .icon-skype a:hover, .icon-twitter a:hover, .icon-youtube a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left top;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-feed, .icon-feed a {background-position: -160px bottom;}
.icon-feed:hover, .icon-feed a:hover {background-position: -160px top;}
.icon-facebook, .icon-facebook a { background-position: -64px bottom;}
.icon-facebook:hover, .icon-facebook a:hover { background-position: -64px top;}
.icon-twitter, .icon-twitter a {background-position: -224px bottom;}
.icon-twitter:hover, .icon-twitter a:hover {background-position: -224px top;}
.icon-youtube, .icon-youtube a {background-position: -256px bottom;}
.icon-youtube:hover, .icon-youtube a:hover {background-position: -256px top;}
.icon-instagram, .icon-instagram a {background-position: -32px bottom;}
.icon-instagram:hover, .icon-instagram a:hover {background-position: -32px top;}
.icon-skype, .icon-skype a {background-position: -192px bottom;}
.icon-skype:hover, .icon-skype a:hover {background-position: -192px top;}
.icon-gplus, .icon-gplus a {background-position: -96px bottom;}
.icon-gplus:hover, .icon-gplus a:hover {background-position: -96px top;}
.icon-flickr, .icon-flickr a {background-position: 0px bottom;}
.icon-flickr:hover, .icon-flickr a:hover {background-position: 0px top;}
.icon-lastfm, .icon-lastfm a {background-position: -128px bottom;}
.icon-lastfm:hover, .icon-lastfm a:hover {background-position: -128px top;}
.angel li:last-child {margin: 0;}

4. tambahkan html dibawah ini dan taruh sesuai keinginan kalian, tapi ane saranin taruh di atas  <div id='header-wrapper'>

<div class='Abox'>  
<ul class='angel'>                       
<li class='icon-feed'><a href='http://anotherv2-template-blogger.blogspot.com/feeds/posts/default'>Feed</a></li>
<li class='icon-facebook'><a href='http://facebook.com/username'>Facebook</a></li>
<li class='icon-twitter'><a href='http://twitter.com/username'>Twitter</a></li>
<li class='icon-youtube'><a href='http://www.youtube.com/user/username'>Youtube</a></li>
<li class='icon-instagram'><a href='http://instagram.com/username'>instagram</a></li>
<li class='icon-skype'><a href='http://skype.com/username'>Skype</a></li>
<li class='icon-gplus'><a href='http://plus.google.com/username'>google plus</a></li>
<li class='icon-flickr'><a href='http://flickr.com/username'>flickr</a></li>
<li class='icon-lastfm'><a href='http://lastfm.com/username'>lastfm</a></li>
</ul>
</div>

5. lalu simpan

Untuk warna kuning ganti ukuran lebar sesuai keinginan kalian
untuk warna biru ganti link sesuai keinginan kalian

bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^

      JIKA Anda ingin melindungi konten blog (posting, tulisan) agar tidak bisa di-copy paste (copas) atau dicuri oleh user, maka gunakan kode anti copas dengan cara mematikan fungsi klik kanan mouse (disable right click), juga mematikan fungsi Ctrl+C, disable select text, bahkan bisa disable Ctrl+P.
      Berikut ini beberapa kode yang bisa dipasang di template blog untuk melindungi tulisan (konten blog) blogspot dari para tukang Copas dan plagiator (plagiarist). Ada 5 kode, mulai level "kurang aman", "aman", "lebih aman", hingga "sangat aman".
      Masih menurut banyak orang (blogger/pakar SEO Blog), mematikan fungsi klik kanan atau memasang kode anti-copas, akan membuat user "marah" dan tidak mau lagi membuka blog kita. Artinya, ada potensi penurunan pengunjung. Kerugian mematikan fungsi klik kanan pada blog.
       Tapi, jika Anda "tetap" ingin melindungi konten blog dari "pencurian" berupa Copas, apalagi tanpa menyebutkan sumber (link blog Anda), maka ini dia kode-kode untuk mematikan fungsi klik kanan, anti-copas, anti Ctrl+C (Copy), anti Ctrl+P (Print), anti Ctrl+U (View Source Code). Intinya, blog Anda cuma bisa dibaca doang!

KODE ANTI COPAS #1

Kode berikut ini mematikan fungsi klik kanan, sekaligus memunculkan pesan dari Anda sebagai blogger.

1. Klik "Lay Out"
2. Klik "Add Gadget" (posisi widget bebas, di mana saja)
3. Pilih "Javascript/HTML"
4. Copy + Paste kode berikut ini:

<script> var message="Hayo...! Mau copas ya? Boleh, tapi cantumkan sumber!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>

5. Save!

untuk huruf berwarna biru yang bisa Anda ganti.

catatan : Kode ini masih memungkinkan "Select Text" dan Ctrl+C. Artinya, konten blog Anda masih bisa dicopy.

KODE ANTI COPAS #2

Kode berikut ini "maqomnya" lebih tinggi dari kode di atas. Artinya, kode ini sama sekali mematikan klik kanan, tidak bisa "select text", dan mematikan fungsi Ctrl+C keyboard. Namun, konten blog kita masih bisa dicopy dengan cara Ctrl+P (Print). Di sana "sang copaser" masih bisa "Select Text" and "Copy" tulisan di blog kita.

1. Klik "Template"
2. Klik "Edit HTML"
3. Cari kode </head> lalu pastekan di atasnya
4. Copy + Paste kode berikut ini:

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

5. Save!

KODE ANTI COPAS #3

Kode berikut ini berfungsi menyembunyikan teks atau isi tulisan saat blog kita di-Ctrl+P oleh user. Ngeblank aja gak ada apa-apa, sehingga tentu gak bisa diselect text dan dicopy.

1. Klik "Template"
2. Klik "Edit HTML"
3. Cari kode </body> atau </head> (Ada di bagian paling bawah daleman tempate blog)
4. Copy + Paste kode berikut ini di atas kode </body> atau </head>

<style type="text/css" media="print">
    * { display: none; }
</style>

5. Save!

KODE ANTI COPAS #4

Nah... kalo kode yang ini "Perlindungan Total" terhadap konten blog Anda. Semua fungsi untuk copy paste tulisan dimatikan, baik klik kanan maupun Ctrl+C, Ctrl+U, dan CTRL+P.

1. Klik "Template"
2. Klik "Edit HTML"
3. Cari kode <body>
4. Ganti kode <body> dengan kode di bawah ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

contohnya seperti ini

Jika Ctrl+P masih berfungsi tambahkan kode #3

KODE ANTI COPAS #5 Untuk Posting/Halaman Tertentu

Jika Anda hanya ingin anti-copas dan disable klik kanan ini diterapkan di posting tertentu atau di halaman statis tertentu, maka caranya:
3. Copas kode berikut ini di atas dan tempatkan di bawah postingan/paling bawah.

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'/>

4. Publish!

Demikian berbagai cara dan kode  Kode Anti Copas untuk Blog: Cara Mematikan Fungsi Klik Kanan. Risikonya, pengunjung bisa berkurang karena mereka malas balik lagi, juga fungsi Kotak Pencarian akan mati.

Yo sob, kali ini saya posting cara mendesign image /  gambar pada menu utama menjadi lebih menarik,

Contohnya pada blog saya ini, coba kali geser kursor ada pada postingannya. Gambarnya akan menjadi melingkar.



Caranya mudah koq, Anda tidak perlu pusing mencari-cari lagi, disini saya akan memberi tricknya:

1. Anda buka dulu blogger anda, lalu ke edit HTML,
2. Buka blog anda.
3. Arahkan kursor ke gambar postingan,
4. Klik kanan pada gambar postingan, lalu klik periksa elemen.
     Nantinya akan keluar seperti ini:

- Menggunakan Google Chrome:

- Menggunakan Mozilla Firefox :

5. tekan Ctrl+F pada Edit Elemen, lalu tulis nama yang akan anda tuju.

contohnya seperti ini : .thumb-post img

6. Copy CSS di bawah ini, pastekan didalam kurung kurawal / { } :

  padding:4px;
  margin:0 0 0 15px;
  width:75px;
  height:80px;
  background:none;
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-transition:all 0.65s ease-in-out;

Contohnya :

.thumb-post img {
  padding:4px;
  margin:0 0 0 15px;
  width:75px;
  height:80px;
  background:none;
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-transition:all 0.65s ease-in-out;
}

7. bila tidak ada hovernya, Anda buat hovernya sendiri.

Contohnya :
.thumb-post img menjadi .thumb-post img:hover / .post:hover:hover .thumb-post img

8. Copy CSS hovernya di bawah ini, pastekan didalam kurung kurawal / { } :

  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;

Contohnya :

.post:hover:hover .thumb-post img {
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;
}

Atau

.thumb-post img:hover {
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;
}

9. save dan lihat hasilnya.

Catatan : trick ini tergantung sama templatenya, jadi bila ada kesalahan saya minta maaf, tapi kalau saya bisa bantu saya akan membantu Anda.

Sekian dan Terima Kasih

Buat sobat yang bingung mau nambah tempat gadget sepeti gambar diatas ...

ni saya punya sedikit tips untuk Membuat 3 kolom Widget di Bawah Postingan.


Kebanyakkan Blogging menggunakan  CSS dan HTML seperti di bawah ini

#CSS

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

#HTML

<div id='footer-column-divide'>


<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Tapi saya menggunakan CSS dan HTML yang cukup berbeda dengan yg lainnya ....


1. Login ke blogger.
2. Klik Rancangan --> tata letak --> Edit HTML
3. Expand Widget Template tidak usah di beri centang
4. Cari kode ]]></b:skin> atau lebih tepatnya kode .footer
5. Copy kode dibawah ini dan paste di atas kode ]]></b:skin> atau lebih tepatnya kode .footer

#main1 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}  
#main2 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main3 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main1 ,#main2 ,#main3 {width:305px;float:left;margin: 3px;margin-left: 6px;list-style-type:none;margin-top:20px;}
#main1 h2 ,#main2 h2 ,#main3 h2 {font-family: 'Cabin Condensed', sans-serif;
background: rgba(0, 0, 0, 0.1);
border-radius: 9px;
margin-left: 25px;
margin-top: 5px;
font-size: 21px;
line-height: 28px;
text-align: left;
font-weight: normal;
margin: auto;
padding: 0px 10px;
padding-left: 5px;
padding-right: 5px;
color: white;
letter-spacing: -1px;
}
#main1 ul li a:link, #main1 ul li a:visited{color:#666;}
#main2 ul li a:link, #main2 ul li a:visited{color:#666;}
#main3 ul li a:link, #main3 ul li a:visited{color:#666;}

6. Cari kode   

<div id='footer'>

Atau

<div id='footer-wrapper'> 
<b:section class='footer' id='footer'/> 
</div>

7. Taruh kode di bawah ini tepat di bawah <div id='footer'> atau Hapus kode <b:section class='footer' id='footer'/>

<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

 Contohnya :

   <div id='footer'>
<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

#KETERANGAN : 

- warna merah anda bisa ganti dengan kode warna yang lainnya
- warna biru muda anda bisa ganti dengan lebar sesuka anda
- warna ungu muda anda bisa ganti dengan kode warna yang lainnya

Hasilnya seperti gambar dibawah ini :

Kali ini saya akan memberikan bebrapa cara agar gambar yang anda upload di blog tidak melebihi wrapper pada postingan.
Biasanya ada beberapa template blog yang gambarnya melebihi postingan,

 
jadi kali ini saya akan memberikan beberapa CSS

Cari  .pst img
kalau kesulitan tekan dengan Ctrl+F untuk memudahkan pencarian
Tambahkan Max-width: 530px; 
Letakkan pada .pst img {  }
Contohnya :

.post { background:#FFFFFF;border:1px solid $bordercolor;padding: 7px;}

Menjadi seperti ini :

.post { background:#FFFFFF;max-width: 530px;border:1px solid $bordercolor;padding: 7px;}

Ganti warna merah itu dengan ukuran wrapper anda
Jangan Lupa Centang  Expand Template Widget
Kemudia Save 

Mudahkan, selamat mencoba

Mudah bukan,  sekian tutorial kali ini,