0 Cara Upload Database Blog Dari LocalHost Ke WEB Hosting Dengan FTP

Bagaimana cara agar blog anda yang sudah di desain sedemikian rupa bagus dan menarik,namun masih berada di LocalHost ?,dan anda ingin blog menjadi Online alias dapat di akses lewat internet ?,oke hal itu akan kita bahas dalam pertemuan kali ini.
Hal yang pertama yang harus anda lakukan adalah memilih Hosting,karna hosting merupakan tempat yang akan digunakan sebagai tempat menyimpan database blog anda yang telah di upload dari localhost ke web hosting.Sebelum anda memilih web hosting mana yang akan anda gunakan nantinya,sebaiknya anda perlu hati-hati,karena sekarang banyak penyedia jasa hosting dengan harga murah namun kualitas yang tidak bisa dipertanggung jawabkan.Maksudnya,anda sudah membayar dengan sejumlah uang untuk membeli hosting selama setahun dan tidak dapat diakses.
Namun anda tidak perlu terlalu cemas,karna anda dapat menanyakan tempat web hosting yang bagus di forum-forum hosting,tapi setahu saya web hosting yang bagus yaitu yang sudah berumur lebih dari tiga tahun.
Oke sekarang kita masuk ke inti pembahasan,di sini saya menggunakan idhostinger sebagai web hosting,namun anda dapat memilih sendiri jika tidak cocok dengan web hosting yang saya pakai sebagai contoh :D.
Seperti judul di atas kita akan mengupload database blog yang ada di localhost baik wordpress maupun joomla dengan FTP,oleh karna itu untuk menggunkan FTP kita membuat akun FTP dahulu yang telah tersedia di idhostinger.

• Peratama anda download dulu software FTP (File Transfer Protocol),softwarenya FTP yang akan kita gunakan yaitu FileZilla yang bisa anda download di sini, FileZilla ini yang akan digunakan untuk mengupload setelah anda memiliki akun FTP.
• Setelah mendownload  FileZilla  lanjutkan dengan login ke idhostinger.
• Pilih Tab Kontrol Panel dan pilih domain mana yang akan anda buat akun FTP dan pilih Beralih,seperti gambar dibawah ini :

• Di sana ada 7 kolom,dan anda pilih kolom yang ke 5 yaitu kolom FILE,setelah itu Klik dan Pilih Akun FTP.

• Setelah itu isi data yang diperlukan,yaitu : Direktori,Kuota (MB),Nama Pengguna,Password,Verifikasi Password,untuk kuota bisa anda sesuaikan sesuai kebutuhan web anda,dan untuk password sebaiknya membuat kata sandi sendiri dibandingkan dengan otomatis,takutnya ntar lupa kalau otomatis hehe :D,setelah itu klik Buat.

• Tunggu beberapa detik karna akun FTP anda sedang dibuat dan jika sudah selesai biasanya ada pemberitahuan di pojok kanan bawah.
  Copy paste pada notepad data FTP anda yang ada pada kolom Daftar Akun FTP Aktif.

• Install FileZilla yang telah di download tadi,dan isikan data FTP anda pada  FileZilla seperti gambar dibawah ini :

• Setelah pendataan direktori berhasil,kini saatnya upload data base blog anda,jika anda menggunakan wordpress,Folder yang harus di upload adalah Wp-Admin,Wp-Content,Wp-Includes,klik kanan pada masing-masing folder dan pilih Upload,dan tunggu sampai proses upload ketiga folder tersebut selesai.

• Cara upload data base blog dari local host ke web hosting ini juga dapat di gunakan untuk wordpress,joomla,dll,.. :D

0 Cara Menampilkan Judul Posting Saja Pada Arsip Blog

Fitur Arsip pada blog memang di butuhkan agar pengunjung blog dengan mudah dapat melihat artikel apa saja yang sudah ada dalam blog tersebut baik bulan maupun tahun lalu,tapi apa yang terjadi jika anda dalam waktu sebulan ini membuat postingan misalnya lebih dari 50 postingan ?,pasti sangat akan panjang arsip blog anda dalam waktu sebulan tersebut,memang dapat di bantu dengan read more yang dapat memotong postingan,tapi tetap aja kelihatan panjang dan kurang menarik untuk di lihat oleh pengunjung,nah..dengan hanya menampilkan judul postingan saja pada arsip blog akan membuat penampilan blog anda akan terjaga dan tetap menarik untuk di kunjungi.

