Tampilkan postingan dengan label Tutorial Wordpress. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Wordpress. Tampilkan semua postingan

Rabu, 08 Februari 2012

Tombol To Page Down WordPress

Membuat Tombol To Page Down di WordPress.com | Tutorial Blog

Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top di WordPress.com, pada postingan tersebut ada pertanyaan dari sobat ibnzuhri tentang membuat tombol back to down atau to page down di wordpress.com. Jadi pada postingan kali ini akan saya buat tutorial tentang Membuat Tombol To Page Down di WordPress.com.
Berikut tutorialnya :
  • Login ke Wordpess Anda, Klik Appearance > Widgets.
    Tombol To Page Down WordPress
  • Drag Text ke Sidebar.
    Tombol To Page Down WordPress
  • Lalu letakkan kode berikut pada area Text.
    <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='URL Icon' /></a></div>
    Ganti URL Icon dengan URL Image, Contoh :
    <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div>
    Untuk URL Icon, dapat Sobat gunakan Url yang lain. Jika sobat ingin memasang tombol page down dan page up sekaligus, Sobat dapat menggunakan kode berikut
    <div style="display:scroll;position:fixed;top:300px;left:10px;"><div><a href='#' title='to page up'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png' /></a></div><div><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div></div>
  • Terakhir klik Save.
    Tombol To Page Down WordPress
Catatan : Karena setiap template berbeda, ada kemungkinan kode diatas tidak bekerja, namun pada blog wordpress.com saya cara ini sudah berhasil.
Semoga tutorial ini bisa membantu Sobat dalam membuat Tombol To Page Down di WordPress.com

Sabtu, 04 Februari 2012

Membuat Tombol di Blog

Membuat Tombol di Blog | Tutorial Blog

Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.
  • Membuat tombol untuk Blogspot :
    • Login ke blogger Sobat.
    • Untuk membuat tombol di postingan klik Posting > New Post, lalu pilih tab Edit Html.
    • Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts.
    • Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)
  • Untuk Wordpress.com :
    • Login ke dasboard Anda.
    • Untuk menampilkan di postingan klik Posts > Add New, lalu pilih tab Html.
    • Untuk menampilkan di widget klik Appearance > Widgets, lalu letakkan Text pada sidebar.
    • Selanjutnya letakkan kode untuk menampilkan tombol.
Untuk kodenya dapat Sobat lihat dibawah ini :
  • kodenya seperti ini :
    <button>Tombol</button>
  • Posisi tombol ditengah :
    berikut kodenya :
    <div style="text-align: center;"><button>Tombol</button></div>
  • Untuk tombol yang berisi Link berikut kodenya :
    <a href="http://alamatblog.com/"><button>LINK</button></a>
  • Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan target="_blank"
    <a href="http://alamatblog.com/" target="_blank"><button>LINK</button></a>
Gimana Sob, mudah kan ?!?
Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.

Selasa, 24 Januari 2012

Membuat Dua Kolom Tulisan diPostingan

Membuat Dua Kolom Tulisan di Postingan | Tutorial Blog

Pada tutorial kali ini saya akan berbagi tentang cara membuat tulisan terbagi menjadi dua kolom pada postingan.Cara ini dapat di lakukan pada Blogspot maupun Wordpress.com, Buat yang ingin mencobanya silakan ikuti tutorial berikut.
  • Login ke dasboard anda.
  • Buat postingan baru dan pilih mode HTML.
  • Lalu letakkan kode dibawah ini pada area postingan.
    Kode :
    <table width="500" border="0" cellspacing="10">
    <tr>
    <td width="250" valign="top">kolom 1...</td>
    <td width="250" valign="top">kolom 2...</td>
    </tr>
    </table>
  • Kemudian kembali ke mode Visual / Compose.
  • Bila table sudah tampak pada halaman penulisan, lakukan penulisan pada masing-masing kolom sesuai keinginan anda.
  • Jika sudah selesai silakan klik Publish.
Semoga tutorial ini dapat membantu Sobat dalam Membuat Dua Kolom Tulisan di Postingan.

Senin, 23 Januari 2012

Mengganti Background di Postingan

Mengganti Background di Postingan | Tutorial Blog

