Cara Memasang Kolom Komentar Fb di blogger

Fb Comment

Merupakan Plugin dari facebook untuk mempermudah pengunjung blog berkomentar di blog kita atau memberi jawaban ke pengunjung blog dengan mudah, Karena facebook sangat Instan di gunakan sehingga pengungjung tidak perlu masuk ke akun google untuk berkomentar dan hanya cukup dengan menggunakan FB comment.

Kenapa Fb comment Sering ada di blog ?

Karena Facebook merupakan salah satu social media Terbanyaka pemakai di dunia dan itu tidak bisa di pungkiri, Karena Setiap Detik ada Pertukaran data Sebanyak ratusan juta data, Oleh karena Fb merupakan salah satu social media terpopuler, Maka setiap Individu Pasti Online Fb di komputer atau laptop nya dan pada saat itu juga pengunjung mencari artikel untul menyelesaikan masalahnya. Baiklah silahkan simak caranya di bawah ini !

Memasang Script Comment FB

1.Login ke Blogger anda

2.Terus cari Tema

3.Edit Html

4.ke edit Html

5.Cari Kode ini <div class='comments' id='comments'>

6.Kemudian Pastekan Kode di bawah ini Tepat di bawah <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'><div id='fb-root'/>

<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>

<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='1449319008509338' 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>

<style>.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;}</style>

Catatan :

1.Ubah lah Id Fanspage yang saya lingkari dengan Id Fanspage Sobat lihat contoh di bawah ini.

2.Cara melihat Id FB ? Buka halaman Fb anda, Kemudian Klik tentang > kemudia copy Id.

   

3.Tidak memliki halaman ? Tidak apa-apa copy saja Source kode berikut tanpa merubahnya.

4.Selesai Simpan Template.

Semoga Tips saya ini dapat membantu, Apabila ada Pertanyaan lebih lanjut Silahkan Berkomentar di bawah nanti saya jawab secepatnya, Terima kasih.

Read More

Cara Membuat Box Script pada Postingan blog

Box Script 

Box Script merupaka Tempat meletakan Script yang ingin kita share ke pengunjung blog, Dengan adanya Box Script dapat memudahkan pengunjung untuk mengcopy Script yang ingin kita bagi ke pengunjung, Box Script Juga berguna untuk merapikan Script yang terdapat pada postingan. Silahkan simak tutorial di bawah ini.


Cara Menggunakan Box Script 

1.Login ke blogger
2.Klik tema
3.Kemudian klik edit html
4.Cari kode ini ]]></b:skin> dan Taruh kode css di bawah ini tepat di atas kode tadi.

  
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;

    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #3cc888;
}

pre[data-codetype='HTMLku']:before {
    background-color: #e5b460;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='JQueryku']:before {
    background-color: #75d6d0;
}

5.Letakan Tiga Script di bawah ini Tepat di Atas kode </head>

 
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/> 

 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script> 

 <script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 

6. Setelah semua selesai Gunakan kode di bawah ini untuk memanggil kode Scriptnya

 
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">kode HTML di sini</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">kode CSS di sini</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> kode JavaScript di sini </code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">kode jQuery di sini</code></pre>

Contoh Penggunaan

Hasil

Bagaimana mudah bukan ? apabila ada pertanyaan silahkan isi kolom komentar.

Read More

Cara Cepat artikel Terindex oleh google

Terindex oleh google ?

Google merupakan salah satu Search engine Yang di pakai pengguna terbanyak di dunia, Google sangat berperan penting di dalam kehidupan manusia, karena dengan ada nya google setiap individu cepat mendapatkan berita atau pun mencari artikel untuk membantu memcahkan suatu masalah.

Artikel Para Publisher pun saling Berlomba-lomba untuk menaikan rating pada artikelnya dengan cara memasukan alamat artikel kedalam Web masternya google oleh karena itu artikel tersebut di index oleh google dan dapat tayang di index teratas, Ini lah yang di cari-cari oleh para publisher karena dapat meningkatkan Rating pengunjung, pada artikel nya.

Web master 

Webmaster adalah salah satu engine data base terbesar google yang menyuplai artikel-artikel yang di tautkan ke eginenya sehingga artikel yang di index menjadi bisa di baca oleh google dan mudah untuk di cari artikel yang berkaitan, dengan adanya web master maka para publisher pun sangat terbantu karena artikel nya mudah di kenalan oleh para pengguna search engine di seluruh dunia.

Cara Mengindex Artikel ke dalam webmaster 

1.Login ke akun gmail anda kemudian buka blogger anda
2.kemudian ambil alamat artikel anda 
3.seperti alamat artkikel saya ini : 
http://www.seizen.computer/2017/12/cara-memasang-anti-bom-klik-untuk-akun.html
4.copy alamat artikel tersebut dan masukan ke dalam web master 
5.Klik => Webmaster Kemudian kirim permintaan

Lihat contoh di bawah ini.

Manfaat Mengindex artikel ke web master

