Cara membuat popular post bergerak

Cara membuat popular post bergerak. Sebenarnya cara membuat popular post memang sudah disediakan oleh blogger, akan tetapi tidak dapat bergerak seperti yang ada di beberapa blog. Itu sebabnya di sini akan dijelaskan mengenai cara membuat popular posts bergerak agar supaya penampilan blog lebih menarik. Berikut langkah-langkah membuat popular post bergerak:

1. Login blogspot >> klik Desain >> klik Tata Letak/Layout. Lihat gambar di bawah ini:

2 Klik Tambah Widget atau Add a Gadget,

3. Pilih Popular Posts Add atau Entri Popular,

4. Save/Simpan.

5. Apabila Gadget sudah terpasang selanjutnya melakukan modifikasi HTML. Caranya, klik Edit HTML, jangan lupa centang Expand widget. Kemudian cari kode ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

 6. Letakkan kode di bawah ini setelah kode diatas:

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

7. Cari kode: </ul> yang terletak di bawahnya. Kemudian, letakkan kode di bawah ini tepat sebelum kode tersebut:

 </marquee>

 Maka, kode HTML akan menjadi seperti berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

Jika hendak menggantikan tinggi gadget, silakan ganti kode bercetak tebal/bold di atas. Selanjutnya, klik Privew/Pratinjau terlebih dahulu dan klik Simpan/Save jika telah sempurna. Selamat mencoba dan enjoy with

Read More

Cara Membuat Fanspage Melayang Di Blog

Inilah Memasang Widget Like Box Facebook Melayang di Blog - Widget Fans Page Facebook akan muncul ketika mouse di arahkan ke kotak Widget itu dan tidak perlu menutup kotak widget (tanpa tombol Close).

Tujuan Memasang Widget Like Box Facebook Melayang di Blog
Pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog adalah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola dengan memberikan jempolnya, sehingga halaman halaman facebook yang anda kelola semakin banyak. Kelebihan lain dari Widget ini dilengkapi dengan tombol close sehingga pengunjung bisa dengan mudah menutup Kotak Widget ini dan walau pun agak sedikit mengganggu pengunjung tapi masih bisa menutupnya tanpa susah payah.

Penasaran ingin Memasang Widget Like Box Facebook Melayang di Blog anda? Ikuti langkah-langkah dibawah ini.

Inilah Memasang Widget Like Box Facebook Melayang di Blog

1. Syarat utama : Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu.  Setelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
4. Lalu pilih HTML/Jawascript
5. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-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;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/pages/Mas-Raghiel/100468456804350?ref=hl" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

6. Simpat Widget/Gadget Baru yang anda buat tersebut.
7. Lihat hasilnya.

Perlu diperhatikan :
1. Tulisan berwarna Merah adalah Kode Script dari masraghiel. Silahkan anda ganti Kode Script tersebut dengan Kode Script dari Halaman Facebook Anda.
2. Bila tidak berhasil, coba ulang dari awal.
3. Mohon Halaman Facebook Bos Tutorial di Like juga yah

Read More

Cara agar postingan blog otomatis terupdate ke facebook fanpage

Cara agar postingan blog otomatis terupdate ke facebook fanpage - Mungkin cara ini sudah banyak di bahas di blog blog lain sob, tapi saya akan posting tentang artikel ini untuk kalian yang belum tau.

Supaya poting blog kita dapat langsung terupdate ke fanpage facebook,kita dapat memanfaatkan rss grafiti,ok caranya adalah sebagai berikut

1. Login ke facebook sobat
2. Kalau belum punya fanpage,Buat Fanpage facebook dulu ya
3. Lalu pergi ke alamat ini https://apps.facebook.com/rssgraffiti/ kalau susah nyarinya,ketik saja di pencarian teman,nanti juga muncul
4. Kalau sudah kan masuk ke RSS Grafiti beta tuh klik saja add new publishing plan, lalu ketikan nama publishing plan sobat disitu, contoh alls in one21 lalu klik create.
5. sekarang klik judul yang sudah kita buat
6. pada tab Max Posts Per Update,ganti angka 0 menjadi 33,maksimalin aja deh,kn Max Posts Per Update tuh 33,trus ok
7. Lalu klik pada add new di source lihat gambar.

8. Lalu masukkan alamat rssfeedburner sobat contoh rssfeed blog saya yang http://rzshare21.blogspot.com/feeds/posts/default, ubah saja yang berwarna dengan alamat blog sobat, tapi pastikan terlebih dulu rssfeed sobat telah aktif

9. lalu klik Add Source
10. Kalau sudah pasti muncul setting,pada tab Update Frequency ganti dengan as son as possible biar langsung terupdate postingan agan,pada tab Maximum Posts per Update ganti dengan yang tadi 33 kalau sudah save
11. Nah kan muncul tuh alamat source webnya,sekarang tinggal nentuin targetnya saja,kalau belum ditentuin targetnya,dia masih belum bisa update otomatis gan,pada target langsung klik add new.

12. Muncul deh kolom,tinggal sobat pilih deh target sobat selanjutnya,pilih fanpage yang sudah sobat buat,kalau sudah klik save change.

13. Kalau tulisannya masih off, ya kita on kan saja gan
14. Beres dah,tinggal nunggu saja,nggak sampai 24 jam kok,semua posting blog akan langsung terupdate otomatis ke fanpage facebook sobat

Read More

Cara Membuat Template Kosong Atau Blank Template Di Blogger