• Hal pertama yang harus anda lakukan tentunya login dulu ke www.blogger.com hehe :D
• Oke setelah itu pilih tab Template dan kemudian pilih Edit HTML
• Centang kotak yang bertuliskan Expand Template Widget lalu cari script <b:include data='post' name='post'/>
• Setelah ketemu ganti script <b:include data='post' name='post'/> dengan script dibawah ini :

 <!--Menampilakan Hanya Judul posting saja Pada arsip Blog-->
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--www.blog-i9.blogspot.com-->

• Kemudian simpan template anda,maka tampilan postingan pada arsip blog anda berubah seperti ini :

Oke sampai di sini selesai merubah judul postingan saja yang muncul pada arsip blog anda,tapi jika di lihat pada gambar di atas terlihat sedikit kurang menarik karna menurut saya tidak ada pembatas antar judul post,dan karna itu agar lebih dan lebih menarik hehe :D tambahkan garis dibawah judul postingan yang nantinya akan menjadi pembatas saat judul post tampil pada arsip blog :D

• Hal pertama yang harus anda lakukan tentunya login dulu ke www.blogger.com hehe :D
• Oke setelah itu pilih tab Template dan kemudian pilih Edit HTML
• Centang kotak yang bertuliskan Expand Template Widget lalu cari script h3.post-title atau .post h3 pokoknya cari script yang mirip dengan secript tersebut.
• Setelah ketemu tambahkan script dibawah ini di antara  h3.post-title {...}

border-bottom:2px solid silver;

• Jelasnya seperti ini :

/* Posts

----------------------------------------------- */

h3.post-title {border-bottom:2px solid silver;

  margin: 0;

  font: $(post.title.font);

}

• Kemudian simpan template anda,dan lihat hasilnya... :D

0 Cara merubah tampilan threaded comment blogger dengan CSS

Threaded comment ? yaa  threaded comment,itulah fitur baru yang di sungguhkan blogger untuk penggunanya,bagi yang blognya sudah menggunakan  threaded comment  dapat mengikuti turtorial postingan kali ini :D.Yups...postingan kali ini kita akan merubah tampilan dari  threaded comment agar terlihat lebih menarik dan dapat menarik pengnjung blog anda agar mau berkomentar pada postingan blog anda :D.
Scriptnya cukup panjang namun hanya satu peletakan saja hehe...:D langsung aja simak oke :o

• Pertama login to blogger.
• Pilih menu Template lalu kemudian pilih lagi Edit HTML.
• Setelah itu cari script ]]></b:skin> kemudian copy dan paste script di bawah ini Diatas ]]></b:skin>

/* Start Comment Style Code */

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

.comments .comments-content .inline-thread{padding:0}

.comments .comments-content .comment-thread{margin:8px 0}

.comments .comments-content .comment-thread:empty{display:none}

.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

.comments .comments-content .comment:first-child{padding-top:16px}

.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}

.comments .comments-content .comment-body{position:relative}

.comments .comments-content .user{font-style:normal;font-weight:normal}

.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}

.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}

.comment-content{margin:0 0 8px;padding:0 5px}

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

.comments .comments-content .owner-actions{position:absolute;right:0;top:0}

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}

.comments .thread-toggle{cursor:pointer;display:inline-block}

.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}

.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

.comments .thread-chrome.thread-collapsed{display:none}

.comments .thread-toggle{display:inline-block}

.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}

.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}

.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJoTy3j_4wM4O9TN6jgL-rCmH-TWiIr0JhWDF3V9gt8n6adA5ih9GVU5bisZ1IbbMLgXip3ndMHE_Kx3l3GIPVe7nE6RaFoicyLPJalBqQKtVf4j58BBPfJctArlg69FL3RphjYQ_Mbk/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

/* End Comment Style Code  */

• Setelah itu Simpan Template... :D

Oke setelah anda mengikuti turtorial di atas maka blog anda tampilan threaded commentnya sudah berubah menjadi lebih menarik :D,namun bagaimana agar comment anda dengan pengunjung anda berbeda pada fitur threaded comment ini ?,oke tenang sekarang akan di share sepaket hehe :D

• Pertama anda pilih lagi menu Template dan pilih Edit HTML
• Kemudian copy dan paste script di bawah ini SEBELUM script </body>

<script src='http://code.jquery.com/jquery-latest.js'/>

<!-- Komentar admin -->

<script>

