Personal Tips and Trick In My life: Maret 2011

Kamis, 17 Maret 2011

Cache

Mempercepat loading dari blog Wordpress Anda adalah sangat penting. Sistem caching menawarkan pengunjung blog Anda kesempatan untuk melihat segala sesuatu sebelum menjadi usang dalam browser mereka dan membuat mereka segera mengclose blog Anda.
WP Cache – Ini adalah sistem caching halaman untuk blog Wordpress Anda yang memungkinkan blog Anda untuk loading jauh lebih cepat dan efisien.
Cache Images – Plugin khusus yang dirancang untuk membantu cache gambar ke folder lokal untuk mencegah broken link.
COS HTML Cache – Membuat HTML berbasis posting yang sebenarnya, sehingga beban sistem mereka lebih efisien. Meningkatkan kecepatan loading, sehingga memungkinkan untuk mendapatkan pengalaman yang lebih baik bagi pembaca blog Anda.
Advanced Caching – Cache post query untuk mempercepat loading dari blog Wordpress Anda. Sangat efisien dan mudah digunakan hanya dengan mengaktifkan di panel kontrol Anda.
WP Super Cache – Menghasilkan HTML dari posting Anda sehingga menghindari loading dari script php yang berat dan tidak efisien.
del.icio.us Cached ++ – Plugin khusus yang dirancang untuk memperbarui RSS feed untuk del.icio.us setiap 60 detik sebagaimana untuk memenuhi TOS mereka.
Plugin Output Cache – Plugin ini benar-benar memanfaatkan output plugin lain untuk membuat mereka lebih efisien. Publish By The Vacancy Job Team

Mengatur Plugin STT 2 Pada Wordpress

Cara Menginstall Dan Setting / Mengatur Plugin STT 2 Pada Wordpress

Pembahasan wordpress lagi. Sudah lama saya tidak membahas masalah wordpress. Nah, kini saya akan mencoba membuka kembali berbagai Tutorial Blog seputar masalah Wordpress. Kali ini pembahasan jatuh pada salah satu plugin yang hampir semua pengguna wordpress pasti menggunakannya. Ya, STT 2. Plugins STT 2 sendiri berfungsi untuk merekam setiap keyword yang masuk yang banyak di gunakan oleh orang untuk masuk ke dalam blog kita. Dan keyword tersebut nantinya akan di tampilkan di bagian bawah artikel kita maupun pada sidebar. jadi keyword ini bisa di gunakan untuk menambah keyword secara otomatis. Menarik bukan?

Untuk menginstallnya, lakukan langkah di bawah ini:

Menginstall Plugin STT2
1. Buka link http://www.domainanda.com/wp-admin/plugin-install.php untuk menuju halaman plugin pada dasbor wordpress anda.
2. Ketikkan keyword "Search Terms Tagging 2". Kemudian klik “Search plugins”.

3. Maka akan muncul hasil pencarian plugin seperti di bawah ini. Klik saja install dan ikuti petunjuk selanjutnya.

4. Pada beberapa kejadian, plugin akan langsung terinstall. Namun pada beberapa hosting gratisan anda akan diminta mengisi form connection information. isi saja dengan panduan di bawah:

Hostname : Localhost
Username : [username cpanel anda]
Password : [password cpanel anda]
Connection Type : Pilih “FTP” [default]
Lalu tekan tombol “Proceed” (lingkaran merah)

5. Setelah terinstal aktifkan plugin STT2 tersebut dengan mengklik Activate Plugin.

Setting / Mengatur Plugin STT2 Pada Wordpress
Sebenarnya setiap blogger pasti memiliki pengaturan tersendiri untuk plugin ini. Namun jika anda masih bingung dalam Setting / Mengatur Plugin STT2 Pada Wordpress, maka saya akan share bagaimana saya men-Setting / Mengatur Plugin STT2 Pada Wordpress saya.
1. langsung menuju ke halaman SEO Search Terms Pada bagian sidebar kiri dasbor wordpress anda. akan terlihat halaman seperti di bawah ini.

Keterangan:

Max number of search terms = Maksimal jumlah keyword yang akan ditampilkan.
Text and code for list header = Teks yang akan di tampilkan sebagai kata pembuka.
Text and code before and after the list = Kode HTML untuk memilih apakah keyword akan tersusun dari atas ke bawah (default) ataupun horisontal seperti paragraf .
Text and code before and after each keyword = Kata atau kode sebelum dan sesudah masing-masing keyword
Convert search terms into links = Opsi apakah anda akan menampilkan anchor text (link pada text) ke artikel, ke search page atau tidak sama sekali.
Display search counts for each search term = Menampilkan jumlah pencarian pada masing-masing keyword
Add list automatically right after post content = Menampilkan daftar keyword secara otomatis di bawah artikel
Save popular search terms as post tags = Opsi apakah anda akan menjadikan Keyword pencarian terpopuler sebagai Tags Postingan
Auto clean up unused search terms after = Membersihkan secara otomatis hasil search terms yang tidak digunakan
Block the following bad words = Memblock semua kata yang anda masukkan sebagai search terms

Langsung saja setting/atur seperti gambar di bawah ini:

Nah, selamat mencoba... Publish By The Vacancy Job Team

Search Term Tagging 2

Posted on August 6, 2009 by Lutvi Avandi

Search Term Tagging 2 (STT2) adalah sebuah plugin WordPress yang akan menyimpan data kata kunci yang dipakai oleh pengunjung saat menemukan blog kita.
Misalnya ada pengunjung mengetikkan kata “mobil bekas” di google, lalu menemukan blog kita di halaman pertama. Dia kemudian mengklik web kita. Maka STT2 akan menyimpan data mobil bekas itu di blog kita. Data ini bisa dimunculkan di bawah artikel sehingga akan memperluas jangkauan kata kunci yang kita pakai.
Selain itu, STT2 juga bisa dijadikan bahan riset kita. Karena bisa jadi, kata kunci yang kita tembak meleset. Tapi yang namanya pengunjung, tetaplah pengunjung. Dengan berfokus pada kata kunci yang lain, maka hasilnya pun bisa lain.
Cara menggunakan STT2 juga sangat gampang. Setelah proses instalasi seperti biasa, anda bisa masuk ke menu Settings – SEO Search Term 2. Dari sini anda bisa mengatur tampilan dari STT2 nanti.
Ada 2 pilihan cara menampilkan yaitu Add list automatically after post content. Jika Yes maka secara otomatis STT2 akan menampilkan daftar kata kunci di bawah post. Tapi jika anda memilih No, anda harus meletakkannya kode secara manual di themes.
Kodenya : <?php if(function_exists(‘stt_terms_list’)) echo stt_terms_list() ;?>
Anda juga bisa meletakkan daftar kata kunci yang banyak dipakai untuk menemukan blog anda menggunakan kode
<?php if(function_exists(‘stt_popular_terms’)) echo stt_popular_terms(’15′) ;?>
Untuk mengetahui hasil penggunaan STT2, silahkan klik disini. Untuk mendapatkan plugin ini, silahkan klik disini. Publish By The Vacancy Job Team

Senin, 14 Maret 2011

Membuat menu tree

Cara Membuat Menu DTree

Kendhin

Menu-Menu

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);

Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu. contohnya akan seperti ini :

Nha gampang tho .....

Artikel yang Berhubungan :

Menu-Menu

Publish By The Vacancy Job Team

membuat menu horizontal

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.


blackleft.gif	blackright.gif

greenleft.gif	greenright.gif

redleft.gif	redright.gif

unguleft.gif	unguright.gif

yellowleft.gif	yellowright.gif

blueleft.gif	blueright.gif

whiteleft.gif	whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true'

title='your blog title (Header)' type='Header'/>

</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'

maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false'

title='your blog title (Header)' type='Header'/>

</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....

Artikel yang Berhubungan :

Menu-Menu

Publish By The Vacancy Job Team

Membuat Menu Vertikal (Vertical)

Kendhin

Menu-Menu

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D
http://trik-tips.blogspot.com/2008/07/membuat-menu-vertikal-vertical.html Publish By The Vacancy Job Team

Cara Membuat Menu Tab View

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

from
http://trik-tips.blogspot.com/2008/07/cara-membuat-menu-tab-view_31.html Publish By The Vacancy Job Team

simple drop down menu

Membuat Dropdown menu untuk Blogroll

Pilih tata letak > Elemen Halaman > Tambah Gadget > HTML/JavaScript > ketik blogroll pada judul, kemudian ketik kode berikut pada bagian konten > Simpan :

<form><select name=”menu” onchange= “window.open(this.options[this.selectedIndex].value,’_blank’)” size=1 name=menu>
<option>- Blogroll Gue -</option>
<option value=”http://www.tes.com/“/> tes1 </option>
<option value=”http://www.tes.com/“/> tes2 </option>
<option value=”http://www.tes.com/“/> tes3 </option>
</select></form>

