Artikel Blog Yang Berkolom-kolom

Artikel seperti dalam koran atau majalah dapat kita buat dalam sebuah artikel blog, bentuk tulisan ini seperti tulisan pada koran atau majalah yang berkolom-kolom, banyaknya kolom bisa kita atur sesuai dengan kebutuhan yang kita perlukan dalam penulisan sebuah artikel blog.

Untuk membuat tulisan yang berkolom-kolom kita menggunakan perintah css yang menurut saya sederhana dan pendek, kurang lebih seperti ini css yang kita pergunakan untuk membuat artikel blog kita menjadi berkolom-kolom.

column-count: 3;
column-gap: 30px;

column-count mengindikasikan banyaknya kolom yang akan kita buat dalam sebuah artikel yang akan kita tulis, sedangkan column-gap merupakan jarak antara kolom yang satu dengan kolom lainnya.

Sebagai contoh kita akan aplikasikan penggunaan column-count dan column-gap tersebut, untuk menerapkannya kita harus membuat nama id atau class untuk kolom tersebut.

Sebagai contoh kita menggunakan id dengan nama koran, sehingga cssnya menjadi seperti ini:

#koran {
column-count: 3;
column-gap: 30px;
}

dan html yang kita pergunakan menjadi seperti ini:

<div id="koran">isi artikel</div>

Dan kurang lebih hasilnya menjadi seperti ini, dalam hal ini baik dilayar besar atau dilayar kecil seperti layaknya layar mobile hasilnya akan menjadi tetap tiga kolom.

Hasil dengan tiga kolom pada layar kecil akan membuat yang membaca arikel ini akan kesulitan, kita bisa saja mengubah kolom yang banyaknya tiga kolom ini menjadi satu kolom pada layar mobile dengan menambahkan @media-screen untuk layar mobile ukuran tertentu ( untuk bahasan @media-screen bisa mencari literatur di tempat yang lain, karena saya tidak membahasnya).

Dengan artkel yang berkolom-kolom ini kita bisa kasih tambahan style seperti garis pembatas antar tiap kolom dan kita juga bisa memberikan warna pada garis pembatas tersebut.

oh iya hampir lupa jenis garis pun bisa kita sesuaikan dengan selera kita.

Untuk menambahkan garis pembatas kita bisa menambahkan css ini:

column-rule: 4px double blue;

Nilai column-rule 4px merupakan tebalnya garis, double merupakan jenis garis yang dipergunakan, masih ada beberapa jenis pilihan untuk jenis garis ini sepeti contoh dotted atau dashed, kalian bisa menentukan sendiri jenis garis ini, sedangkan blue merupakan warna garis.

Bagaimana Menerapkanya

Kita bisa menerapkan css ini bisa hanya dalam satu halaman post saja atau pada keseluruhan halaman post.

Satu Halaman Post

Menerapkan hanya pada satu halaman saja dalam postingan blog, kita bisa langsung masukan css ini pada halaman post pada mode html

<style type="text/css">
#koran{
column-count: 3;
column-gap: 30px;
column-rule: 4px double blue;
}
</style>
<div id="koran">ISI ARTIKEL</div>

Seluruh Halaman Post

Sebenarnya sama saja dengan menerapkan pada satu halaman post, cuma sedikit perbedaannya terletak pada css nya kita simpan dalam template pada pada urutan css dan untuk memanggilnya tetap menggunakan html ini:

<div id="koran">ISI ARTIKEL</div>

Ketika kita menulis artikel jangan lupa dalam mode html ya.

Tambahan

Selain dengan kode css diatas, kita bisa menggunakan kode css ini

columns: 50px 4;

Nilai 50px merupakan nilai minimal lebar tiap kolom dan 4 merupakan nilai maksimum banyaknya kolom.

Semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.

Memotong Kalimat Dengan Baik dan Rapi

Ketika kita membuat sebuah kalimat yang begitu panjang dan sampai keluar dari pembungkus (elemen) tentunya akan menghasilkan bentuk kalimat yang kurang rapi dan berkesan acak-acakan.

Hal tersebut karena kurangnya perintah css untuk memperbaiki bentuk dari kalimat yang panjang tersebut.

Memang kerapihan bukan unsur utama dari isi kalimat, tapi dengan membuatnya rapi akan membuat yang melihat akan menyenangi dan tertarik untuk menindaklanjuti apa yang meraka cari. Untuk itu kita akan buat kalimat yang panjang terpotong dengan baik dan rapi menggunakan css.

Memotong

Dalam hal ini kita abaikan bagi yang tidak menyukai kerapihan, kita akan membuat sebuah kalimat panjang terpotong rapi dengan menggunakan css.

Mungkin kalian masih binggung dari maksud memotong kalimat dengan rapi ini, untuk itu saya akan memberikan gambaran seperti apa kalimat yang terpotong dengan baik dan rapi tersebut.

Contoh

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Dengan ukuran elemen panjang 200px dan tinggi 18px akan menghasilkan kalimat yang akan keluar dari elemen tersebut turun kebawah, karena tidak cukup ruang untuk kalimat yang panjang.

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Jika kita tambah properti white-space:nowrap akan menghasilkan kalimat keluar memanjang seperti contoh dibawah ini:

#text {
    white-space: nowrap; 
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Keadaan ini akan membuat kalimat yang keluar dari pada cangkangnya, kita bisa membuat kalimat yang panjang tersebut tidak keluar dari cangkang, yaitu dengan memotong kalimat tersebut sesuai dengan lebar ruang (cangkang) dengan menambah properti overflow:hidden, properti overflow:hidden akan memotong kalimat yang panjang menyesuailan panjang dari ruang kalimat tersebut, sehingga menjadi seperti ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Sebenarnya dengan properti overflow:hidden, kalimat yang panjang sudah bisa terpotong dengan rapi, tapi tidak ada salahnya kita tambah properti lagi untuk membuat kalimat panjang terpotong rapi dengan baik,yaitu menambahkan properti text-overflow:ellipsis seperti dibawah ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Nah seperti terlihat dalam contoh, kalimat panjang akan terpotong dengan rapi dan baik dari segi tampilan.

