Cara Pasang Icon Share Fb, G+ dan Twitter di bawah judul posting dan footer

Ricki Berbagi - Bagaimana pasang icon share media social macam Fb, G+ dan Twitter di blog akan di jelaskan dalam tip BC kali ini, khususnya bagi pengguna Blogspot. Buat apa fungsinya tentunya semua sobat sudah mengetahuinya. Fb, Twitter dan tentunya G+ adalah media promosi yang paling efektif untuk mempromosikan setiap postingan artikel di blog kita dan tentu bermanfaat untuk menunjang teknik SEO yg kita terapkan. Pengunjung yang tertarik dengan artikel kita tidak segan-segan untuk melakukan share dan ini tentu sangat membantu menyebarluaskan. OK, tidak perlu panjang lebar, ikuti langkah-langkah berikut :

Pasang link Share FB, G+ dan Twitter dibawah judul posting :

• Login ke blogspot 
• Masuk ke "Rancangan" -> Edit HTML, Jangan lupa di download dulu untuk backup
• Centang expand widget templates
• Cari kode :

  <div class='post-body entry-content'><b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script></b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>  

• Letakkan kode di berikut ini tepat di BAWAH kode <b:if cond='data:blog.pageType == &quot;item&quot;'>

  <!-- Kolom Share Fb, Twitter, G+ -->
  <div style='background:#f9f9f9;border-top:1px solid #bbb;border-bottom:1px solid #bbb; padding:6px 0px;margin:30px 0px 8px 0px;width:100%;float:left;height:20px;'>
  
  <div style='float:right;'>
  <a class='twitter-share-button' data-count='horizontal' data-via='borneotemplates' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  </div>
  
  <div style='float:right;padding-right:5px;'>
  <!-- Place this tag in your head or just before your close body tag -->
  <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
  <!-- Place this tag where you want the +1 button to render -->
  <g:plusone size='medium'/>
  </div>
  
  <div style='float:right;padding-right:10px;'>
  <a name='fb_share' type='button_count'/>
  <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
  </script></div>
  <div style='float:right;padding:2px 10px 0px 0px;font:normal 12px Arial;color:#333'>
  Share <strong>on</strong> :
  </div>
  </div>
  <br/>
  <!-- End Kolom Share Fb, Twitter, G+ -->

  
  

Pasang Link Share FB, G+ dan Twitter di Footer (Bagian paling bawah di setiap posting) :

• Masih menggunakan script di atas, Cari kode berikut :
  

  <data:post.body/></b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>

• Taruh kode script di atas persis di bawah kode : <b:if cond='data:blog.pageType == &quot;item&quot;'>

SIMPAN template, dan SELESAI !
Bagaimana sobat BC ? Penempatan Icon Share FB, G+ dan Twitter  ini selain sebagai media promosi juga bisa mempercantik tampilan blog dan terlihat profesional. Selamat mencoba.

PLEASE SHARE

Tweet

Read More

Kumpulan Widget Pilihan Terbaik

Apa itu widget? Widget ini adalah sebuah tool yang ada pada halaman web / blog (seperti di blog saya ini) untuk mempercantik, memperindah, dan membuat pembaca terkesan. Ada banyak widget di dunia “maya”, biasanya dari pihak penyedia telah diberikan beberapa widget standar yang bisa dipasang, tapi tentunya untuk memaksimalkan tampilan kita harus mencari widget lain pada penyedia-penyedia widget yang lain.
           Penggunaan serta pemasangan widget telah sangat dimudahkan oleh pihak-pihak penyedia layanan, sehingga yang Anda perlukan biasanya hanya mendaftar atau bahkan ada yang tidak perlu mendaftar sama sekali, cukup meng-copy script yang telah disediakan dalam element blog Anda. Nah berikut ini merupakan Kumpulan Widget Pilihan Terbaik untuk mempercantik tampilan blog Anda.

Note: Saya sarankan jangan terlalu berlebihan memasang widget karena selain agama juga melarang untuk berlebihan, kesannya memasang widget yang berlebih-lebihan terlalu banyak bisa mengakibatkan blog jadi terkesan “amburadul” dan membebani loading halaman blog Anda sehingga tidak menutup kemungkinan terjadi PLP

