Dona Alfian

Home » Posts filed under Blogspot

Cara membuat READ MORE di Blogger atau Blogspot – Bagi anda yang sedang berlatih membuat blog pribadi atau website menggunakan Blogger / Blogspot mungkin masih kebingungan untuk membuat readmore secara otomatis di blogspot mereka, walaupun sudah banyak sekali artikel-artikel yang mebahas tentang bagaimana cara membuat readmore otomatis. Hal ini disebabkan mungkin karena banyaknya artikel yang copy paste padahal si pemilik blog sendiri tidak faham dengan caranya. Saat ini saya akan menjelaskan bagaimana cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membikinnya. Read More itu apa sih?. Read more adalah penggalan dalam sebuah artikel atau berita yang di tulis dalam Blog kita atau website kita, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata "READ MORE", "BACA SELANJUTNYA”, ”BACA SELENGKAPNYA”, dan lain sebagainya.

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </head>.
Copy paste kode dibawah ini tepat di atas kode </head>



<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan images, no -tanpa images
summary_noimg = 300; //banyaknya kata jika tidak ada gambar
summary_img = 250; //banyaknya kata jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>



Save Template anda.
Kemudian scroll template anda kebawah cari kode seperti berikut:

Keterangan: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
selanjutnya akan terbuka kode kode yang lain.
geser atau scrol ke bawah dan cari kode

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

Dona Alfian Senin, Mei 13, 2013 CB Blogger Indonesia

Cara membuat READ MORE di Blogger atau Blogspot

Senin, Mei 13, 2013

bX-l4u1mh Error pada Blogger - Blogspot

Rabu, Desember 14, 2011

Sehubungan dengan pertanyaan temen blogger di form comment di artikel Facebook Comments Box untuk Blogger - Blogspot saya sengaja bikinkan tutorial untuk Comment Box Facebook Baru untuk Blogger. Permasalah yang sekarang muncul jika menggunakan Comment Facebook untuk Blogger - blogspot adalah munculnya warning (peringatan) dari script comment facebook tentang keterkaitan permanen link yang kadang tidak sesuai, sehingga pada comment facebook muncul peringatan.

Permasalah ini disebabkan juga oleh perubahan pada script Facebook Comment yang telah diperbaharui oleh Pihak Facebook sendiri. Untuk pemasangan script dan pembuatan Comment Box Facebook Baru untuk Blogger sekarang lebih simple dan mudah, dan juga tidak terlalu berart dalam urusan loading comment. Ini akan berpengaruh juga pada loading halaman blogspot yang anda miliki. Oke kita mulai saja Tutorialnya.

Bagi temen-temen yang udah pernah mesang Facebook Comments Box untuk Blogger - Blogspot Pake cara lama hanya tinggal mengganti script sebagian saja. Jika untuk para pengguna baru anda langsung saja buat sebuah aplikasi di facebook developer menggunakan account facebook anda.

https://developers.facebook.com/apps

Selanjutnya Create New App . Isi Nama Aplikasi >> Centang bagian agreement ( App NameSpace ngga usah di isi) >> Next / Lanjut >> Masukkan Kode Captcha

Comment Box Facebook Baru untuk Blogger - Blogspot

Selanjutnya Edit Bagian Aplikasi yang telah terbuat .

