banner ads banner ads banner ads banner ads

Rabu, 25 April 2012

Cara Membuat Blog Anda Menjadi Dofollow|Trik desain


OK bro selamat malam saja (mulai nulis sudah jam 09:00 malam, maklum nunggu orang tidur dulu sssssssttt!!!), sebelum tidur akan Saya sempatkan menulis hasil surfing internet hari ini, yaitu "Cara Membuat Blog DoFollow Di Blogger" tapi para pembaca semua dah tahu kan apa artinya DoFollow? kalo belum jangan malu untuk bertanya ya..... OK kalo gitu aku kasih tahu saja.



Blog DoFollow maksudnya adalah URL blog atau website yang ditaruh di dalam blog yang dofollow maka akan mendapatkan Backlinks yang kemudian akan meningkatkan pagerank website atau blog tersebut. Sedangkan blog yang dofollow tidak mendapat apa2 dari penilaian Om google jadi blog dofollow tersebut bersifat dermawan.


OK kita langsung saja kembali ke cara bagaimana membuat blog yang dofollow. Caranya gampang,
  1. Anda login ke blogger.com --> Rancangan --> Edit HTML
  2. Tekan Ctrl + F --> cari kata "nofollow" seperti gambar 1 (Rubah kata "nofollow menjadi dofollow" untuk menjadikan blog dofollow)
  3. Ganti kata "nofollow" dengan "dofollow"
  4. Simpan templates
  5. Buka blog Anda
  6. Klik kanan --> view source
  7. Coba Anda lihat sebuah link dengan tag <a>...</a> pada sebuah blok komentar. Apakah masih terdapat kata rel="nofollow" atau sudah berganti dengan rel="dofollow". Ditunjukkan gambar 2.
  8. Jika pada tag <a>...</a> sudah terdapat kata rel="dofollow" atau sudah tidak terdapat kata rel="nofollow" maka artinya: blog Anda sudah menjadi blog yang dofolow.
Rubah kata
Gambar 1 Rubah kata "nofollow menjadi dofollow" untuk menjadikan blog dofollow

Gambar 2 Bukti kalo Blog Sudah DoFollow

Nah cara ini dapat juga Anda pakai untuk mencari blog yang dofollow atau nofollow. Kalo Anda ingin mencari backlinks gratis dan banyak. Ini sekedar tips saja, Jika Anda ingin mendapatkan backlinks gratis dari sebuah blog maka berikanlah sebuah komentar yang isinya baik dan membangun. Ok karena sudah malam maka istirahat dulu sambil minum susu hehehhehe.

Semoga tulisan ini dapat membantu diri saya pribadi dan pembaca pada umumnya. Akhir kata saya ucapkan selamat malam dan sampai ketemu lagi dikesempatan akan datang (walah2 kayak pidato kawinan aja hehehe) yang tentunya lebih baik dari sekarang.

Eh hampir lupa, Saya pemilik blog ini memerlukan bantuan Anda untuk mengembangkan blog ini kearah yang lebih baik dengan cara memberikan saran dan kritik terhadap tulisan artikel. Dan jika teman2 punya blog yang bagus dan ingin membaginya dengan orang lain maka beritahukan kepada Saya melalui kotak komentar atau form hubungi kami. Maka Saya akan bersedia meluangkan waktu untuk mengunjungi blog Anda.

READMORE- Cara Membuat Blog Anda Menjadi Dofollow|Trik desain

Senin, 23 April 2012

Cara Membuat Artikel Terkait Bergambar Di Blog||Trik Desain


Artikel terkait bergambar
Oke Kali Ini Syarip Van Delay Akan Menjelaskan
Cara membuat artikel terkait bergambar di blog - Artikel terkait di blog sangatlah penting, karena akan memudahkan pengunjung untuk mencari artikel yang tetap berada pada kategori yang sama. Sebelumnya saya sudah menuliskan tetantang membuat recent post ini juga sangat penting bagi blog.

Kini saya akan berbagi membuat Artikel terkait dengan gambar. Banyak bloggers ingin menggunakan seperti ini karena terlihat menarik. Apalagi blog yang memilik kategori berbagi template ini sangat di rekomendasikan bagi anda.

Mulai saja cara pembuatan Artikel terkait bergambar :

