Cari Blog Ini


SEARCH

ABOUT

Foto saya
Jangan pernah takut untuk belajar sesuatu, karena ilmu pengetahuan adalah harta karun yang bisa kita bawa kemana pun tanpa membebani kita

Cara Menambahkan Syntax Highlighter 3.0.83 di Blogger

Assalamualaikum. wr wb


Selamat sore sobat semua, gimana kabarnya? pastinya baik kan? hehe. gak terasa ya, sekarang udah 19 Ramadhan, bentar lagi mau lebaran, dan gue selaku admin blog ini mau ngucapin Minal Aidin Wal Faidzin sama sobat semua, mana tau ada kata" yang kurang berkenan di hati gue mau minta maaf :)

Oke, pada postingan kali ini gue mau ngebahas tentang Syntax Highlighter, yang juga pernah gue bahas pada postingan sebelumnya, tapi pada postingan kali sebelumnya gue ngebahas tentang Syntax Highlighter dengan Language Autodetection yang pada dasarnya berbeda dengan yang akan saya bahas kali ini. 

Pada postingan kali ini saya akan membahas tentang SyntaxHighlighter versi 3.0.83 yang merupakan versi terbaru dari SyntaxHighlighter  yang saya dapatkan dari situs Kang Alex Gorbatchev yaitu sang Pembuat dan Penemu SyntaxHighligter itu sendiri.


CARA PEMASANGANNYA DI BLOG :
1.  Pastikan sudah Login ke Akun Blogger sobat. www.blogger.com 
2.  Back Up dulu Template sobat agar bisa dikembalikan seperti semula jika ada kesalahan
3.  Masuk ke Dashboard kemudian pilih Template > Edit HTML
4.  Cari Kode </head> (ctrl+f agar lebih mudah) pastekan kode dibawah ini diatasnya.

<!-- Syntax Highlighter 3.0.83 START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter 3.0.83 END -->

5. Save Template

TAMBAHAN :

Untuk Menggunakan SyntaxHighlighter pada postingan gunakan kode dibawah ini, pada mode HTML dan bukan pada mode Compose Postingan.

<pre class="brush: html">   untuk script html
<pre class="brush: css">    untuk kode css
<pre class="brush: java">   untuk coding java

dan lain lain, tinggal sesuai kan saja nama brush yang berwarna merah dengan jenis kode yang akan di tampilkan.

untuk melihat pilihan brush dan jenis kode yang di support klik disini

TEMA : 

untuk melihat beberapa tema yang tersedia silahkan klik disini


Oke, gimana? bisa kan sob? kalau gak bisa silahkan Tinggal kan pertanyaan di Kotak komentar dibawah ini. Sekian untuk Postingan kali ini. Terimakasih sudah berkunjung.

Wassalam

Cara Memasang Like Facebook Melayang di Blog

Assalamuaikum wr. wb. Siang-siang Bolong gini bingung, gak ada kerjaan juga. perut lapar, mulai tepar, tapi gak bisa makan, bukan gak bisa tapi gak boleh!!! lho kok gak boleh?? ya iyalah broo.. sekarang tu kan Bulan Puasa, umat muslim manapun di dunia ini gak boleh makan disiang hari nya tauu... hehehe..

Oke, selamat siang sobat semuanya.. gimana puasa hari ini? lancar kah? mudah-mudahan jawabanya fine-fine aja ya sobat, hehe.. gak kerasa sekarang udah sampai hari ke 8 ramadhan, dan Alhamdulillah sampai hari ini belum ada puasa yang bolong, gue berharap kalau tahun ini puasa gue bisa full, harus full, apapun yang terjadi, apapun godaannya gue bakalan tetap puasa,, Allahu Akbar!!!

ehm, sebenarnya kali ini saya akan berbagi tutorial tentang cara memasang Like facebook Melayang di blogger :) lho itu kan tutorial lama? udah banyak yang posting? hehe. iya betul, cuman mungkin ada sebagian sobat yang belum tahu tentang tutorial ini. and buat sobat yang udah master, posting ini numpang lewat aja ya, hehehew.. 