Setting 1. App Domain ( dengan domain blog anda misal donaalfian.blogspot.com atau namadomain.com ), 2. Pilih Kategori (Misal News, Health dll), 3. Site URL ( Isi dengan alamat lengkap blog anda contoh http://donaalfian.blogspot.com ), 4. Simpan / Save Aplikasi. (*Catat ! App ID anda dan ID Profile Facebook anda untuk step selanjutnya " gunakan menu Use Graph API Explorer untuk melihat ID Profile Facebook anda")

Setelah selesai baru kita letakkan skrip di Template Blog Kita. Bagi yang udah pernah setting Facebook Comment Box (tutorial lama) hanya tinggal mengganti sebagian Skrip saja. yang baru pasang lanjutkan proses pemasangan Skrip di template blogspot anda. Sebelum menambahkan skrip simpan dahulu template anda supaya kalo ada kesalahan dalam pemasangan bisa di restore kembali.

Masuk di Halaman Edit Template Blogger (Blogger Dashboard) : Design >> Edit HTML dan centang [√] Expand Widget Templates.

Step 1. Tambahkan kode ini setelah kode <html

xmlns:fb='http://www.facebook.com/2008/fbml'

sehingga kodenya menjadi seperti ini

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..
2009/gml/expr' >

Step 2 : Cari kode </head>
paste kode berikut sebelum </head>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NamaBlogAnda' property='og:site_name'/>
<meta content='IdAppAnda' property='fb:app_id'/>
<meta content='ProfileIdAnda' property='fb:admins'/>
<meta content='article' property='og:type'/>

Step 3 : Cari kode <body>
kemudian pastekan kode di bawah ini setelah kode <body>

<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/id_ID/all.js#xfbml=1&appId=IdAppAnda';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 4 : cari kode <data:post.body>

- pastekan kode berikut setelah <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='2' data-width='500' expr:data-href='data:post.url'/>
</b:if>

atau paste sesuai dengan keinginan anda, Lalu Simpan Template Blogger anda. SELESAI ! ;).

Untuk temen temen yang udah pernah menggunakan tutorial Facebook Comments Box untuk Blogger - Blogspot (tutorial lama) hanya mengganti skrip Step 4 (tutorial lama) dengan Step3 (tutorial baru) dan Step 6 (tutorial lama) dengan Step 4 (tutorial baru). Hasil dan contoh bisa dilihat Comment Box Facebook Baru untuk Blogger - Blogspot di Dona Alfian Blog dan dijamin peringatan dari facebook akan hilang :D. Selamat mencoba jika ada kesulitan silahkan bertanya. dan tunggu selalu tutorial-tutorial dari Dona Alfian Blog selanjutnya.

Rating by User : 4.2
Dona Alfian Senin, Desember 12, 2011 CB Blogger Indonesia

Comment Box Facebook Baru untuk Blogger - Blogspot

Senin, Desember 12, 2011

Pernah ngga temen-temen blogger ngalamin link di Blogspot / blogger kehapus or ngga ada link yang bersangkutan dan waktu di kunjungi atau di lihat ada tulisan Page Not Found "Sorry, the page you were looking for in the blog thenameofblog does not exist". atau Laman tidak ditemukan "Maaf, laman yang sedang Anda cari dalam blog Dona Alfian Blog tidak ada". Kalo di website biasa atau blog yang menggunakan hosting umum bisa kita akali untuk meredirect pengunjung / visitor untuk diarahkan ke halaman yang kita mau. tapi kalo 404 Redirect untuk Blogger - Blogspot bagaimana caranya.

Cara untuk 404 Redirect untuk Blogger - Blogspot sebetulnya bisa lakukan dengan cara mudah, karena blogspot sudah menyediakan menu untuk meredirect apabila terdapat link yang hilang atau mati. 404 Redirect untuk Blogger - Blogspot ini berlaku untuk anda yang menggunakan custom domain atau menggunakan domain berbayar seperti .com, .net, .org dll, dan terdapat fasilitas membuat subdomain. Kenapa demikian, karena pada saat fasilitas redirect diaktifkan di blogger maka akan diminta sesuai dengan nama domain untuk meredireknya. Jika di tempat membeli domain anda tidak memiliki fasilitas membuat subdomain bisa di akali dengan menggunakan layanan FREE DNS dari http://freedns.afraid.org.

Catatan: freedns.afraid.org adalah sebuah layanan FREE DNS yang bisa digunakan teman teman yang memiliki domain untuk bisa di custom seperti Setting Domain, Subdomain, Web Forward, Setting NS (Name Server), Serring MX mail dll. Layanan ini Gratis. Apabila anda ingin membeli domain yang murah dan penuh fasilitas untuk Blogspot / blogger anda silahkan beli di NameCheap.com. Coupon Code NameCheap untuk potongan harga bisa lihat di sidebar sisi kanan.

Karena saya menggunakan freedns.afraid.org maka saya akan membuat subdomain di menu layanan ini menggunakan menu Web Forward. Apabila menggunakan NameCheap anda tinggal membuat Subdomain baru di dalam domain anda untuk keperluan 404 Redirect untuk Blogger - Blogspot. Untuk pembuatan subdomain anda terserah anda menamainya, sebagai contoh saya membuat subdomain untuk redirect adalah 404.donaalfian.com. subdomain ini nantinya diberi perintah untuk meredirect ke halaman yang kita tuju (misal: halaman utama website/blogspot kita). Oke saya beri contoh jika menggunakan freedns.afraid.org.

