Cara Menulis Artikel di Blogger

Cara Menulis Artikel Di blog adalah langkah pertama yang dilakukan setelah blog selesai di buat. Dalam pengisian postingan (tulisan dalam blog) kita bebas untuk mengisinya namun harus di jaga kesopanan dalam penulisan, tidak menjiplak hasil karya orang lain, dan sebagainya.

Maaf sebelumnya untuk pengunjung setia tips n trick

, kalau kemarin-kemarin saya menulis tentang trik-trik untuk blogger menengah sekarang saya menulis tentang Trik blogger untuk pemula. Bukannya saya berniat untuk menurunkan tingkat blog ini ataupun tidak ada trik yang lebih bagus lagi namun niat awal dari pembuatan blog ini adalah saya akan mengisi blog ini dengan berbagai Trik Lengkap seperti keyword blog ini makannya saya menulis tentang Trik blogger untuk pemula.

oke selesai penjelasan mengapa saya begini. Sekarang kembali ke topik awal yaitu Cara Menulis Artikel Di blog. apabila sobat ingin menulis Artikel namun tidak tahu harus bagai mana??, silahkan ikuti langkah-langkah di bawah ini :

1. hal yang pertama yang harus sobat lakukan adalah login ke blogger dengan akun sobat
2. setelah selesai login ke blogger, klik tulisan Buat Entri kalau sobat bingung saya sudah membuatkan gambarnya seperti di bawah ini :
   
   
   
   
   
   
   
3. Nah kurang lebih tampilannya seperti itu, sebelumnya saya akan memberi tahu bawha editor post yang saya gunakan adalah versi lama karena saya lebih suka versi lama dari pada versi yang baru.
4. Sekarang ke tahap selanjutnya.
5. Setelah mengklik tulisan tersebut, maka akan muncul tampilan seperti di bawah ini :
   
   
   Penjelasan >>
   
   
   • Gambar tangan yang berwarna hijau menunjukan tempat untuk menulis Judul Artikel, Contoh : Kumpulan trik
   • Gambar tangan yang berwarna merah menunjukan tempat untuk menulis artikel
   • Gambar tangan yang berwarna biru menunjukan tempat untuk menulis Label/kategori dari artikel yang sobat tulis, contoh : Informasi
   
   
6. Sekarang saya asumsikan sobat sudah menulis artikel, nah setelah menulis artikel maka artikel tersebut harus di Terbitkan agar muncul di blog sobat dengan cara mengklik tulisan Terbitkan Entri.
   
   
   
   
   
   
   
7. Setelah mengklik tulisan tersebut maka akan muncul tampilan seperti di bawah ini :
   
   
   
   
   
   
   Penjelasan :
   
   
   • Lihat Entri ==>> Sobat bisa melihat artikel yang baru selesai sobat buat dengan mengklik tulisan itu
   • Edit Entri ==>> sobat bisa mengedit kembali artikel yang baru sobat tulis apabila ada kesalahan
   • Buat Entri Baru ==>> maksudnya adalah sobat bisa membuat artikel baru lagi dengan mengklik tulisan tersebut
     

BACA SELENGKAPNYA....!!

Membuat Kotak Banner Iklan

Kotak Banner Iklan ini berfungsi untuk memasang iklan atau banner yang ingin sobat pasang di blog sobat, dengnan adanya Kotak Banner Iklan blog sobat terlihat lebih profesional bahkan bisa disebut Website dan ada kemungkinan apabila ada visitor tertarik untuk memasang iklannya di blog sobat atau Web sobat mungkin sobat bisa memasang Tarif jadi sobat dapet keuntungan dech dari situ.

oiya sekilas info kalau Blogger akan menghapus blog yang di anggap Spam, tidak aktif dan melanggar Peraturan (Term of Service) semoga blog sobat semua Tidak di hapus oleh blogger, kalau saja blog saya di hapus wah mungkin saya sudah benci sekali sama blogger Tapi mudah2 g ke hapus y, Amin.

Oke sekarang saatnya kita menjelaskan langkah-langkah Membuat Kotak Banner Iklan :