1. MyBlogLog’s Recent Readers– Widget satu ini sejak kehadirannya didunia lain blog langsung mendapat sambutan meriah layaknya seleb baru yg lagi naik daun. Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog mampu meyakinkan Yahoo untuk membeli sahamnya. Yang perlu diperhatikan adalah memiliki account Yahoo lebih dulu.
2. Mashable– Widget ini menyediakan semacam newsreel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Bedanya ada pilihan warna untuk disesuaikan dengan layout blog Anda.
3. Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.
4. Flickr Flash Photo Stream Badge – Widget ini menampilkan photo-photo dari profil flickr Anda secara berurutan dan dengan sentuhan flash. Flickr merupakan bagian dari yahoo jadi untuk mendapatkan widget ini Anda memerlukan account yahoo seperti pada widget MyBlogLog di atas.
5. Preview Anywhere– sudah cukup terkenal juga nama snapshots bagi pengguna blogger bahkan untuk WordPress widget ini menjadi rekomendasi khusus dalam dashbord admin penggunanya. Fungsinya untuk melihat preview link keluar dengan tampilan popup yang tidak terlalu besar ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link.
6. Twitter Badge– Jika dalam keseharian hidup Anda banyak hal-hal menarik dan begitu penuh warna dengan segudang aktifitas serta ingin agar orang lain tahu dan menampilkan cuplikan kalimat-kalimat pendek *satu paragraf misalnya* (140 karakter) Anda sedang melakukan kegiatan ini, Anda sedang berada dimana, Anda sedang bersama siapa, Anda sedang, sedang, dan sedang lainnya…. Maka widget ini cocok untuk dipasang pada blog Anda. Daripada bikin sendiri element blogger/WordPress *secara manual*menuliskan teks sebagai pesan kepada pengunjung blog Anda bahwa Anda sedang ini-itu, saya sarankan lebih baik menggunakan widget ini. Widget ini akan menampilkan “tweet” terbaru Anda.
7. Digg News – Widget ini manampilkan Link terakhir yang masuk ke Digg sebuah social bookmarking yang sudah “kakoncara” dijagat perbloggan. Pilihan theme dan warna mudah untuk Anda atur agar sesuai dengan template blog Anda.
8. FEEDJIT – Feedjit merupakan layanan real time traffic pada blog Anda. Ada empat pilihan widget Feedjit yang bisa Anda gunakan, silahkan kunjungi saja Feedjit dan lihat empat widget apa saja yang tersedia.
9. LineBuzz – Komentar dalam widget inline untuk Blog Anda. Widget ini sangat berguna bagi blog yang memiliki frekuensi di atas 900 Mhz tinggi dalam menerima komentar, sehingga memudahkan berkomentar jika terjadi diskusi yang berkepanjangan *waaah keren euy*. Hanya sayang, pengunjung harus terdaftar LineBuzz dulu untuk berkomentar *bikin berabe juga*
10. Flixn – Jika kompi atau laptop Anda terpasang webcam, maka widget ini bisa digunakan untuk memperlihatkan ekspresi “narsis” Anda langsung melalui blog Anda *heuheu* . Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan “konser” Anda didepan monitor, mirip webcam yahoo.
11. 3Jam – Widget ini memudahkan pengunjung blog untuk berinteraksi dengan Anda dengan mengirimkan SMS pada henpun Anda tanpa mereka tahu nomor HP Anda.
12. Jaxtr– Seperti halnya widget 3jam di atas, dengan menggunakan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda. *nomor HP Anda dijamin kerahasiaannya*
13. LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk blog personal.
14. Box Widget– Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.
15. Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), kalo di Indonesia mungkin seperti harga Bensin premium, pertamax dan solar. “sangat cocok” untuk pengunjung blog Anda yang mobilitasnya tinggi. *terasa aneh* tapi kalo blog Anda memang membahas masalah gas bumi, bahan bakar dan yang sejenis maka widget ini sangat cocok, lagian tidak perlu mendaftar hanya mengcopas scrift yang disediakan Gas-Cost.Net.
16. iBegin Weather Widget – Menampilkan laporan cuaca untuk wilayah Kanada dan Amerika. Seperti widget Price of Gas di atas widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.
17. ClockLink – Sepertinya widget ini yang paling banyak diminati dan digunakan para blogger yang peduli dengan manajemen waktu, seperti namanya clock, widget ini menampilkan petunjuk waktu atau jam pada blog Anda.
18. Film Loops – Menampilkan kesimpulan film terakhir yang Anda tonton melalui account FilmLoops Anda.
19. Daily Painters – Widget ini sangat cocok bagi Anda yang berjiwa seni tinggi karena widget ini menampilkan lukisan-lukisan dari pelukis terkenal di dunia.
20. WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda. tidak perlu mengupdate karena WhoLinked ini secara teratur mengupdate sendiri web/blog yang melink blog Anda.
21. Criteo AutoRoll – Widget ini memperlihatkan link menuju blog-blog yang sehaluan dengan blog Anda. Sehaluan…? Secara…! Heuheu.
22. Calender – Berbeda dengan WordPress yang sudah mempunyai widget ini di dalamnya, untuk pengguna blogger widget kalender belum tersedia, oleh karenanya jika Anda ingin menampilkan kalender maka widget satu ini pantas di perhitungkan.
23. Bitty Browser – Menampilkan web browser “mini