Setelah jadi baru kita setting di bagian Blogspot / blogger untuk 404 Redirect jika terjadi file hilang atau halaman yang dituju ngga ada. Caranya : Masuk ke menu Setting >> Publishing lalu pilih menu Use a missing files host? menjadi Yes. Isi bagian alamat redirect dan akhiri dengan menulis Kode Verifikasi lalu Save.

Dan sekarang apabila blogspot / blog anda mengalami 404 maka akan di redirect ke halaman tersebut.Intinya tutorial ini bisa membuat 404 Redirect untuk Blogger - Blogspot yang berguna untuk memaksimalkan SEO dan mengarahkan pengunjung agar tetap bisa melihat blog/website kita. Bagi anda yang belum tau dan pengin tau Cara Daftar freedns.afraid.org bisa baca artikel saya selanjutnya di Dona Alfian Blog.

Dona Alfian Selasa, Oktober 04, 2011 CB Blogger Indonesia

404 Redirect untuk Blogger - Blogspot

Selasa, Oktober 04, 2011

Mobile Template untuk blogger - blogspot

Selasa, September 06, 2011

New Blogger Interface Error di Opera Mini

Senin, September 05, 2011

Blogger - Blogspot Ganti Interface Control Panel

Jumat, September 02, 2011

Mengatasi Error galat bX-fa9wwp pada Blogger

Rabu, Agustus 31, 2011

Bagi anda yang membutuhkan informasi tentang Menampilkan Iklan Google Adsense di Blog Berbahasa Indonesia bisa menyimak di tips dan trik saya kali ini. Saya akan membuat sebuah tutorial tentang cara Memasang Iklan Google Adsense khususnya di blog yang berbahasa indonesia. Tutorial ini bisa di praktikkan dalam hitungan menit dan hasil akhirnya adalah Iklan Google Adsense bisa muncul di Blog anda.

Menampilkan Iklan Google Adsense di Blog Berbahasa Indonesia banyak yang belum mengetahuinya. tujuan dari Menampilkan atau Memasang Iklan Google Adsense adalah agar blog anda bisa menjadi sumber money online atau memonetize blog agar berpenghasilan dari Google Adsense. Oke kita mulia saja tutorialnya dan semoga bermanfaat untuk anda.

Langkangkah-langkah dalam Menampilkan Iklan Google Adsense di Blog Berbahasa Indonesia adalah sebagai berikut :

1. Tambahkan Blog berbahasa indonesia ke Google Friend Connect

Aktifkan Google Friend Connect (Google Jalinan Teman) Menggunakan Account Google Adsense anda. Login Google Adsense anda buka halaman Google Friend Connect di : http://www.google.com/friendconnect/ . Pada saat anda masuk, jika Account anda belum terasosiasi atau terhubung dengan Google Friend Connect koneksikan dahulu dengan menekan tombol "Associate account" atau "Kaitkan Akun Adsense". Selanjutnya adalah Menambahkan Situs atau blog anda. Isi Blog yang akan di pasangi Iklan Adsense.

Menampilkan Iklan Google Adsense di Blog Berbahasa Indonesia

Selanjutnya Connect Account Adsense anda dengan Google Friend Connect. Jika Pengisian Blog berhasil akan muncul Halaman ini :

Selanjutnya adalah Membuat Iklan Adsense yang akan di tampilkan. Pilih Menu Adsense di samping kiri, setelah anda mendaftarkan blog anda. Pilih Jenis iklan (ukuran iklan adsense) yang akan di tampilkan di Blog anda.

Setelah anda memilih Iklan klik Button / tombol "Buat Kode" / "Create Code". maka akan keluar script code yang nanti bisa di paste di template blog anda.

Perlu di perhatikan ! Apabila anda copy paste script code dan meletakkanya ke template Blogger anda biasanya aka ada error karena bahasa script XML tidak menerima langsung mentah mentah kode yang diberikan oleh google adsense. Jadi Anda harus mengconversi (Convert) ke bahasa yang di terima oleh XML template blogspot anda. Caranya silahkan buka Blogger Ad Code Converter di :