Publish By The Vacancy Job Team

http://trik-tips.blogspot.com/2008/04/cara-membuat-dropdown-menu.html

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

ganti dengan kode ini :

dari

http://trik-tips.blogspot.com/2008/04/cara-membuat-dropdown-menu.html

Publish By The Vacancy Job Team

Membuat Menu Widget Scroll di Blog

Salam blogger pada posting kali ini saya akan membarikan cara membuat widget scroll untuk menghemat tempat dan sekaligus mempercantik blog teman-teman.

Widget ini selain menghemat tempat juga mempermudah pengunjung blog memilih artikel yang ingin di baca. Sangat bermanfaat jika kita pasang di blog kita agar pengunjung blog tidak mencari artikel lain di web lain dan supaya pengunjung betah membaca artikel di blog kita.

Ok lasung ke TKP kita mulai dari lahkah pertama sebagai berikut :

1. Login ke akun Blogger Sobat

2. Klik menu "Layout"

3. Klik pada "Page Element"

4. Klik "Add a Gadget " Kemudian pilih atau klik HTML/Javascript".

5. Copy Paste Script yang ada di bawah ini :

<div
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul>
LINK LIST ANDA DISINI
</ul></div>

6. Edit kodenya dulu, Kode yang berwarna biru adalah alamat URL yang ingin teman-tema masukan dan yang warna merah judul tampilan di widget silah diganti sesuai menu yang akan di masukkan. lihat kode yang temen mau ganti di bawah ini :

<div 
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul><li><ahref='http://sodiycxacun.blogspot.com/2010/04/pasang-icon-emotions-upin-dan-ipin-di.html'>Pasang icon emotions upin & ipin</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2010/04/pasang-widget-recent-posts-atau-posting.html'>Pasang Widget Recent Posts Atau Posting Terbaru Di Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/02/cara-membuat-posting-diblog.html'>Cara membuat Posting Blog</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2009/11/belajar-buat-blo-lewat-blogger.html'>Cara membuat Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>  
</ul></div>

Untuk menambah list tinggal copy paste kode yang sama,dan tinggal edit saja. Sebagai cotoh di kodenya di bawah ini

<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>

Contoh hasilnya seperti di bawah ini :

Pasang icon emotions upin & ipin
Pasang Widget Recent Posts Atau Posting Terbaru Di Blog
Cara membuat Posting Blog
Cara membuat Blog
Cara membuat read more

Keterangan Kode yang bewarna pink :

overflow:auto;
Kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

width:300px;
Adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

height:200px;
Adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.

padding:10px;
Adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;

border:1px solid #eee
Agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selesai.....jangan lupa klik Save
selamat mencoba semoga bermanfaat.. jangan lupa comment ya untuk motifasi saya.
Terimakasih sudah berkunjung sapai ketemu di tutorial berikutnya.,.,.,.,., Publish By The Vacancy Job Team

Tips : Gunakan "Open New Tab" di setiap link

Beberapa postingan saya sebelumnya kelupaan untuk membuat linknya biar ke buka di new tab. Hal ini menyebabkan jika salah satu link di klik, maka blog ini akan tertutup. Oleh karena itu, biar kita bisa membuat link yang terbuka di new tab, berikut codenya :
<a href=”http://domain.com” target=”_blank”>judul link</a>
Saya sendiri sering kelupaan kalo membuat link di artikel lupa menambahkan <target=”_blank”> karena secara default kalo kita membuat link di wordpress di HTML view maka tidak ada akan terbuka di new tab. Publish By The Vacancy Job Team

Sabtu, 12 Maret 2011

EMBUAT JUDUL BERJALAN PADA TAB BROWSER WORDPRESS

Januari 9, 2010 — richardyusan

Rate This

mungkin kalian ada yang mau membuat judul wordpress tab browser kalian berjalan tapi belum tau caranya.gw punya 2 script untuk melalkukan hal itu tapi di sini gw mau berbagi cara yang mudah dan cepat..buat kalian yang mau tau baca selengkapnya….gw punya 2 script untuk melakukan hal ini,tapi disini gw mau berbagi dengan 1 cara saja,untuk kalian yang sudah berhasil dengan cara ini bisa minta script ke 2 melalui komentar di bagian ini,ikuti langkah di bawah:

login dulu ke wordpress kalian untuk menuju dashboard
sesudah login klik editor pada kolom appearance dashboard
di halaman editor lihat kanan halaman dan klik main index template (index.php)
kopi semua script di bawah ini:
<!– Script by hscripts.com –>
<!– copyright of HIOX INDIA –>
<!– more scripts @ http://www.hscripts.com –><script language=javascript>
var rev = “fwd”;
function titlebar(val)
{
var msg = “PESAN KALIAN DISINI/JUDUL BLOG“;
var res = ” “;
var speed = 100;
var pos = val; msg = ” |— “+msg+” —|”;
var le = msg.length;
if(rev == “fwd”){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout(“titlebar(“+pos+”)”,speed);
}
else{
rev = “bwd”;
timer = window.setTimeout(“titlebar(“+pos+”)”,speed);
}
}
else{
if(pos > 0){
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout(“titlebar(“+pos+”)”,speed);
}
else{
rev = “fwd”;
timer = window.setTimeout(“titlebar(“+pos+”)”,speed);
}
}
}
titlebar(0);
</script>
<!– Script by hscripts.com –>
ganti script tulisan PESAN KALIAN DISINI dengan keinginan kalian sendiri (lihat cript di atas) jangan ada yang di kurang atau di tambah bila kalian belum tau cara mengeditnya
pastekan pada index.php bagian paling bawah….setelah footer.php (ingat paling bawah index.php)
lalu klik update file dan klik visit site untuk melihat hasilnya
DEMO KLIK SINI UNTUK MELIHAT LANGSUNG

CATATAN : script di atas bisa di edit seperti kalian mau ingat untuk backup (kopi isi index.php ke notepad atau word untuk back up) file takut2 kalau terjadi kesalahan jadi semua bisa balik seperti semua…kalian bisa download script tab berjalan dibawah ini bila mengalami kesulitan mengedit…..
HTML Link:

ADA PERTANYAAN BISA BERIKAN KOMENTAR DISINI !! semoga beranfaat…….

Publish By The Vacancy Job Team

Tips menampilkan judul saja

Memang banyak cara untuk menampilkan judul posting di halaman Beranda/homepage yang mungkin sudah banyak sobat temui di blog-blog senior, Namun tak ada salahnya saya pun mencoba membahasnya di blog CSS-ku yang sederhana ini, dengan harapan yang sama yaitu 'semoga Bermanfaat'. Coba perhatikan kedua kode berikut:

Pertama

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
===== kode css yang ingin di tampilkan di homepage =====
 { display:inline; }
   </b:if>
</style>

Trik ini dapat digunakan untuk membuat ukuran kolom post yang berbeda antara homepage dan indeks post, untuk indek postingnya dibuat lebih lebar serta float-nya di buat berlawanan, seperti halnya yang terjadi pada template Kang Rohman.

Ke dua

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'
 ===== kode css yang ingin di sembunyikan di homepage ===== { display:none; }
   </b:if>
</style>

Dan yang kedua dapat digunakan untuk mencegahnya tampil pada homepage, seperti: blog pager, link, tanggal, isi post, dan lain-lain, kemudian dipasang dibawah ]]><b:skin>

Menampilkan judul post di halaman Beranda

Nah, untuk posting kali ini saya ingin mengulas tentang cara menampilkan judul posting yang akan saya tampilkan di halaman muka. Dalam trik ini maka kita membutuhkan kode yang sama, hanya saja penambahan kode CSSnya yang berbeda.

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
.post-body { display:none; }
   </b:if>
</style>

Kode diatas hanya untuk menyembunyikan isi artikelnya saja, sedangkan nama author, jump break atau Read More, post-timestamp, label, reactions buttons, star rating dan lain-lain akan tetap tampil, Bila ingin mencegahnya, sobat dapat mengaturnya di halaman Rancangan atau Tata letak, lalu klik edit pada kolom Posting blog lalu hilangkan tanda centang pada setiap kolom yang tidak ingin di tampilkan, Atau dapat menambahkan kode seperti dibawah ini, setelah .post-body:

.post-footer, .jump-link, .post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons

Sehingga akan menjadi seperti ini:

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
.post-body, .post-footer, .jump-link, .post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons { display:none;}
   </b:if>
</style>

Lalu copy dan pastekan di bawah kode ]]><b:skin>, selamat mencoba & berkreasi... Publish By The Vacancy Job Team

Minggu, 06 Maret 2011

Menampilkan related post tanpa plugin