Masalah

Perlu diperhatikan properti text-overflow:ellipsis tidak berjalan baik jika ruang (cangkang) dari kalimat tersebut menggunakan nilai dalam bentuk % selain itu wajib ada properti overflow:hidden dan properti white-space:nowrap.

Selain text-overflow dengan nilai ellipsis, masih ada beberapa nilai text-overflow dengan nilai clip, initial, inherit dan string kalian bisa mencoba mengganti nilai text-overflow dengan nilai yang lain dan lihat hasilnya.

Seperti sebelumnya, akhir kata semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.

Menu Horizontal Dengan Rata Kanan Kiri atau Tengah

Bagi anda penganut kesederhanaan dalam membuat sebuah menu tentunya akan menyukai menu sederhana ini, karena penggunaan script cssnya sedikit dan hasilnya sederhana dari segi tampilannya, walaupun begitu menu sederhana ini bisa kita ubah kerataanya sesuai kebutuhan, baik itu rata kanan, kiri ataupun pada posisi tengah.

Menampilkan sebuah menu dalam sebuah weblog sangatlah utama, karena merupakan sebuah navigasi untuk menyusuri seruluh isi weblog tersebut, baik itu sebuah menu navigasi sederhana atau pun menu navigasi wahhh... keren, itu merupakan sebuah pilihan bagi pemiliknya.

dalam hal ini saya akan bagikan menu navigasi yang sederhana namun bisa mewakili keseluruhan ini weblog kalian dan menu ini bisa diubah kerataannya sesuai keinginan, baik itu rata kanan, kiri ataupun tengah seperti gambar dibawah ini.

Menu Horizontal Rata Tengah

Sepertinya penggunaan menu navigasi yang dengan rata tengah jarang dipergunakan, walaupun begitu saya akan tetap bagikan bagaimana caranya membuat menu navigasi berada pada posisi rata tengah.

Pada umumnya menu navigasi berada pada rata kanan atau rata kiri, namun begitu menu navigasi dengan rata tengah tidak menutup kemungkinan untuk dipergunakan.

Menu navagasi yang saya bagikan sangat sederhana dari penggunaan css nya sehingga menghasilkan tampilan yang sederhana pula, untuk memberikan tampilan yang lebih sesuai dengan selera bisa menambahkan css untuk menu navigasi rata tengah ini.

Scriptnya seperti ini:

HTML

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>

dan css nya pun sederhana seperti ini:

CSS

