Membuat Slide Show dengan JQuery di Blog

Kali ini aku akan menjelaskan langkah-langkah membuat slide show image dengan jquery di blog. Kenapa harus pakai jquery? Umumnya para blogger sering menggunakannya karena desainnya yang variatif. Untuk ini aku menggunakan desain yang sederhana.Berikut tahapannya:

1) Login ke blogger
2) Pilih Edit template
3) Jangan lupa mencentang expand widget template
4) Copy kode berikut di atas tag </head>. Download scriptnya di sini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>

5) Simpan template

6) Selanjutnya pilih tata letak

Mudah Membuat Tab View Menu di Blog

Tab view menu ini berfungsi untuk menampilkan beberapa widget dengan bentuk tab menu dalam satu widget. Intinya kita meringkasnya menjadi satu dengan tampilan tab di atasnya. Membuat tampilan blog semakin menarik, simple dan tentunya minimalis. Berikut langkah-langkahnya:

1) Login blogger

2) Pilih tata letak

3) Tambahkan gadget, pilih html javascript

4) Copy kode di bawah ini, download scriptnya di sini

 <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 2px 0px 0px 2px;
     font-size: 15px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: 708090;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: 4169E1;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

5) Simpan tanpa judul. Letakkan di atas widget yang ingin kamu tab

Memasang Scrollbar pada Widget Blog

Tau kan yang namanya scrollbar? Tidak ada kerumitan untuk membuatnya justru ini tergolong mudah. Ok, langsung pada langkah-langkah membuatnya:

1) Login blogger
2) Edit html, jangan lupa centang expand template widget
3) Copy kode ini di atas tag ]]></b:skin>
#PopularPosts1 .widget-content{
height:230px;
width:auto;
overflow:auto;
}
Catatan:
Warna merah adalah widget yang diinginkan dengan tampilan scrollbar
Warna hijau adalah ukuran tinggi widget

Membuat Slider Post di bawah Header

Slider post berperan menampilkan postingan yang diterbitkan dalam bentuk thumbnail dan link yang aktif. Letaknya di bawah header disertai dengan fasilitas slider yang bisa digeser guna meminimaliskan tampilan blog. Sebelumnya lihat dulu DEMO.  Berikut langkah-langkahnya:

1) Login blogger

2) Pilih Template > Edit Html

3) Centang Expand template widget

4) Copy kode di bawah dan pastekan di atas tag ]]></b:skin>

Download:

#carousel{width:960px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}

#carousel h5{color:#555;margin:2px}

#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}

#carousel .thumb{float:left;margin-right:5px;}

#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9t7xpbwJJlcFhaIf1y6eRhjybR1hTeAkvSJTRcIYj5zfSThzz1LDyG5YrsUYtNWNY-BU5SDNKKvXNuD10MJ0ewvlqN9i-R7zNKMbIBd8t1FTFp8YnGrcm1cuHU-jcThsG0YqX04vP8tq/s1600/previous.png) center;z-index:100;cursor:pointer;}

#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBc5w58H0J1dWb1cFKaZ3J8cnokWYNJa8mN-BWCcMF625EVqdfvR6jc9FnKwor7wnMgLIO5Rl3TqtP66-mmbVCm3cKIRvVDfGj_mLeNhhaa2OU66ozZjVmc75lmX8w0DUEZVQIOXkoxxcB/s1600/next.png) center;z-index:100;cursor:pointer;}

#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}

#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}

Catatan: 
Warna merah bisa kamu ganti ukuran widget image slider
Warna Orange bisa kamu ganti background image slider
Warna hijau bisa kamu ganti warna tanggal image slider
Warna kuning bisa kamu ganti background widget image slider

Membuat border pada artikel blog

Pada dasarnya fungsi border tidaklah berbeda dari text area. Sama-sama penting untuk penulisan kode script/html. Adakalanya kita ingin menampilkan sebuah kode script/html pada artikel terkait. Nah, kamu bisa memaksimalkan peran text area dan border pada artikel terkait. Ada beberapa jenis border yang akan saya jelaskan di sini:  

1) Copykan kode di bawah pada mode html

2) Ganti tulisan yang berwarna merah dengan kode script/html ataupun tulisan yang kamu inginkan

BORDER
digunakan untuk membatasi tulisan

<div style="border: 1px solid #FF7F00; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #6F00FF; text-align: center;">Tulisan yang akan ditampilkan disini</div>

Hasilnya seperti ini. Download scriptnya di sini

Tulisan yang akan ditampilkan disini

Membuat Drop Cap pada Artikel Blog

Kadangkalanya kita menginginkan sebuah artikel yang di balut dengan gaya tulisan yang lebih menarik. Ini mudah saja, dengan cara membuat drop cap (huruf besar) di awal paragraf artikel yang kamu buat dapat membuat gaya tulisan tampak tidak monoton lagi. Sebenarnya banyak cara yang bisa digunakan untuk membuat drop cap pada artikel blog. Bisa dengan CSS ataupun yang akan kubahas kali ini. Proses ini lebih mudah dan tidak terlalu ribet untuk menerapkannya. Berikut langkahnya:

1) Masukkan huruf awal yang akan kamu drop cap pada kode berikut. Contohnya:

"Merubah gaya tulisan pada artikel blog menggunakan drop cap tidaklah sulit. Asal kamu mau belajar melakukannya, semua hal pasti akan mudah. Kamu bisa mencobanya setelah membaca artikel ini. Selamat mencoba."