$(function() {

function highlight(){

$('.user.blog-author,.ssyby').closest('.comment-block')

.css('border', '1px solid #e1e1e1')

.css('background','#f1f1f1 url("http://i1143.photobucket.com/albums/n629/gerduren/admin2.png") no-repeat bottom right')

.css('padding', '10px');

}

$(document).bind('ready scroll click', highlight);

});

</script>

<!-- Komentar admin end -->

• Setelah itu Simpan Template :D

Oke itulah tirk bagaimana merubah tampilan  threaded comment pada blog anda :D,dan jika sudah di ikuti semua langkah-langkah di atas maka tampilan threaded comment blog anda akan seperti ini :

2 Cara mengganti bullet list pada blog menjadi menarik

Untuk membuat tampilan blog anda semakin menarik,pertemuan kali ini saya akan berbagi trik bagaimana mengganti tampilan bullet list pada postingan blog.Pada dasarnya tampilan bullet list pada saat kita membuat postingan adalah berbentuk bulat hitam.
Gambar dibawah ini adalah bullet list secara default pada blog,yang akan kita ganti dengan trik yang akan sampaikan :D

Untuk mengganti bullet list yang pada dasarnya default pada blog bulat hitam,disini kita memerlukan dua gambar,yang pertama sebagai latar belakang,yang kedua sebagai tanda centang.Oke sebelumnya ini adalah link gambar yang saya gunakan sebagai bullet list yang baru nantinya :

1. http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif
2. http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif

Tenang gambar tersebut tidak akan membuat loading blog anda berat,menurut saya itu juga,tapi jika anda ingin mengganti dengan gambar yang anda inginkan silahkan :D
Yups...inilah script dan tata cara yang akan kita gunakan untuk mengganti bullet list pada blog :D

• Pertama cari script ]]></b:skin> pada template anda,setelah ketemu copy script dibawah ini :

.post-body ul,

.post-body ol{

  margin: 1em;

  padding-left: 1em;

}

.post-footer ul{

  margin: 1em;

  margin-top: -0.5em;

  padding-left: 1em;

}

.post-body ul li,

.post-footer ul li {

  list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif);

  border-bottom: 1px solid #ccc;

  padding: .2em 0 .2em .5em;

}

.post-body ul li:hover,

.post-footer ul li:hover {

  cursor: pointer;

  list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif);

  background-color: #f2f2f2;

  color: #B1291F;

•  Setelah di copy,paste script tadi SEBELUM ]]></b:skin>
• Sekarang save template anda,dan coba membuat satu postingan dan lihat hasilnya :D

Catatan :
Pada saat membuat postingan atau entri baru memang tampilannya masih bulat hitam tapi jika postingan yang sudah anda buat dan di publikasikan maka tampilannya seperti ini :

Hasil diatas adalah bullet list yang telah kita rubah,saat kotak disorot dengan kursor maka pada kotak putih tersebut akan ada tanda centang :D

1 Cara membuat entry post blog berbentuk galeri

Blog mana yang tidak ingin tampilan blognya menarik dan enak di pandang oleh pengunjung blognya.Sering kita jumpai jika kita sering blogwaking,pada blog yang menggunakan read more agar postingan yang muncul pada halaman utama atau label tidak panjang,nah..sekarang bagaimana mengganti read more tersebut dengan bentuk galeri pada halaman utama atau label agar lebih terlihat menarik dan simple :D

Gambar diatas adalah tampilan entry post bebentuk galeri pada halaman utama atau home,sekarang kita lanjut ke tahap selanjutnya yaitu menerapkan trik ini pada blog anda :D

• Login to blog
• Pilih Template,lalu klik Edit HTML
• Cari script ]]></b:skin> agar lebih cepat tekan Ctrl+F
• Setelah ketemu,copy dan pate script di bawah ini tepat dibawah  ]]></b:skin>

<!-- untuk dua kolom seluruh halaman -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->

<!-- untuk dua kolom halaman label -->

<b:if cond='data:blog.searchLabel'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->

•  Sebelum di save templatenya sebaiknya pratinjau dahulu,setelah sesuai save deh :D

Catatan :
Script diatas di bagi dua yaitu style untuk halaman utama dan halaman label.

• Untuk halaman utama atau home scriptnya dari <!-- untuk dua kolom seluruh halaman --> sampai <!-- akhir dua kolom --> dapat disesuakan sesuai keinginan :D
• Dan untuk style halaman label scriptnya dari <!-- untuk dua kolom halaman label --> sampai <!-- akhir dua kolom --> dapat disesuakan sesuai keinginan :D