Kode template Blogger mulai dikembangkan oleh konsorsium dunia Wide Web semenjak tanggal 26 Januari 2000. Mereka bekerja keras merangkai setiap kode sehingga menjadi sebuah template yang indah seperti yang sering sobat blogger lihat. Tidak hanya itu, template yang mereka buat pun dapat kita kustumisasi sesuai dengan yang kita inginkan dengan mudah. Sekarang, kita akan hancurkan hasil kerja keras mereka. Kita akan membuang semua kode template yang telah mereka buat dan menggantinya dengan kode template yang baru sehingga terbentuk template kosong atau blank template.

Blank Template bisa dijadikan sebuah sarana untuk belajar membuat template, belajar bahasa HTML, Cascading Style Sheet dan kode yang lainnya. Contoh perubahan template blogger menjadi Blank template bisa di lihat pada gambar di atas.

Cara Membuat Template Kosong Di Blogger

• Login di Blogger
• Pilih Template Dan Edit HTML
• Block semua kode (Gunakan CTRL + A) kemudian  hapus semua kode yang terdapat di dalamnya.
• Setelah di hapus, ganti dengan kode di bawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>Blogger Blank Template</title>
<b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:400px; '>
<!--Jangan hapus kredit di bawah ini-->
<center><p><a href='http://www.tutorialblogspot.com'>Tutorial Blogspot </a>&#169; 2013.</p></center>
</div>
</body></html>

• Simpan Template sobat dan lihat hasilnya.

Ketika anda mengunjungi Tab Tata Letak atau Tab Layout Blogger, maka anda tidak akan melihat kolom widget, kolom post editor dan kolom Navbar, semua akan hilang kecuali kolom Favicon.

Read More

Ngeblog Terganggu Akibat Jaringan Lelet

Jaringan internet yang lelet, membuat aktivitas blogging saya terganggu. Tidak ada yang bisa saya lakukan kecuali sabar dan terus mencoba menulis artikel. Seharusnya, Jaringan internet tidak lelet ketika berada di antara jam satu malam sampai jam tujuh pagi, karena pada waktu yang disebutkan, hanya sedikit pengguna internet yang aktif atau online. Mungkin, Jaringan telkom yang saya gunakan sebagai jaringan internet lagi Maintance.

Karena gangguan internet ini, muncul pesan "Terjadi kesalahan saat mencoba menyimpan atau memublikasikan pos Anda. Coba lagi. Abaikan Peringatan". Peringatan ini muncul di bagian atas Post Editor dengan warna Background Pink. Saat saya menyimpan artikel yang sudah saya tulis, pesan itu muncul lagi. Hal ini terjadi berulang-ulang atau terus menerus.

Foto Ilustrasi

Artikel blog tidak bisa disimpan dan tidak bisa juga dipublikasikan. Jadi, saya coba melakukan Pratinjau atau Preview artikel yang sudah saya tulis. Namun, apa yang terjadi? Lagi-lagi pesan kesalahan muncul. Kali ini bertuliskan "Pratinjau Anda gagal dimuat. Tutup jendela ini dan coba lagi"

Read More

Cara Menampilkan Judul Posting Saja Di Homepage Atau Beranda Blogger

Cara Menampilkan Judul Posting Saja Di Homepage / Beranda Blogger- Banyak cara yang dilakukan oleh blogger untuk memodifikasi laman Home (Beranda) diantaranya :

1. Menyembunyikan Widget atau Sidebar di laman Home
2. Hanya menampilkan Gambar di laman Home
3. Laman Beranda hanya berisi Kotak Pencarian atau ucapan selamat datang
4. Laman beranda hanya berisi judul posting (Penggalan posting yang menggunakan fitur Read More di sembunyikan)
5. Hanya menampilkan Daftar Isi (Table of Content) pada Halaman utama

Nah... Diantara kelima point di atas, hari ini saya akan memberitahu kalian tentang point keempat yaitu tentang bagaimana cara menampilkan judul posting saja pada laman home. Apa mamfaat jika kita menerapkan metode ini? Mamfaat yang kita peroleh adalah :

1. Loading Blog lebih gesit
2. Tampilan blog lebih bersih
3. dan pengelolaan blog terlihat lebih professional.

Cara menampilkan judul post saja di homepage blogger

• Login ke Blogger.com
• Pilih menu template
• Klik Edit HTML
• Cari kode </head>
• Letak kode berikut di atas </head>

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#33AAFF;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#33AAFF;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

• Terakhir, simpan template kalian.

Jika posting ini bermamfaat buat kalian, jangan lupa di share ke Facebook atau jejaring sosial Google Plus. Sebelum dan sesudahnya saya ucapkan banyak terima kasih.

Read More

Cara Merubah Warna Scroll Bar

Cara Merubah Warna Scroll bar-Tidak hanya tampilan blog yang kita bisa modifikasi melalui kode HTML template kita, namun warna scroll bar dari media browser yang kita gunakan pun bisa kita modifikasi warnanya, dari warna standar ke warna yang kita sukai. Kode untuk merubah warna Scroll Bar adalah kode CSS (Cascading Style Sheets).

Sebelum Anda menerapkan tutorial ini, sebaiknya Anda menggunakan media browser (Firefox, Chrome, internet Explorer) yang terupdate karena tutorial ini tidak bekerja dengan baik pada media browser yang lawas.

Cara Memodifikasi Warna Scroll Bar

• Kunjungi laman Dashboard blogger
• Klik Template dan Edit HTML
• Cari kode ]]></b:skin>
• Setelah menemukan kode ]]></b:skin> letakkan kode berikut diatasnya :

/* tutorialblogspot.com scrollbar effect */
::-webkit-scrollbar {
width:14px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#eee;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(116,188,99,0.5);

• Simpan template Anda.

Catatan penting :

1. Ganti #eee dengan kode warna yang Anda inginkan. 
2. untuk mengganti lebar Scroll Bar, rubah angka berikut 14px dan 8px

Read More