.menu{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.menu li{
    display:inline;
}
.menu a{
    display:inline-block;
    padding:10px;
    color:black;
}

Seperti saya sebutkan diatas, untuk menyesuaikan tampilan bisa tambah atau kurangi css tersebut.

Menu Horizontal Rata Kanan

Masih menggunakan script css tersebut diatas untuk membuat menu horizontal rata kanan, kita hanya mengganti nilai center menjadi right seperti ini:

.menu{
    text-align:right;
}

Menu Horizontal Rata Kiri

Seperti menu horizontal rata kanan, untuk membuat menjadi rata kiri, kita hanya mengganti nilai center atau right menjadi left, seperti ini:

.menu{
    text-align:left;
}

Untuk lebih jelasnya seperti apa bentuk tampilan menu horizontal sederhana ini, bisa melihat melalui gambar diatas.

Semoga menu horizontal rata kanan kiri atau tengah ini bisa dipergunakan dan bisa menjadi salah satu pilihan yang bisa dipergunakan di dalam template blog.

Akhir kata semoga menu navigasi ini bisa bermanfaat.

Versi Baru Tag Kondisional Blogger

Pada dasarnya fungsi dari tag kondisional versi baru ini tak ubahnya seperti tak kondisional versi lama hanya dari script nya saja yang lebih simpel dan mudah diingat.

Kenapa saya selalu share hal-hal mengenai tag kondisional ini, tag kondisional bagi saya sangatlah penting karena dari fungsinya.

tentu saja saya pun banyak menggunakan tag kondisional dalam setiap template yang saya buat atau template yang saya pergunakan ini.

untuk melihat perbandingan tag kondisional versi lama bisa melihat melalui link dibawah.

Tag Kondisional Versi Lama

Berikut ini beberapa tag kondisional yang merupakan versi baru yang bisa dipergunakan pada template kalian, baik itu untuk keperluan menampilkan atau menyembunyikan widget.

Tag Kondisional Halaman Utama

<b:if cond='data:view.isHomepage'>

...

</b:if>

Tag Kondisional Halaman Index

<b:if cond='data:view.isMultipleItems'>

...

</b:if>

Tag Kondisional Halaman Item

<b:if cond='data:view.isSingleItem'>

...

</b:if>

Tag Kondisional Halaman Statis

<b:if cond='data:view.isPage'>

...

</b:if>

Tag Kondisional Halaman Label

<b:if cond='data:view.isLabelSearch'>

...

</b:if>

Tag Kondisional Halaman Posting

<b:if cond='data:view.isPost'>

...

</b:if>

Tag Kondisional Halaman Pencarian

<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>

...

</b:if>

<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'>

...

</b:if>

Tag Kondisional Halaman Kesalahan

<b:if cond='data:view.isError'>

...

</b:if>

Tag Kondisional Halaman Arsip

<b:if cond='data:view.isArchive'>

...

</b:if>

Tag Kondisional Halaman Pratinjau

<b:if cond='data:view.isPreview'>

...

</b:if>

Nah setelah mengetahui tag kondisional versi baru ataupun versi lama kalian bisa membandingkan mau menggunakan versi yang mana, yang pada dasarnya versi lamapun masih aktif dan masih bisa dipergunakan pada template kalian dan untuk cara penggunaannya pun sama seperti kita menggunakan tag kondisional versi lama.

untuk postingan selanjutnya kalau sempat saya akan share mengenai tag kondisional versi mobile, yang tidak menutup kemungkinan tag kondisional versi mobile ini dipergunkan pada template kalian.

Akhir kata semoga tag kondisional versi bari ini bisa menjadi referensi untuk modifikasi template blog kalian...salam

Mengganti Fonts Dengan Menggunakan Fonts Google

Mengganti Fonts Dengan Menggunakan Fonts Google - Ini merupakan hanya sebuah update dari tulisan sebelumnya mengenai cara menggunakan font dari google font, walupun pada dasarnya sama cara penggunaannya, dalam hal ini karena situs font google berubah yang dulunya http://google.com/webfont yang sekarang di redirect menjadi https://fonts.google.com.

Secara tampilan antar muka webfont tersebut ada perubahan tampilan sehingga bagi kalian yang baru menggunakan atau sudah pernah menggunakan fonts google dari webfont mungkin agak sedikit binggung, disini saya akan memberikan sedikit gambaran yang mungkin bisa membantu kalian dalam menggunakan fonts google tersebut.

Dalam hal ini karena saya menggunakan blogspot dari google, maka penjelasan ini mengkhususkan bagi mereka yang menggunakan blogger dari blogspot google.

Menggunakan Font Google

• Pertama masuk pada situs font google melalui https://fonts.google.com, pada halaman tersebut disuguhkan berbagai jenis dan bentuk font, kalian pilih salah satu jenis font yang akan dipergunakan.
• Setelah memilih salah satu jenis font yang akan dipergunkan, arahkan pandangan pada pojok kanan atas, disitu ada tombol pilihan +Select This Font, klik tombol tersebut.
• Setelah mengkilik tombol +Select This Font, arahkan pandangan pada kanan bawah layar, klik kotak dialog Family Selected.

Kotak dialog tersebut memberikan link font yang terpilih untuk dipergunakan pada weblog, seperti ini contoh link font terpilih tersebut:

<link href="https://fonts.googleapis.com/css?family=Mogra" rel="stylesheet"/>

Letakan kode link tersebut dibawah <head> dan save template kalian.

Dalam kotak dialog tersebut memberikan keterangan kecepatan loading dari link fonts yang dipilih, jadi pilihlah fonts yang cocok untuk dipergunakan dan cepat loadingnya supaya tidak mengganggu kecepatan loading weblog.

Penggunaan Font Google Dalam CSS

Dalam kotak dialog tersebut sudah disebutkan font family yang bisa kita pergunakan dalam css, seperti contoh yang saya ambil adalah font-family: 'Mogra', cursive;

contoh penggunaan dalam css seperti ini:

.fontgoogle, #fontgoogle {
     font-family: 'Mogra', cursive;
     ...
     css lainnya
     ...
}

Mudah bukan cara menggunakan font google tersebut, selain font dari google, kalian bisa menggunakan font yang berupa ikon dari font awesome yang bisa untuk mengganti ikon-ikon berupa gambar dengan ikok-ikon berupa karakter.

① Cara menggunakan fonts ikon karakter yang cantik dari font awesome

Semoga tips menggunakan fonts google dan font awesome bisa membantu dalam mengganti font-font yang biasa dipergunakan sehingga bisa berbeda dengan font yang dipergunakan weblog pada umumnya dan tentunya tampilan weblog pun lebih cantik dan bagus, terima kasih semoga bermanfaat.

Mengatasi Halaman Error Dengan Mengarahkan/Redirect Url Halaman Weblog

Mengatasi Halaman Error Dengan Mengarahkan/Redirect Url Halaman Weblog - Merupakan pengalihan suatu url halaman weblog ke halaman url weblbog yang lain, dengan kata lain mengarahkan pengunjung pada proses index dari halaman lama ke halaman yang baru.

Sedikit cerita mengenai blog ini, pada waktu lalu blog ini pernah di block oleh pihak google karena menyalahi aturan webmaster, sehingga mendapat teguran atau bisa dibilang bukan teguran lagi, karena semua posting atau alamat url nyan ada di blog ini tidak bisa terindex oleh google search, yang akibatnya tidak satupun halaman blog yang ada di google search, wal hasil pengunjung menurun atau bisa dibilang tidak ada, setelah diteliti ternyata dalam blog ini terdapat suatu script yang tidak disukai oleh google webmaster, namun setelah script tersebut saya hilangkan, blog ini mulai bisa terindex lagi oleh google search.

Pada dasarnya cerita diatas tidak ada hubungannya dengan judul Redirect Url Halaman Weblog, namun apabila blog tersebut terjadi eror atau tidak bisa dibuka, mungkin cara redirect url menjadi salah satu solusinya.

Kebayang kalau blog tersebut tidak bisa terindex lagi, selain masalah tersebut diatas, bisa saja url halaman terjadi error sehingga url halaman mengarah pada Halaman Tidak Ditemukan 404/Page Not Found 404 padahal halaman tersebut banyak dicari orang dan sangat populer, mungkin ini salah satu alasan kenapa kita perlu mengalihan halaman yang error tersebut pada halaman lain yang jenis bahasannya sama atau mungkin berbeda (itu terserah kalian yang menentukan halamannya).

Menerapkan Redirect Halaman

Untuk menerapkan dan mengunakan redirect halaman blog kita bisa menambahkan tag meta, tag meta ini pada dasarnya merupakan meta tag refresh/reload halaman blog, tapi bisa pergunakan untuk meridirect url halaman blog dengan menambahkan alamat url sehingga menjadi:

<meta http-equiv="refresh" content="0; url=http://contoh.blogspot.com" />

Selain menggunakan meta tag, bisa juga redirect halaman blog dengan menggunkan javascript

<script type="text/javascript">
window.location = "http://contoh.blogspot.com";
</script>

Letakan script tersebut diatas kode </head> atau </body>

Semoga bermanfaat.

Menambah Pageview Dengan Meta Otomatis Refresh/Reload Blog

Menambah Pageview Dengan Meta Otomatis Refresh/Reload Blog - Otomatis refresh atau otomatis reload blog untuk menambah page view secara angka, jika angka page view yang kita kejar kita bisa menambahkan tag meta otomatis reload sebuah halaman weblog dengan mengatur jangka waktu tertentu yang kita tentukan untuk refresh/reload weblog.

Dalam hal ini saya tidak bisa bicara banyak hanya bisa memberikan tag meta tersebut untuk bisa merefresh atau mereload weblog setelah jangka waktu tertentu.

Letakan tag meta dibawah ini dibawah tag <head>

<meta content='90' http-equiv='refresh'/>

Atur waktu untuk merefresh halaman blog tersebut, dengan merubah angka 90 menjadi waktu yang kalian inginkan, angka tersebut dalam hitungan detik, seperti contoh diatas menggunakan angka 90 yang menandakan halaman blog akan mereload setelah 90 detik atau 1,5 menit.

Pengaturan angka tersebut sangat penting, karena jika terlalu cepat pun akan mengganggu pembaca blog tersebut, pergunakan dengan bijak untuk tidak mengganggu pembaca walaupun pageview akan bertambah.

Baca juga cara mengarahkan halaman url weblog/redirect halaman url weblog untuk mengatasi halaman error atau halaman yang hilang/tidak ditemukan.

Semoga bermanfaat.

Memasang Anti Copy Paste Dengan CSS Secara Otomatis Dan Fleksibel

Memasang Anti Copy Paste Dengan CSS Secara Otomatis Dan Fleksibel - Penggunaan anti copy paste dengan menggunakan css secara otomatis dan fleksible, css untuk anti copy paste lebih baik digunakan daripada menggunakan anti copy paste javascript, selain ringan anti copy paste dengan css juga bisa dibuat fleksible.

Penggunaan propertinya sama seperti postingan anti copy paste secara manual pada postingan kemarin, karena penggunaan secara manual kita perlu menambahkan class yang kita tentukan untuk bagian-bagian tertentu untuk diberikan anti copy paste, bisa dibilang fleksible juga karena kita bisa memilih bagian-bagian tertentu untuk diberikan anti copy paste.

① Memasang anti copy paste dengan menggunakan javascript

② Menggunakan anti copy paste secara manual dengan CSS

Otomatis

Untuk memperbaiki dan mempermudah dalam memberikan anti copy paste dalam segi penulisan sebuah posting blog (tidak manual lagi), kita langsung arahkan class pada posting blog, class tersebut biasanya menggunakan .post atau .post-body, class tersebut hanya secara umum dan mungkin penggunaan class posting dalam blog kalian berbeda, jadi kita perlu mengetahui class ruang posting dalam template yang kalian pergunakan.

Sebagai asumsi kita menggunakan class yang secara umum dipergunakan dalam berbagai template blogger seperti yang disebutkan diatas.

Css adalah

.post, .post-body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

Dengan css tersebut, secara otomatis semua dalam .post dan .post-body (ruang postingan) akan tidak dapat di copy paste.

Fleksible

Walaupun semua dalam ruangan postingan tidak dapat di copy paste, kita bisa memberikan pengecualian terhadap tag-tag tertentu, sebagai contoh tag-tag yang biasa dipergunakan untuk membungkus sebuah koding yang biasa kita bagikan seperti tag pre atau tag code atau bahkan tag blockquote.

Tidak menutup kemungkinan selain sebuah tag, kita juga bisa memberikan pengecualian terhadap class atau id yang dipergunakan dalam ruang posting.

Sebagai contoh tag yang biasa dipergunakan dan bisa di kecualikan seperti tag pre, tag code ataupun tag blockquote untuk bisa di copy paste adalah sebagai berikut.

Cssnya Adalah

.post blockquote, .post pre, .post code, .post-body blockquote, .post-body pre, .post-body code {
   -webkit-touch-callout: text;
   -webkit-user-select: text;
   -khtml-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
}

Ya sudah selesai kita tinggal simpan css tersebut dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin>

.post, .post-body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}
.post blockquote, .post pre, .post code, .post-body blockquote, .post-body pre, .post-body code {
   -webkit-touch-callout: text;
   -webkit-user-select: text;
   -khtml-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
}

Untuk pengecualian supaya bisa dicopy paste, itu merupakan hanya contoh, kalian bisa menentuan sendiri tag class atau id yang kalian inginkan di keculikan.

Semoga mudah untuk dipahami dan bermanfaat.

Memasang Anti Copy Paste Dengan Css Secara Manual

Memasang Anti Copy Paste Dengan Css Secara Manual - Hanya dengan css kita bisa melindungi tulisan kita dari pihak-pihak yang tidak bertanggung jawab copy paste atau blogger indonesia sering menyebutnya dengan kata copas, copy paste sangat merugikan bagi kita yang mempunyai tulisan/artikel yang original.

Tidak sedikit pengguna atau pemilik blog melakukan copy paste hanya untuk menambah posting atau hanya untuk sebagai tugas sekolah yang sekarang ini banyak guru-guru mereka memberikan tugas yang isinya ada di internet. Mereka tidak mau kerja keras walaupun hanya untuk mengetik dan tidak mau bersusah payah melakukan penulisan sendiri.

Kenapa CSS Ini Dibilang Manual?

