Cara menambah Gadget Label Pada Sidebar

Gadget Label sangat berguna untuk mengelompokkan postingan berdasarkan label (kategori). Sehingga memudahkan user blog kita memilah informasi atau postingan yang berkaitan dengan tema yang mereka cari.

Untuk membuat gadget label lakukan langkah berikut:

1. Pada halaman di bawah ini pilih tab " Tata Letak" pilih "Elemen Halaman"

Klik Tambah Gadget.

2. Pada halaman list berikut pilih Label

3. Atur konfigurasi label, Judul, Menyortir berdasarkan Alfabet, kotak pratinjau biasanya berisi label sesuai dengan label pada postingan yang sudah anda buat 

Klik tombol "SIMPAN"

4. Atur posisi gadget dengan cara "klik and drag"

Setelah selesai klik tombol "SIMPAN",

Lihat perubahan di blog anda.

5. Agar label (kategori muncul secara otomatis pada sidebar, maka pastikan saat anda membuat postingan jangan lupa membuat (mengisi) kategori artikel anda, di bagian bawah kotak teks editor isi pada bagian "Label untuk entri ini : ......"

Jika anda belum membuat label tersebut, anda bisa kembali ke dasboard -> Edit Entri -> pilih postingan yang akan di edit.

Klik tombol "Terbitkan entri" agar perubahan bisa dipublikasikan.

Selesai,

Apa Itu BLOG ?

Blog,kalau menurut saya sih ibarat rumah,bahkan ibarat sebuah pulau,dimana orang akan lebih senang berkunjung jika pada rumah / pulau tersebut menyediakan apa yang mereka inginkan.Dengan Blog pula,kita mempunyai sebuah rumah tempat tinggal dalam dunia maya.dimana kita bebas mengekspresikan maupun memfermak Blog sesuka hati kita.Semakin cantik dan up to date suatu Blog,traffic maupun pengunjung,akan semakin meningkat.

Blog/web yang baik biasanya mempunyai kriteria-kriteria tertentu,seperti adanya Header,body,sidebar,footer.Jadi satu halaman sebuah Blog yang baik terdiri dari kriteria-kriteria di atas.

Sebagai gambaran lihat ilustrasi di bawah ini:

Di ibaratkan ilustrasi di atas,sebuah Blog mempunyai fitur-fitur itu semua.
Skema Blog,anda bisa lihat contoh di bawah ini :

Maksudnya?

Ya,secara fisik sebuah Blog terdiri dari :

Header(kepala), 

Body(Isi Blog), 

Sidebar(lengan/sisi), 

Footer(bawah).

Adapun jika ada fitur-fitur lain,itu hanya sebagai element tambahan.

Bagaimana membuat sebuah Blog?

Blog,bisa kita ciptakan melalui jasa web penyedia blog,seperti;Blogger,Wordpress,Multiply dll.Di pelajaran-blog.blogspot.com memang mempelajari khusus Blog dari Blogger/Blogspot.

Apa yang harus di kuasai untuk bisa mengedit sebuah Blog?

Di blogspot,sudah ada versi WYSWYG yang mana kita tidak perlu capek menuliskan kode untuk sebuah blog.Tapi jika anda menguasai HTML,CSS,PHP maupun Javascript akan lebih baik lagi.Untuk HTML,CSS,PHP maupun Javascript ,kita akan bicarakan nanti.

Jika kita sudah mempunyai Blog?apa yang harus kita lakukan?

Memposting artikel pada Blog? maupun upload foto ataupun Video,ajang narsis,kumpul sesama Blogger menjalin silaturahmi,curhat,dll.Keuntungan lain yaitu,dengan kita mempunyai sebuah Blog,ibarat kita sudah mempunyai sebuah rumah,dan di rumah itu,kita bebas mau mananam apaun itu tanamannya.Maksudnya,kita bisa meletakkan sebuah kode,baik itu kode tukar link,iklan dll.

Banyak penyedia content yang menawarkan kode iklan (AdSense,Text Link-Ads,AdBrite,dll)untuk memasang iklan pada suatu Blog,yang akan membayar kita jika ada pengunjung yang mengklik iklan yang kita tampilkan.

Apa sich keuntungan Materi dari banyaknya pengunjung pada Blog kita?Ya,jelas..dengan bayaknya pengunjung,kemungkinan iklan kita dilihat orang juga akan semakin besar,dan akan semakin besar pula tambahan doku ke kantong kita.

Happy blogging

Cara Hilangkan Tanggal Postingan

Blogspot memang wajar apabila banyak orang yang menyukai untuk menggunakannya, karena selain mudah dan familiar, blogspot juga mudah untuk dimodifikasi sesuai dengan keinginan kita alias mudah di obrak abrik, dan tutorialnya juga sudah banyak beredar di dunia luna maya. Seperti artikel saya sebelumnya yang mengupas tentang bagaimana caranya mengubah favicon blog, maka sekarang saya akan mencoba untuk mengupas tentang cara menghilangkan / menyembunyikan tanggal di dalam postingan blog.

OK.. langsung saja ke TKP. Jadi untuk menghilangkan / menyembunyikan tanggal postingan blog, sangatlah mudah dan simpel. Saya akan memberikan dua cara yang bisa anda pilih untuk menghilangkan / menyembunyikan tanggal postingan blog.

Cara I

1.  Login ke Dashboard blogmu > Pengaturan > Edit HTML
2. Klik 'Download Template Lengkap" untuk membackup templatemu
3. Klik "Expand Widget Template"
4. Cari kode ini (gunakan Ctrl+F)
   <data:post.dateHeader/>
5. Hapus lalu simpan templatemu

Cara II

1.  Login ke Dashboard blogmu > Pengaturan > Edit HTML
2. Klik 'Download Template Lengkap" untuk membackup templatemu
3. Klik "Expand Widget Template"
4. Cari kode ini h2.date-header (gunakan Ctrl+F)
   

   h2.date-header {
   margin:.3em 0 0;
   padding:0;
   font-size:80%;
   color:#777;
   height: 0px; }

5. Lalu tambahkan kode visibility: hidden; di bawah kode di atas. Sehingga kodenya jadi seperti ini
   

   h2.date-header {
   margin:.3em 0 0;
   padding:0;
   font-size:80%;
   color:#777;
   height: 0px;
   

   visibility: hidden;
   }

6.  Simpan Templatemu

Nah.. sekarang cobalah lihat templatemu yang baru. Tanggal postingan yang ada di atas judul posting sudah menghilang.

Selamat mencoba dan semoga sukses

note: Untuk cara menghilangkan tanggal lahir bisa anda lihat di,http://tukang-ngaco.blogdodol.com/

Membuat efek Link Nudging Pada Label dengan CSS3

Untuk yang kali ini saya postingkan tentang efek Link nudging atau link yang memiliki efek bergeser saat disorot dengan kursor,sebelum membuatnya jangan lupa tambah gadget Label terlebih dahulu jika belum ada gadget labelnya.

Untuk cara membuatnya ikuti langkah-langkah berikut :

1. Login blogger

2. Rancangan, Elemen laman

3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#label1 .widget-content ul li :hover {margin-left: 10px;

padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);

