Inilah 10 Bintang YouTube Yang Mendapat Bayaran Termahal

Inilah 10 Bintang YouTube Yang Mendapat Bayaran Termahal

  

Tidak sedikit orang meraup uang dari dunia online. Namun dari sekian banyak itu pasti diperoleh dengan cara yang berbeda. ada melalui blog, online shop, double klick, dan lain sebagainya. Kali ini di tahun 2015, ada 10 orang yang mendapatkan bayaran tinggi dari situs YouTube. Mereka hanya bermodalkan keahlian dalam mengemas sebuah content video yang menarik minat pengunjung YouTube.  Dari kreasi video tersebutlah akun YouTube mereka dikunjungi oleh jutaan pengunjung, sehingga penghasilan dari iklan yang ada di YouTube pun mengalir ke rekening mereka.

Menurut Majalah bergengsi Forbes baru saja merilis beberapa bintang YouTube yang sukses menghasilkan uang terbanyak. Rata-rata mereka ini masih muda, baik pria maupun wanita. Berikut 10 daftar bintang YouTube tersebut;

10. Rosanna Pansino - USD 2,5 juta

Rosanna Pansino

Rosanna Pansino memiliki channel YouTube bernama Nerdy Nummies yang mengumpulkan 4,7 juta subscriber. Dia ini suka membuat konten resep masakan kue-kue dalam bentuk unik. Ternyata banyak yang suka dan membuatnya menghasilkan uang tak sedikit. Di kisaran USD 2,5 juta atau sekitar Rp 33,8 miliar.

9. Roman Atwood - USD 2,5 juta

Roman Atwood

Roman banyak memposting konten video tentang kejahilannya di akun Roman Atwood Prank.Channel itu berhasil mengumpulkan subscriber sekitar 7,5 juta. Memang aksi kejahilannya bikin penasaran, bahkan kadang cukup keterlaluan. Roman meraup uang dari video YouTube USD 2,5 juta atau sekitar 33,8 miliar.

8. Lilly Singh - USD 2,5 juta

Lilly Singh

Sama seperti nama yang disebut sebelumnya, Lilly juga meraup uang USD 2,5 juta berkat konten video menarik yang diciptakannya. Chanel Lilly memiliki 6,8 juta pelanggan. Ia konsisten membuat video dengan beragam tema, seperti persoalan yang dialami wanita sehari-hari.

7. Michelle Phan - USD 3 juta

Michelle Phan

Michelle yang baru berusia 27 tahun ini sudah memiliki lebih dari 7,5 juta subscriber di channel YouTube-nya. Dia banyak membuat video soal tips-tips penting, khususnya untuk wanita. Pendapatannya menurut Forbes USD 3 juta atau sekitar Rp 40 miliar.

6. KSI - USD 4,5 juta

KSI

Pria bernama asli Olajide Olatunji ini memiliki channel KSIOlajidebt yang memiliki sekitar 10 juta pelanggan. Di situ, Olajide memposting konten soal game, komentarnya terhadap fenomena terkini dan sebagainya. Tahun 2015 ini, diperkirakan ia meraup USD 4,5 juta atau sekitar Rp 60 miliar.

5. Rhett & Link - USD 4,5 juta

Rhett & Link

Rhett McLaughlin dan Charles Lincoln Neal III sebenarnya terhitung tua, umur mereka 37 tahun dan 38 tahun. Tapi mereka dikenal sangat kreatif membuat video sehingga digemari. Mereka sering membuat iklan lucu untuk perusahaan-perusahaan di YouTube dan dibayar tinggi. Total mereka meraup sekitar USD 4,5 juta atau Rp 60 miliar tahun ini. 

4. Lindsey Stirling - USD 6 juta

Lindsey Stirling

Musisi bernama Lindsey Stirling ini awalnya sukar menembus label rekaman sehingga memutuskan memakai YouTube saja untuk memamerkan karyanya. Pemain biola handal ini berhasil menggaet banyak pemirsa dan meraih pendapatan besar. Sampai USD 6 juta atau lebih dari Rp 81 miliar.