http://www.eblogtemplates.com/blogger-ad-code-converter/

Copy paste di form yang telah tersedia.

Setelah di Convert baru Pastekan di Template Blogspot / Blogger anda. DONE ! ;)

Selesaia sudah tutorialnya dan kini Iklan Adsense anda bisa tampil di Blog Berbahasa indonesia. Mudah bukan. Semoga membantu anda semua dalam Memonetize blog anda. AMien ;)

Dona Alfian Selasa, Agustus 30, 2011 CB Blogger Indonesia

Menampilkan Iklan Google Adsense di Blog Berbahasa Indonesia

Selasa, Agustus 30, 2011

Setiap kita membuat Blog atau website baru nantinya pasti ingin hasil karya kita bisa di kunjungi oleh banyak visitor. Kenapa ? Selain kita bisa menunjukan kepada mereka (visitor) hasil karya kita, tentu ada maksud dan keperluan lain berkenaan dengan banyak tidaknya pengunjung ke situs kita. Salah satuanya adalah untuk memaksimalkan Keuntungan dari Bisnis Online yang kita masukkan kedalam situs, atau meningkatkan penghasilan pendapatan money online yang kita ikuti. Banyak tidaknya Visitor (Pengunjung) akan berdampak Signifikan terhadap peningkatan hal yang telah saya sebutkan tadi. Salah satu cara untuk mendatangkan visitor yang efektif dan bsia dibilang free adalah dengan menggunakan bantuan "Search Engine" atau biasa di sebut mesin pencari.

Bagi para pengguna layanan gratis dari Blogger (blogspot) seharusnya lebih aktif dan kreatif untuk bisa memaksimalkan efek Search engine dalam mendatangkan Pengunjung. Kebanyakan pengunjung yang datang berasal dari Google.com karena layanan Gratis Blogger adalah salah satu bagian dari Google itu sendiri. Maka dari itu kita harus jeli untuk bisa memperkenalkan situs atau blog kita ke Search Engine Besar lainnya Seperti Yahoo.com Bing.com Ask.com dll. Cara terindex Yahoo dan Bing untuk Blogger - Blogspot sebenarnya cukup mudah dan tentu sudah banyak yang menginformasikannya. Tapi kali ini saya akan memberikan cara yang lebih efektif untuk Memperkenalkan Situs / Blog kita agar mudah ter-Index oleh Mesin Pencari Tersebut.

Cara terindex Yahoo dan Bing untuk Blogger - Blogspot adalah dengan mendaftarkan diri kita ke Mesin pencari Itu. Oke Langsung saja kita mulai untuk mendaftar di Yahoo.com dan Bing.Com di tutorial berikut ini.

1. Cara Daftar di Yahoo.com

Agar kita Terindex di Yahoo.com Pastikan anda sudah memiliki Account di Yahoo.com (Misal Layanan Email). Jika Sudah ada, login email Anda seperti biasa di yahoo.com selanjutnya buka 1 tab browser untuk mengakses halaman :

http://siteexplorer.search.yahoo.com/submit

Pada saat membuka anda akan mendapatkan 2 menu untuk mengisi Alamat Website dan Feed Website.

Cara terindex Yahoo dan Bing untuk Blogger - Blogspot

Isi alamat website anda di menu "Submit a Website or Webpage" setelah di isi, klik button Submit URL.

Isi Alamat Feed Situs Atau Blogspot anda di menu "Submit Site Feed" Setelah di isi, Klik button Submit Feed

Selanjutnya adalah Mengaktifasi kiriman kita. Ada 2 cara Mengaktifasi, 1. Dengan Mengupload Sebuah File yang di Download dari Yahoo.com di menu "By uploading a verivication file to my site". Apabila anda menggunakan Blogspot tentu kita tidak bisa Upload File ke hosting blogger. Jadi kita gunakan cara aktifasi dengan menambahkan META tag pada Template Blogspot kita. Caranya Copy paste kode yang diberikan dan Letakkan setelah tag < head > atau sebelum Tag < BODY > Kemudian setelah di tambahkan Klik button "Ready to Autentivicate". Selesai. ;)