-moz-transition: all 0.70s ease-out;  /* FF4+ */

-o-transition: all 0.70s ease-out;  /* Opera 10.5+ */

-webkit-transition: all 0.70s ease-out;  /* Saf3.2+, Chrome */

-ms-transition: all 0.70s ease-out;  /* IE10? */display: block;

}

Tambahan :

* Yang perlu anda perhatikan adalah bagian ID label1 , bisa saja nama ID label  pada blog anda label2, dst.

* Untuk bisa menentukkan nama dari ID lihat atau cari seperti kode dibawah ini:

   <b:widget id='Label1' locked='false' title='Label' type='Label'/>

* yang berwarna biru itu adalah nama ID nya, jadi tinggal disesuaikan saja nama ID nya pada bagian langkah Ke-3.
  
4. Simpan.

Belajar Dasar Dasar JavaScript

Selamat pagi,siang,atau malam Rekan rekan kita lanjutkan pemrograman web setelah HTML dan CSS, Selanjutnya yaitu :

JAVASSCRIPT

 

 1 Penulisan Java Script

Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

Java script ditulis pada file yang sama

Untuk penulisan dengan cara ini, perintah yang digunakan adalah

<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>. Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>

<HTML>

<HEAD><TITLE>……….</TITLE>

</HEA>

<BODY>

