Wednesday, February 13, 2013

Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )

Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger ) - Posting kali ini hanya untuk menjawab pertanyaan dari seorang pengunjung blog ini, yang bertanya 
"aku malah bingung cz ak pengguna baru mau buat blog yang aku plajari di buku, semua menggunakan tampilan lama......."
dan sangat tidak mungkin saya menjawab di kotak komentar, karena tentu sangat panjang, tentu dengan adanya post kali ini akan bisa membuat jumlah artikel di blog ArtikelBlogger menjadi bertambah.
tanpa banyak basa - basi lagi, saya akan menunjukkan tutorial membuat blog di blogger (tampilan / interface baru blogger ) lengkap dengan gambar.
1. masuk ke blogger.com
2. Klik tombol Daftar ( jika sudah memiliki akun Google, tinggal masuk ke Akun Google tersebut dan langsung ke langkah 7 )
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
3. Isilah sesuai dengan data diri sobat, 
4. setelah itu sobat akan disuruh untuk mengunggah foto, lewati saja.
5. setelah selesai mendaftarkan diri, akan masuk ke halaman baru, klik tombol  Kembali ke Blogger 
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
 6. klik tombol  Lanjutkan ke Blogger 
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
 7. maka sobat akan masuk ke Blogger, klik tombol Blog Baru
 
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
 8. Buat blog sobat dengan mengisi Judul Blog cth : ArtikelBlogger
Alamat contoh : artikelbloggers.blogspot.com atau seomint.blogspot.com
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )

 9. pilihlah Alamat blog yang belum dipakai orang lain, dan tinggal klik tombol   Buat Blog  


Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
10. Blog sudah jadi, sekarang hanya tinggal memulai untuk blogging, klik tombol pensil berwarna orange untuk menulis artikel.
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )
11. jika ingin mengoptimalkan blog, bisa mengklik menu dropdown yang disediakan Blogger.
Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger )

Keterangan :
1. Overview blog
2. Kumpulan Artikel blog ( yang telah dipublish maupun yang masih draft )
3. Halaman blog
4. Komentar artikel blog
5. Google+ sharing
6. Statistik blog ( Pageview, Post View, Pemirsa )
7. Pendapatan blog ( Google Adsense, Amazon )
8. Element blog ( widget / gadget )
9. Template blog ( tampilan blog )
10. Pengaturan blog
sekian Artikel tentang Cara Membuat Blog di Blogger Terbaru ( Tampilan Baru Blogger ), semoga dapat membantu bagi sobat - sobat yang memerlukan.
 

Wednesday, December 19, 2012

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog
Cara Membuat Tombol Navigasi di Pojok Blog -  Mungkin masih banyak yang belum memahami maksud dari Judul Posting kali ini, maksudnya adalah sebuah tombol navigasi yang berisi tombol Back to Top, Go to Bottom, Next Post / Next page, Previous Post / Previous Page, untuk link yang dituju di atur otomatis, dan jika ingin melihat langsung ( live demo ) silahkan lihat di blog ini ( jika masih tersedia ) atau bisa melihat screenshot berikut.

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog
 Jika tertarik ingin mencoba, silahkan baca tutorial berikut, dan jika tidak tertarik mencoba, dapat berkeliling di blog biasa ini.
langkah yang harus dilakukan adalah ( saya sarankan backup dulu template sobat, untuk mengurangi resiko kesalahan ) :
1. Masuk ke Template - Edit HTML
2. Centang Expand Template Widget
3. Cari kode <body>, pastekan kode berikut di bawah kode <body>
<a href='#top' style='display:scroll;position: fixed; bottom:45px;right:42px;' title='Ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AoLS7_sxmFSsvwN8iC-sswUcu3QsHd9YtM28g3dlCfGC_SZmyl0YT4iVL_As8MNa9X67EcKsAAmv0Etyj_hchcLCtNY_qKm9AWSmmu7r3_gBXmnok2m7XTC4jGlqT-4_SilDHEygcHM/s1600/up.png' width='43'/></a>
<a href='#footer' style='display:scroll;position: fixed; bottom:5px;right:42px;' title='Ke Bawah'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzBQLnnqgYaDNhkBr8nWDDd8krEs56nNZpV6FRqWy2nrJokWN_wnoWcR4_RI5Dubkv9gCjMINVJ8kS3VEYIxVpTwr7yC_quAvgyiBXYbsGQvx790UsBq1E0qOGPVWVasLgeSk9bv19dA/s1600/down.png' width='43'/></a>

4. Cari kode berikut :
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