Karena kita bisa menentukan bagian-bagian tertentu untuk bisa dijadikan tulisan/artikel yang kita tulis di dalam sebuah blog tidak bisa di copy paste (copas), walaupun manual cukup efektif untuk melindungi tulisan/artikel kita dari copy paste yang dilakukan oleh pihak lain.

Seperti Apa Css Anti Copy Paste Tersebut?

Properti css yang kita gunakan cukup pendek dan tidak mempengaruhi loading blog tidak seperti anti copy paste dengan javascript atau anti copy paste buatan pihak ketiga.

① Menggunakan anti copy paste menggunakan Javascript

Properti Yang Dipergunakan

Latakan style Css-nya bisa dibawah <b:skin><![CDATA[ diatas ]]></b:skin> intinya didalam tag tersebuat pada template.

CSS

.anti-copy-paste {
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -khtml-user-select:none;
   -ms-user-select:none;
   -moz-user-select:none;
}

Itulah properti yang dipergunakan untuk anti copy paste terhadap tulisan/artikel blog kita.

Penerapan Terhadap CSS tersebut Adalah

<div class="anti-copy-paste"> isi tulisan/artikel yang tidak ingin dicopy </div>

Itulah sedikit share yang bisa saya berikan untuk mengurangi copy paste terhadap tulisan/artikel blog yang kita sayangi.

Semoga bermanfaat.

Memasang Anti Copy Paste Pada Blog

Memasang Anti Copy Paste Pada Blog - Untuk menghindari dari copy paste yang seenaknya mengambil dan menggunakan tulisan/artikel kita pada blog untuk kepentingannya sendiri tanpa mempedulikan capeknya jari-jemari ini menekan tombol keyboard.

Kode yang saya share ini merupakan kode javascript yang hasilnya akan membuat semua postingan kita tidak dapat di copy paste semuanya secara otomatis, berbeda dengan kode yang menggunakan css yang bisa memilah bagian-bagian mana saja dari tulisan/artikel yang tidak bisa di copy paste, sebagai contoh untuk sebuah kode css atau javascript yang kita bagikan dapat kita abaikan supaya bisa dicopy paste.

① Memasang anti copy paste artikel pada blog dengan menggunakan CSS

Tapi jika kalian menginginkan semua isi posting kita tidak bisa di copy paste semuanya secara otomatis, bisa menggunakan javascript anti copy paste ini pada blog kalian.

Seperti Apa Scriptnya?

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >

Dimana Meletakannya?

Latakan javascript anti copy paste ini diatas tag </head> dan save template kalian, semoga dengan javascript anti copy paste ini bisa mengurangi kegitan copy paste yang sudah begitu marak dikalangan blogger.


Semoga bermanfaaat.

Mematikan Link Terbuka Pada Tab Baru

Mematikan Link Terbuka Pada Tab Baru - Secara default link terbuka pada window yang sama, tapi mungkin secara tidak sengaja kita menambahkan beberapa link terbuka pada tab baru atau memasang script supaya semua link terbuka ke tab baru secara otomatis.

Jika ingin merubah link terbuka ke tab baru menjadi terbuka pada windows yang sama secara otomatis, dari semua link yang pernah diset untuk terbuka pada tab baru atau lupa dimana script link terbuka pada tab baru secara otomatis di tempatkan pada template blog.

Untuk mematikan link terbuka pada tab baru, kalian bisa mempergunakan script dibawah ini sebagai solusinya.

① Cara membuat semua link terbuka ke tab baru

Tempatkan jquery dibawah ini di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Jika script jquery tersebut sudah ada, baik versi diatasnya atau versi dibawahnya, kita tidak perlu menambahkan jquery tersebut, selanjutnya tambahkan kode seperti dibawah ini dan tempatkan diatas kode </head> juga.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#Blog1 a[href^=http], #Blog1 a[href^=https]")
  .each(function(){
    if (this.href.indexOf(location.hostname) == -1){
      $(this).attr({ "target":"_blank" })}
    if (this.href.indexOf(location.hostname) != -1){
    if ( $(this).attr('target') == '_blank')  {$(this).attr("target", "");}}
  });});
//]]>
</script>

ya sudah selesai selanjutnya save template kalian.

Semoga bermanfaat.

Memasukan Sitemap Pada Bing Webmaster

Memasukan Sitemap Pada Bing Webmaster - Secara garis besar cara memasukan peta situs (sitemap) pada search engine Bing adalah sama seperti kita memasukan peta situs pada Google Webmaster, kenapa kita perlu memasukan peta situs pada Bing webmaster tools, karena selain Google yang notabene merupakan search engine terbesar dan populer diantara search enggine lain, kita sebagai pengguna internet dalam mencari sebuah informasi, search engine Bing tidak kalah populer dengan mesin pencari google tersebut.

Sebut saja Yahoo yang sudah bergabung dengan Bing, tentu saja mereka tidak bisa dibilang kecil lagi dan kita perlu mendaftarkan peta situs kita pada webmaster tersebut guna menambah index url pada Bing atau Yahoo.

① Cara Memasukan SiteMap/Peta Situs Pada Google Webmaster

② Cara Membuat Sitemap.xml Dengan Menggunakan SiteMap Generator

Bagaimana Cara Submit Pada Bing Webmaster Tools?

Setelah kita melakukan pendaftaran situs pada Bing Webmaster dan sudah memferifikasi akun tersebut, Pilih Configure My Site - Sitemap dan masukan sitemap dibawah ini secara satu persatu dan klik Submit.

Semua kode peta situs penulisan pada Bing Webmaster diawali dengan alamat website atau blog yang akan kita masukan peta situsnya, sebagai contoh seperti ini:

http://dezige-in.blogspot.com/atom.xml?