<SCRIPT LANGUAGE=”Javascript”>

kode javascript disini

</SCRIPT>

kode HTML disini

</BODY>

</HTML>  

b)     Javascript ditulis pada file terpisah
Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

 <SCRIPT src=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode Javascript berekstensi .js

 

1.4 Program Pertama Javascript

Pada bagian ini kita akan membuat program dengan menggunakan Javascript.

Program ini akan menampilkan teks “ Belajar Pemrograman Javascript” 

<HTML>

<BODY>

<SCRIPT language="JavaScript">

<!--

document.write("Belajar Pemrograman Javascript!");

//-->

</SCRIPT>

</BODY>

</HTML>

Berikut diberikan beberapa contoh program sederhana dengan menggunakan Javascript 

<HTML>

<BODY>

<B>Bagian Pertama ini ditulis dengan HTML!</B>

<P>

<SCRIPT language="JavaScript">

<!--

document.write("Bagian ini ditulis dengan Javascript!");

//-->

</SCRIPT>

<P>

<B>Bagian Terakhir dari dokumen HTML, ditulis setelah Script!</B>

</BODY>

</HTML>

 

 

<HTML>

<HEAD><TITLE>BElajar Javascript Yuuuuuu</TITLE>

</HEAD>

<BODY BGCOLOR="gray">

<SCRIPT language="JavaScript">

<!--

document.writeln("<PRE>");

document.write("<B><FONT SIZE=5>");

document.writeln("SELAMAT DATANG DI JAVASCRIPT");

document.write("</B></FONT>");

document.write("<I>");

document.writeln("Program ini merupakan contoh sederhana menampilkan Teks!");

document.write("</I>");

document.writeln("Dengan Javascript!!!!!!!!");

//-->

</SCRIPT>

</BODY>

</HTML>

Objek document mempunyai dua metode untuk menuliskan teks, yaitu write dan writeln. Metode write digunakan untuk menuliskan teks tanpa ganti baris, sedangkan metode writeln digunakan untuk menuliskan teks dengan ganti baris.

 

Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan dipanggil melalui suatu file HTML

 

File isi.js