2. Cara Daftar di Bing.com

Agar kita terindex di Bing.com kita juga harus mendaftarkan diri situs kita di Bing. Cara mendaftarkannya juga Cukup Mudah. Masuk ke alamat :

http://www.bing.com/webmaster/SubmitSitePage.aspx

Selanjutnya isi Kode verifikasi dilanjutkan menuliskan alamat blog/situs teman teman dengan benar dilanjutkan dengan menekan button "Submit URL". DONE !. Mudah bukan.

Cara ini sangat efektif agar blog/situs kita terindex di Yahoo.com dan Bing.com. dan nantinya pada saat orang mencari Sesuatu tentang website kita akan di tunjukan di mesin pencari. Perlu di perhatikan agar pengunjung kita banyak berdatangan usahakan teman-teman selalu update situs/blog untuk menambah conten yang natinya bisa di index oleh Mesin pencari. Buatlah artikel yang bermanfaat dan banyak di cari oleh orang dengan judul yang menarik serta paling banyak di cari oleh para pengunjung. Semoga bermanfaat. ;)

Dona Alfian Sabtu, Agustus 27, 2011 CB Blogger Indonesia

Cara terindex Yahoo dan Bing untuk Blogger - Blogspot

Sabtu, Agustus 27, 2011

Apa bila anda Memasang Google Plusone +1 di Blogspot, tutorial ini akan menjelaskannya secara gamblang untuk anda. Apa sebenarnya Google +1 Plusone itu, dan manfaat dari Google +1 ?. Google Plusone +1 adalah sebuah Fasilitas yang di sediakan oleh Google yang bisa digunakan untuk memberikan sebuah ratting (tingkatan) pada Situs atau link artikel . Memasang Google +1 Plusone dapat membantu teman-teman, kontak, dan lain-lain di web menemukan hal-hal terbaik ketika mereka mencari.

Apakah manfaat lain Memasang Google Plusone +1 di Blogspot anda ? Manfaat dari pemasangan Google +1 Plusone bisa berpengaruh sekali terhadap Mesin Pencari (Search Engine) untuk mendapat hasil terbaik berdasarkan dari banyak tidaknya Google +1 yang diberikan oleh pengunjung pada blog kita (ingat ini hanya sebagian faktor saja). Apabila hasil pencarian pada Search engine menempatkan artikel kita pada halaman 1 kemungkinan orang untuk berkunjung akan semakin besar, sehingga "mempengaruhi trafik visitor" pada blog kita. Itu berarti kita sudah menambahkan sebuah SEO (Search Engine Optimize) dalam blog.

Oke, mungkin penjelasan singkat tentang Google +1 Plusone Button cukup. karena kita akan berlanjut ke cara Memasang Google Plusone +1 di Blogspot. Jika anda perhatikan dibagian Menu Conten pada setting Layout sudah tersedia fasilitas pemasangan Google Plusone +1. tapi kita saat ini akan memberikan Cara Memasang Google +1 Plusone di Blogspot berupa tombol yang berada di Pojok Kiri, Kanan, Atas, dan Bawah. Oke langsung saja ya.

1. Pilih bentuk dan ukuran Tombol Google +1 Plusone di link ini.

2. Masuk atau Login ke Blogger Anda dan masuk ke Rancangan >> Edit Html > *centang "expand widget template". Selanjutnya pada letakkan Kode dibawah ini sebelum kode </head> atau </body>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Copy dan paste kode ini juga untuk menampilkan Google Plusone +1 sesuai dengan posisi yang anda inginkan.

<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone></g:plusone>
</div>

Penjelasan :

Apabila anda ingin memasang tombol/button di bagian atas posting, cari <div class='post-body'> (gunakan Ctrl+F untuk mencari "Find") dan paste kode tersebut tepat di bawah tag tadi.
Jika anda ingin memasang tombol/button +1 di bagian bawah posting, carilah <div class="post-header-line-1"> (gunakan Ctrl+F untuk mencari "Find") dan paste kode itu tepat berada di atasnya
Untuk mengganti posisinya +1 bisa merubah Float dengan mengganti Right (kanan), Left (kiri).

