Tag Archive: tips trik edit HTML


Cara Memasang Share This Post

Cara Memasang Share This Post. Banyak trik SEO yang dapat kita gunakan agar blog atau halaman blog kita menjadi populer dan diindeks oleh mesin pencari (search engine). Salah satu trik yang dengan dengan mudah dapat kita lakukan adalah dengan cara memasang Share This Post pada halaman atau postingan blog milik kita.

Dengan memasang tool tersebut adalah halaman atau postingan kita dipublikasikan pada situs social bookmark yang dipilih oleh pengunjung, antara lain Digg, Delicious, Facebook, Google, Stumble, Technorati dan Twitter. Dengan terpublikasinya halaman postingan blog kita maka diharapkan akan dapat meningkatkan traffic pengunjung pada blog kita.

Jika pengunjung tertarik untuk memasang tool tersebut, Tips dan Trik Blog akan mengetengahkan cara untuk memasangnya.

Berikut langkah-langkah memasang Share This Post tersebut.

Pertama, login ke akun blogger masing-masing hingga masuk Dasbor >> Rancangan >> Edit HTML

Kedua, jangan lupa centangi “Expand Templates Widget

Ketiga, cari kode ]]>>

Keempat, copy script di bawah ini di atas kode ]]>> tersebut.

div.sociable { margin: 16px 0;}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: “”; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Kelima, kemudian cari kode

Jika blog kita sudah menggunakan fungsi readmore maka akan terdapat dua kode tersebut dan pilih kode yang kedua atau terakhir agar tidak tampak pada halaman utama.

Keenam, copy script di bawah ini dan letakkan di bawah

maspeypah

  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati
  • TwitThis

Ketujuh, simpan template.

Kedelapan, refresh blog kita dan pastikan tool tersebut sudah “hadir” dalam setiap postingan yang telah kita buat.

Selamat ber-SEO ria.

Iklan

Menampilkan Hanya Judul Posting Ketika Label Diklik

Cara Menampilkan Hanya Judul PostiLabel Diklik. Ketika jumlah postingan blog kita sudah begitu banyak maka penggunaan label atau kategori akan menjadi bagian yang penting. Penggunaan label akan mempermudah atau mempercepat pengunjung dalam menemukan apa yang mereka cari.

Pada keadaan normal (default), ketika kita mengklik suatu “label” tertentu maka semua postingan dengan label dimaksud akan ditampilkan berikut isi postingannya. Jadi, misalkan saja, suatu label berisi 50 postingan maka ke-50 postingan tersebut akan ditampilkan semua. Dengan kondisi demikian dapat membuat pengunjung menjadi tidak sabar untuk melanjutkan pencariannya. Apalagi kondisi tersebut masih diperparah dengan panjangnya isi setiap postingan yang ada dan juga beratnya loading blog. Dengan kondisi demikian, dapat kita bayangkan betapa lama dan membosankan ketika pengunjung mencari suatu tema/postingan yang mereka kehendaki.

Sehubungan dengan hal tersebut, jika menginginkan, kita dapat mengatur sedemikian rupa sehingga ketika pengunjung mengklik suatu label tertentu, yang ditampilkan hanya judul postingannya saja tanpa disertai isi postingannya. Dengan demikian dapat mempersingkat pengunjung dalam melakukan pencarian karena yang ditampilkan hanya judulnya saja.

Jika menginginkan hal tersebut , berikut langkah-langkahnya.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Widget Template

Ketiga, cari dan temukan kode berikut ini.

Keempat, ganti kode tersebut dengan kode berikut ini.

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

Kelima, Simpan Template.

Keenam, selesai.

Sekarang, cobalah untuk mengklik salah satu label yang ada dan pastikan bahwa pengaturan baru tersebut telah berjalan dengan baik.

Selamat Mencoba!!!

Tips Menampilkan Widget Tertentu Hanya Pada Homepage Blog. Karena alasan tertentu, misalkan untuk menghemat ruang side bar maupun mempersingkat waktu loading halaman blog, kita dapat mengatur agar widget tertentu hanya muncul pada homepage saja. Dengan pengaturan tersebut, suatu widget (yang kita kehendaki) hanya akan muncul pada halaman homepage saja. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Sebagai contoh dalam kasus ini, misalkan saya ingin agar widget “data pengunjung” hanya muncul pada halaman homepage saja sedangkan pada halaman permalink (postingan) widget ini tidak akan muncul. Begitu juga dengan widget yang lain. Caranya sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, jangan lupa centangi “Expand Templates Widget
Ketiga, cari kode sebagai berikut.






