::

Navbar Bawah

Search This Blog

Showing posts with label widget blog keren. Show all posts
Showing posts with label widget blog keren. Show all posts

Friday, 12 July 2013

Cara Membuat Like Box Facebook Tersembunyi di Sisi Blog

Hallo sobat blogger! Bagaimana keadaan kamu-kamu disana? Semoga semua hal baik dan rukun. Pada kesempatan saya kali ini saya akan share tutorial Facebook yang patut kita terapkan pada blog kita, yaitu Memasang Like Box Facebook di Samping Layar Blog. Cara ini bisa di kategorikan mempromosikan suatu fanspage lewat web atau blog. Khususnya untuk fanspage blog itu sendiri, tujuan utama yang penting adalah membuat fanspage facebook suatu blog akan mendapatkan like tanpa promosi dari suatu website ke website lainnya. Apalagi dilengkapi dengan icon Facebook yang terkesan efektif dan fungsi roll jika kita sentuh. Berikut Memasang Like Box Facebook di Samping Layar Blog:

Read More --►
Labels: , ,

Situs - Situs Penyedia Widget Blog Gratis Terbaru

Read More --►
Labels: , , , ,

Thursday, 11 July 2013

Cara Membuat Widget Random Post Keren di Blog New

Cara Membuat Widget Random Posts Keren di Blog
Hallo Sobat Blogger Semuanya, Kali ini  Saia Akan Mmembahas Tentang Widget Random Post, Widget Random Posts ini adalah widget untuk menampilkan posting-posting pada Blog sobat secara acak dan berbeda pada setiap penayangannya. Namun kali ini saya akan berbagi tentang Cara Membuat Widget Random Posts Keren di Blog yang tentunya berbeda dalam hal tampilan dengan widget random posts yang sebelumnya.
Untuk tampilan pada widget random posts sebelumnya sangat minimalis, hanya menampilkan Title Posting saja. Namun untuk Widget yang akan kita bahas kali ini terlihat lebih menarik. Widget Random Posts ini selain menampilkan Title Posting, juga menampilkan Tumbnail (Gambar ukuran
Read More --►
Labels: ,

Cara Memasang Kotak Komentar Blogger, Facebook dan Twitter di blog dalam satu kotak (berdampingan) (3 in 1)

Cara Memasang Kotak Komentar Blogger, Facebook dan Twitter di blog dalam satu kotak (berdampingan) (3 in 1)
by
  Cyberbintauna

بسم الله الرحمن الرحيم

 

Terima kasih buat sobat semua yang telah berkunjung pada blog yang sederhana ini, kali ini saya menulis artikel yang berjudul Cara Memasang Kotak Komentar Blogger, Facebook dan Twitter di blog dalam satu kotak (berdampingan) (3 in 1). Facebook dan twitter adalah jejaring sosial yang amat di minati masyarakat dunia, akan saat bermanfaat sekali jika sekirannya komentar blog kita juga bisa buat pengguna facebook dan twitter, ini sangat membantu dalam kemajuan blog kita.  Dan tentunya tampilan blog kita lebih menarik.
Untuk mengaktifkan fitur ini, sebelumnya kita harus mempunyai API KEY yang bisa didapatkan setelah membuat applikasi twitter. , masuk ke akun twitter lalu buat aplikasi baru di sini (Mudah, hanya tinggal ikuti langkah"nya). Sedangkan untuk mengaktifkan fitur komentar facebook, kita tidak harus mempunyai APP ID. Walaupun begitu, supaya kita bisa memoderasi komentar dan mendapatkan pemberitahuan setiap ada komentar baru, kita harus memiliki APP ID yang bisa didapatkan setelah kita membuat aplikasi facebook di sini (Mudah, hanya tinggal ikuti langkah"nya). Tutorial Pemasangan:
  1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Ceklis 'Expand Template Widget'
  2. Tekan tombol Ctrl+F lalu cari kode <head>
  3. Masukkan kode berikut tepat di bawah kode <head>:
<meta content='Profile_ID' property='fb:admins'/> 
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>
4. Perhatikan kode berwarna merah:

  • Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar). Jika alamat profil Paman adalah www.facebook.com/RioAnderta, maka ID profil  adalah RioAnderta
  • Ganti tulisan App_ID dengan ID Aplikasi facebook kita
  • Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat
5. Berikutnya, cari kode class='comments'
6. Masukkan kode berikut tepat di bawah kode class='comments'
<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</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='10' width='400'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
7. Perhatikan kode berwarna merah:
  • Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
  • Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
  • Kita bisa mengganti angka 400 dengan ukuran lebar kotak komentar yang diinginkan
8. save template sobat, selesai
9. Selamat mencoba, semoga berhasil, semoga bermanfaat...!

Read More --►
Labels: , , ,

Wednesday, 10 July 2013

Membuat Tag / Permalink di Blogger Blogspot

Saya berani bilang,permalink blogger yang akan kita ciptakan sendiri ini sangat seo friendly.
Percayalah!

Jika wordpress sudah menyediakan tag,lain halnya dengan blogger.
Meskipun platform blogspot tidak menyediakan fitur tag,namun fitur label pada blogger sudah dapat mewakili selayaknya tag pada blog wordpress.

Hanya saja,url yang dihasilkan dari label blogspot,belum dapat dibaca search engine alias belum begitu seo friendly.

Membuat Permalink / Tag Sendiri(manual) pada Blogger


Saya berani bilang,permalink blogger yang akan kita ciptakan sendiri ini sangat seo friendly.
Percayalah!

Seperti yang anda lihat pada blog ini,setiap anda membuka suatu posting,diakhir posting akan tertera permalink yang mampu dibaca oleh mesin pencari,Google pada khususnya.

Yup!Tulisan 'Anda sedang membaca artikel tentang..dst' adalah permalink yang saya ciptakan sengaja untuk mendongkrak postingan di posisi serp.

Berminat untuk membuat seperti itu?

Langkah Cara Membuat Permalink Tag Otomatis untuk Blogger Blogspot

  • Pertama,pergilah ke Dashboard blogger anda,selanjutnya pilih Tata Letak dan kemudian pilih tab Edit HTML.

    Pelajaran Blog Membuat Permalink Blogger


  • Seperti biasa,jangan lupa contreng tulisan Expand Widget Templates ya :D

    Pelajaran Blog Membuat Tag Otomatis Blogger


  • Berikutnya,cari kode ]]></b:skin> (gunakan Ctrl+F untuk membantu pencarian),setelah ketemu kode tersebut,persis diatasnya letakkan kode css berikut :
    .membuatpermalinkblogger
    {border: 1px solid #EFF0F1;
    padding: 5px;
    background: #ffffff;-moz-border-radius:5px;}

    .membuatpermalinkblogger a
    {background:none;}
    img.float-right {margin: 5px 0px 0 10px;}
    img.float-left {margin: 5px 10px 0 0px;}

  • Selanjutnya,cari kode berikut:
    <data:post.body/> atau <p><data:post.body/></p>
    Jika sudah ketemu,hapus kode tersebut dan gantilah dengan kode berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p><data:post.body/></p>
    <div class='membuatpermalinkblogger'>
    <center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div>
    <b:else/>
    <p><data:post.body/></p>
    </b:if>
  • Lalu simpan Templates,selesai :D


Bagaimana jika saya menemukan dua(2)kode <data:post.body/>,misal karena saya telah membuat read more/baca selengkapnya?

Memang,setelah anda merubah template menambahkan fasilitas read more,akan ada 2 kode <data:post.body/>,seperti ini:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
Betul tidak,ada dua kode ? solusinya,tinggal menyelipkan kode permalink diatas diantaranya,jadi kira-kira kodenya akan menjadi seperti ini:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<div class='membuatpermalinkblogger'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
Lalu simpan templates dan lihat hasilnya.

Permalink blogger ini hanya akan terlihat saat anda membuka suatu posting bukan halaman utama blog anda.

Selamat mencoba dan bereksperiment sendiri ya,Good Luck!

Read More --►
Labels: ,

Thursday, 2 December 2010

Cara Menghilangkan Navbar Blogger

Cara Menghilangkan Navbar Blogger

Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.


Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa juga menaruh kode berikut persis di bawah kode <body> :


<style type='text/css'>
#navbar-iframe {display:none;}
</style>


Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :



  • Untuk template klasik


    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
    5. Copy kode berikut lalu paste di atas kode </style>
      6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    6. Klik tombol Simpan Perubahan Template
    7. Selesai.


  • Untuk template baru


    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
      6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    6. Klik tombol Simpan Template
    7. Selesai.
    Selamat menikmati blog tanpa navbar !

    Read More --►
    Labels: ,
    Subscribe to: Posts ( Atom )