Cara Membuat Posting Terbaru Recent Post Thumbnail Gambar Bergerak

Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog Demo Kucopas, silahkan sobat ikuti langkah-langkahnya sebagai berikut.

Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog

  1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> Ke Blogger.com menggunakan akun sobat.
  2. Pada Dashboard tampilan blogger baru, pilih dan klik Menu >> Tata Letak >> pilih dan klik >> Tambah Gadget >> pilih dan klik tanda + pada >> HTML/JavaScript.
  3. Kemudian silahkan sobat masukkan semua Kode Script berikut ke dalam kotak HTML/JavaScript.
  4. <div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div>
  5. numposts = 10 adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat. var speed = 400;
    var pause = 3500; adalah kecepatan scroll, spy atau slide dalam milisecond (ms), silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.

CARA MEMBUAT NOMOR ANGKA PADA HALAMAN BLOG

Membuat nomor halaman blog sebenarnya sudah banyak sekali artikel tersebut tapi biar saya mudah mencarinya suatu ketika jika saya butuhkan saya coba buat dan tulis ulang diblog ini, sebenarnya tidak terlalu rumit bagi sobat yang ingin menerapkan di blog sobat. Berikut Cara Cepat membuat nomor halaman di blog..!! bagi yang belum tau maksud navigasi nomornya seperti gambar dibawah ini

Cara Cepat membuat nomor halaman di blog

Cara Membuat 3 Tab View Kolom DALAM 1 WIDGET



1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript.

2.  Pastekan kode dibawah ini

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">

<div class="Page">
<div class="Pad">
Konten dari Tab 1
</div></div>

<div class="Page">
<div class="Pad">
Konten dari Tab 2
</div></div>

<div class="Page">
<div class="Pad">
Konten dari Tab 3
</div></div>

</div>
</div>

</form>

<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://airaloka.blogspot.com/2013/04/cara-membuat-widget-tab-view-3-kolom.html" target="_blank">&#9658;Get this widget</a></div>
Kustomisasi:
- Ganti teks yang berwarna biru dengan judul dari widget yang ada pada tab tersebut.
- Ganti teks yang berwarna merah dengan teks atau script yang akan anda tambahkan.

3.  Simpan

Cara Merubah Warna Background/Latar Blog

Bagi Anda yang ingin merubah penampilan blog supaya menghasilkan blog yang enak dilihat namun tidak membuat silau mata, ada baiknya mencoba tips yang akan saya sampaikan dibawah ini. Walaupun banyak sekali yang membahas tentang bagaimana cara merubah background blog namun sekali lagi saya ingatkan bahwa postingan ini sudah saya praktekan sehingga berbagai kesalahan sudah bisa diminimalisir hehehehe... Yuk kita mulai. 

1. Merubah Background Header Blog
Letaknya adalah paling atas, biasanya digunakan untuk meletakan judul blog, baik itu berupa tulisan atau sebuah banner. Cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #header-wrapper menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#header-wrapper {
background:
#f4f4f4;

dan seterusnya........

Jika Anda ingin merubah warna dengan kode #000000 maka hasilnya akan seperti ini :

#header-wrapper {
background:#000000;
dan seterusnya........

Bila tidak menemukan tulisan background:#f4f4f4; Anda bisa menambahkannya sendiri  tulisan tersebut tepat dibawah #header-wrapper {
Apabila sudah sesuai silahkan simpan atau pratinjau terlebih dahulu.

2. Merubah Warna Background Body
Terletak paling dasar atau dibalik halaman posting. Cara merubahnya :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan body { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

body {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan .apabila selesai klik simpan.

3. Merubah Warna Background Halaman Postingan / Main body
Terletak paling tengah dan dijadikan sebagai tempat posting. Cara merubahnya adalah :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #main-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#main-wrapper {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

4. Merubah Warna Background Sidebar
 Terletak disebelah halaman posting/main body, cara merubahnya adalah :


Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #sidebar-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#sidebar-wrapper
background:#000000;
dan seterusnya....
  
 Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

5. Merubah Warna Background Footer 
Terletak berada paling bawah halaman blog,cara merubahnya adalah :


Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #footer { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#footer {
background:#000000;
dan seterusnya...

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

Ada beberpa template yang  menggunakan kode warna css hanya dengan tiga digit bukan enam digit, nah terus bagaimana solusinya? Dibawah ini saya tuliskan beberapa kode warna html yang biasa dipakai oleh kebanyakan orang.

Berikut Kode Warna HTML dalam tiga dan enam digit

KodeWarnaKode
Warna
KodeWarna
#f03 ( #ff0033 )OOOOOOOO#00f  ( #0000ff )OOOOOOOO#cc3 (#cccc33)OOOOOOOO
#000 ( #000000 )OOOOOOOO#900 ( #990000 )OOOOOOOO#f39 (#ff3399)OOOOOOOO
#3f0 ( #33ff0 )OOOOOOOO#0cf ( #00ccff )OOOOOOOO#63c (#6633cc)OOOOOOOO
#966 (#996666)OOOOOOOO#990 (#999900)OOOOOOOO#f63 (#ff6633)OOOOOOOO
#666( #666666 )OOOOOOOO#c3c ( #cc33cc)OOOOOOOO#ccc ( #cccccc )OOOOOOOO

Untuk melihat warna lainnya lihat juga disini 
Saya membuka diri apabila ada rekan blogger yang kesulitan dalam merubah warna  background di blognya, semampunya akan saya bantu oke?

Cara Membuat slide show Featured Image/Post di Blogspot

Cara Membuat Featured Image/Post di Blogspot


Featured Image/Post di Blogspot
Cara membuat Featured Image/Post di Blogspot, seperti yang bisa Anda lihat di halaman depan blog ini, sangat mudah. Anda tinggal melakukan langkah-langkah berikut ini:

1. Template --> Edit HTML

2. Temukan kode <b:section class='main' id='main' showaddelement='no'>

3. Ubah jadi atau ganti dengan <b:section class='main' id='main' showaddelement='yes'> (mengubah ini doang kok: showaddelement='no' jadi showaddelement='yes'

4. Jika Featured Image/Post hanya dimunculkan di halaman depan, seperti di blog ini, Anda tinggal tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di atas kode <!-- only display title if it's non-empty --> dan </b:if> di bawah kode <b:include name='quickedit'/>. (Selengkapnya baca DI SINI).

5. Save Template!

Langkag 1 s.d. 5 tersebut untuk memunculkan kolom Gadget baru di atas Blog post. Mari kita lanjutkan:

6. Klik "Layout". Nanti akan ada kolom "Add a Gadget" baru di atas kolom "Blog Posts"
7. Klik "Add a Gadget"--> Pilih HTML/Javascript
8. Masukkan kode HTML/Javascript.

Jika ingin hanya berupa gambar, seperti di blog ini, tinggal masukkan kode <img src="LINK GAMBAR/FOTO">

Jika ingin berupa Featured Content Slider Post, Anda bisa dapatkan kodenya di SINI. Ada 17 lebih pilihan tampilan featured post buat blogspot di sana.

Cara Membuat Featured Image/Post di Blogspot lainnya yang lebih praktis dan bagus, gak mau ribet ganti URL/LINK dan sebagainya, Anda gunakan CARA INI saja.

Mau Featured Post blognya seperti Image Slideshow punya Yahoo!? Ada di siniGood Luck!