Keempat, tambahkan (sisipkan) kode berikut ini (berwarna merah) sehingga menjadi seperti di bawah ini.








Kelima, simpan template
Keenam, selesai.

Untuk melihat contoh hasilnya, silakan kunjungi blog Bisnis Internet. Coba perhatikan, Widget “Data Pengunjung” yang ada di side bar sebelah kiri akan muncul pada homepage saja namun ketika kita membuka halaman permalink atau halaman postingan, widget tersebut tidak muncul. Dengan demikian diharapkan dapat mempersingkat/memperingan waktu loading halaman permalink.

Selamat Mencoba!!!!

Cara Mengganti Tulisan Poskan Komentar

Cara Mengganti Tulisan Poskan Komentar. Pada keadaan default, teks petunjuk komentar yang berada di kotak (form) komentar adalah “Poskan Komentar” atau “Post a Comment” . Jika menginginkan, kita dapat mengganti teks tersebut sesuai dengan keinginan kita masing-masing. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Berikut langkah-langkahnya.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua,centangi pada kotak “Expand Template Widget

Ketiga, kemudian carilah kode berikut ini.

Kita akan menemukan dua kode tersebut.

Keempat, ganti keduanya dengan tulisan yang kita kehendaki. Dalam contoh ini, saya menggantinya dengan tulisan “silakan berkomentar”.

Kelima, simpan template.

Berikut adalah sebelum dan sesudah modifikasi.

Screenshot sebelum modifikasi.

Screenshot sesudah modifikasi.

Selamat Mencoba!!

Mengganti Newer Post, Home, dan Older Post (Bagian Kedua). Tips ini merupakan pengembangan dari tips sebelumnya. Jika pada postingan yang lalu, telah Tips dan Trik Blog ketengahkan mengenai cara mengganti tulisan Newer / Older Post dan Home dengan teks atau tulisan yang kita kehendaki maka pada kesempatan kali ini Tips dan Trik Blog akan mencoba mengganti tulisan tersebut dengan menggunakan image atau gambar yang kita inginkan. Misalkan saja dengan tanda panah atau image yang lainnya. Dengan variasi tersebut dapat menjadikan blog kita menjadi lebih menarik daripada sebelumnya. Jika tertarik, silakan ikuti tipsnya berikut ini.


Langkah-langkahnya sebagai berikut.

Pertama, siapkan tiga buah image atau gambar (masing-masing untuk Newer Post, Home, dan Older Post) dan uploadlah image tersebut ke image hosting.

Kedua, seperti pada tips sebelumnya, temukan kode seperti di bawah ini. Bagi yang menggunakan Firefox, dapat menggunakan Ctrl + F untuk mempercepat pencarian.















Ketiga, silakan kita perhatikan teks yang berwarna merah di atas.
Silakan masing-masing ganti dengan alamat URL image yang telah kita upload sebelumnya.

Sehingga menjadi seperti di bawah ini.

Keterangan

Silakan ganti URL_Image_Newer, URL_Image_Older, dan URL_Image_Home dengan URL image yang telah kita siapkan sebelumnya.

Keempat, kemudian simpan template.

Kelima, selesai

Silakan lihat hasilnya dan selamat mencoba!!!

Silakan baca juga bagian pertama.

Mengganti Tulisan Newer Post, Home, Older Post

Mengganti Tulisan Newer Post, Home, Older Post. Secara default, untuk mempermudah dan memberikan kenyamanan para pengunjung blog, blogspot menyediakan link Newer Post (Posting Sebelumnya), Home (Halaman Depan), dan Older Post (Posting Sebelumnya). Jika kita menekan link Newer Post maka kita akan dibawa menuju ke halaman postingan sebelumnya. Jika kita menekan link Home maka kita akan dibawa menuju ke halaman depan (home) begitu pula jika kita menekan Older Post maka pengunjung akan dibawa menuju ke halaman posting sesudahnya.

Jika dirasa tulisan tersebut membosankan, kita dapat mengubah tulisan tersebut menjadi tulisan yang sesuai dengan keinginan kita. Misalkan saja, kita ingin mengganti Newer Post menjadi Halaman Sebelumnya, Home diganti dengan Halaman Depan, atau Older Post menjadi Halaman Sesudahnya. Jika menginginkan kita dapat mengganti dengan tulisan-tulisan tersebut dengan tulisan sesuai dengan keinginan masing-masing.

Jika tertarik, berikut ini.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, centangi “Expand Templates Widget