1. Seperti biasa login ke blogger sob
2. Masuk ke halaman Tata Letak ==>> Edit HTML
3. Seperti biasa juga Backup dulu Template sobat agar tidak mengalami kerusakan
4. Setelah itu cari kode ]]></b:skin> dan taruh kode di bawah ini tepat di atasnya
   
   
   /* Kotak Banner Iklan
   ----------------------------------------------- */
   #Banner-ads{
   margin: 0px;
   padding: 5px;
   text-align: center; }
   
   #Banner-ads img {
   margin: 0px 8px 4px 0px;
   padding: 3px;
   text-align: center;
   border: 3px outset #c0c0c0; }
   
   #Banner-ads img:hover {
   margin: 0px 8px 4px 0px;
   padding: 3px;
   text-align: center;
   border: 3px inset #333; }
   
   Modifikasi :
   
   • Teks c0c0c0 menunjukan warna garis tepi pada banner sobat, sobat bisa ganti dengan kode warna yang lain kalau tidak tahu bagaimana cara mengetahui kode warna sobat bisa mengunjungi Web ini
   • Sedangkan 333 kalau yang ini sama dengan fungsi kode di atas, Warna garis tepi, sobat juga bisa ganti dengan kode warna yang sobat sukai
5. Setelah itu Simpan dan mari kita menuju Elemen Halaman
6. Setelah berada pada elemen halaman, Tambahkan sebuah Gadget dan pilih yang HTML/Javascript
7. Trus taruh kode di bawah ini ke dalamnya
   
   
   <div id="Banner-ads">
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   </div>
   
   
   Penjelasan :
   • kode yang berwarna Biru muda sobat bisa ganti dengan alamat Web/Blog yang mempunyai Banner Tersebut.
   • Kode yang berwarna Kuning sobat bisa ganti dengan alamat banner yang ingin sobat pasang.
8. Setelah itu simpan.
9. Ngerti g sob?? klo g ngerti saya kasih contohnya y
   
   
   Gmn y mulainya oiya gini ajach misalnya saya ingin memasang Iklan/Banner saya di blog/web sobat maka saya harus memberitahu Alamat blog/Web saya dan Alamat Banner saya. misal alamat Web saya http://contohsaja.com dan alamat banner saya http://oketrik.googlecode.com/files/Logo%20oketrik.gif trus....
   
   kode di bawah ini adalah kode awalnya
   
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   Lalu setelah di ganti menjadi
   
   
   <a target="_blank" href="http://contohsaja.com"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/Logo%20oketrik.gif" border="0" /></a>
   
   
   Selesai dech sekarang Banner saya sudah berada dalam blog/web sobat
10. Gimana mudah bukan dan mengertikan?? klo g ngerti, kasian dech

Oke sekarang sudah selesai Langkah-langkah Membuat Kotak Banner Iklan. Sekarang Bagaimana dengan blog/Web sobat?? tambah Profesional bukan dan sobat juga bisa mendapatkan hasil dari blog/Web tersebut, oiya saya kasih tips apabila blog sobat terlalu banyak iklan mungkin blogger akan menghapusnya jadi saya sarankan jangan terlalu banyak memasang iklan di blog sobat y karena beresiko tinggi sekali sob. oke saya akhiri dengan mengucapkan Terima Kasih and Happy blogging.

BACA SELENGKAPNYA....!!

Menampilkan Kode HTML Dalam Postingan

HTML atau HyperText Markup Language merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser seperti Mozilla Firefox yang sudah tak asing lagi di telinga. Mozilla Firefox adalah browser favorite yang menurut saya mendukung sekali kepada blogger-blogger yang suka ngotak-ngatik template .

Disini saya akan menjelaskan Menampilkan Kode HTML ke Dalam Postingan yang di tanyakan oleh sobat Alamarsen. Sebenarnya sudah banyak Blogger-blogger master yang sudah membahas tentang trik ini namun karena ada-nya permintaan dari pengunjung blog ini jadi saya buatkan dengan senang hati .

Untuk menampilkan kode HTML dalam postingan harus menggunakan tool parse, karena tool offline-nya saya tidak mengetahuinya jadi kita pakai tool yang online saja, yaitu menggunakan tools yang di sediakan oleh Centricle. Sekarang kita langsung saja ke langkah-langkah-nya.