Dan untuk selanjutnya tinggal tambahkan alamat situs seperti diatas untuk sitemap-sitemap dibawah ini

atom.xml?

atom.xml?redirect=false

atom.xml?alt=rss

feeds/posts/default

feeds/posts/default?alt=rss

feeds/posts/default?orderby=updated

sitemap.xml

atom.xml?redirect=false&start-index=1&max-results=500

Untuk post diatas 500 maka kita tambahkan peta situs menjadi:

atom.xml?redirect=false&start-index=501&max-results=1000

Dan begitu selanjutnya untuk posting lebih besar/banyak. Sebagai tambahan untuk url peta situs kita bisa tambahkan:

feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc

Semoga bermanfaat.

Font Cantik Dari Font Awesome

Font Cantik Dari Font Awesome - Tidak sedikit blog atau website menggunakan ikon berupa gambar, karena dengan banyaknya pilihan gambar yang akan ditampilkan sebagai ikon dan kustomisasi gambar untuk ikon bisa kita lakukan sendiri (tergantung kita mudah atau tidaknya kita modifikasi atau membuat suatu gambar untuk ikon)

Penggunaan gambar sebagai ikon memang sebagai suatu pilihan tapi kita juga harus memperhatikan kecepatan loading suatu weblog, karena dengan banyaknya ikon gambar yang ditampilkan tentu saja akan menambah beban loading weblog.

Sebagai alternatif lain selain menggunakan gambar sebagai ikon, kita bisa menggunakan font ikonik dari Font Awesome, selain banyak pilihan ikon yang bisa kita pergunakan, menggunakannya pun tidak begitu sulit dan ikon tersebut merupakan karakter font maka kita bisa modifikasi dan kustomisasi menggunakan CSS.

Menampilkan Font Awesome

Letakan sccript dibawah ini diantara tag <head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

dan Save template

Menggunakan Font Awesome

Ikon cantik dari Awesome ini kita bisa tempatkan dimana saja kita inginkan, untuk menampilkan font awesome ini menggunakan tag <i> karena sifatnya inline-block dan menambahkan class utama yaitu .fa dan class untuk memanggil ikon tertentu.

Sebagai contoh saya akan menampilkan ikon bus dari font awesome

<i class="fa fa-bus"></i>

Dan hasilnya:

fa-bus

Untuk melihat contoh bentuk ikon-ikon lainnya bisa masuk pada http://fontawesome.io/icons

Merubah Ukuran Ikon

Ukuran ikon bisa kita ganti dengan menambahkan class fa-lg (berubah sebesar 33%), fa-2x, fa-3x, fa-4x, atau fa-5x. Contoh penggunaanya sebagai berikut:

<i class="fa fa-bus fa-lg"></i> fa-lg
<i class="fa fa-bus fa-2x"></i> fa-2x
<i class="fa fa-bus fa-3x"></i> fa-3x
<i class="fa fa-bus fa-4x"></i> fa-4x
<i class="fa fa-bus fa-5x"></i> fa-5x

Dan hasilnya:

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Selain class yang sudah ditentukan diatas, kita bisa menambahkan css untuk mengganti warna, background atau menambah border pada ikon font awesome tersebut.

Sebagai contoh seperti ini:

.fa-bus {
   color: blue;
   background-color: Black;
   height: 80px;
   width: 80px;
   padding: 10px;
   text-align: center;
   border-radius: 100%;
   border: 4px solid blue;
}

Dan hasilnya:

Menampilkan Ikon Font Awesome menggunakan CSS Content

Pseudo class before ataupun after yang dapat kita gunakan pada template blog, yang bisa kita gunakan untuk menempatkan ikon font awesome pada bagian-bagian tertentu pada bagian blog, contoh css-nya sebagai berikut:

.sidebar h2:before {
  content: "\f207";
  font-family: FontAwesome;
  display: inline-block;
  color: red;
  line-height: 1em;
}

Untuk listnya kalian bisa melihat pada http://fontawesome.io/cheatsheet.

Penggunaan ikon \f207 berasal dari [&#xf207;], atau selain menggunakan font awesome sebagai pilihan lain bisa menggunakan ikon unicode karakter sebagai ikon pada pseudo elemen.

Semoga bermanfaat.

Background Blog Berubah Warna Menyesuaikan Waktu

Background Blog Berubah Warna Menyesuaikan Waktu - Properti Background dapat kita ubah dan tentukan berdasarkan waktu yang kita sesuaikan, baik itu pagi, siang, sore ataupun malam dengan menentukan jam-nya, jika sebelumnya saya membuat background warna berubah yang ditentukan oleh pengujung/pembaca blog dengan menampilkan warna-warna yang ditentukan.

Secara garis besar maksudnya sama yaitu mengganti background warna, tetapi dalam hal ini background warna berganti secara otomatis ketika waktu menunjukan jam-jam tertentu (pagi, siang, sore dan malam yang sudah diatur jam-nya).

Css Yang Dipergunakan

.pagi {
   background:#aaaaaa url(Alamat Gambar) repeat left top;
}
.siang { 
   background:#bbbbbb url(Alamat Gambar) repeat left top;
}
.sore { 
   background:#cccccc url(Alamat Gambar) repeat left top;
}
.malam { 
   background:#dddddd url(Alamat Gambar) repeat left top;
}

Dalam css tersebut selain warna ditambahkan gambar sebagai background, jika kalian menginginkan background nya merupakan gambar, kalian bisa menghilangkan kode warna atau kode warna diganti menjadi tranparent, untuk kesesuaian background gambar kalian bisa mencari keterangan mengenai properti background.

Selanjutnya tambahkan JQuery, dan tempatkan JQuery tersebut dibawah ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Perhatikan rangka template, jika JQuery tersebut sudah ada, jangan menambahkan JQuery tersebut dan jika JQuery yang sudah ada menggunakan versi lawas, bisa mengganti JQuery tersebut dengan JQuery yang diatas.

Setelah itu pergunakan JavaScript dibawah ini dan tempatkan diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 18 || n < 6)
document.body.className = "malam";
else if (n > 6 && n < 11)
document.body.className = "pagi";
else if (n > 15 && n < 18)
document.body.className = "sore";
else
document.body.className = "siang";
});
//]]>
</script>