3. The Fine Brothers - USD 8,5 juta

The Fine Brothers

Benny dan Rafi Fine asal Brooklyn adalah penulis, produser, dan juga sutradara. Tak heran jika mereka banyak membuat konten video menarik di YouTube dan menggaet sponsor kelas kakap. Mereka diperkirakan menghasilkan sampai USD 8,5 juta dari YouTube, sekitar Rp 115 miliar.

2. Smosh - USD 8,5 juta

2. Smosh - USD 8,5 juta

Smosh adalah grup komedi yang terdiri dari dua bintang YouTube veteran, Ian Hexoc dan Anthony Padilla. Mereka termasuk yang pertama jadi terkenal berkat YouTube dengan berbagai video lucu kreasinya. Tahun ini, Smosh dikatakan memperoleh USD 8,5 juta atau sekitar Rp 115 miliar.

1. PewDiePie - USD 12 juta

PewDiePie

Pria bernama asli Felix Arvid Ulf Kjelberg ini sudah berulangkali dinobatkan sebagai orang terkaya dari hasil kreasi video di YouTube. Dengan nama online PewDiePie, ia banyak membuat konten soal permainan video game yang menarik. Tahun ini saja, lelaki asal Swedia yang tinggal di Inggris ini meraup USD 12 juta, sekitar Rp 162 miliar.

 inet.detik.com 

Dream, Pusat Informasi Islami, Mudah dan Menginspirasi

Dream, Pusat Informasi Islami, Mudah dan Menginspirasi

   Comment   

Dream (www.dream.co.id) adalah sebuah situs website yang menyajikan berbagai informasi yang lengkap dan terpercaya sehingga sangat membantu dalam penambahan wawasan bagi sipembaca yang suka membaca di media online. Kenapa demikian? karena Dream memiliki beberapa kelebihan yang mempermudah pembaca dalam mengakses situs Dream. Seperti apa kelebihannya, berikut ulasan singkatnya:

Cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah

Cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah

   1 comment   

Gambar Contoh Artikel terkait

Cara membuat slide artikel terkait atau cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah. atau kebanyakan sobat blogger menyebutnya dengan istilah cara membuat slide rekomendasi artikel terkait.

Yang di maksud dengan slide artikel terkait ini adalah ketika di pasang maka di pojok kanan bagian bawah halaman blog anda akan muncul kolom kecil dan kolom kecil tersebut sebagai widget artikel terkait.

Pun demikian, widget ini akan berjalan bila pengunjung atau pembaca artikel blog membuka posting atau membaca posting blog dan/atau tidak muncul pada halaman Home atau halaman lainnya terkecuali pada halaman posting.

Sistem kerjanya ialah dengan cara, ketika pembaca mengarah kebagian bawah (tarik ulur) dengan cursor maka akan muncul sebuah kotak yang berisikan Judul dan gambar thubnail posting blog yang berkaitan dengan artikel yang sedang dibaca oleh pengunjung. Namun ketika di gulirkan keatas lagi widgetnya artikel terkait tersebut dengan otomatis akan menghilang. 

Selain itu, sesuai dengan judulnya Artikel Terkait maka nanti yang keluar dalam slide artikel terkaitnya juga judul postingan yang masih terkait dengan postingan yang sedang di bukanya.

Dengan membuat widget artikel terkait ini, siapa tahu pengunjung akan merasa penasaran dengan posting yang berkaitan yang sedang dibacanya. Dan menurut saya juga akan lebih unik tampilan blog/website serta juga menambah petunjuk pengguna untuk melihat konten yang ada dalam blog atau website tersebut.

Oke, inilah cara buat artikel terkait di blog/web tentang panduan cara membuat Artikel Terkait Di Pojok Kanan Bawah.

Cara membuat Artikel Terkait Di Pojok Kanan Bawah:

1.tentunya anda harus membuka dulu blog anda bisa membuka melalui www.blogger.com

2.lalu login blog anda masing-masing