1. siapkan kode HTML yang akan nanti di tampilkan di dalam postingan
2. Kunjungi Centricle dengan mengklik tulisan itu
   
   
3. setelah mengunjunginya copy kode yang tadi sudah disiapkan lalu paste ke dalam kotak itu lalu klik Encode dan tunggu sebentar
   
   
4. setelah loading selesai maka kode HTML tersebut akan berubah menjadi yang tidak karuan , nah kode tersebut lah yang dapat di tampilkan ke dalam postingan
5. Setelah Kode HTML berubah menjadi kode yang tidak karuan, maka copy kode tersebut lalu pastekan kedalam postingan
6. selesai deh

sebenarnya banyak sekali tools-tools yang mendukung dalam dunia bloging, salah satunya yaitu Parse HTML yang disediakan oleh Centricle. Nah bagaimana sobat Alamarsen? mudah bukan cara menampilkannya ? sekarang untuk sobat-sobat yang lain kalau ada yang ingin ditanyakan jangan sungkan-sungkan dan apabila ada yang memerlukan trik tertentu agar tampil di blog ini silahkan untuk beritahu saya melalui kotak komentar (Baca Juga : Kode-kode HTML). Sekian dari saya. Termia kasih dan Happy blogging.

BACA SELENGKAPNYA....!!

Membuat Kotak Banner Blog

Kotak Banner Iklan ini berfungsi untuk memasang iklan atau banner yang ingin sobat pasang di blog sobat, dengnan adanya Kotak Banner Iklan blog sobat terlihat lebih profesional bahkan bisa disebut Website dan ada kemungkinan apabila ada visitor tertarik untuk memasang iklannya di blog sobat atau Web sobat mungkin sobat bisa memasang Tarif jadi sobat dapet keuntungan dech dari situ.

oiya sekilas info kalau Blogger akan menghapus blog yang di anggap Spam, tidak aktif dan melanggar Peraturan (Term of Service) semoga blog sobat semua Tidak di hapus oleh blogger, kalau saja blog saya di hapus wah mungkin saya sudah benci sekali sama blogger Tapi mudah2 g ke hapus y, Amin.

Oke sekarang saatnya kita menjelaskan langkah-langkah Membuat Kotak Banner Iklan :

1. Seperti biasa login ke blogger sob
2. Masuk ke halaman Tata Letak ==>> Edit HTML
3. Seperti biasa juga Backup dulu Template sobat agar tidak mengalami kerusakan
4. Setelah itu cari kode ]]></b:skin> dan taruh kode di bawah ini tepat di atasnya
   
   
   /* Kotak Banner Iklan
   ----------------------------------------------- */
   #Banner-ads{
   margin: 0px;
   padding: 5px;
   text-align: center; }
   
   #Banner-ads img {
   margin: 0px 8px 4px 0px;
   padding: 3px;
   text-align: center;
   border: 3px outset #c0c0c0; }
   
   #Banner-ads img:hover {
   margin: 0px 8px 4px 0px;
   padding: 3px;
   text-align: center;
   border: 3px inset #333; }
   
   Modifikasi :
   
   • Teks c0c0c0 menunjukan warna garis tepi pada banner sobat, sobat bisa ganti dengan kode warna yang lain kalau tidak tahu bagaimana cara mengetahui kode warna sobat bisa mengunjungi Web ini
   • Sedangkan 333 kalau yang ini sama dengan fungsi kode di atas, Warna garis tepi, sobat juga bisa ganti dengan kode warna yang sobat sukai
5. Setelah itu Simpan dan mari kita menuju Elemen Halaman
6. Setelah berada pada elemen halaman, Tambahkan sebuah Gadget dan pilih yang HTML/Javascript
7. Trus taruh kode di bawah ini ke dalamnya
   
   
   <div id="Banner-ads">
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   </div>
   
   
   Penjelasan :
   • kode yang berwarna Biru muda sobat bisa ganti dengan alamat Web/Blog yang mempunyai Banner Tersebut.
   • Kode yang berwarna Kuning sobat bisa ganti dengan alamat banner yang ingin sobat pasang.