PLEASE SHARE

Tweet

Read More

3 Situs Terbaik untuk Cek Kecepatan Loading dan Optimasi Blog

Lagi-lagi kita akan berbicara mengenai kecepatan/performa suatu blog, yah karena performa blog sangat menentukan trafik dari blog tersebut. Sebelum melakukan optimasi terhadap performa blog kita tentu kita harus mengetahui terlebih dahulu berapa besarkah performa kecepatan loading blog kita. Nah maka dari itu sekarang Ricki Berbagi ingin mereview tiga buah situs yang sering saya gunakan untuk mengecek kecepatan loading blog agar mudah untuk dioptimasi.

Mungkin 3 Situs ini sudah sangat familiar bagi para webmaster :D

1. PageSpeed Insight From Google

Link : Klik Disini 

Ini adalah tool besutan google yang dapat mengukur seberapa besar performa blog kita. Dengan tool ini kita bisa meneliti masalah-masalah apa saja yang mempengaruhi performa kecepatan blog kita, mulai dari High Priority sampai Low Priority, selain itu tool ini juga menyediakan fitur Experimental Rules yaitu kamu akan diberikan masukan-masukkan yang berguna untuk meningkatkan kecepatan loading blog kamu

2. Website Speed and Performance Optimization by GTmetrix

Link : Klik Disini

Ini tool dari GTmetrix, fungsinya sama saja seperti PageSpeed Insight, melalui tool ini kita bisa melihat lamanya waktu blog kita untuk dimuat 100%, ukuran halaman blog kita (dalam kb), serta total request ketika blog kita diakses. Situs ini juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau sobat tidak mendaftar menjadi pro member maka akan diberi batasan dalam menggunakan situs ini, yaitu hanya boleh 20 kali test dalam sehari.

3. Pingdom Tools by Pingdom

Link: Klik Disini

Tool ini fungsinya sama saja seperti GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dan fitur khusus pingdom ini kita bisa memilih mau mengetest menggunakan server Amsterdam, Dallas, atau New York.

PLEASE SHARE

Tweet

Read More

Tips Memilih Template Blog Yang SEO Friendly | Tip SEO

Ricki Berbagi - Ciri-Ciri template blog yang SEO friendly itu seperti apa yah ? Memilih template untuk sebuah blog adalah bagian yang paling menarik selain pembahasan masalah Riset Keyword dalam Dunia SEO, setidaknya ini yang juga di alami oleh B|C sendiri.

Ketika anda memasuki blog, pernahkah sahabat B|C mengalami hal-hal di bawah ini ?

Akses blog yang sangat lambat

Blog yang terlihat ramai dengan aksesories widget di sidebar nya belum lagi ada bintang-bintang yg melayang :D

Ada kalanya tiba-tiba telinga kita yg pake ear phone dan sedang asyik-asyiknya dengerin lagu instrumen di kejutkan dengan lagu super heboh yang tiba-tiba keluar dari blog

Yang paling menjengkelkan ketika tiba-tiba halaman blog di tutup oleh sebuah iklan "melayang" ?

Dan yang tidak kalah mengganggunya adalah bagaimana mata kita merem melek sambil mengeryitkan dahu saking susahnya baca artikel dengan background hitam pekat, sementara tulisannya samar-samar berwarna abu-abu.