Salah satu cara untuk meningkatkan page view yaitu dengan menambahkan link terkait dengan isi sebuah postingan yang bisa dilakukan secara manual atau secara otomatis baik menggunakan plugin atau tanpa plugin. Cara ini biasa disebut dengan istilah Menampilkan Related Post atau posting terkait berdasarkan kesamaan tema atau topik bahasan. Untuk WordPress dikelompokan berdasarkan Category atau Tag yang sama. Dengan cara ini akan lebih memberikan kesempatan bagi pengunjung untuk lebih mengeksplorasi dan menemukan lebih banyak informasi.

Link internally ke postingan dalam blog juga akan membantu meningkatkan ranking blog anda dan akan membantu meningkatkan traffic, sebab jika orang yang datang ke blog anda sudah tidak ada pilihan lagi untuk dilihat maka mereka akan pergi. Ketika anda menawarkan sebuah link ke postingan anda yang lain ada kemungkinan mereka akan klik link anda dan pengunjung akan tetap di blog anda lebih lama.

Untuk WordPress, khususnya yang self hosting cara menampilkan related post bisa memanfaatkan plugin yang cukup banyak jumlahnya. Di antara plugin yang pernah saya gunakan yaitu, Related Posts by Category atau Yet Another Related Posts Plugin. Namun kurang lebih 3 bulan ini saya sudah tidak menggunakan plugin tersebut. Sebagai gantinya saya menggunakan kode di bawah ini untuk menampilkan related post (tanpa plugin), yang saya tempatkan di file single.php.

<strong>Artikel Yang Mungkin Berkaitan :</strong>
<?php $this_post = $post;$category = get_the_category(); $category = $category[0]; $category = $category->cat_ID;$posts = get_posts('numberposts=11&offset=0&orderby=rand&order=DESC&category='.$category);$count = 0;foreach ( $posts as $post ) {if ( $post->ID == $this_post->ID || $count == 10) {unset($posts[$count]);}else{$count ++;}}?>
<?php if ( $posts ) : ?><div><blockquote>
<ol>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" target="_blank"><?php if ( get_the_title() ){ the_title(); } else { echo "Tidak ada artikel terkait"; } ?></a></li>
<?php endforeach // $posts as $post ?>
</ol></blockquote></div>
<?php endif // $posts ?>
<?php $post = $this_post;unset($this_post);?>

Kode di atas akan menampilkan artikel-artikel yang berhubungan berdasarkan kategori. Jumlah artikel yang ingin ditampilkan bisa ditentutan sesuai selera penggunanya. Contoh, settingan kode di atas akan menampilkan 10 artikel atau postingan berdasarkan kategori yang sama.

Untuk mempercantik tampilan seperti settingan padding, margin dan border kebetulan saya memanfaatkankan <blockquote> yang sudah saya modifikasi dan list style menggunakan nomor <ol>. Jika tidak suka silahkan hapus kode <blockquote> dan </blockquote>, atau bisa memodifikasinya dengan div style atau div class dengan mengedit file CSS untuk mengatur tampilan seperti padding, margin, font, border bahkan hover juga bisa anda customisasi sesuai selera.

Jika menginginkan berdasarkan Tag bisa menggunakan kode berikut ini :

<h4>Related Post : </h4>
<ul>
<?php
//menampilkan 5 judul postingan terkait berdasarkan tag yang digunakan
$tags = wp_get_post_tags($post->ID);
if ($tags) {
 $first_tag = $tags[0]->term_id;
 $args=array(
 'tag__in' => array($first_tag),
 'post__not_in' => array($post->ID),
 'showposts'=>5,
 'caller_get_posts'=>1 );
 $my_query = new WP_Query($args);
 if( $my_query->have_posts() ) {
 while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
 <?php endwhile; }} ?>
</ul>

Publish By The Vacancy Job Team

cara memasang BACK ON TOP pada web atau blog

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 atau 3 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih ( designed by syilpid )
Masuk ke dasbor > tata letak > edit html > Letakan kode di atas </body>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png'/></a>

(take from tips-fb.com) Publish By The Vacancy Job Team

Sabtu, 05 Maret 2011

masukkan adsense dalam posting blogger

1. Parsing code di :
http://blogcrowds.com/resources/parse_html.php

2. tempatkan hasil parsing
<div style='float:left;'>
[[[ code hasil parsing ]]]
</div>

<p><data:post.body/></p>

3. tempatkan didalam edit html
ganti <data:post.body/> dengan semua hasil diatas Publish By The Vacancy Job Team