Manfaatnya artikel mudah di rayapi oleh google dan mampu menaikan Seo, di search engine dan mudah memperkenal kan artikel anda, Semakin unik dan membantu maka seorang pengguna akan sering berkunjung ke artikel anda. Baik itu saja dan selamat mencoba.

Hasil di index

Read More

Cara Memasang Anti Bom Klik Untuk Akun Adsense

Bomb Klik ?

Apa sih Bom Klik itu ? . Bom  Klik adalah perbuatan orang yang tidak bertanggung jawab yang membuat sebuah Iklan yang terpasang di dalam blog di rusak dengan cara mengklik nya ratusan hingga, Ribuan Kali. Sehingga menyebabkan Akun Korban Di curigai oleh pihak Google Karena Melakukan kecurangan.

Cara Mengetahui Bomb Klik yang terjadi

Kita Cukup melihat di bagian Report Klik, di menu Performance Report. Dan lihat di bagian klik apakah wajar atau tidak. Biasanya untuk blog yang hanya memiliki ribuan atau ratusan tayangan perhari. Klik iklan yang di lakukan tidak lebih dari 100 atau bahkan juga bisa lebih. Menurut saya itu klik yang wajar. jika dilakukan dalam kurun waktu sehari.

Mencegah Tindakan Orang yang tidak bertanggung jawab

Sebagai Publisher Blogger Kita harus mengetahui akan hal ini karena ini sangat penting di lakukan agar tidak terjadi hal tidak di inginkan untuk iklan yang terpasang di blog, Karena banyak sekali orang yang tidak bertanggung jawab, Atau bermacam-macam orang yang iri , atau sengaja melakukan hal tersebut sehingga akun adsense Publisher tersebut di Suspend Atau Di blokir untuk semalamnya.

Cara menghindari Bom Klik

Ada Permasalahan pasti ada solusi, Jadi Bagi teman-teman  publisher jangan khawatir ada Script yang di sediakan oleh pihak google agar Blogger anda terlindung dari kejahatan orang yang mengklik Iklan anda. Maka dari itu silahkan Lihat cara nya di bawah ini.

Pasang  Script Anti bom Klik

• Login Terlebih dahulu ke akun blog anda
• Kemuidan Ke bagian tema
• Lalu Klik Edit Html
• Pada Bagian Tersebut Cari </head>
• Masukan Copy dan masukan Kode di bawah ini
• Lalu taruh Di atas Kode </head>
• Kemudian Klik Simpan template

Contoh penempatan yang benar

  

Manfaat Script

Setelah semua selesai Maka blog di iklan kita dan akun adsense kita pun menjadi aman dari tangan orang jahil yang tidak bertanggung jawab.

Baiklah Sekian dari saya semoga membantu teman-teman publisher blogger yang membaca artikel saya apabila ada pertanyaan jangan sungkan untuk berkomentar di bawah Sekian dan terimakasih.

Read More

Pengertian CSS dan Sejarah

PENGERTIAN CSS

Cascading Style Sheet Atau di singkat dengan (CSS) adalah Bahasa pemograman yang mengatur Elemen pada Html agar bisa menjadi lebih, Terstruktur dan Memiliki tampilan yang menarik dilihat oleh pengunjung suatu website, Css umumnya di Gunakan untuk memformat Tampilan pada suatu website yang menggunakan HTML atau XML sebagai Kerangkanya. CSS Seperti Kanvas, Kuas dan Warna yang biasa di gunakan oleh pelukis, Karena Css sangat berpengaruh pada tampilan suatu website yang menurut pengunjung itu sangat memiliki Tampilan yang cantik dan menarik Tergantung dari Design yang di buat oleh Develover web.

Fungsi -fungsi CSS

• Css dapat memperbesar kecil huruf
• Bisa mengatur posisi gambar
• Bisa mengatur baris huruf
• Mengatur margin dan padding / Jarak antar elemen
• Warna pada teks dan warna pada body background
• dll

Dengan adanya CSS walaupun kerangka pada suatu website itu sama, Apabila design yang terdapat di css berbeda maka suatu website tersebut seolah-olah sangat berbeda dengan website lain.

Sejarah CSS

CSS Mulai berkembang Pesat Pada tahun 1994 yang di kembangakn oleh seorang Programer yang jenius yang bernaman Hakon Wium Lie dia menyatakan di dalam Konferensi W3C yang di laksanakan di Chicago, Dia Juga memiliki Rekan Kerja Dalam mengembankan CSS yang bernama Bert Bos , Mereka Pun Terus melakukan Riset 2 tahun Terakhir dan pada tahun 1996 pun CSS resmi di Publikasikan dan Di pakai Oleh Develover web. 

Nama CSS juga Di dapat dengan Hubungan Ayah dan Anak, Atau yang di maksud dengan (Parent Child), Di karenakan Meskipun Setiap Deklarasi Memiliki Style yang berbeda akan Tetapi Di css bisa di susun lagi secara berurutan, Sehingga bisa membentuk suatu susunan yang pas dan Menarik.

Versi CSS

CSS juga memiliki Versi dalam Penggunaan Kodenya Contoh : 