document.writeln("<CENTER>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("<H1>INDONESIA,KALIMANTAN BARAT</H1>");

document.writeln("<H2>PONTIANAK<H2>");

document.writeln("<H3>PURNAMA<H3>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("</CENTER>");

 

File HTML

<HTML>

<BODY>

<B>Contoh ini menggunakan Javascript yang diambil dari File lain..</B>

<P>

<SCRIPT language="JavaScript" src="isi.js"></SCRIPT>

</BODY>

</HTML>

1.5 Komentar

Sama seperti bahasa pemrograman lain. Javascript juga menyediakan fasilitas untuk menuliskan komentar, komentar ini berguna bila nantinya anda atau orang lain membaca program.

Pemberian komentar dalam Javascript dapat dilakukan dengan dua cara yaitu dengan menuliskan komentar setelah tanda garis miring dua kali, contoh : 

//ini komentar 

atau

/*ini juga komentar */

Apa itu SEO ?

SEO atau Search Engine Optimization merupakan langkah/kiat menuju pengoptimalan sebuah blog dalam hal ini masalah Search Engine

Sebagus apapun sebuah situs,jika tak dapat direkam/ditangkap/di index oleh mesin pencari,sama halnya dengan kebohongan.

Dengan ter index mesin pencari,kemungkinan situs kita akan di lihat oleh seluruh orang di dunia ini akan semakin besar.Banyak kami jumpai blog yang bagus,namun kurang optimalnya kiat dalam peng index an.

Dibawah ini salah satu langkah peletakkan meta tags agar ter index mesin pencari :

Kode ini cukup anda letakkan di bawah kode <head>.

---

<meta content='nama anda' name='Author'/>

<meta content='Tulis Diskripsi Blog' name='description'/>

<meta content='Tulis Kata Kunci Blog' name='keywords'/>

<meta content='follow, all' name='robots'/>

---

Atau jika anda ingin menambah meta yang lain,coba kunjungi di sini,

Cara Membuat Related Post Di bawah Postingan

Sebelum kita mulai,terlebih dahulu agar fungsi dari related post ini semakin maksimal sebaiknya sobat blogger memperhatikan dalam hal pemasangan nya, berikut kira-kira tips nya:

1.Rapi, Jangan asal naruhnya.

2.Tampilannya menarik perhatian, anda beri warna yang mencolok juga menarik perhatian, tapi sudahkah menyatu dengan keseluruhan warna blog?

3.Ada efek tertentu saat bagian tersebut disorot mouse, ini berkaitan juga dengan point dua yaitu "CAPER" alias cari perhatian.

4.Penempatan yang benar, karena saya pernah mencoba dulu menempatkan related post ini di sidebar dan ternyata kurang efektif karena menjadi kurang diperhatikan. Atau penempatan yang terlalu kebawah juga kurang efektif, karena terlalu jauh dari artikel.

Sudah mengerti?? kalau begitu, mari kita lajutkan. Hehe...hahaha.hohoho..(ga jelas)

Pertama cari kode dibawah ini pada template anda, ingat sebelumnya centang "Expand Widget Templates".

Cari tag di bawah ini :

<p><data:post.body/></p>

kalau sudah ketemu silahkan copy kode berikut ini, kemudian paste dibawah kode tadi. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<H2>Artikel Terkait:</H2>

<DIV class='rbbox'>

<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>

<DIV id='albri'/>

<SCRIPT type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;albri&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = &quot;<data:label.name/>&quot;;

var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</SCRIPT>

</DIV>

<script type="text/javascript">RelPost();</script>

</DIV>

</b:if>

Lalu simpan.

AKShell - Belajar Dan Publish Script JavaScript Berbasis Apps online

Jika Anda akan memulai sebuah proyek JavaScript, akan lebih baik untuk menggunakan layanan AkShell web daripada menginstal dari pengembangan web . Ini memberikan sisi server pengembangan dan hosting, dengan IDE online yang dirancang khusus untuk aplikasi berbasis kode JS dan script.

Anda hanya perlu menyediakan kode dan AkShell akan menangani sisanya. Ini menggunakan open source PostgreSQL yang memungkinkan menafsirkan hampir semua konstruksi SQL, sehingga database pengelolaan pekerjaan proyek berbasis Java script Anda  akan mudah dan bebas dari konflik database tertentu. Git konsol terintegrasi dalam membuat manajemen kode mudah bagi pengguna. Selain itu, pengguna juga dapat berkolaborasi dengan satu sama lain di GitHub untuk mengambil saran dan modul pertukaran kode untuk mempercepat proses pembangunan.

Seiring dengan memulai sebuah proyek baru, Anda juga dapat mengimpor file kode ke editor AkShell untuk mengubah mereka. Untuk memulai, kunjungi AkShell untuk membuka editor . Editor mengemulasi antarmuka pengguna IDE yang lain, dengan bar navigasi untuk menelusuri file kode dan jendela utama untuk mengedit file yang dibuka. Sisi kiri menawarkan dua bagian untuk melihat dan membuka file di ruang kerja saat ini dan menjelajahi perpustakaan, lingkungan, dan file kode lainnya masing-masing.

Toolbar utama memungkinkan Anda beralih antara modus berbeda. Untuk mengedit file tersebut, pastikan pilihan Edit diaktifkan. Bersamaan Edit, pilihan Eval dan Komit tersedia untuk mengevaluasi dan mengkompilasi kode. Mengklik Git Git terbuka akan konsol untuk menjalankan perintah. Jika Anda ingin membuka file kode dari lokasi setempat, klik File pada menu bar diikuti dengan Upload File untuk menentukan lokasi file.

Setelah dikodekan aplikasi Java Script, Anda dapat mempublikasikan dari menu App. Sebelum penerbitan aplikasi, periksa pratinjau server hidup dari aplikasi yang dikembangkan atau script dengan mengklik Preview pada toolbar utama. AKShell  editor online yang berguna untuk kode aplikasi web JavaScript.

Kunjungi AkShell untuk belajar JavaScript

note:  Jujur saya sendiri masih dangkal banget dengan yang beginian,tapi ga apa2 lah itung2 sambil belajar n berbagi...

Blogger Sitemap Generator

Sebelumnya saya sudah pernah membahas tentang cara submit sitmap ke google webmaster,Namun yang saya jelaskan waktu itu hanya tentang cara submit saja,namun dari pengalaman ada kalanya sitemap yang kita submit di tolak oleh google...biar lebih gampang kita gunain Sitemap Generator aja yah.cekidot

Jika sobat submit sitemap manual dengan sitemap dasar, yaitu atom.xml atau rss.xml maka yang akan sobat temukan sewaktu input sitemap di google webmaster adalah ketidakpuasan, kenapa? karena google webmaster hanya membaca 26 artikel sobat saja. Lantas bagaimana jika punya 100 artikel atau lebih? maka dari itu dengan blogger sitemap generator ini mudah-mudahan bisa mengatasi permasalahan tersebut.

Buat sobat yang sudah paham cara mensubmit sitemap ke google wabmaster, bisa langsung ke blogger sitemap generator, silahkan klik disini. Kemudian masukkan alamat url milik sobat, jangan lupa tutup dengan tanda slash ( / ).

Untuk lebih jelasnya, silahkan sobat lihat videonya dibawah ini



Bagaimana?

note: Cukup sekian dan terima 5ribu.

Membuat Recent Post dan Recent Comment

Widget Recent Post berisi judul - judul artikel terbaru di blog kita. Widget post terbaru dapat memberikan informasi kepada pengunjung apa artikel terbaru di blog kita. Sedangkan widget recent Comment berisi comment terbaru dari pengunjung, widget recent comment ini dapat menginformasikan kepada kita apa comment terbaru yang diberikan oleh pengunjung.

Cara membuatnya sebagai berikut :

1. Login >> Tata Letak >> Elemen Halaman >> Tambah gadget.

2. Pilih gadget "Feed", Klik tambahkan ke blog.

3. Masukan alamat feed yang mau anda pasang (URL untuk post terbaru atau URL komentar terbaru).

Recent Post

Contoh : http://NAMA BLOG.blogspot.com/posts/default

Recent Comment

Contoh : http://NAMA BLOG.blogspot.com/feeds/comments/default

4. Klik Lanjutkan.

5. Ganti judul dengan Post terbaru atau Komentar terbaru, dan pilih juga berapa yang anda inginkan (maksimal 5)

6. Klik tombol Simpan Perubahan.

Selesai dan lihat hasilnya...

note: Laper coy,....udah dulu ye...lanjut ntar.owh makanan"i'am comiiiing".hiks