Cukup mudah bukan cara Memasang Google +1 Plusone di Blogspot. Silahkan anda mempraktekannya, tentu sambil berdoa dan berusaha untuk orang orang yang membaca artikel dan tutorial anda mengeklik pada Google +1 Plusone. Saya juga tidak berkeberatan dan sangat berterimakasih jika Artikel atau tutorial ini anda beri nilai +1 untuk pada pojok kanan atas. :) "ngarep.com". Semoga informasi ini bermanfaat untuk anda.

Dona Alfian Senin, Juli 25, 2011 CB Blogger Indonesia

Cara Memasang Google Plusone +1 di Blogspot - Blogger

Senin, Juli 25, 2011

SyntaxHighlighter untuk blogspot atau blogger bisa ngga yach..? dan apa itu SyntaxHighlighter ?. SyntaxHighlighter adalah sebuah aplikasi berbasis JavaScript yang bertujuan membantu pengembang / programmer untuk mengirim potongan kode online dengan mudah dan terlihat bagus dan mudah dipahami. Jika di dalam blogspot atau blogger memungkinkan anda untuk dengan mudah posting kode sintaks (seperti html script, asp script, javascript, vb script, xml script dan script lain) ke situs atau blog anda tanpa ada pengurangan yang di sebabkan oleh keterbatasan fasilitas.

Jika di Wordpress sudah banyak kita temui plugins atau addon's yang bisa digunakan untuk membuat sebuah SyntaxHighlighter. Akan tetapi di Blogspot bisa juga menggunakan SyntaxHighlighter. Jadi bila ada pertanyaan " Apakah bisa SyntaxHighlighter untuk blogspot ?" Jawabannya : Bisa Banget Cuy ! :P. dan saya akan contohkan penggunaan SyntaxHighlighter (kode javascript) untuk blogspot. seperti dibawah ini :

SyntaxHighlighter untuk blogspot - blogger

Nah, diatas itu adalah tampilan SyntaxHighlighter untuk blogspot. Apabila anda menginginkan Blog anda bisa melakukannya silahkan ikuti caranya berikut ini. Login ke Blogger anda, masuk ke menu Rancangan >> Edit Html Perlu di ingat sebelum menambahkan fasilitas SyntaxHighlighter sebaiknya simpan terlebih dahulu template blogger anda untuk alasan keamanan ( kali ajah kamu salah caranya sehingga template jadi miss atau terjadi kesalahan).

Selanjutnya Cari tag <head>, letakkan dibawah tag tersebut atau setelah tag <meta description... > dengan skrip css ini :

<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

Selanjutnya Cari Tag , letakkan dibawahnya Script JS berikut ini :

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushVb.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushRuby.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushXml.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPerl.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPowerShell.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Setelah itu Simpan. Sekarang anda sudah bisa menikmati SyntaxHighlighter untuk blogspot. Untuk penulisan di bagian Isi / berita pada blog gunakan perintah :

<pre name="code" class="-alias script yang ditampilkan-"> isi Script/code </pre>

Untuk Alias Script bisa di isi sesuai dengan code bahasa yang akan di tuliskan seperti (js untuk javascript, xml untuk xml atau html, asp untuk asp, vb, ruby, sql, dlsb). Sebagai contoh silahkan tuliskan di blog anda tulisan seperti ini (gunakan mode html edit) :

<pre class="js" name="code">/** * Contoh SyntaxHighlighter */
function foo()
{
if (counter <= 10)
return; // ini Berhasil Cuy ;)!
}
</pre>

Simpan dan liat hasilnya. Semoga bermanfaat. Jika anda masih bingung atau belum bisa silahkan tanya dan share bersama teman teman lainnya.

Apakah informasi ini bermanfaat ? Jika Ya, Berikan Ratting, Komentar, Pertanyaan seputar seputar SyntaxHighlighter untuk blogspot - blogger. terimakasih.

Dona Alfian Jumat, Juli 08, 2011 CB Blogger Indonesia

SyntaxHighlighter untuk blogspot - blogger

Jumat, Juli 08, 2011