Versi CCS 1, Pada Versi ini CSS masih memiliki Kode yang kompleks dan sederhana yang hanya memiliki Fitur mengatur suatu teks menjadi tebal, Warna teks, dan jarak antar elemen (padding dan margin ).

Versi CSS 2, Pada Versi ini CSS Tidak memiliki Fitur baru akan Tetapi pada Versi ini hanya mengoptimalkan Bahasa Pemogramanny yang bisa di tampilkan lebih banyak Tempat Aplikasi web browser.

Versi CSS 3, Pada Versi ini CSS sudah mulai banyak menambahkan Fitur, Pada versi ini CSS juga memiliki Animasi dalam Kodenya, Pada versi ini juga CSS di dukung denga Query sehingga Tampilan website juga di atur dalam bahasa pemograman sehingga suatu website memiliki Navigasi yang baik, yang di bantu oleh bahasa pemograman query. VERSI ini Juga yang membuat Agara website bisa di tampilkan kedalam SmartPhone yang bisa di Sesuaikan dengan Ukuran Smartphone Apapun atau yang di kenal Dengan RESPONSIVE WEBSITE.

Terima kasih itulah Penjelasan dari saya, semoga bermanfaat. Apabila ada pertanyaan silahkan Isi kolom komentar di bawah.

Read More

Apa itu web dan Sejarah web

Pengertian web

WWW (World Wide Web) merupakan suatu informasi elektronik yang menggunakan Hyperlink Konsep atau tautan,  Yang memudah kan Para pengguna komputer untuk melaukan penelusuran secara online melalui internet atau yang biasa juga di sebut dengan browsing. Web Juga bisa menghubungkan sebuah file dari sembarang tempat dan file tersebut saling berinteraksi satu sama lain layaknya seperti pengguna yang saling berinteraksi, Saling berbagi file gambar, video, musik. 

Sejarah Pembuatan web

sir timothy john berners-lee

Pada tahun 1991 orang yang bernaman Berners lee, Dia juga yang pertama kali menemukan HTML, Bermaksud untuk membuat web sebagai suatu cara untuk memudahkan saling berbagi informasi secara cepat untuk memperbarui data, pada sesama rekan kerja penelitinya, Pada tahun 1993 pun ia mengumumkan Pengguanaan web bisa di gunakan untuk umum secara gratis karena bisa sangat membatu setiap perusahaan di Amerika pada saat itu karena cepatnya Pertukaran data, Yang tanpa harus menunggu pengiriman data melalui post atau semacamnya.

Kelebihan Terciptanya website

Media promosi 

Website pada saat itu pun walau masih belum luas daya cakupnya sudah memulai Untuk di jadikan Tempat Promosi oleh suatu perusahaan untuk mengenalkan produknya melalui web. Pada saat itulah web mulai cepat berkembang dengan adanya Iklan berbasis internet.

Media Informasi

Website berita yang menyediakan informasi secara langsung pun dengan cepat bisa di baca oleh semua orang yang bersifat global, Karena jangkauan dari sebuah website bisa keseluruh dunia, Tidak seperti TV lokal atau pun TV luar negeri, yang hanya mencakup wilayah tertentu saja.

Media Pendidikan

Website juga di jadikan sebagai media pendidikan yang sangat dibutuhkan oleh seorang pelajar dalam mencari tugasnya dengan mengakses internet bisa lebih mudah dalam belajar maupun membagikan ilmunya kedalam sebuah website.

Media Komunikasi

website juga di jadikan sarana untuk saling berinteraksi dengan cepat dengan pengguna lain dengan menggunakan website yang tertaut di internet dengan contoh website yang terkenal yang bernama. FACEBOOK merupakan situs website yang berdiri pada tahun 2004 yang terkenal hingga sekarang ini, yang di jadikan sarana komunikasi yang banyak di pakai di dunia, Karena Fiturnya yang lengkap dan gratis yang bisa di pakai seluruh pengguna.

Read More

Pengertian internet

Internet (innterconection networking) adalah Terhubungnya seluruh jaringan yang menggunakan standar sistem global transmisions/ internet proctocol (TCP/IP) yang berfungsi sebagai protocol pertukaran packet untuk melayani jutaan miliyar pegguna di seluruh dunia rangkaian jaringan terbesar di dunia di sebut dengan internet. Internet juga memiliki berbagai tipe jenis,Dengan menggunkan tipe komunikasi seperti satelit,telepon,modem,paket data/kuota dan lain-lain.

Fungsi internet

• Sebagai media komunikasi untuk berinteraksi satu sama lain.
• Tempat mencari sumber data atau sumber daya
• Sebagai tempat untuk mencari informasi
• Memudahkan untuk belanja menggunakan internet tanpa repot2 keluar rumah dengan menggunakan media Online shop.
• Memudahkan mendapat berita dari dunia manca negara maupun dalam negri.

Baiklah sekian pemaparan yang saya berikan di atas semoga bermanfaat bagi teman-teman sekalian, Berkunjungi lagi ya karena masih banyak informasi yang menarik.

Read More