8. Setelah itu simpan.
9. Ngerti g sob?? klo g ngerti saya kasih contohnya y
   
   
   Gmn y mulainya oiya gini ajach misalnya saya ingin memasang Iklan/Banner saya di blog/web sobat maka saya harus memberitahu Alamat blog/Web saya dan Alamat Banner saya. misal alamat Web saya http://contohsaja.com dan alamat banner saya http://oketrik.googlecode.com/files/Logo%20oketrik.gif trus....
   
   kode di bawah ini adalah kode awalnya
   
   
   <a target="_blank" href="http://#"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>
   
   Lalu setelah di ganti menjadi
   
   
   <a target="_blank" href="http://contohsaja.com"><img alt="Pasang Iklan" src="http://oketrik.googlecode.com/files/Logo%20oketrik.gif" border="0" /></a>
   
   
   Selesai dech sekarang Banner saya sudah berada dalam blog/web sobat
10. Gimana mudah bukan dan mengertikan?? klo g ngerti, kasian dech

Oke sekarang sudah selesai Langkah-langkah Membuat Kotak Banner Iklan. Sekarang Bagaimana dengan blog/Web sobat?? tambah Profesional bukan dan sobat juga bisa mendapatkan hasil dari blog/Web tersebut, oiya saya kasih tips apabila blog sobat terlalu banyak iklan mungkin blogger akan menghapusnya jadi saya sarankan jangan terlalu banyak memasang iklan di blog sobat y karena beresiko tinggi sekali sob. oke saya akhiri dengan mengucapkan Terima Kasih and Happy blogging.

BACA SELENGKAPNYA....!!

Slide Show di blogger

Kali ini Oketrik akan menjelasakan tentang Cara Pemasangan Slide Show di blogger dengan menggunakan jQuery. jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.

Untuk Contoh dari trik Slide Show di blogger klik saja disini dan lihat widget yang ada di bawah Header. Dalam hal ini pengaruh terhadap kecepatan blog agak tinggi, namun tidak salahnyakan apabila sobat ingin mempercantik blog sobat agar blog sobat terlihat lebih menarik dan nyaman untuk di kunjungi?? Nah apabila ingin memasangnya ikuti langkah di bawah ini :

1. Login ke blogger
2. Masuk ke Tata Letak ==>> Edit HTML 
3. Seperti Biasa jangan lupa di backup y Template sobat
   
4. cari kode </head> lalu taruh kode di bawah ini tepat di atasnya
   
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   
   Catatan : "apabila kode di atas sudah punya atau sudah ada dalam template sobat tidak usah di taruh lagi"
   
   
5. Setelah itu taruh kode di bawah ini tepat di bawah kode yang tadi saya berikan
   
   
   <!-- Javascript div#slide-holder  -->
   
   <script type='text/javascript'>var _siteRoot=&#39;index.html&#39;,_root=&#39;index.html&#39;;</script>
   
   <script src='http://oketrik.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   if(!window.slider) var slider={};slider.data=[{&quot;id&quot;:&quot;slide-img-1&quot;,&quot;client&quot;:&quot;Blog Oketrik&quot;,&quot;desc&quot;:&quot;Kumpulan trik Dan Informasi lengkap&quot;},
   
   {&quot;id&quot;:&quot;slide-img-2&quot;,&quot;client&quot;:&quot;Blogger Hacks&quot;,&quot;desc&quot;:&quot;kumpulan blogger Hacks lengkap&quot;},
   
   {&quot;id&quot;:&quot;slide-img-3&quot;,&quot;client&quot;:&quot;Informasi Terupdate &quot;,&quot;desc&quot;:&quot;Informasi yang Di Update Hampir setiap Hari&quot;},
   
   {&quot;id&quot;:&quot;slide-img-4&quot;,&quot;client&quot;:&quot;Trik Hacking&quot;,&quot;desc&quot;:&quot;Kumpulan trik-trik untuk menghacks&quot;},
   
   {&quot;id&quot;:&quot;slide-img-5&quot;,&quot;client&quot;:&quot;Trik Via Oketrik&quot;,&quot;desc&quot;:&quot;Trik original dari oketrik&quot;}];
   
   </script>
   
   <!-- End Javascript div#slide-holder  -->
   
   
   Catatan : "code yang berwarna Hijau bercetak tebal bisa sobat ganti dengan Kebutuhan"
   
   