Bagi anda yang ingin memasang Facebook Comments Box untuk Blogger atau Blogspot, anda bisa mempraktekannya menggunakan tutorial berikut ini. Comment blog ini bisa di pasang di berbagai CMS blog anda yang mungkin akan membuat blog anda lebih menarik dan lebih familiar dengan facebook. with Facebook Comments Box untuk Blogger - Blogspot, Facebook users on your blog can comment on your content or news, post those comments to their profiles asap, and share them with their friend on Facebook. The Comments Box allows non-Facebook users to make comments on your site as well. And via our APIs, you can access related comments made on Facebook as well to bring the conversation together.

Langsung ajah ya kita mulai step by stepnya untuk bisa memasang Facebook Comments Box untuk Blogger - Blogspot. Sebaiknya simpan doloe (Download Template) template anda biar kalo ada kesalahan pemasangan bisa di Load lagi hasil simpanan awal. :

Step 1 : Anda bisa menghilangkan menu comment pada blogspot anda (Disable) atau non aktifkan default comments
>> setting (pengaturan pada Blogspot) >> Comments >> Pilih options Hide
* Sehingga form komentar standart blogger tidak muncul .

Step 2 : Buat sebuah aplikasi di Facebook anda dengan masuk ke link

http://www.facebook.com/developers/createapp.php

Jika anda baru mendaftar pilih menu Buat aplikasi atau Create Aplication di bagian Kanan Atas.

Isi nama aplikasi dan url blog anda yang akan anda pasangkan aplikasi form komentar dari facebook

* gunakan / (slass) di akhir url (biasanya kalo ngga dikasih jadi ngga bisa) kemudian Pilih Agree dan Create Application

click to enlarge

kemudian pilih (on the left tabs-list/ menu tab samping kiri), akan muncul menu seperti gambar di atas :

Pilih Connect * ( terhubung = jika anda menggunakan bahasa indonesia)
- isi connect url dengan dengan nama blog anda , contoh :

http://bloganda.blogspot.com/ kalo domain sendiri bisa ditulis
http://www.domainanda.com/

- isi Base Domain dengan blogspot.com& kalo domain sendiri berarti tulis ajah
domainanda.com

kemudian klik Agree dan save changes.

Jangan lupa menyimpan / copy Application ID anda (bila perlu simpan di notepad, supaya tidak bolak balik pada saat menyeting :

Step 3 : Saatnya masuk ke Blogger Dashboard anda, pada Layout atau Design - edit html, centang expand widget templates>

cari kode <html (* gunakan ctrl+F pada firefox untuk mencari)

tambahkan kode ini setelah kode <html

xmlns:fb='http://www.facebook.com/2008/fbml'

sehingga kodenya menjadi seperti ini

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..
2009/gml/expr' >

Step 4 : Cari kode <body>
kemudian pastekan kode di bawah ini setelah kode <body>

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Id Aplikasi anda',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

* Jangan lupa mengganti kode Id Aplikasi anda dengan Id App anda yang terdapat pada Aplikasi yang anda buat.

Step 5 : cari kode </head>
paste kode berikut sebelum </head>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NamaBlogAnda' property='og:site_name'/>
<meta content='IdAppAnda' property='fb:app_id'/>
<meta content='ProfileIdAnda' property='fb:admins'/>
<meta content='article' property='og:type'/>

Jangan lupa mengganti tulisan:
- Nama Blog Anda : isi dengan nama blog anda (http://bloganda.blogspot.com) atau http://domainanda.com
- idAppAnda : isi dengan kode Aplikasi Anda.
- Profile Id : isi dengan profil facebook anda

* Untuk mengetahui id profile kita tinggal klik menu profile pada facebook kita
** misal "http://www.facebook.com/home.php?#!/profile.php?id=670358608" berarti profile kita adalah "670358608"

Step 6 : cari kode

jika anda menemukan dua kode yang sama pilihlah kode yang kedua .

- pastekan kode berikut setelah <data:post.body>
</data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'
width='470'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc;
font-size:10px; padding:3px;width:100%;'> </div></b:if>

Width='470' bisa anda sesuaikan sendiri dengan template, karena 470 adalah ukuran lebar main-wrapper (lebar postingan anda)

Kemudian Save Templates. SELESAI. Mudah bukan dan sekarang anda bisa menggunakan Facebook Comments Box untuk Blogger - Blogspot

Dona Alfian Selasa, Juli 13, 2010 CB Blogger Indonesia