Ketiga, cari kode seperti di bawah ini. Jika kita menggunakan Firefox, gunakan CTRL + F untuk mempercepat pencarian.













<a class='home-link' expr:href='data:blog.homepageUrl'>

Keempat, cobalah untuk tulisan yang berwarna merah dengan tulisan yang kita inginkan.
misalkan kita ganti dengan Sebelumnya
misalkan kita ganti dengan Sesudahnya
misalkan kita ganti dengan Halaman Depan
Sehingga selengkapnya menjadi seperti di bawah ini.

Kelima, kemudian simpan template

Keenam, selesai

Cobalah sekarang refresh blog dan pastikan kita sudah mendapatkan perubahan seperti yang kita kehendaki.

Berikut screenshot tampilan aslinya.


Dan berikut screenshot tampilan setelah kita lakukan perubahan


Selamat Mencoba!!

Silakan untuk membaca Mengganti Newer dan Older Post bagian kedua.

Memasang Fasilitas Save as PDF pada Postingan

Memasang Fasilitas Save as PDF Pada Postingan. Kita mungkin pernah melihat di bawah setiap postingan (artikel) disediakan fasilitas “save as PDF”. Fasilitas ditujukan untuk memberi kesempatan kepada pengunjung untuk menyimpan postingan yang dianggap menarik ke dalam format PDF.

Sebenarnya, secara default, setiap browser telah menyediakan fasilitas “save as” yang berfungsi untuk menyimpan setiap artikel yang kita anggap menarik dengan format HTML. Namun dengan format tersebut ketika kita ingin membukanya kembali secara offline (tanpa tersambung ke internet), tampilannya akan menjadi kacau alias berantakan. Hal itu disebabkan karena ada bagian-bagian halaman yang menggunakan iframe di mana bagian-bagian tersebut terpisah dari halaman artikel maka ketika kita membukanya dalam keadaan offline, bagian-bagian tersebut akan kehilangan source dan ini yang menyebabkan tampilan artikel menjadi kacau.

Nah, tentunya para pengunjung tidak ingin menyimpan postingan (arikel) yang menarik dengan tampilan yang berantakan, bukan!!

Oleh karena itu, sebagai blogger, kita dapat menjembatani agar pengunjung dapat menyimpan postingan kita dengan format yang lebih baik dan rapi tampilannya, yaitu dengan format PDF.

Sehubungan dengan hal tersebut, kita dapat memasang fasilitas yang memungkinkan para pengunjung menyimpan postingan kita dengan format PDF.

Untuk melakukannya, berikut langkah-langkahnya.

Pertama, karena fasilitas ini menggunakan bantuan layanan pihak ketiga, http://web2.pdfonline.com, maka kita harus mendaftar terlebih dahulu di http://web2.pdfonline.com.

Kedua, karena dalam pendaftaran ini tidak membutuhkan konfirmasi registrasi via email, silakan langsung login dengan menggunakan username dan password yang baru saja kita dafarkan tersebut tentunya setelah sukses melakukan sign up (pendaftaran).

Ketiga, setelah berhasil login, kita akan mendapati halaman pengaturan, seperti paper oriented (portrait/landscape), juga batas atas, bawah, kanan, dan kiri kertas (top margin, bottom margin, left margin, right margin), seperti di bawah ini.

Keempat, kemudian klik button “Generate the Javascript” untuk mendapatkan kode script yang nanti akan kita tempatkan pada blog kita.

Script-nya, seperti di bawah ini.

var authorId = “6B031698-6CB0-4DC8-80C6-D54149915D7B”;
var pageOrientation = “0”;
var topMargin = “0.5”;
var bottomMargin = “0.5”;
var leftMargin = “0.5”;
var rightMargin = “0.5”;

Kelima, setelah mendapatkan scriptnya, kemudian kita login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML >>

Jangan lupa centangi “Expand Widget Templates”.

Keenam, kemudian cari kode

Ketujuh, letakkan script yang telah kita dapatkan tersebut di bawah kode di atas, sehingga menjadi seperti di bawah ini.

var authorId = “6B031698-6CB0-4DC8-80C6-D54149915D7B”;
var pageOrientation = “0”;
var topMargin = “0.5”;
var bottomMargin = “0.5”;
var leftMargin = “0.5”;
var rightMargin = “0.5”;

Kedelapan, simpan template.

Kesembilan, selesai

Sekarang, silakan salah satu postingan kemudian pastikan di bawah postingan telah ada fasilitas “save as PDF”.

Selamat Mencoba!!