Oke, daritadi banyak ngomong (hah? ngomong? ngetik kali broo) :D mendingan langsung to the topic aja, ya sobat. langsung aja ini tutorialnya:


Pertama-tama, buat sobat yang masih newbie kaya saya ini mungkin bertanya-tanya apa sih manfaat kita memasang Like fanspage facebook kita di blog? apa keuntungannya buat kita? nah biar gue jawab sendiri dulu, dengan adanya fanspage kita bisa dengan mudah untuk nge-share postingan blog kita, terus kalo fanspage kita banyak yang nge-like , bisa juga jadi buat ajang pamer sama teman, fasnpage siapa yang banyak like-nya, berarti dia keren, punya banyak fans*kece gituuu* hehehe..

oke, langkah pertama yang harus dilakukan adalah, login ke akun blogger sobat. selanjutnya masuk ke menu Template kemudian pilih menu Layout kemudian pilih Add Gadget lalu pilih HTML/Javascript.




Oke, setelah muncul kotak dialoh HTML/Javascript. langkah selanjutnya adalah tinggal mengcopykan Script dibawah ini :

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Jangan Lupa di Like Ya Sobat</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Knowledge.itsTreasure&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<a class='close' href='#'>&times;</a>
</div>

Oke, Langkah selanjutnya yaitu merubah tulisan yang berwarna biru pada script diatas agar sesuai dengan keinginan kita

  • untuk tulisan Jangan Lupa di Like Ya Sobat sialhkan diganti dengan kata-kata sendiri
  • untuk tulisan https://www.facebook.com/Knowledge.itsTreasure itu adalah alamat Fanspage saya. silahkan diganti dengan URL/Link dari Fanspage sobat.
Selesai tinggal Save dan Lihat Hasilnya.. Kalau berhasil tampilannya kira2 seperti punya saya dibawah ini :


Hehehe.. gimana penampakannya sob? mantep gak? pasti iya kan?? udah deh bilang iya aja, itung2 dapet pahala, mumpung bulan puasa juga, wkwkwkw.. eh tapi kalau mau dapat pahala lebih gampang aja sob, tinggal like aja Fanspage Blog ini ya terus kasih komen deh dibawah post ini,, mau ya??*maksa* ..wkwkwk.

Oke, sekian untuk posting siang hari ini, lebih dan kurang nya gue mohon maaf,, 
Wassalam..

Cara membuat kotak komentar facebook di Blogger

Assalamualakum. wr.wb
Pada postingan ini, sebenarnya saya akan menulis kelanjutan dari postingan saya sebelumnya. yaitu Cara mudah membuat Aplikasi di Facebook, dan sekarang saya akan menulis artikel tentang Cara Membuat Kotak Komentar Facebook di Blogger.




gambar di atas adalah sedikit penampakan dari komentar facebook yang ada di blog ini. dan untuk cara pemasangan nya silahkan sobat ikuti langkah langkah sebagai berikut :


Kali ini kita akan memasukkan tiga jenis kode dari developer facebook. sebelumnya pastikan sobat sudah mengetahui App ID dan ID facebook sobat. untuk mendapatkan App ID caranya bisa dilihat pada postingan saya sebelumnya, klik disini. dan bagi sobat yang belum mengetahui ID fb nya, silahkan ikuti tutorialnya disini.

Untuk berjaga-jaga simpan lah App ID dan ID facebook sobat di Notepad agar nanti mudah mencarinya saat dibutuhkan, nah untuk Langkah pertamanya Kita akan memasukkan kode fbml facebook ke template blog. caranya :

Sebelumnya jangan lupa untuk mendownload terlebih dahulu template sobat. agar jika terjadi kesalahan kita dapat mengembalikannya seperti semula lagi. kemudian masuk ke akun blogger sobat kemudian pilih Template kemudian pilih Edit html.

Pada Edit HTML cari kode <html (gunakan ctrl+f untuk memudahkan pencarian) kemudian masukkan kode berikut setelahnya.

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