6. Setelah itu cari kode ]]></b:skin> dan taruh kode CSS di bawah ini tepat di atasnya
   
   
   /* CSS div#slide-holder */
   
   div#headerSlider div.wrapSlider{
   width:660px;
   height:300px;
   background:#fff;
   border: 4px solid #333;
   margin: 0 auto;
   }
   
   div#headerSlider div#slide-holder{
   z-index:40;
   height:300px;
   position:absolute;
   }
   div#headerSlider div#slide-holder div#slide-runner{
   top:5px;
   left:5px;
   width:650px;
   height:290px;
   overflow:hidden;
   position:absolute;
   }
   
   div#headerSlider div#slide-holder img{
   margin:0;
   display:none;
   position:absolute;
   }
   
   div#headerSlider div#slide-holder div#slide-controls{
   left:0;
   bottom:238px;
   width:650px;
   height:50px;
   display:none;
   position:absolute;
   background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
   }
   
   div#headerSlider div#slide-holder div#slide-controls p.text{
   float:left;
   color:#fff;
   display:inline;
   font-size:10px;
   line-height:16px;
   margin:15px 0 0 20px;
   text-transform:uppercase;
   }
   
   div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
   float:right;
   height:24px;
   display:inline;
   margin:11px 15px 0 0;
   }
   
   div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
   float:left;
   width:24px;
   height:24px;
   display:inline;
   font-size:11px;
   margin:0 5px 0 0;
   line-height:24px;
   font-weight:bold;
   text-align:center;
   text-decoration:none;
   background-position:0 0;
   background-repeat:no-repeat;
   color:#fff;
   }
   
   div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
   background-position:0 -24px;
   }
   
   div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
   background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
   }
   
   
   Catatan :"code yang berwarna Hijau bercetak tebal bisa sobat ganti dengan Kebutuhan"
   
   
7. Setelah itu bisa sobat simpan tapi ini belum selesai, ayo kita lanjutkan ke tahap selanjutnya
8. Masuk ke Element Halaman dan tambahkan sebuah Gadget
9. Pilih yang HTML/JavaScript
10. masukan kode di bawah ini ke dalamnya
    
    
    <!--HTML div#slide-holder-->
    
    <div id="headerSlider"><div class="wrapSlider">
    <div id="slide-holder">
    <div id="slide-runner">
    <a href="http://oketrik.blogspot.com/"><img id="slide-img-1" alt="Kumpulan trik" src="http://sites.google.com/site/oketrik/oketrik/1.jpg?attredirects=0" class="slide"/></a>
    
    <a href="http://oketrik.blogspot.com/search/label/Blogger%20Hack"><img id="slide-img-2" alt="Kumpulan blogger Hacks" src="http://sites.google.com/site/oketrik/oketrik/2.jpg?attredirects=0" class="slide"/></a>
    
    <a href="http://oketrik.blogspot.com/search/label/Informasi"><img id="slide-img-3" alt="Free blogger Template" src="http://sites.google.com/site/oketrik/oketrik/3.jpg?attredirects=0" class="slide"/></a>
    
    <a href="http://oketrik.blogspot.com/search/label/Trik%20Hacking"><img id="slide-img-4" alt="Kumpulan trik Meng hack" src="http://sites.google.com/site/oketrik/oketrik/4.jpg?attredirects=0" class="slide"/></a>
    
    <a href="http://oketrik.blogspot.com/search/label/Trik%20via%20oketrik"><img id="slide-img-5" alt="Trik Original" src="http://sites.google.com/site/oketrik/oketrik/5.jpg?attredirects=0" class="slide"/></a>
    
    <div id="slide-controls">
    <p id="slide-client" class="text"><strong>post: </strong><span/></span></p>
    <p id="slide-desc" class="text"/>
    <p id="slide-nav"/>
    </p></p></div>
    </div>
    
    
    <!--content featured gallery here -->
    </div>
    
    </div></div>
    
    <!-- End HTML div#slide-holder -->
    
    
    Catatan :"Kode yang berwarna hijau dan bercetak tebal bisa sobat ganti sesuai kebutuhan"
    
    
11. Setelah itu simpan dech dan lihat hasilnya
    

Nah mudah bukan Memasang Slide Show di blogger?? dan gimana ada masalah?? kalau ada masalah tinggalkan pesan y di kotak komentar di bawah ini. semoga trik ini bermanfaat bagi kalian semua oiya saya hampir lupa kalau kode ini saya dapatkan dari mas Choen. Sekian dari oketrik Terima kasih.

BACA SELENGKAPNYA....!!