5. Hapus dan Gantikan dengan kode berikut :

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESgjEWosG5OqDH7JEgxf65sQlPgKdMPJlUWWwDUolJbi-ESwEpqm-UXY32_-w9DJk3SWaCl1ndxQ3d9cfvdjEJJLxz6JYBfBTBrSKYQ5RFam6YRdXsOZ3TB_MO6WnGuPTB4QjUFSaug4/s1600/left.png' width='43'/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZdrWPUCBljXz5UPIeJ_e0yZ_AX2ARNU2d9QjY5oIFmvCb6oqOOQlLyZlcTcsFlrc_J76Zi-8MHNiaWMQ76WNf8V9jh27ltDMp9-opIYO9MQG8BEKDxVQhGJ7Hq0vABZ_n5aIP-CIaZs/s1600/right.png' width='43'/></a>
      </span>
    </b:if>
6. Terakhir, silahkan simpan template dan lihat hasilnya.
NB : gambar tombol bisa diganti sesuai dengan keinginan, cukup ganti tulisan yang berwarna merah, tetapi harus sesuai dengan arah navigasinya.

Tutorial dan ide Cara Membuat Tombol Navigasi di Pojok Blog asli buatan saya sendiri, tanpa meniru karya orang lain. jadi tolong hargai karya saya dengan mencantumkan link sumber jika ingin mencopy artikel ini.

Tuesday, December 18, 2012

Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox

Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox
Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox - Mozilla Firefox, Internet Browser kesayangan saya. walaupun banyak Internet Browser yang lain seperti Google Chrome, Internet Explorer, Safari, Opera, RockMelt, TheWorld, dll. tetapi entah mengapa saya lebih nyaman menggunakan Mozilla Firefox.
dan di posting kali ini, saya akan berbagi trik untuk mengubah tombol toolbar di Internet Browser Mozilla Firefox.
maksudnya, bisa dilihat screenshoot dibawah ini. ( entah benar atau salah namanya "Tombol Toolbar Mozilla Firefox" saya juga tidak tau. tapi anggap aja benar.)
Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox

disitu tombol yang awalnya berwarna Orange dan hanya bertuliskan Firefox, dapat diubah menjadi seseuai keinginan kita.

jika Firefox sobat tidak terdapat tombol seperti diatas, dapat menonaktifkan Menubar dengan cara masuk ke View - Toolbar - hapus centang pada Menubar
kembali ke tutorialnya.

Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox

1. tekan tombol tollbarnya, masuk ke help - Troubleshooting Information
Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox
2. tekan tombol Show Folder
Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox 
3. maka akan masuk ke sebuah Folder, dalam folder tersebut, buatlah sebuah folder baru dengan nama "chrome" (tanpa tanda petik)
4. buka notepad, pastekan kode berikut
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#appmenu-button

{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4ayQieqorYbOpZLw9hmgVvDfm2uFfKIfyL2htsnxXvYjic8EqKjtToEnciQ-fIi6mGdk3_dffQoVhnnNFir23zwSjxhFhgnevRUxuAIGej0Kn0yYrvF1K3xc9USQtVXujHGDqYC39W8/s1600/seo+mint.png) no-repeat !important;

}

#appmenu-button dropmarker:before {

content: "SEO Mint" !important;

color: #ffffff;

}

#appmenu-button .button-text {

font-style:italic;
font-color: #CBCBCB;


}
5. simpan file dengan nama userChrome.css
6. copykan file userChrome.css tadi ke folder chrome yang baru dibuat.
7. setelah selesai, restart Mozilla Firefox (bukan komputer). dan selesai.

NB :
-kode warna merah, untuk mengganti gambar background, bisa juga diganti hanya dengan warna. caranya hapus kode url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4ayQieqorYbOpZLw9hmgVvDfm2uFfKIfyL2htsnxXvYjic8EqKjtToEnciQ-fIi6mGdk3_dffQoVhnnNFir23zwSjxhFhgnevRUxuAIGej0Kn0yYrvF1K3xc9USQtVXujHGDqYC39W8/s1600/seo+mint.png) no-repeat dengan #kodewarna ( cth #ffffff  untuk warna putih, #000000 untuk warna hitam )
-kode warna biru, untuk mengganti tulisan yang disamping Firefox
-kode warna hijau, untuk mengubah warna teksnya
-jika ingin menghapus teks Firefox, ganti dengan display:none;
sekian Cara Merubah Tampilan Tombol Toolbar Mozilla Firefox dari saya, semoga bermanfaat buat semua.