1. Login blogger
2. Pilih Rancangan => Edit html => centang Expand Widget Template
3. Letakkan code di bawah ini sebelum kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
 4. Setelah itu, silahkan masukkan kode di bawah ini, tepat di atas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
NB : pilih berapa jumlah artikel yang anda keluarkan, untuk menggantinya cari kode ini di atas dan gantilah dengan yang anda inginkan var maxresults=8; angka di ganti

Selamat mencoba, semoga berhasil. untuk contohnya seperti milik saya ini.
READMORE- Cara Membuat Artikel Terkait Bergambar Di Blog||Trik Desain

Kamis, 12 April 2012

Cara Membuat Kotak Scrollbar||TrikDesain.blog

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya?

Berikut kode untuk membuat scrollbar:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 80px; height: 80px; background-color: rgb(255, 255, 255);">Masukkan teks atau kode anda disini</div>


Contoh:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 80px; height: 80px; background-color: rgb(255, 255, 255);">Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi.</div>


Hasilnya:

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi.


Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;.

Gimana? Sangat mudahkan?

Selamat mencoba…

Jangan lupa kasih komentar ya…
READMORE- Cara Membuat Kotak Scrollbar||TrikDesain.blog

cara cepat membuat/memasang rating bintang pada blog||trikdesainblog

Semua orang suka dengan bintang, karena bintang melambangkan keindahan, popularitas, dan sebagainya. Nah dalam dunia web dan blog ternyata bintang juga mulai diminati dan banyak yang ingin membuat dan memasang rating bintang

Jika anda juga tertarik melakukannya silahkan lanjutkan membaca artikel saya Cara Memasang Bintang Rating di Posting Blog agar nantinya blog anda bisa muncul bintangnya. 

1.  Memasang bintang/rating dengan Outbrain.com

- Buka situs http://www.outbrain.com/getwidget
- Isi form yang disediakan, lalu pilih model widgetnya (lihat gambar dibawah ini)
Pilih Tipe widgetnya
 - Setelah siap, lalu geser ke pengaturan Platform (Pilih blogspot) atau pilih yang lain jika blog anda berplatform lain seperti Wordpress, Drupal, atau pilih Javascript jika akan anda pasang pada website buatan sendiri. 
Pilih platform, bahasa, dan klik Install
- Lalu, pilih Bahasa, dan klik Install.
Selanjutnya tinggal memasang di Dashboard Blog kamu (tempatkan sesuai keinginan).

2. Memasang Rating bintang dari Domarate


Cara memasang Rating Bintang dari Domarate
- Buka situs http://domarate.com
- Pada kolom yang disediakan, masukkan domain situs/blog kamu
- Lalu klik Go
Masukkan domain situs/blog kamu
- Selanjutnya, kamu akan mendapatkan Script yang harus kamu pasang di blog kamu.
Ambil scriptnya
- Pasang saja Script kamu itu kedalam HTML template blog kamu. 
Pemasangannya terserah mau dimana, namun biasanya di atas atau dibawah kode <data:post.body/>
- Simpan Template, dan selesai.

NB: 
Bintang disini tidak ada kaitannya dengan meta tag blog atau bintang seperti pada Snippet atau yang biasa muncul di bawah link hasil SERP, namun bintang disini digunakan untuk mempercantik halaman dan bintang agar bisa diberi rating oleh Pengunjung. Jika kamu ingin memasang rating di bawah link di hasil pencarian google silahkan baca artikel "Cara Otomatis Memunculkan Bintang Rating di Semua Posting Blog (Rating 5 dan Rating 10)".
READMORE- cara cepat membuat/memasang rating bintang pada blog||trikdesainblog

Cara Membuat & Memasang Tanda Tangan di Blog||Trikdesainblog



DI BLOG (BLOGGER), kita dapat membubuhkan tanda tangan (signature) sebagai sebagai identitas penulis blog (blog author). Dengan adanya tanda tangan ini, posting-posting blog terasa lebih khusus, karena memiliki tanda tangan sang penulis blog yg unik. Sobat Blogger bisa membuat dan memasangnya di blog Blogger dengan mudah. Kehadiran online signature maker memberikan kemudahan untuk membuat tampilan tanda tangan tersebut. Selain untuk digunakan di email, gambar tanda tangan ini bisa digunakan pula di blog sebagai blog author signature.