3.pergi dedashboard blog dan pilih template

4.lalu klik EDIT HTML 

5.dan cari kode di dalam html kode seperti ini ]]></b:skin>

6.selanjutnya kopi kode di bawah ini dan pastekan/letahkan di atas kode ]]></b:skin> 

#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:35px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-35px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}

7.cari lagi kode seperti ini </head>
8.dan kopi lagi kode yang ada di bawah ini lalu pastekan di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
<script>$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
  
$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);
  
    maximize.hide();
  
    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>

Keterangan :
kode di atas yang warna Ungu jika dalam html template anda sudah ada kode tersebut silahkan di hapus saja / pakai salah satu kode tersebut / jangan memasang dua (2) kode yang sama

9.   Cari lagi kode dalam Html kode seperti ini <div class='post-footer'> 

10. Copi lagi kode yang ada di bawah ini dan pastekan di bawah kode <div class='post-footer'>

<!-- Related Post with Sliding -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel ini</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZX1DDU9rrFXfcDTn7-VUpLwkcjceyZYDQSVRB4C-BWucMwYKrgJpknB85L47dH-60SIq_j8IyKB1PnDt0Xltm8OkhsPXb-dm5hPqXKZznjg6ZfWD-hvbIc3d2g8eKTnajpSXziLTD/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFi_vfVzKlL_V2RdJ4oFlKzjRZbeAeXMmhroNDnE1heR4iMgUbPK-Sa_9W57_bLgCvOGksKhnUX02t3JBBIzFqZinloTtZOgGswhe6ztTZTpzIWwGof5V9OV0JiJnWXpymGedNLZF/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyeYX-pjvGixg8tKDDrVkk8k6zStIXpogfKS1KZQfR0WofKbr3Ojppp-_zCAWwHxbHU6TB2BKiJZBH3y8_-LcKTjOhRgN94l_pqWU-hHAQuGYfCjWGkeBmyx5IDoE9g2Qt5MLGrY0/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 3,
      summaryLength: 35,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle:2,
      callBack: function() {}
  };
  </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>       
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->

Keterangan :

Tulisan warna biru dalam kode di atas bisa di ganti dengan tulisan sesuka anda 

11. Selanjutnya simpan template nya

12. Dan selesai, serta lihat hasilnya..

Demikian panduannya sobat blogger semoga tutorial tentang Cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah memberikan mamfaat untuk semua dan sesama teman blogger lainnya.

Salam Blogger..

Cara Membuat Scroll Bar (tarik ulur) Di Postingan Blog

Cara Membuat Scroll Bar (tarik ulur) Di Postingan Blog

   Comment   

Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi serta fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat atau bisa juga dibilang untuk mengefisienkan tempat atau halaman blog sehingga tidak terlalu panjang kebawah. Intinya tampilan posting blog kita jadi singkat dan dinamis.

Cara Membuat scroll bar (tarik ulur) di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode HTML (bukan Compose) di bagian posting blog.

Contoh Scroll Bar (tarik Ulur)..

Belum usai pro dan kontra selfie dengan bayi orangutan (baca di sini), Raline Shah mengunggah foto dirinya tengah duduk manis di atas seekor buaya besar.

Tampak, Raline duduk menyamping dengan bertopang pada tangan kiri, kedua kakinya naik di atas punggung sang buaya. Sementara, jari tangan kanan Raline membentuk simbol V. Wajah cantik bintang film "99 Cahaya di Langit Eropa" itu berpose ala duck face.

Buaya yang sekilas terlihat buas dan mengerikan itu ternyata jinak. Usia reptil bertubuh besar yang hidup di air itu disebut salah satu follower, sangat tua. Saking tuanya, buaya itu ompong.

Jika sobat tertarik menggunakannya silahkan copy/paste scrip dibawah ini pada Halaman Entri baru dengan mode HTML (bukan Compose).

<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width:400px;">

Letakan Tulisan / Kode HTML Sobat Disini

</div>