copy code diatas kemudian paste-kan setelah kode <html .contoh nya :

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

kemudian pilih save untuk menyimpan perubahan. untuk langkah selanjutnya yaitu memasukkan kode open graph protocol facebook pada template blog. pada edit HTML. carilah kode <b:skin> (gunakan ctrl+f untuk mempermudah) kemudian pastekan kode berikut tepat diatas nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='BLOG NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR APP ID' property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<meta content='article' property='og:type'/>

Silahkan sobat ganti item yang berwarna merah. BLOG NAME diganti dengan Nama Blog sobat, YOUR APP ID ganti dengan App ID Aplikasi yang telah dibuat sebelumnya, caranya bisa dilihat pada postingan sebelumnya. lihat disinikemudian YOUR ID FB PROFILE ganti dengan ID facebook sobat, bagi yang tidak tahu caranya silahkan lihat disini 


Kemudian Klik Save untuk menyimpan perubahan. 

Langkah berikutnya adalah memasukkan kode SDK(Software Development Kit) dari facebook developer, caranya Masih pada menu Edit Html. kemudian cari kode <body> kemudian copas kode dibawah ini tepat dibawah nya.
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      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);
    }());
<fb:comments/>
</script>

Silahkan ganti tulisan YOUR APP ID dengan App ID sobat. kemudian klik Save.


Nah, sampai disini kita sudah berhasil mengintegrasikan Aplikasi facebook yang kita buat dengan Blogger, artinya kita sudah bisa memoderasi komentar yang masuk melalui aplikasi facebook tsb. tapi komentar facebook nya masih belum muncul di sebelah kotak komentar Blog kita, nah untuk memunculkan kotak komentar fb di blog, langkah selanjutnya adalah :

1. Masuk ke Akun Blogger, pilih menu Template kemudian Edit Html.
2. (gunakan ctrl+f) kemudian cari kode <div class='comments' id='comments'>

Catatan : Kalau pada template sobat terdpat dua kode yang seperti diatas maka coba pilih kode yang kedua, jika gagal pilih kode yang pertama. contoh kasusnya pada template saya ada dua kode <div class='comments' id='comments'> nya, saya pilih kode yang pertama ternyata gagal. kemudian saya pilih kode yang kedua dan berhasil :)

kemudian paste kan kode dibawah ini tepat diabawah kode diatas.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Silahkan diganti tulisan yang berwarna biru sesuai keinginan sobat, angka 2 adalah jumlah komentar default yang akan ditampilkan di blog. sedangkan 400 adalah lebar dari kotak komentar tsb.

Langkah selanjutnya, masih pada Edit Html. silahkan cari kode </head> (gunakan ctrl+f) kemudian pastekan kode dibawah ini tepat diatasnya.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

ganti YOUR ID FB PROFILE dengan App ID sobat. Langkah selanjutnya adalah memasukkan kode CSS dibawah ini pada template. cari kode #comment atau .comment (gunakan ctrl+f) kemudian copas kode dibawah ini tepat diatasnya.
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Kemudian Klik Save. Selesai. sekarang silahkan coba test komentar pada salah satu Postingan blog sobat, kemudian lihat hasilnya. kalau berhasil hasilnya seperti ini :


Selamat, sekarang tampilan komentar di blog akan terlihat lebih keren dengan adanya komentar fb dan blogger bersebelahan :) jika ada yang gagal silahkan ikuti lagi langkah-langkahnya dari awal. mungkin ada langkah-langkah yang gagal/tertinggal.

Sekian Postingan Cara membuat kotak komentar facebook di Blogger. Terimakasih sudah berkunjung di blog ini. Jangan Lupa Komentar nya ya sob :)

Wassalam.

Posted By : Rinaldi Rizki Ananda

Cara Mudah Membuat Aplikasi di Facebook,

Assalamualakum wr.wb


Pada Malam pertama bulan Ramadhan ini. Pikiranku terasa sangat tenang. tidak seperti hari-hari biasanya yang dipenuhi oleh rutinitas dan semua kegiatan perkuliahan, malam ini terasa begitu tenang. terimakasih Ya Rabb. sungguh malam yang indah di bulan yang pebuh berkah ini, dan semoga hamba bisa melakukan banyak hal yang bermanfaat di bulan ramadhan 1432H ini Ya Allah. Amiin :)