<span style="color: black; float: left; font-family: arial; font-size: 50px; line-height: 30px; padding-right: 5px; padding-top: 5px;">M</span>erubah gaya tulisan pada artikel blog menggunakan drop cap tidaklah sulit. Asal kamu mau belajar melakukannya, semua hal pasti akan mudah. Kamu bisa mencobanya setelah membaca artikel ini. Selamat mencoba.

2) Agar lebih mudah tulis artikel pada mode html

Tutorial Membuat Blog

Kali ini aku akan membahas bagaimana cara membuat blog di blogger. Bagi para pemula mungkin akan bertanya "apa itu blog". Sedikit aku jelasakan definisi dari blog. Blog merupakan sebuah situs website yang memberikan kemudahan bagi para penggunanya untuk memposting berbagai hal. Entah sebuah wacana, mengunduh foto, musik, informasi hingga mencangkup software pun bisa kamu unduh dan posting melalui blog. Sekarang banyak layanan yang menyediakan blog gratis. Salah satunya adalah blogger ( sebuah layanan dari Google ). Tidak ada tingkat kesulitan untuk membuat sebuah blog kecuali untuk mendesainnya. Tapi saat ini bukanlah soal desain yang bakal aku bahas. Asal kamu cermat plus sabar mempelajarinya semua terlihat mudah. Ok, langsung aja ke tutorialnya. 

1) Sebelum membuat blog terlebih dahulu kamu harus memiliki sebuah account email dari gmail.com. Kalau kamu belum memilikinya, kamu bisa lihat tutorial membuat email di gmail.com

2) Setelah kamu memiliki account email dari gmail.com, masuk ke situs blogger.com

3) Masuk dengan email dan password yang sama

Membuat Icon Jaringan Sosial Melayang di Blog

Supaya icon menu jaringan sosial melayang di samping blog, berikut langkah-langkahnya :

1) Login blogger
2) Pilih tata letak, kemudian tambahkan gadget
3) Pilih html/javascript
4) Copy kode scriptnya di bawah ini, gak bisa di copy???  Tenang, silahkan download di sini scriptnya

<div style="display:scroll; position:fixed; bottom:80px; right:0px;">
<a class="linkopacity" href="url fanspage" target="_blank" rel="nofollow" title="Add me your facebook" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1135.photobucket.com/albums/m639/SchreiImZimmer/facebook-logo-square-webtreatsetc2-1.png" /></a><br />

Memasang Playlist Musik di Blog dengan Mudah

Memasang playlist musik di blog bisa jadi salah satu pilihan terbaik untuk membuat pengunjung blog tidak merasa bosan. Selain membaca artikel kita pengunjung juga bisa sekaligus mendengarkan musik. Yah... kenyamanan pengunjung jadi point penting bagi para blogger bukan? Banyak sekali situs yang menyediakannya. Yang bakal aku bahas di sini adalah singingbox.org. Karena aku sendiri memasangnya lewat singingbox. Di sini kita bebas memilih skin playlist bahkan bisa memasang lagu lebih dari satu. Ok, langsung ke step awal:

1) Silahkan masuk ke situs singingbox.org 

2) Sebelumnya register dulu ya...

3) Setelah register selesai > Home

4) Ketikkan penyanyi atau judul lagu yang diinginkan. Contoh:

Cara Membuat Text Area di Blog

Saat aku menulis artikel ini, saat itu juga aku mencobanya sendiri. Sebenarnya ini sangat mudah. Aku membuat text area ini bertujuan untuk mempersingkat halaman artikel. So... gak terlalu panjang. Ditambah jika ada kode script yang ingin ditampilkan terlalu panjang. Solusi ini bisa diandalkan. Sebenarnya ada banyak model text area. Tapi yang akan aku bahas adalah model text area sederhana. Langsung kita bahas cara membuatnya:

1) Cukup kamu masukkan kode ini ke postingan kamu

2) Pilih mode html, kamu bisa download di sini scriptnya

<div align="center">

<textarea cols="27" name="code" rows="3">Tulisan yang diinginkan/HTML</textarea></div>

Angka "3" menunjukkan jumlah baris sedangkan angka "27" menunjukkan lebar form text area

Mendisable Klik Kiri dan Klik Kanan pada Blog

Bagi sebagian para pengguna blog atau blogger mungkin akan merasa jengkel jika postingannya di copas oleh orang lain baik itu sesama pengguna blog ataupun oleh pengunjung alias pembaca. Banyak pernyataan-pernyataan yang di lontarkan dari berbagai kalangan dunia blogging mengenai tindakan copy paste di postingan pengguna blog. Sebagian menganggapnya sah-sah saja. Tujuan dari blogging sendiri memberikan pengetahuan ataupun wawasan pada para pengunjung. Jika sesama pengguna blog saling mengcopy postingan dari blog orang lain dan kemudian menduplikatkan ke postingan mereka sendiri sama halnya menyebarluaskan pengetahuan kepada pengunjung blog. Sedangkan untuk para pengunjung alias pembaca mengcopy paste artikel yang mereka cari memberikan jalan yang mudah untuk menambah wawasan mereka. Dan itu dianggap sah-sah saja.

Tutorial Membuat email

Sebelum membuat blog, kamu diwajibkan memiliki sebuah account email dari layanan Google. Langsung saja aku bakal ngebahas step-step membuat account di gmail.com:

1) Masuk ke situs gmail.com, selanjutnya klik buat akun untuk memulainya