Cara Membuat Gambar Tanda Tangan Secara Online

Untuk membuat tanda tangan dengan online tool, saya memilih menggunakan MyLiveSignature, sehingga tutorial ini akan mengetengahkan langkah-langkah membuat signature dengan online tool tersebut.
1. Masuk ke mylivesignature.com.
2. Ada beberapa opsi disana, jika ingin membuat tanda tangan tanpa register, klik "Proceed". Jika ingin daftar, klik "register"
3. Setelah klik proceed, anda akan masuk ke halaman opsi jenis signature yang akan dibuat. Ada 4 cara membuat signature: dengan wizard, dengan menulis sendiri di screen tool, upload gambar yang di-scan, atau menggunakan font. sendiri. Saya sarankan untuk membuat dengan wizard (pilih opsi pertama), karena cara itu lebih mudah.
4. Tuliskan nama anda atau nama yg ingin dibuat sebagai tanda tangan. Klik 'next step'.

5. Langkah selanjutnya adalah memilih jenis font tanda tangan. Ada banyak jenis font dan langsung bisa dilihat melalui preview. Pilih font yang diinginkan dengan klik opsi di sebelah preview. Setelah itu 'klik next'.
6. Pilih warna tanda tangan dan background. Sesuaikan background dengan background halaman blog, atau pilih/centang "transparent".
7. Setelah gambar jadi, anda akan dibawa ke halaman hasil akhir gambar. Di halaman tersebut terdapat gambar tanda tangan/signature dan di bwahnya tertera ID dari tanda tangan tersebut. SImpan ID jika dibutuhkan kembali di kemudian hari. Untuk menyimpan gambar, klik kanan, lalu pilih 'save as' atau 'save image as'

Cara Memasang Tanda Tangan di Bawah Posting Blog

1. Pastikan terlebih dahulu gambar tandatangan tadi telah di upload. Kemudian simpan direct url dari gambar tersebut.
2. Untuk menampilkan gambar di bawah posting kita bisa menggunakan dua cara:
  a. Dengan memasukkan html gambar di fitur blogger untuk menyisipkan widget di posting:
Dari Setting > Formatting > Lihat ke bagian kosong di sebelah kanan Post template di bagian bawah halaman.
Isikan script image ke dalamnya:
< img border="0" src="urlgambartandatangan.jpg" />
Ganti urlgambartandatangan.jpg dengan url gambar tandatangan sobat.
Kelemahan dari cara ini adalah susunan struktur pada badan post kadang-kadang bisa kacau, dan membutuhkan waktu load yang lebih lama

b. Dengan memasukkan gambar di bagian template HTML melalui Edit HTML Blogger:
Melalui Edit HTML, sobat dapat memasukkan script secara lebih leluasa dan juga dapat menambahkan aturan-aturan tertentu agar struktur tampilan lebih sempurna.
- Di beberapa tutorial, saya melihat script yang dimasukkan hanya dalam bentuk HTML gambar seperti ini:
< img border="0" src="urlgambartandatangan.jpg" />
Namun, jika hanya dengan HTML gambar, struktur gambar menjadi tidak independen karena dia mengikuti aturan (div) pada tulisan di atasnya (tulisan posting di bagian akhir/bawah). Sehingga kadang-kadang gambar betubrukan dengan tulisan atau bergeser.
- Untuk membuat gambar berstruktur independen maka tambahkan struktur sendiri pada tag gambar:
<div>< img border='0' src='urlgambartandatangan.jpg' /></div>
Dengan cara ini, gambar dapat berada di baris selanjutnya di bawah tulisan posting.
- Agar gambar bisa diatur posisinya, akhirnya gunakan aturan berikut:
<div style='padding:5px;float:right'>< img border="0" src='urlgambartandatangan.jpg' /></div>
- right akan menampilkan gambar di sisi kanan, ganti dengan left jika ingin gambar berada di sebelah kiri.Ganti urlgambartandatangan.jpg dengan url gambar tandatangan yg telah di-upload.
- Setelah selesai mengedit script, masuk ke dahsboard > design > Edit HTML.
- Jangan lupa centang "Expand Widget Templates"
- Cari <data:post.body/>
- Letakkan kode yang telah diedit tadi tepat di BAWAH-nya.
- Save Template.