Malam ini tiba-tiba relung hatiku tergerak untuk segera mengupdate blog yang sudah lama aku tinggalkan ini, karena ini adalah tanggung jawabku sebagai Imam dari blog ini, hehehe.. oke, Judul postingan pada Malam hari ini yaitu Cara mudah membuat Aplikasi di facebook.. lho? Aplikasi? maksudnya aplikasi gimana?? hehehe. maksudnya adalah aplikasi dari pengembang facebook. aplikasi ini bisa kita gunakan untuk berbagai keperluan. misalnya kita bisa mengembangkan berbagai aplikasi, seperti games, dll, tentunya yang berjalan di platform facebook. itu buat yang udah master aja, hehehe. sebenarnya masih banyak hal yang bisa kita kembangkan dengan membuat aplikasi facebook ini, tapi pada postingan kali ini. saya akan membuat tutorial tentang cara membuat aplikasi facebook yang nantinya akan saya gunakan untuk memasang komentar facebook di blogger, yang akan saya tulis pada postingan berikutnya. oke. keep follow my post ya sobat,hehehe..oke. langsung aja berikut langkah-langkanya :





1. Pertama, Pastikan sobat sudah Login ke akun facebook sobat. kalau sudah login, langkah selanjutnya yaitu masuk ke halaman situs developer/pengembang facebook. silahkan klik disini

2. Maka akan muncul jendela create new App. silahkan sobat isi kolom App Name nya dengan nama aplikasi yang akan di buat, untuk kolom App Namespace nya boleh dikosongkan atau boleh juga diisi dengan Namespace minimal 7 karakter. tapi saya sendiri gak ngerti apa maksud dari namespace ini. makanya saya kosongkan, hehe.. untuk kolom category dan subcategory nya saya biarkan kosong saja, kemudian klik continue untuk membuat aplikasinya,



3. Selanjutnya akan muncul jendela require captcha. silahkan sobat ketikkan kata-kata yang ada pada gambar tersebut. kemudian klik continue


4. Kemudian kita setelah berhasil membuat aplikasi, kita akan masuk ke halaman Settings atau pengaturan App, silahkan dicatat App ID dan App Secret nya. atau bisa di copykan saja di Notepad. karena untuk memasang komentar fb di blogger, kita membutuhkan App ID ini nantinya, silahkan lihat gambar dibawah ini. klik untuk memperjelas,




5. Setelah tahap ini, langkah selanjutnya adalah melakukan pengaturan lanjutan pada aplikasi yang tadi kita buat, atau lebih simplenya, kita akan memasukkan alamat blog kita pada aplikasi tersebut. lebih jelasnya lihat gambar dibawah ini.



Untuk Display Name nya biarkan saja default. Name space nya bisa dibiarkan kosong, Contact emailnya secara default adalah email yg kita gunakan untuk akun facebook kita, bisa dirubah atau biarkan saja default. kemudian klik pada "Website with facebook Login:kemudian isikan dengan URL/Alamat blog sobat. kemudian klik Save Changes.

Maka sampai pada tahap ini kita sudah berhasil membuat aplikasi. tetapi kita belum berhasil memasang komentar facebook di kotak komentar blogger kita. kemudian untuk langkah selanjutnya adalah memasukkan tiga jenis Script/Kode dari Facebook developer ke dalam template blog, untuk pemasangan kode ini, akan saya bahas pada postingan selanjutnya, so keep follow my post ya sob :)

Terimakasih sudah berkunjung ke sini, semoga apa yang saya tulis disini dapat bermanfaat bagi sobat dan bagi saya tentunya. jangan lupa setelah membaca artikel tinggalkan komentar ya, itu akan sangat memotivasi saya untuk menulis artikel yang lebih baik lagi untuk kedepannya.


Posted By :RINALDI RIZKI ANANDA