Biasanya jika saya menemukan salah satu dari ciri-ciri diatas, browsing langsung saya tutup seketika :( Bagaimana dengan Sahabat B|C ?

Sebetulnya contoh-contoh kasus di atas tidak semuanya berkaitan dengan template blog, tapi bisa jadi acuan kita bagaimana memilih template yang sesuai dengan kebutuhan blog yang kita bangun.

Berikut adalah "Tip Memilih Template Blog dan tentunya SEO friendly :

1. Pilih Template dengan akses Ringan : Selain memanjakan pengunjung, akses yang cepat akan lebih memudahkan mesin pencari untuk meng-index blog kita. Salah satunya pilihlah template dengan ukuran file yang kecil (maksimal 100 kb sudah cukup bagus). Umumnya template yang berat karena terlalu banyak javascript di dalamnya.
   
   
2. Background, warna dan ukuran font yang serasi : Pilih template dengan background warna yang cerah dengan tulisan konten yang kontras (Hitam/Biru). Begitu juga ukuran font yang serasi dan mudah di baca
3. Pilih Template dengan sidebar di sebelah kanan : Tujuannya agar pada saat blog di akses yang pertama kali muncul adalah konten blog. Jika template mempunyai 3 kolom sidebar, pilih 2 kolom sidebar di sebelah kanan. Kalaupun harus ada sidebar di sebelah kiri, pilih widget yang di tempatkan adalah widget yang ringan.
4. Hindari template yang mempunyai background "Image" : Template dengan background image memang terlihat fmenarik, namun terkadang malah membebani akses ke blog kita. Usahakan warna background adalah berupa kode warna, bukan Image.
5. Template dengan Navigasi yang baik : Navigasi link menu yang terstruktur dan jelas pada template blog akan meningkatkan pageview selain itu akan memudahkan mesin pencari untuk menyelami seluruh link blog kita dan memudahkan dalam proses index.
6. Template yang mendukung aplikasi mobile : Semakin majunya teknologi handphone atau gadget lainnya yang mobile, maka semakin banyak orang yang akses web melalui aplikasi mobile. Usahakan bahwa template blog kita support thd aplikasi-aplikasi yang mobile tsb.
7. Pilih template yang memiliki Dinamic META TAG : Meta Tag yang dinamik akan menolong mesin pencari semacam google untuk mengindex blog kita, bahkan bisa mendongkrak ke halaman pertama hasil pencarian
8. Pilih template yang memiliki Heading H1, H2, H3 ..dst yang ter-struktur :  Pada umumnya template bawaan blogger menjadikan judul blog sebagai H1, tapi beberapa pakar SEO mengubahnya H1 untuk judul posting, sementara judul blog untuk H2. Pengaruhnya nanti di tampilan hasil pencariannya akan terlihat lebih spesifik sesuai topik yang di posting.



Template SEO Friendly

9. Template Memiliki "Related Post" : Kebanyakan templated sudah terpasang Related Post, jika belum ada silahkan cari di google yah ^^, sudah demikian banyak blog-blog yang membahas Cara Bikin Related Post di Blog. Fitur ini sangat penting dan juga sangat bermanfaat bagi pengunjung dan pastinya akan meningkatkan jumlah PageView, karena pengunjung akan di permudah untuk melihat artikel blog lainnya.
10. Template memiliki Link Share FB, G+ dan Twitter : Fasilitas ini sangat penting dan terbukti efektif membantu menyebarluaskan artikel blog sobat. Penempatan di bawah judul posting paling strategis. Jika blog sobat belum tersedia fasilitas ini, silahkan baca tip-tipnya untuk menambah icon share FB, G+ dan Twitter << disini >>.
11. Kode Html/CSS yang Valid : CSS dan HTML usahakan yang berkaitan, kadang kala kalau template sering di utak-atik semakin banyak kode CSS yang sebetulnya tidak terpakai tapi masih ada di kode template kita. Untuk men validasi kode template bisa di pakai tools yang banyak tersedia di internet, salah satunya untuk Markup Validasi bisa pake tools milik W3C 

Demikianlah Tip Untuk Memilih Template yang baik dan SEO Friendly dari Ricki Berbagi. Dari tip-tip diatas akan ada pembahasan yang lebih detail dan spesifik terutama yang berkaitan dengan META TAG, Ubah Heading H1,H2,H3 dan Validasi Kode HTML/CSS dengan judul bahasan Bagaimana Edit Template menjadi SEO Friendly | Tip SEO

Salam Sahabat,

PLEASE SHARE

Tweet

Read More

Cara Optimasi Tag H1 : Tag H1 Menjadi Judul Posting | Tip SEO

Optimasi Tag H1

Ricki Berbagi - Tip Bagaimana membuat Tag H1,.. lebih SEO Friendly ? Kali ini saya coba memaparkan sesuai dengan arahan para Master SEO dan kebetulan sudah saya coba di beberapa blog saya yang bertemakan blogspot. Pada umumnya susunan H1, H2, H3 dst pada default template blogspot menempatkan H1 untuk judul blog, kemudian H2 header widget dan H3 adalah judul posting. Padahal kita tahu mesin pencari semacam google lebih mengutamakan H1 untuk mengidentifikasi blog. Dalam tutorial ini memaparkan langkah-langkah Bagaimana ubah Tag H1 menjadi Judul Posting tentu saja biar lebih SEO :)