Save template kalian, dan backgound template kalian akan berubah menyesuaikan waktu yang telah ditentukan.

Semoga bermanfaat.

Membuat Tombol Pengganti Warna Background Blog

Membuat Tombol Pengganti Warna Background Blog - Dalam hal ini kita akan memanjakan pembaca/pengunjung blog kita untuk bisa menyetel/menyesuaikan tampilan background blog dengan warna yang mereka tentukan sendiri, tentunya bukan mereka yang menentukan warnanya, tetapi kita yang menentukan warnanya dan pengunjung/pembaca blog kita bisa menyesuaikan warna background dengan memilih warna yang sudah ditentukan dalam kotak-kotak tombol warna.

Membuat tombol warna untuk mengganti background sesuai dengan warna yang kita inginkan, hanya menggunakan script yang pendek yaitu perintah JavaScript dan HTML.

Dalam membuat tombol warna ini, saya menentukan perpindahan/pergantian warna ditujukan untuk bagian background pada tag body, dalam hal ini kalian bisa menyesuaikan untuk bagian-bagian lain pada blog untuk bisa dibuat backgroundnya berubah warna.

Javascript Yang Dipergunakan

function bgChange(bg)
{document.body.style.background=bg;}

Dan script keseluruhannya adalah sebagai berikut:

<script type='text/javascript'>
function bgChange(bg)
{document.body.style.background=bg;}
</script>
<table border="1" height="50" style="width: 150px;">
   <tr>
      <td onclick="bgChange('#F90A0A')" bgcolor="#F90A0A"></td>
      <td onclick="bgChange('#160AF9')" bgcolor="#160AF9"></td>
      <td onclick="bgChange('#FF00FF')" bgcolor="#FF00FF"></td>
      <td onclick="bgChange('#DCDCDC')" bgcolor="#DCDCDC"></td>
      <td onclick="bgChange('#00BFFF')" bgcolor="#00BFFF"></td>
   </tr>
   <tr>
      <td onclick="bgChange('#3BA509')" bgcolor="#3BA509"></td>
      <td onclick="bgChange('#CD853F')" bgcolor="#CD853F"></td>
      <td onclick="bgChange('#F9720A')" bgcolor="#F9720A"></td>
      <td onclick="bgChange('#FFFFFF')" bgcolor="#FFFFFF"></td>
      <td onclick="bgChange('#FFFF00')" bgcolor="#FFFF00"></td>
   </tr>
</table>

Contoh script diatas keluarannya/hasil yang ditampilkan mengggunakan tag table, selain dengan tag table untuk membuat tombol warna bisa menggunakan tag input seperti ini:

<input type="button" value="Merah" onclick="bgChange('#ff0000')" />
<input type="button" value="Orange" onclick="bgChange('#ffd000')" /> 
<input type="button" value="Putih" onclick="bgChange('#ffffff')" />
<input type="button" value="Kuning" onclick="bgChange('#ffff00')" />
<input type="button" value="Hijau" onclick="bgChange('#00ff00')" />
<input type="button" value="Pink" onclick="bgChange('#ff69ba')" />
<input type="button" value="Cyan" onclick="bgChange('#00ffff')" />
<input type="button" value="Biru" onclick="bgChange('#0000ff')" />

Untuk memberikan tampilan yang sesuai dengan blog kalian, kalian bisa tambahkan css untuk memberikan tampilan yang berbeda yang bisa menyesuaikan dengan garis besar tampilan desain blog kalian.

Dalam hal ini kedua tag tersebut menggunakan perintah javascript yang sama, penggunaan contoh tombol background warna dengan 2 tag tersebut untuk memberikan pilihan yang baik untuk dipergunakan dalam blog, apakah tag table atau tag input, yang nantinya dapat kalian modifikasi tampilannya.

• Demo

Semoga bermanfaat.

Mengganti Nama Blog Menjadi Judul Postingan

Mengganti Nama Blog Menjadi Judul Postingan - Bergantinya nama blog menjadi nama sebuah judul dalam postingan, apakah ini akan mempengaruhi sebuah SEO atau tidak, saya sendiri kurang begitu yakin, namun begitu setidaknya akan merubah tampilan pada bagian header secara berubah-ubah sesuai dengan judul pada postingan.

Cara mengganti judul blog menjadi sebuah nama sesuai dengan postingan, hanya dengan mengganti <b:include name='title'/> dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='title'/>
<b:else/>
<data:blog.pageName/>
</b:if>

Biasanya kode <b:include name='title'/> ada beberapa, coba ganti yang paling akhir untuk membuat judul blog menjadi judul postingan.

Semoga bermanfaat.

Membuat Alat Kode Warna Yang Responsive

Membuat Alat Kode Warna Yang Responsive - Tool atau alat yang biasa kita gunakan untuk mengedit/modifikasi template adalah sebuah tool kode warna, sebuah alat yang sangat dan banyak membantu kita dalam menentukan sebuah warna yang sesuai dengan yang kita inginkan, baik itu untuk modifikasi sebuah warna background ataupun untuk warna-warna lainnya.

Tidak menutup kemungkinan bagi kalian membutuhkan alat ini untuk modifikasi template kalian supaya dalam pencarian warna dapat mendapatkan warna yang sesuai dan cocok dengan keinginan.