Buat Sobat yang ingin menampilkan sesuatu yang berbeda pada sebuah postingan, Sobat dapat mengganti background / latar berupa Image / gambar pada postingan tersebut.
Caranya gampang Sob, silakan ikuti tutorial berikut :
  • Masuk ke dashboard anda. Klik Posts > Add New pada wordpress.com dan Posting > New Post pada blogger.
    Spoiler :
    Blogspot
    Mengganti Background di Postingan
    Wordpress.com
    Mengganti Background di Postingan
  • Lalu pilih tab Edit HTML.
    Spoiler :
    Blogspot
    Mengganti Background di Postingan
    Wordpress.com
    Mengganti Background di Postingan
  • Copy kode dibawah ini dan paste-kan di area postingan
    Kode :
    <div style=”background-image:url(‘http://url_gambar.jpg‘); background-repeat:repeat; background-position:center center; text-align:justify; padding:5px;”>
    Tulis text anda disini
    </div>
    Keterangan :
    Ganti http://url_gambar.jpg dengan alamat gambar yang ingin Anda jadikan background.
    Ganti Tulis text anda disini dengan artikel yang ingin Sobat posting.
  • Jika sudah selesai kembali ke mode Visual / Compose.
    Spoiler :
    Blogspot
    Mengganti Background di Postingan
    Wordpress.com
    Mengganti Background di Postingan
  • Terakhir klik Publish.
    Spoiler :
    Blogspot
    Mengganti Background di Postingan
    Wordpress.com
    Mengganti Background di Postingan
Demikian tutorial singkat tentang Mengganti Background di Postingan.

Selasa, 17 Januari 2012

Menampilkan Tombol Share Di WordPress.com

Menampilkan Tombol Share Di WordPress.com | Tutorial Blog

Tombol share memang penting dalam sebuah blog, dengan memasang tombol share maka pengunjung blog dapat dengan mudah mempromosikan artikel postingan yang kita buat. Hal itu tentu saja akan meningkatkan pengunjung blog dari berbagai jejaring sosial (social network).
Kali ini saya akan berbagi cara Menampilkan Tombol Share Di WordPress.com, berikut tutorialnya :
  • Login ke WordPress Sobat. Kemudian klik Settings > Sharing.
    Menampilkan Tombol Share Di WordPress.com
  • Drag and drop (tahan dan geser) tombol share yang berada di menu Available Services ke menu Enabled Services.
    Menampilkan Tombol Share Di WordPress.com
  • Anda dapat melakukan pengaturan tampilan pada icon, jika anda menginginkannya, caranya klik tanda { ▼ } disamping kanan icon share.
    Menampilkan Tombol Share Di WordPress.com
    Ket :
    1. Button style : pilih tampilan icon atau text.
    2. Sharing label : tulislah nama untuk fitur sharing anda.
    3. Open links in : tampilan halaman saat icon share di klik.
    4. Show buttons on : penempatan icon sharing.
  • Jika sudah selesai klik Save Changes.
    Menampilkan Tombol Share Di WordPress.com
Sekian Tutorial Menampilkan Tombol Share Di WordPress.com

Senin, 16 Januari 2012

Tombol Back To Top WordPress

Membuat Tombol Back To Top di WordPress.com | Tutorial Blog

Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top di blogspot, kali ini saya akan membuat tutorial untuk memasang tombol back to top tersebut pada blog wordpress.com
Berikut tutorialnya :
  • Login ke Wordpess Anda, Klik Appearance > Widgets.
    Membuat Tombol Back To Top di WordPress.com
  • Drag Text ke Sidebar.
    Membuat Tombol Back To Top di WordPress.com
  • Lalu letakkan kode berikut pada area Text.
    <div style="display:scroll;position:fixed;bottom:10px;right:10px;">
    <a href='#' title='Kembali Keatas'><img src='URL Icon' /></a>
    </a></div>
    Ganti URL Icon dengan URL Image, Contoh :
    <div style="display:scroll;position:fixed;bottom:10px;left:10px;">
    <a href='#' title='Kembali Keatas'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-blue.png' /></a>
    </a></div>
    Untuk URL Icon Sobat dapat menggunakan Url berikut :
    Tombol Back To Top
    http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-blue.png
    Tombol Back To Top
    http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-green.png
    Tombol Back To Top
    http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-red.png
  • Terakhir klik Save.
    Membuat Tombol Back To Top di WordPress.com
Untuk tombol page downnya, silakan baca Tombol To Page Down di WordPress.com
Semoga bermanfaat...

Jumat, 13 Januari 2012

Membuat Sticky Page di Wordpress

Membuat Sticky Page di Wordpress.com | Tutorial Blog

Sebelumnya saya bikin postingan tentang Membuat Sticky Post di WordPress, pada postingan kali ini saya akan berbagi tentang cara membuat Sticky Page di Wordpress.com.
Sticky Page merupakan sebuah page/halaman yang akan di tampilkan pada home page sebuah blog, jadi jika Sobat mengaktifkan fitur ini maka artikel terbaru yang biasa di tampilkan di home page akan di gantikan oleh Sticky Page.
Bagi Sobat yang ingin Membuat Sticky Page di Wordpress.com, Anda dapat mengikuti tutorial dibawah ini :
  1. Login ke Wordpress Sobat, buat sebuah Page/halaman yang akan di sticky, lalu Publish halaman tersebut.
  2. Pada dashboard klik Settings > Reading.
    Membuat Sticky Page di Wordpress.com
  3. Pada Front page displays beri tanda pada static page, lalu pilih halaman yang akan di tampilkan.
    Membuat Sticky Page di Wordpress.com
  4. Terakhir klik Save Changes.
    Membuat Sticky Page di Wordpress.com
    Selesai... Sekarang lihat home page Anda.
Semoga tutorial ini bisa membantu sobat yang ingin Membuat Sticky Page di Wordpress.com.

Rabu, 11 Januari 2012

Membuat Sticky Post di WordPress

Membuat Sticky Post di WordPress.com | Tutorial Blog

Sebelumnya saya posting tentang Membuat Sticky Post di Blogspot, dan kali ini tentang Membuat Sticky Post di WordPress.com.
Untuk membuat sticky post di wordpress.com ada dua cara, pertama melalui halaman All Post. Kedua melalui add new Post.
  • Melalui halaman All Post
  1. Klik Dashboard > posts > All Posts
    Membuat Sticky Post di WordPress.com
  2. Lalu klik Quick Edit pada bagian bawah judul postingan.
    Membuat Sticky Post di WordPress.com
  3. Kemudian beri centang pada Make this post sticky. Dan klik Update.
    Membuat Sticky Post di WordPress.com
  • Melalui Add new Post
  1. Klik Dashboard > posts > Add New, lalu buat postingan yang ingin di sticky.
    Membuat Sticky Post di WordPress.com
  2. Sebelum di Publish, Klik Edit pada bagian Visibility.
    Membuat Sticky Post di WordPress.com
  3. Beri centang pada stick this post to the front page. Agar nantinya ketika Anda mempublish postingan maka akan langsung menjadi postingan sticky.
    Membuat Sticky Post di WordPress.com
  4. Terakhir klik Publish. Selesai...
Sekian Artikel tentang Membuat Sticky Post di WordPress.com.

Minggu, 01 Januari 2012

Membuat Widget Daftar Isi

Membuat Widget Daftar Isi | Tutorial Blog

Buat Sobat yang ingin Membuat Daftar Isi dan memasangnya pada sidebar blog menggunakan Scroll Box, sobat dapat mengikuti tutorial berikut ini.

Untuk Blogger :
  • Login ke dashboard blogger, klik Design > Page Element > Add a Widget, dan pilih HTML/Javascript.
  • Beri judul pada kolom Title, lalu letakkan kode berikut ;
    <div style="border: 1px solid rgb(0, 0, 0); height: 200px; overflow: auto;">
    <script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    200px : tinggi Scroll Box, ganti sesuai keinginan Anda.
    alamatblog.com : Ganti dengan alamat blog Sobat.
  • Kemudian klik Save dan lihat hasilnya.

Untuk Wordpress.com :
  • Login ke dashboard Anda, klik Appearance > Widget.
  • Drag Text ke Sidebar.
  • Selanjutnya beri judul widget pada kolom Title, dan letakkan kode berikut :
    <div style="border: 1px solid rgb(0, 0, 0); height: 200px; overflow: auto;">
    [archives limit=100]
    </div>
    100 : Jumlah artikel yang di tampilkan, silakan di ganti.
  • Terakhir klik Save.
Untuk Blogspot selain cara diatas Sobat juga dapat memasang Widget Daftar Isi Tersembunyi.

Semoga Bermanfaat...

Minggu, 25 Desember 2011

Membuat Widget Melayang di Wordpress.com

Membuat Widget Melayang di Wordpress.com | Tutorial Blog

Widget melayang (Floating Widget) mungkin dapat Sobat gunakan untuk mempercantik tampilan blog, cara memasangnya mudah saja, namun tidak semua widget dapat di pasang menggunakan trik ini.
Langsung saja Sob, berikut caranya :
  • Login ke Wordpess Anda, Klik Appearance > Widgets.
    Membuat Widget Melayang
  • Pilih Widget Text, Drag ke Sidebar
    Membuat Widget Melayang
  • Lalu letakkan kode berikut ;
    <div style='display:scroll;position:fixed;top:5px;right:5px;'>
    Kode Widget
    </div>
    Sebagai contoh saya gunakan kode pagerank
    <div style='display:scroll;position:fixed;top:5px;right:5px;'>
    <a href="http://www.getrank.org" target="_blank"><img title="Pagerank" src="http://www.getrank.org/prbutton/pagerank-display.php?s=17" alt="PageRank Checker" border="0px" /></a>
    </div>
    Keterangan :
    top:5px;right:5px; : kode yang berwarna merah merupakan posisi widget yang akan Anda pasang, seperti contoh diatas. top right menunjukkan posisinya di atas bagian kanan dengan jarak 5 pixel dari pinggir layar monitor Anda. Bila ingin merubah posisinya di atas kiri, maka codenya menjadi ; top:5px;left:5px  posisi bawah kiri : bottom:5px;left:5px dan posisi dibawah kanan ganti codenya dengan bottom:5px;right:5px
  • Terakhir klik Save.
    Membuat Widget Melayang
Selamat mencoba dan semoga berhasil...

Selasa, 20 Desember 2011

Memasang Widget Recent Comment

Memasang Widget Recent Comment | Tutorial Blog

Sebelumnya saya posting tentang Memasang Widget Recent Post, untuk kali ini Memasang Widget Recent Comment. Widget ini berfungsi untuk menampilkan komentar terbaru pada blog Anda.
Berikut cara Memasang Widget Recent Comment :
  • Untuk Blogspot :
  1. Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Memasang Widget Recent Comment
  2. Klik Add a Gadget/Tambah Gadget.
    Memasang Widget Recent Comment
  3. Pilih pada menu Featured.
    Memasang Widget Recent Comment
  4. Lalu pilih Recent Comment
    Memasang Widget Recent Comment
  5. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Recent Comment
  • Untuk Wordpress :
  1. Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
    Memasang Widget Recent Comment
  2. Drag Recent Comment dan letakkan pada Sidebar.
    Memasang Widget Recent Comment
  3. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Recent Comment
Semoga Bermanfaat...

Sabtu, 17 Desember 2011

Memasang Widget Recent Post

Memasang Widget Recent Post | Tutorial Blog

Tutorial kali ini buat para newbie seperti saya, buat para master silakan lewat. hehe...
Berikut cara Memasang Widget Recent Post :
  • Untuk Blogspot :
  1. Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Memasang Widget Recent Post
  2. Klik Add a Gadget/Tambah Gadget.
    Memasang Widget Recent Post
  3. Pilih pada menu Featured.
    Memasang Widget Recent Post
  4. Lalu pilih Recent Post
    Memasang Widget Recent Post
  5. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Recent Post
  • Untuk Wordpress :
  1. Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
    Memasang Widget Recent Post
  2. Drag Recent Post dan letakkan pada Sidebar.
    Memasang Widget Recent Post
  3. Terakhir klik Save.
    Memasang Widget Recent Post
Semoga Bermanfaat...

Sabtu, 26 November 2011

Cara Membuat Schedule / Jadwal Postingan di Wordpress

Cara Membuat Schedule / Jadwal Postingan di Wordpress | Tutorial Blog

Pada postingan kali ini saya akan berbagi cara membuat Jadwal Postingan di WordPress. Jika kita menggunakan opsi ini maka postingan yang kita buat akan dipublish secara otomatis sesuai pengaturan yang kita lakukan. Untuk Blogspot silakan baca Membuat Schedule / Jadwal Postingan Blogspot.

Berikut Cara Membuat Schedule / Jadwal Postingan di Wordpress :
  1. Login ke Dashboard Wordpress Anda, klik Posts > Add New, dan buat sebuah postingan.
    Post Addnew WP
  2. Sebelum di Publish klik Edit yang terletak disamping Publish immediately.
    Schedule Post
  3. Atur tanggal dan jam kapan postingan Sobat ingin dipublish.
    Jadwal Postingan
  4. Terakhir klik tombol Schedule.
    Jadwal Postingan
Semoga tutorial diatas bermanfaat buat sobat yang ingin Membuat Schedule / Jadwal Postingan di Wordpress.