Setelah meletakan kode HTML di atas pada halaman edit HTML, sobat bisa melakukan pengecekan pada halaman Compose.

Keterangan :

100px : Kode untuk mengatur tinggi pada kolom scroll.

400px : Kode untuk mengatur lebar pada kolom scroll.

Demikian artikel Tutorial tentang Cara Membuat Scroll Bar Di Postingan Blog. Semoga bermanfaat bagi sobat blogger. Jika ada yang kurang jelas silahkan berkomentar di kolom komentar dibawah ini.

Salam Blogger

Cara Parserkan HTML to XML

Cara Parserkan HTML to XML

   Comment   

F ungsi dari Parse HTML ini  ialah untuk mengubah ke dalam bentuk XML (script yang dijinakkan) agar bisa ditempatkan didalam templat blog (Script Iklan Google Adsense dan lainnya) dan juga untuk memposting kode script.

Parser Adsense ini / bekerja mengubah atau mengalih secara manual kode uraian HTML (adsense) Anda ke format XML. Alat ini sangat mudah dan akurat mengubah atau mengalih uraian bebas kode HTML apapun. 

Bagaimana cara menggunakannya? 

1. Memasukkan kode HTML ke atas kotak kode parse.
2. Tekan tombol Parse Script, Maka secara otomatis akan terurai dalam format XML.
3. Anda hanya menyalin dan kemudian ambil dan copas kode HTML yang sudah di parser menjadi XML tersebut untuk ditempatkan didalam template blog atau memunculkan script HTML dalam posting blog Anda.

Parse HTML to XML klick Disini

Cara Menampilkan Salah Satu Widget Blog Di Halaman Tertentu

Cara Menampilkan Salah Satu Widget Blog Di Halaman Tertentu

   1 comment   

Contoh Peletakan Script yang dikolom merah

Kita sering mengunjungi blog seseorang. Kan tetapi terkadang membuat kita bertanya, "Kenapa Ya tampilan Widget/Gadgetnya berbeda-beda setiap halamannya. 

Misalnya di Halaman Home ada gadget Popular Post akan tetapi begitu kita kunjungi halaman postingnya, malah Widget Popular Postnya hilang. Kok bisa? Makhluk apa yang sembunyikan Widget blog tersebut.

Sebenarnya pemilik blog tersebut, tidak memelihara makhluk - makhluk yang bertugas untuk sembunyi/menampilkan Widget. Akan tetapi ada sebuah script atau kode bahasa program yang tunduk dan patuh pada admin blog. Kala admin memerintahkan sembunyi/tampilkan maka script atau kode bahasa program tersebut akan bertugas sesuai dengan perintah tuan admin blog.

Nah, tanpa panjang muqaddimah, berikut script atau kode bahasa program yang tunduk dan patuh pada Mr. Admin Blog...

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

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

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

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

6. Menampilkan widget di semua halaman, kecuali halaman posting.

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

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

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

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if> 

Catatan :

Sedikit himbauan bahwa penempatan script atau kode bahasa program yang tunduk dan patuh pada Mr. Admin Blog tersebut diletakkan pada bagian titik (....................................)

Berikut Cara pemasangn scriptnya

Coba anda menuju Bongkahan Ilmu. Di halaman depan Widget Posting Terbaru tidak muncul. Lalu di halaman (selain Home) ketika klik sebuah artikel, maka Widget Posting Terbaru muncul.

Menampilkan Widget Tertentu Di Halaman Tertentu

1. Tentunya anda harus buka akun blog anda sendiri.

2. Masuklah ke Elemen Template. Lalu klik Edit HTML

3. Carilah widget yang anda sembunyikan (sebelumnya anda sudah memasang widget di dalam blog anda).

4. Misalnya Widget Fan Facebook. Silahkan cari tulisan "Fan Facebook" (gunakan Ctrl + F untuk mencari secara cepat)

5. Setelah ketemu, maka akan muncul kode persis seperti dibawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>

6. Selanjutnya tambahkan kode

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

sebelum kode