Dalam hal ini kita akan membuat sebuah tool atau alat kode warna yang responsive dalam semua ukuran layar, supaya walaupun dalam penggunaan dalam ukuran layar kecil pun alat kode warna tersebut bisa ditampilkan dengan baik.

Untuk membuat tool kode warna tersebut responsive kita tambahkan Css sebagai perintah untuk membuat tool kode warna tersebut responsive.

Css Yang Dipergunakan

CSS

.kodewarna {
  text-align:center;
  margin:20px auto;
  width:40%;
}

.kodewarna2 {
  position:relative;
  padding-bottom:100%;
  height:0;
  overflow:hidden;
}

.kodewarna2 object {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

Html Yang Dipergunakan

HTML

<div class="kodewarna">
<div class="kodewarna2">
<object height="420" width="420" data="https://cdn.rawgit.com/deZige/swf/master/KodeWarna.swf"></object>
</div></div>
<div class="kodewarna">
<div class="kodewarna2">
<object height="420" width="420" data="https://cdn.rawgit.com/deZige/swf/master/KodeWarna2.swf"></object>
</div>
</div>

Tempatkan html tersebut ditempat yang kalian inginkan tool kode warna tersebut tampil.

• Demo

Semoga bermanfaat.

Modifikasi Halaman Posting Berbeda Tampilan Tiap Label

Modifikasi Halaman Posting Berbeda Tampilan Tiap Label - Dalam hal ini kita akan membuat sebuah tampilan posting berbeda tampilan berdasarkan label tertentu atau dengan kata lain posting tertentu dengan label tertentu mengggunakan tampilan tertentu (edisi bingung bikin kalimatnya).

Seperti sebelumnya kita membuat tampilan berbeda untuk halaman searchlabel berbeda tampilan, sekarang kita akan membuat tampilan halaman posting berbeda tampilan untuk label tertentu (sepertinya kalimatnya muter-muter disitu aja....piss man)

Ya untuk mempermudah seperti apa sih yang di katakan diatas tadi, kita langsung praktek saja.

Cari <data:post.body/> jika ada beberapa <data:post.body/> cari yang terakhir dan tempatkan code dibawah ini di bagian bawah <data:post.body/>

<b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.name == &quot;foo&quot;'>
      <style type='text/css'>
      <!-- style CSS -->
      </style>
   </b:if>
</b:loop>

Contoh Penggunaan

Diasumsikan kita akan membuat kustom desain halaman label dengan label modifikasi.

<b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.name == &quot;modifikasi&quot;'>
      <style type='text/css'>
      body {
      background:#ffffff url(alamat gambar) repeat scroll top left;
      <!-- css lainnya -->
      }
      </style>
   </b:if>
</b:loop>

Semoga bermanfaat.

Modifikasi Tampilan Label Berbeda Tiap Halaman

Modifikasi Tampilan Label Berbeda Tiap Halaman - Kustom desain untuk setiap halaman label sama caranya seperti kita membuat kustom halaman untuk halaman utama ataupun untuk halaman-halaman lainnya di blogger, kita bisa menggunakan tag kondisional untuk setiap halaman yang akan kita buat berbeda tiap tampilan halamannya.

Dalam hal ini kita akan menyuguhkan tag kondisional untuk membuat antar halaman label berbeda tiap tampilannya. Penggunaan tag kondisional ini tidak akan berpengaruh secara berarti untuk loading halaman, karena kita hanya merubah bagian cssnya saja, walaupun begitu penggunaan gambar yang besar ukurannya sebagai background akan berpengaruh terhadap loading halaman, karena akan me-load gambar tersebut sesuai kapasitas ukuran gambar tersebut.

Tag Kondisional Untuk Halaman Label

<b:if cond='data:blog.searchLabel'>
  <!-- untuk semua halaman label -->
</b:if>

<b:if cond='data:blog.searchLabel == "foo"'>
  <!-- untuk halaman label tertentu -->
</b:if>

Contoh Penggunaan

Diasumsikan kita akan membuat kustom desain halaman label dengan label modifikasi.

<b:if cond='data:blog.searchLabel == "modifikasi"'>
   <style type='text/css'>
   body {
      background:#ffffff url(alamat gambar) repeat scroll top left;
      <!-- css lainnya -->
      }
   </style>
</b:if>

Semoga bermanfaat.

Animasi Sticky Widget Sidebar Blogger

Animasi Sticky Widget Sidebar Blogger - Animasi jQuery untuk widget float (melayang) mengikuti layar ketika layar di gulung ini seperti kita membuat sticky widget sidebar sebelumnya, namun pada kesempatan kali ini script yang dipergunakan lebih ringkas dan dengan penambahan animasi ketika layar digulung.

Animasi sticky widget sidebar blogger ini lebih halus ketika layar digulung dan widget pun mengikuti layar tersebut.

Untuk menentukan widget mana yang akan dijadikan melayang (float) kita harus tentukan id atau class pada widget tersebut, dan jQuery yang dipergunakan adalah seperti dibawah ini:

$(function() {

    var offset = $("#sidebar").offset();
    var topPadding = 15;

    $(window).scroll(function() {
    
        if ($(window).scrollTop() > offset.top) {
        
            $("#sidebar").stop().animate({
            
                marginTop: $(window).scrollTop() - offset.top + topPadding
            
            });
        
        } else {
        
            $("#sidebar").stop().animate({
            
                marginTop: 0
            
            });
        
        }
        
            
    });

});

Letakan jQuery tersebut diatas </head>

Jangan lupa untuk menentukan salah satu id atau class widget pada sidebar atau id atau class sidebar untuk float animasi ini.

Pemilihan sticky widget sidebar menggunakan animasi jQuery ini lebih halus ketika layar digulung dan widget pun akan mengikuti layar dengan animasi yang kita buat.

Semoga bermanfaat dan mudah untuk diterapkan pada blog tercinta yang kita punya ini.