Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Sabtu, 23 November 2013

Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog

Hay sahabat Mazinu? hari ini mazinu akan posting tentang Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan/Berdekatan/Bersampingan di bawah Posting Blog. Dengan cara seperti ini, Tampilan kotak komentar kalian akan lebih menarik dan pengunjung blog juga bisa memilih mau komentar di facebook / di Komentar blogger. Sahabat mazinu ingin tahu caranya bukan??.,,
Yang hasilnya nanti seperti ini :


Berikut mazinu akan memberikan tutorialnya :
  • Login ke account blogger kalian.
  • Klik rancangan lalu klik: Edit HTML.
  • Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan.
  • Beri centang kotak kecil yang bertuliskan: Expand Template Widget.
  • Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian).
  • Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

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

 Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

 Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments. (pakai cara ini jika cara yang diatas gagal, tapi kebanyakan dengan cara diatas berhasil. tenang saja!)
  • Kemudian Sobat cari kode </head>
  • Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>

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

Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook kalian, misalkan https://www.facebook.com/nama kalian maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika belum merubah ID Kalian maka yang tertera adalah berupa angka. Contohnya seperti ini: https://www.facebook.com/1234567890 
  • Kemudian cari kode  <div class=comments id=comments>
Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class=comments id=comments>.

    <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>

Perhatikan: Pada penempatan kode yang ke dua, silahkan hapus kode yang berwarna biru! yang <div class=comments comments-page id=blogger-comments-page> apabila kode di bawahnya sama.

Perhatikan angka yang berwarna merah dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Kalian dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template agar kelihatan rapi. Tapi mazinu tidak memasang Widget ini karena kekurangannya tidak ada pemberitahuan pada mazinu pasa saat ada yang berkomentar di Kotak Komentar Facebook,, tapi pada Komentar Blogger tetep ada pemberiatuannya kok! Nyantai saja,, Kalau ingin tampilan Blog kalian bagus kenapa harus takut memasang. Oke?

Kemudian klik save template, dan lihat hasilnya.
Apabila masih ragu, silahkan tuliskan dikotak komentar dibawah ini! semoga Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog bermanfaat buat kalian.

Read More..
Diposting oleh di Tidak ada komentar:
Label: , , , , , , , , , , ,

Kamis, 07 November 2013

Membuat kotak dialog setelah blog dimatikan

1. Pertama-tama Log In terlebih dahulu ke Account Blogger Anda.
2. Setelah itu klik Tata Letak > Edit Halaman.
3. Kemudian copy kode di bawah ini tepat di bawah kode </head>

<script type=text/javascript>
// goodbye alert
function goodbye(){
alert(&#39;Hayooo.... mau kemana! He..he..he.. O ya terima kasih atas kunjungannya! Lain kali kalau ada waktu luang jangan lupa main ke sini lagi ya!&#39;);
}
parent.window.onunload=goodbye;
</script>

4. Untuk kode yang berwana Hijau, Anda bisa menggantinya dengan kata-kata yang sesuai dengan yang Anda inginkan.
5. Lalu simpan dan lihat hasilnya.
Read More..
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Kamis, 24 Oktober 2013

Cara Mudah Membuat Salam Pembuka Pada Blog



http://.blogspot.com Selamat pagi sahabat semua...jumpa lagi di Blog Sederhana ! ini,, kali ini saya akan berbagi Tips Trik Bagaimana Cara Mudah Membuat Salam Pembuka Pada Blog....
Langsung aja Ikuti  Tips Trik nya Dibawah ini....

1. Login ke Blogger

2. Masuk ke Tata Letak ==> Element halaman

3. Tambah Gedget ==> HTML/JavaScript

4. Copy code berikut dan pastekan kedalamnya


<script type=text/javascript>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("Salam Kenal Ya "+name)
alert("Selamat Browsing ")
</script>


5. Text yang berwarna biru bisa anda ganti dengan text yang anda inginkan
6.Simpan dan lihat hasilnya

Selamat mencoba.....!!!Semoga bermanfaat...................
Read More..
Diposting oleh di Tidak ada komentar:
Label: , , , , , ,

Cara Mudah Mengatur Jarak Spasi Judul Posting Blog Pada Halaman Label Blog


Cara Mengatur Jarak Spasi Judul Posting Blog Pada Halaman Label Blog   - Pada posting ini Ahyar Blog akan memperkenalkan cara untuk memudahkan pengunjung blog mengetahui artikel-artikel yang ada dalam blog. Tips ini barusan Ahyar Blog dapat dari hasil utak atik kode template blog sendiri. Tips ini merupakan salah satu cara dari beberapa metode untuk menampilkan judul posting blog. Cara ini dikenal dengan istilah Label. Fungsi Label blog hampir sama dengan manfaat daftar isi blog yang dibuat dari gadget HTML/Javascript blog. Akan tetapi kedua metode ini mempunyai perbedaan yaitu kalau pada daftar isi, apabila mengklick teks yang sudah ditetapkan sebagai teks Url judul posting maka yang akan muncul adalah halaman posting sesuai judul teks url tersebut. Sedangkan pada Label apabila mengklick teks yang sudah ditetapkan sebagai label blog maka yang akan muncul adalah semua label yang ditetapkan sama akan tampil pada satu halaman sesuai jumlah  judul posting yang ditetapkan dengan label yang sama.

Cara membuat label blog yaitu dengan menulis teks pada text box label yang berada pada bagian kiri bawah halaman posting blog. Satu nama label dapat ditetapkan lebih dari satu judul posting blog. Untuk lebih jelasnya tampilan label perhatikan gambar di bawah ini yang merupakan tampilan beberapa judul posting dari satu jenis label blog

 

Sedangkan pengaturan jarak spasi judul posting label blog, bloger harus melakukan tahapan pertama yaitu membuat atau menambah kode pada template untuk dapat menampilkan hanya judul posting saja pada halaman label blog dengan mengikuti artikelnya di sini.
Cara pengaturan jarak spasi judul posting blog pada label blog dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:

1. Sign in di blog

2. Klick Rancangan

3. Klick Edit HTML

5. Download Template Lengkap bila diperlukan

6. Cari kode di bawah ini.

.date-outer {
  position: relative;
  margin: $(date.space) 0 10px;
  padding: 0 7px;

Catatan:

Ganti angka berwarna kuning sesuai dengan jarak yang diinginkan
7. Cari lagi kode berikut ini

post-outer {
  padding-bottom: 10px;
}

8. Ganti angka 10 kode kedua sesuai dengan angka 10 yang dirubah pada kode pertama 

9. Klick Simpan template untuk menyimpan perubahan

10. Klick lihat blog untuk melihat hasilnya.

Selamat mencoba..
Semoga bermanfaat
Read More..
Diposting oleh di Tidak ada komentar:
Label: , , , , , , , , , ,
Langganan: Postingan (Atom)