<!-- only display title if it's non-empty --> 

7. Setelah ditambahkan lalu masukkan kode </b:if> sebelum kode

</b:includable> 
</b:widget>

8. Maka hasilnya akan persis seperti di bawah ini.

<b:widget id='HTML4' locked='false' title='Posting Terbaru' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>

9. Selesai. Simpan Template blog anda.

Ilustras

Catatan :   Huruf yang berwarna biru adalah Kode yang ditambahkan. Ingat satuhal, penempatannya jangan salah yah. Harus pas. Kalao gak pas, maka eror. Untuk mengantisipasinya, sebaiknya sebelum memulai langkahlangkah di atas, Simpan Template Blog anda terlebih dahulu.

Nah itulah cara  Menampilkan Widget Tertentu Di Halaman Tertentu dengan menggunakan script atau kode bahasa program yang tunduk dan patuh pada Mr. Admin Blog. 

Semoga bisa dipergunakan sebaik mungkin. Salam blogger semoga bermanfaat dan selamat mencoba.

Cara Pasang Kolom Komentar Facebook Responsive

Cara Pasang Kolom Komentar Facebook Responsive

   Comment   

Memasang kolom comment Facebook di blog sangatlah mudah, Karena facebook sendiri sudah menyediakan plugin comment yang dapat kita pasang di blog kita. Namun plugin Comment Facebook tersebut masih bawaan (Standar) yang tidak responsive terhadap template blog Anda.

Bagaimana cara membuat Kolom Komentar Facebook dari tidak responsive menjadi responsive? Berikut cara-cara yang harus dilakukan!

1. Pertama pergi ke editor template , lalu pasang meta content berikut dibawah kode <head>

<meta content='FB Profile ID' property='fb:admins'/> <meta content='App ID' property='fb:app_id'/>

2. Kemudian cari kode </head> (gunakan Ctrl+F untuk memudahkan) Copy-Paste kode berikut di atas atau sebelum kode </head>

<script type="text/javascript"> //<![CDATA[ $(window).bind("load resize", function(){ var url = location.protocol+'//'+location.host+location.pathname; var containercm_width = $('#container-commentfb').width(); $('#container-commentfb').html('<div class="fb-comments" ' + 'data-href="'+url+'"' + ' width="' + containercm_width + '" data-num-posts="10"></div>'); FB.XFBML.parse( ); }); //]]> </script>

3. Selanjutnya pasang html berikut tepat dibawah <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='500'/></div> </b:if>


4. Langkah Terkahir Simpan Template dan Lihat Hasilnya

Nah mudahkan, Cara Membuat atau Memasang Kotak Komentar Facebook Responsive di Blog ? pastinya mudah dong , karena tutor diatas cukup jelas untuk menerapkan komentar responsive facebook di blog , hehhehe , namun jika masih kesulitan silahkan tanya dengan berkomentar dibawah

Cara Membuat Kolom Komentar Facebook dan Google Plus di Blogspot

Cara Membuat Kolom Komentar Facebook dan Google Plus di Blogspot

   Comment   

Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog.

Tidak cukup hanya dengan tampilan, akan tetapi berbagai fitur lainnya pun juga ditambahkan agar blog yang dimilikinya benar-benar cantik serta mempunyai kolom komentar baik kolom komentar melalui Facebook dan juga melalui akun Google Plus.

Namun demikian, bagaimana cara membuat, kolom komentar Facebook dan Google Puls berdampingan? Nah sekarang simak ulasan singkat tentang tutorial cara membuat kolom komentar Facebook dan Google Puls berdampingan.

Ikuti langkah-langkah yang harus dilakukan adalah sebagai berikut:1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.

2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML

3. Cari Kode : <div class='comments' id='comments'>

4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <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'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='500'/></div> </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='IDFANPAGEFACEBOOK' 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>

5. Apabila sudah selesai, Simpanlah Template Blog anda. 

6. Lihat hasilnya.

Catatan:

• Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya.
• Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman FacebookAnda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx
• Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
• Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
• Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.