Langsung saja ikuti langkah-langkah berikut :

1. Login ke Blogger
2. Masuk ke Rancangan -> Edit HTML
3. Jangan lupa di simpan/ download dulu template lama :)
4. Klik "Expand Widget Template

Langkah 1 :
Cari Kode :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Ganti dengan :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

Langkah 2 :
Cari Kode :

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

Ganti dengan :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Langkah 3 :
Cari Kode :

<h1 class='title'>
<b:include name='title'/>
</h1>

Ganti dengan :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>

Langkah 4 :
Cari kode yang mirip ini, tidak selalu sama persis soalnya :

.post h3 {
    color: #333333;
    font-size: 16px;
    font-family: Tahoma, Arial, Verdana;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 5px;
    padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
    color: #333333;
    font-size: 22px;
        font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0 0;
}
.post h3 a:hover {
    color: #CF152A;
    text-decoration: none;
}

Ganti dengan :

.post h1, .post h2 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}

SIMPAN dan SELESAI !
Mudah bukan sobat ?

PLEASE SHARE

Tweet

Read More

Cara Membuat Paging Navigasi Pada Blogspot

Ricki Berbagi - Paging navigasi pada blog selain mempercantik tampilan blog, juga untuk mempermudah navigasi. Sehingga pengunjung bisa mencari halaman posting di halaman tertentu sesuai keinginan. Bagaimana penampilan Paging Navigasi, berikut penampakannyagambar di bawah.

Untuk menampilkan Paging Navigasi seperti penampakan di atas, ternyata cukup mudah. Ikuti langkah-langkah dibawah :
1. Login ke blog anda.
2. Klik 'Layout/Tata Letak'
3. Klik 'Tambah Widget'
4. Pilih 'HTML/Java Script'.
5. Masukkan kode HTML di bawah ini.

Page Navigasi:

6. SIMPAN, dan letakkan Gadget baru tersebut di bagian bawah panel "Blog Post", seperti gambar di bawah ini :

7. Silahkan dilihat di blog sobat dengan cara di REFRESH, seharusnya Paging Navigasi sudah muncul di bagian baling bawah halaman blog

UPDATED !!

Jika cara diatas masih belum bisa menampilkan Paging Navigasi. Coba lakukan EDIT HTML pada template sobat. Kemudian cari kode ]]></b:skin>
Selanjutnya tempatkan kode di bawah ini persis di atas kode ]]></b:skin>

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Cari kode </body> Kemudian letakkan script dibawah ini di atas kode </body> tersebut

<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--END Page Navigation -->

Jangan lupa SIMPAN templatenya. Seharusnya problem Paging Navigasi sudah teratasi dan muncul di halaman blog sobat. Silahkan mencoba.

PLEASE SHARE

Tweet

Read More

Cara Membuat Daftar Isi Posting Per Label

Ricki Berbagi - Bagaimana cara membuat Daftar Isi terbaru berdasarkan pengelompokan per-label ? - Di dalam fasilitas blogspot sudah tersedia Gadget untuk membuat daftar Posting Terbaru. Untuk membuat Posting Terbaru per label pun sebetulnya juga ada, yaitu melalui menu gadget feed. Namun Daftar Posting Terbaru Per-Label lewat Gadget Feed di blogspot hanya di batasin maksimal 5 posting saja per-labelnya.
Kali ini saya coba cara lain yang lebih mudah di custom, termasuk bisa membuat daftar posting yang tampil bisa > 5 postingan.

Langkah-Langkah Membuat Daftar Posting Per-Label :

1. Login ke halaman blogger
2. Masuk ke menu "Tata Letak"
3. Klik Tambah Gadget >> Pilih HTML/JavaScript
4. Masukkan Kode di bawah ini dan SIMPAN

<script style="text/javascript">
      var numposts = 5;
      var standardstyling = true;
</script>
<script type='text/javascript' src='http://coepoe.googlecode.com/files/label.js'></script>
<ul><script src="http://Blogger-Coepoe.blogspot.com/feeds/posts/default/-/Tutorial%20Blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>