Note: Jika blog telah menggunakan fitur auto readmore, ada lebih dari satu <data:post.body/>, letakkan kode tanda tangan di bawah <data:post.body/> yg kedua.
READMORE- Cara Membuat & Memasang Tanda Tangan di Blog||Trikdesainblog

Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman


Tips-trik edit template Blogger

Blogger adalah layanan blog gratis yang memberikan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.
Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.
Beberapa kasus saya temui dari pengunjung dan beberapa teman blogger (khususnya newbie) yang mengeluh karena gagal memasukkan hack/script tambahan, tidak menemukan kode tertentu seperti yang ada di tutorial, bahkan ada pula yang templatenya "kacau" karena salah mengedit template HTMLnya.

Tips ini saya buat untuk memberi masukan dan ide dalam melakukan editing Template HTML agar hasilnya sesuai dengan yang diinginkan. Semoga bermanfaat.

1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:
a. HTML/XML tag, yang menandakan bagian dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.
b. Head tag, merupakan bagian dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.
c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.
d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bagian head. Pada beberapa kasus kode CSS juga dimasukkan tepat di atas </head> sebagai aturan tambahan.
e. Javascript, merupakan elemen yang sebenarnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen tambahan seperti popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host langsung di Blogger, dan eksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.

2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan seperti semula.

3. Perhatikan benar-benar tutorial yang dibaca, jangan sampai ada yang terlewatkan. Sebagai contoh, jika harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut adalah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger karena memang ditujukan untuk keamanan.

4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bagian script sudah tercopy atau jangan ada bagian selain dari script yang ikut ter-copy.

5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melakukan pengubahan script dan memastikan semuanya beres, baru masukkan script tersebut ke template HTML.

6. Agar lebih mudah dan cepat mencari kode tertentu seperti yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan kode yang ingin dicari dan tekan next (enter).

7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, dia tetap dibaca dari kiri ke kanan. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jika harus memasukkan tag/kode baru <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya: 

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 
<data:adStart/>
atau,
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>
8. Jika memang masih belum yakin dan terbiasa, buatlah blog baru yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda bisa dengan bebas melakukan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar hasilnya akurat, gunakan jenis template yang sama seperti blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script baru sehingga bisa dengan bebas melakukan apapun tanpa rasa khawatir.

9. Khusus untuk hack/script tertentu di mana tampilannya bisa langsung dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan langsung di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, baru lah di-save.

10. Pada beberapa template, ada yang bagian tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga ketika bagian tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis seperti ini, jangan menyerah terlebih dahulu.
Contoh:
Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> ketika mencari (Ctrl + F), cukup gunakan data:post.body saja.

Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk agar lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat mengembangkan dan membiasakan diri dengan template dan template editor Blogger serta melakukan editing secara mandiri (Do It Yourself [DIY]). Keep on learning and learning.
Salam.
READMORE- Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman

cara membuat widget follow twitter melayang||trikdesainblog

Konsep widget ini sama dengan tombol back to top melayang Blogger beberapa waktu yang lalu, yaitu dengan memberikan styling CSS: fixed position dan scrolling display pada link gambar untuk memberikan efek melayang.

Cara membuat/memasang:
1. . Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
2. Setelah pop up window muncul, pilih opsi HTML/Javascript
3. Kemudian copy kode berikut:
<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" href="http://twitter.com/azmisurvivor target="_blank"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4AbhHXWqMI4JZ4wHIQ9rRUZSCGTB3CqZJpq1tzp-1X0RJK6HYTuy1u7VERnpFpPk1NzvAjlPDN_Z_Fd0YoR69Dh4QYqIdWEg7SGRGGUeRX3G_kFk5nYExmd3JC8RwdU7rtXb9_9yx6QT/s1600/floatingtwitter.png" /></a>
Ganti azmisurvivor dengan  nama account Twitter anda. Jika anda ingin widget berada di sebelah kiri browser, ganti right dengan left.
4. Paste kode yang sudah di edit ke kolom configure HTML/Javascript.

 
5. Klik save.
6. Refresh blog dan lihat hasilnya.
Done and cheers!
READMORE- cara membuat widget follow twitter melayang||trikdesainblog