Catatan :
Perhatikan text yang berwarna Merah :

• var numposts = 5, Angka 5 menunjukkan jumlah posting, bisa di ganti maksimal 999
• Blogger-Coepoe.blogspot.com, Silahkan ganti dengan blog atau domain sobat
• Tutorial%20Blogspot, Adalah contoh Nama Label, silahkan ganti dengan label yang ingin sobat tampilkan sebagai daftar posting. Ingat spasi di tandai dengan %20. 

Bagaimana sobat ? - sangat mudah bukan ?

PLEASE SHARE

Tweet

Read More

Membuat Meta Tag Dinamis pada blogspot | Tip SEO

Meta Tag Dynamic

Ricki Berbagi - Pada artikel lain tentang Edit Template agar lebih SEO friendly, salah satu komponen yang harus di perhatikan adalah META TAG. Meta Tag bisa di bilang sebagai pintu gerbang atau jantung utama Blog untuk lebih mudah dikenali oleh mesin pencari.  Di dalam META TAG terdapat barisan Keyword dan Description suatu blog. Meta Tag yang dinamis akan memberikan banyak pilihan bagi mesin pencari untuk meng-index halaman blog kita.

Untuk Ubah Meta Tag menjadi lebih dinamis, ikuti langkah-langkah :

• Login ke akun blogger sobat
• Pilih edit HTML
• Jangan lupa backup terlebih dahulu template
• Centang expand widget templates
• Cari kode <b:include data='blog' name='all-head-content'/> (Gunakan CTRL+F agar lebih mudah)
• Hapus semua Meta Tag, mulai dari <b:include data='blog' name='all-head-content'/> sampai sebelum <b:skin><![CDATA[/
• Selanjutnya masukkan META TAG dinamis di bawah ini : 

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>

<link href='http://www.blogger.com/profile/066378140930646XXXX' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=667204186762062XXXX' rel='EditURI' title='RSD' type='application/rsd xml'/>

<link href='http://domainanda.com/feeds/posts/default' rel='service.post' title='Desc Singkat - Atom' type='application/atom+xml'/>

<link href='http://domainanda.com/feeds/posts/default?alt=rss' rel='alternate' title='Desc Singkat - RSS' type='application/rss+xml'/>

<b:if cond='data:blog.url == &quot;http://DOMAIN>COM&quot;'>
<meta content='Isi Dengan Deskripsi Blog Anda' name='description'/>
<meta content='Isi Dengan Keyword Blog Anda' name='keywords'/> </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/> | Blog Tutorial </title>
<meta expr:content='data:blog.pageTitle + &quot; - Blog Tutorial dan Tip SEO&quot;' name='description'/>

<meta expr:content='data:blog.pageTitle + &quot;,.. Tutorial Blog, Tip SEO, Template Gratis&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - Blog Tutorial dan Tip SEO&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;,.. Tutorial Blog, Tip SEO, Template Gratis&quot;' name='keywords'/>
</b:if>

<meta content='Blogger Coepoe' name='author'/>
<meta content='© 2012 Blogger Coepoe' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='index, follow' name='googlebot'/>
<meta content='index, follow' name='googlebot-image'/>
<meta content='index, follow' name='msn-bot'/>
<meta content='index, follow' name='yahoo-slurp'/>
<meta content='all' name='spiders'/>
<meta content='all' name='webcrawlers'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='0' http-equiv='expires'/>
<meta content='never' name='expires'/>
<meta content='global' name='distribution'/>
<meta content='noindex,follow' name='labels'/>
<meta content='never' http-equiv='expires'/>
<meta content='1 days' name='revisit-after'/>
<meta content='2 days' name='revisit'/>
<meta content='10' name='pagerank'/>
<meta content='100' name='alexa'/>
<meta content='no' http-equiv='imagetoolbar'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='general' name='rating'/>
<meta content='aeiwi, alexa, alltheweb, altavista, aol netfind, anzwers, canada, directhit, euroseek, excite, overture, go, google, hotbot, infomax, kanoodle, lycos, mastersite, national directory, northern light, searchit, simplesearch, websmostlinked, webtop, what-u-seek, aol, yahoo, webcrawler, infoseek, excite, magellan, looksmart, cnet, baidu' name='search engines'/>

Jangan lupa ganti text yang berwarna merah, sesuai dengan blog sobat. META Tag diatas dinamis karena memiliki tittle, deskripsi, keyword yang berbeda-beda sesuai postingan atau artikel sobat.

Biar makin mantab, sekali-sekali coba tools yang satu ini untuk cek Meta Tag : MetaChecker

Demikian artikel tentang Bagaimana membangun META TAG yang lebih baik dan dinamis, jika sobat punya pengalaman mengenai utak atik Meta Tag dan menemukan tip yang lebih baik, silahkan di share disini.

Salam Sahabat

PLEASE SHARE

Tweet

Read More

Cara Membuat Bismillah Otomatis Di awal Postingan Blog

 Cara Membuat Bismillah Otomatis Di awal Postingan Blog  

Tips dan trik kali ini buat blog sobat yang ingin memasang lafaldz bismillah di awal postingan, ini cocok banget buat sobat yang beragama islam untuk membuat widget satu ini yaitu bismillah di awal postingan blog, setelah sobat pasang bismillah di awal postingan blog, maka secara otomatis akan berada di awal postingan blog. sebenarnya sudah lama untuk dipublikasikan, tapi para pembuat blog baru setiap harinya membanjiri dunia maya. 

Nah,,, Jika sobat ingin menambah bismillah di awal postingan Blog, ikuti petunjuk dibawah ini: Cekidot !!!!

Cara Memasang Bismillah Di Awal Postingan
1. Buka blog anda
2. Pilih Template => Edit HTML

3. Cari kode <data:post.body/> jika sudah ketemu.

4. Lalu letakkan kode Bismillah dibawah ini, tepat diatasnya

<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>ب&#1616;س&#1618;م&#1616; الله&#1616; الر&#1617;&#1614;ح&#1618;من&#1616; الر&#1617;&#1614;ح&#1616;يم&#1616;</span></span> </div><br/>

Atau Sobat bisa juga memasang kode dibawah ini, Bedanya pada tampilan font :

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

PLEASE SHARE

Tweet

Read More

Cara Super Cepat Keluar Dari Google Sanboxx

Hallo sobat kali ini saya akan share cara Cepat Keluar Google Sandbox 

Apa itu Google Sandbox ?
Untuk pengertian sandbox bisa dilihat di artikel saya Di Sini Untuk melihat apakah kena google sandbox bisa juga di lihat Di Situ 

Bagaimana Cara Keluar Google Sandbox ? 
Cara keluar google sandbox bisa dengan cara : 

1. Buatlah artikel Bertema Google Sandbox
Kenapa harus bertema google sandbox ? karena google ketika merayapi blog anda bisa memperbaiki nya

2. Jangan Menggunakan Auto Backlink Berlebihan 
Jika anda pengguna Auto backlink pertimbangkan lah jika salah-salah
blog anda bisa kena google sandbox

3. Sering Mengupdate Konten 
Kenapa harus mengupdate konten ? karena dengan mengupdate konten 
google bisa mempertimbangkan blog anda Tetapi artikel nya pun jangan Copy Paste Harus Fresh Dan Buatan anda sendiri

4. Berdo'a
Kenapa harus berdo'a ? karena dengan anda berdo'a bisa juga meminta bantuan kepada sang pencipta

Sumber :  http://purwakartailmu.blogspot.com

PLEASE SHARE

Tweet

Read More

Cara Memasang Kata Bissmillah Pada Posting Blog



Cara pasang Bismillah di blog.

Halo sobat blogger, Kali ini saya mau berbagi Tutorial mengenai cara memasang Bismillah pada awal postingan blog khusus yang beragama Islam. Kalimat/bacaan Basmalah (Bismillahirrohmannirrohim) memang seharusnya diucapkan bagi setiap muslim jika hendak memulai mengerjakan sesuatu. Sesuatu perkara yang tidak diawali dengan mengucapkan/membaca Bismillah maka hasilnya kurang berkah. 

Cara Memasang Bismillah Di Setiap Awal Postingan:

• Buka blog anda
• Pilih Template => Edit HTML
• Cari kode <data:post.body/> lalu letakkan kode Bismillah diatasnya

<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>ب&#1616;س&#1618;م&#1616; الله&#1616; الر&#1617;&#1614;ح&#1618;من&#1616; الر&#1617;&#1614;ح&#1616;يم&#1616;</span></span> </div><br/>

• Atau anda bisa juga memasang kode dibawah ini.

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

Silahkan dipasang bacaan Bismillah di awal postingan blog anda, semoga bermanfaat.

PLEASE SHARE

Tweet

Read More

Download Template Dark Red

Halo sobat blogger. Untuk pertama kalinya Ricki Berbagi kali ini akan sharing template blogger yang keren-keren. Disamping keren-keren, tidak lupa template yang Ricki Berbagi akan sharing juga disertai bumbu racik SEO agar kencang dipencarian Google.

Untuk mengawali posting pertama tentang Template Blogger, akan saya awali dengan Template Dark Red buatan Johannes yang didesain ulang oleh RezzaDz yang sangat rapih dan keren.

Silahkan dicek Template Dark Red :

Fitur template :

- 2 widget dibawah header
- Coment facebook di homepage
- Auto readmore
- Permalink
- Backlink auto hide
- CSS
- Warna yg bikin greget (Pastinya)
- Dll

Untuk melihat demonya silahkan - Klik disini

Bagaimana? keren bukan? Jika minat download, silahkan.

PLEASE SHARE

Tweet

Read More

Download Template Windows 8

Download Blogger Templates Windows 8

Halo sobat blogger. Kali ini saya akan sharing template blog yang menyerupai dengan tampilan Windows 8. Template blog yang saya temukan ini adalah template blog buah karya dari Mas Coki Widodo. Karena terlihat mengesankan templatenya, maka saya share template ini untuk kalian pengunjung setia SONZBLOG.

Dan untuk kalian para pencita Windows 8, template ini sangat cocok untuk menghiasi blog yang kalian punya. Dengan menggunakan template ini, maka tampilan blog kalian akan terasa indah dan rapih.

Adapun Beberapa fitur blog yang ada :

1. Tampilhan Homepage Animasi Slide Menu

2. Menu Post App

3. Mempunyai Fitur Reply Komentar

5. Slide Menu right

6. Dapat Digunakan Untuk Custom Post

7. dll

NB: Untuk Mengaktifkan Tread Comment Silahkan Cari Kode https://www.blogger.com/comment.g?blogID=

untuk lebih cepatnya tekan CTRL+F dan ganti denga id blog anda.

DEMO | DOWNLOAD

Password: SONZBLOG

Selamat menggunakan Template ini ^_^

PLEASE SHARE

Tweet

Read More

Cara Membuat Gambar Membesar Saat Di Sentuh Cursor

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
  
  .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
  .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
• Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

PLEASE SHARE

Tweet

Read More

Cara Membuat Link Membesar Saat Di Sentuh Cursor

Cara Membuat Link Membesar Saat disentuh Kursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode a:hover { 
• Ganti kode font-size dengan ukuran yang lebih besar.
  Contoh :
  
  a:hover {
  color:#d2691e;
  font-size:10px;
  font-style:italic;
  cursor:wait;
  }
  ganti dengan
  
  a:hover {
  color:#d2691e;
  font-size:19px;
  font-style:italic;
  cursor:wait;
  }
• Terakhir klik Simpan Template.

Selamat Mencoba dan Semoga Berhasil...

PLEASE SHARE

Tweet

Read More

Cara Menghilangkan Navbar Search Pada Blog

Tutorial untuk hilangkan navbar adalah seperti berikut.
Terdapat 2 cara, anda boleh pilih mana yang bersesuaian dengan blog anda.


CARA 1:

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find ( ctrl + F), cari 'navbar'
(hasil cari biasanya samada navbar-iframe atau navbar sahaja)

3. Dari kod yang ada di bawah navbar,
Tukarkan 'display:block' kepada 'display:none'

contoh:



4. Save dan lihat hasilnya.


CARA 2:

Nota: Cara kedua digunakan jika anda tidak mempunyai 'navbar' dalam 'edit HTML' blog anda.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi find ( ctrl + F), cari kod body {


3. Copy dan paste code berikut SEBELUM code body {

#navbar-iframe {
display: none ;
}

contoh:



4. Save dan lihat hasilnya.:)

PLEASE SHARE

Tweet

Read More

Cara Objek Berputar Di Sekeliling Cursor Pada Blog

Dan kali ini, satu lagi ubahsuai yang anda boleh lakukan, iaitu objek berpusing keliling mouse seperti gambar di bawah

Anda juga blog melihat contoh di blog demo ini

Tutorial di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.
(tidak faham.?)

<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

3. Save dan lihat hasilnya.

TAMBAHAN.

i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini.
(mencari kod warna.?)

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

ii) Kod ini memerlukan anda menggunakan layout template.

PLEASE SHARE

Tweet

Read More