Membuat Background Efek pada Widget

Memberikan sentuhan yang berbeda pada widget atau gadget di blog adalah salah satu cara untuk membuat blog kita kelihatan menarik. Tetapi hal tersebut menjadi dilema bagi para blogger, karena semakin banyak kode-kode HTML yang kita pasang di template akan membuat semakin lambat loading blog. Sebelumnya saya sudah menulis tentang cara mempercepat loading blog dengan CSS Compressor, jadi untuk temen-temen yang tetap ingin menambah kode-kode HTML ke dalam template sebaiknya melakukan kompres file agar loading blognya tidak lamban.

Widget atau gadget sendiri adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi. [ wikipedia .org ] Jika dalam bahasa sederhana blogger widget adalah pernak pernik dalam blog sebagai penghias blog dan memiliki berbagai fungsi.

Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:

1. Colour Background Style
   Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
   

   #side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}

   Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
2. Image Background Style
   Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
   Nah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
   

   .post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: #ffffff;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThyphenhyphenztkSC5Vja5Q3barRlhhDgRNj4iLoaO0pNvk2b1rvWxSqPrKC_7F8pMfVh2p2MRxJyU8eC0IzcT-peyaV6k19f8YV3pcsfCTS0FQYPQWNbXr8WZtJp8G3Kw3fkdcnwnsKdiNoahJPw/s1600/banner+demomaskolis.jpg");
background-color:#0092dd;
background-position:top right;
background-repeat:no-repeat;
border: 1px solid $postfooterBorderColor;
}

   Penjelasannya adalah:
   
   • Background Image diisi URL gambar.
   • Background Color diisi kode warna yang sesuai dengan gambar.
   • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
   Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi: background-repeat: repeat-y; Untuk ke samping, gunakan repeat-x menjadi: background-repeat: repeat-x; Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
3. Hover Image Background Style
   Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
   

   #main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

   Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
   

   #sidebar .widget {
margin: 0px;
padding: 0px;
}

   Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
   

   #main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

#main .widget:hover {
background:#e3e3e3;
}

Temen-temen semua bisa memodifikasi sesuai selera, ingat harus disesuaikan dengan template yang dipakai. Selamat mencoba dan semoga bermanfaat.

Sumber :  http://www.maskolis.com

Read More

Membuat Daftar Isi Otomatis diblog

Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat daftar isi manual, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, karena sudah cukup dijelaskan pada tutorial Membuat Daftar Isi Manual di Blogspot, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:

1. Login ke Blogger, Klik Layout/Tata Letak;
2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;
4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :

   <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
   <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
   <script src="http://aiva-putra-anugrah.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

5. Klik Tombol Save/Simpan.
    
   Sumber :  http://www.maskolis.com
    
    

Read More

kena banned

Johny Kena Banned

Demo | Download

Download Javascript

Template yang pertama ini namanya Johny Kena Banned, sesuai pengalaman saya yang sering di-banned sama Google. Template ini bertipe magazine, banyak fitur yang saya pasang pada template, ya otomatis berat lah loadingnya. Jadi sebelum Anda pakai, saya kasih tahu dulu kekurangannya biar bisa jadi bahan pertimbangan Anda.  Langsung pada pemasangan fitur, untuk memudahkan pemasangan beberapa widget yang ada pada template ini, perhatikan struktur layout template ini menggunakan Old Blogger Interface :

1. Tab View Widget per kategori
   
   
   
   
   
   Caranya sama seperti memasang widget ini pada template Johny Sompret Banget, tapi akan saya tulis lagi disini. Perhatikan gambar diatas, untuk merubah judul tab (diary, jazz dan sebagainya) cari kode berikut ini di Edit HTML :

   Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"

   Setelah ketemu ganti tulisan berwarna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori. Sedangkan untuk mengisi widget tersebut dengan label, masih pada Edit HTML cari kode berikut ini (jangan lupa untuk mencentang expand widget template) :
   Tulisan warna merah diatas adalah kelima label yang saya masukkan pada widget tabber kategori ini, silahkan Anda ganti dengan label Anda dan sesuaikan dengan judul tab view yang sudah dibuat. Bagi Anda yang ingin membuat widget tab view per label bisa baca tutorialnya disini.
2. Widget Label
   Yang termasuk dalam widget label pada layout template ini adalah : Label 1, Label 2, .......... Label 12. Anda tinggal memasukkan atau ketik nama label yang sudah Anda buat pada kotak tersebut, perlu diingat besar kecil huruf harus sama dengan label yang sudah dibuat. Seperti contoh gambar di bawah :
   
   
3. Reply Komentar
   Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
   

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=4636005615932985093&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
4. Untuk mengganti News Ticker atau headline News yang ada di bawah navigasi anda tinggal cari URL : http://johnykena-banned.blogspot.com/ setelah ketemu ganti dengan URL blog anda

Johny Kampret

Demo | Download

Download Javascript

Template yang kedua ini lebih sederhana, tapi masih bergaya magazine, template ini saya buat untuk blog yang mempunyai konten game. Tapi terserah juga sih mau dipakai buat konten apa, semua saya serahkan ke pemilik blog, kalau suka pakai aja atau sekedar buat koleksi juga boleh, mau dipakai buat bungkus kacang juga boleh.

Di template ini terdapat 8 (delapan) widget label (label 1 - Label 8) dan satu widget game category, Anda tinggal buka kemudian masukkan atau ketik label yang ingin ditampilkan disitu, caranya seperti langkah nomer 2 pada template Johny Kena Banned. Untuk mengaktifkan fungsi reply pada kotak komentar Anda harus mengganti blod ID pada template demo dengan Blog ID  Anda, untuk template ini blog ID : 3892789936183052787 (langkah nomer 4 template Johny Kena Banned). Slider pada template ini bekerja otomatis menampilkan artikel terbaru Anda, dan terdapat sebuat widget untuk advertise di sebelahnya.

Kedua template diatas nggak valid HTML, nggak responsive, nggak SEO friendly pokoknya nggak termasuk semuanya. Karena saya hanya menyediakan template dasar untuk bisa Anda modifikasi sendiri sehingga bisa lebih dinamis dan sesuai dengan kriteria-kriteria diatas. So, jika Anda berminat silahkan dicoba, dan jika ada yang kurang jelas tentang pemasangan kedua template ini, anda bisa tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Read More

Johny Backup

Johny Backup

Demo | Download

Template ini seperti dijelaskan diatas, tampilannya hampir sama dengan template Joomla Sportapolis, tapi lebih sederhana karena banyak fitur yang saya kurangi karena keterbatasan saya dalam mengolah sebuah template. Untuk pemasangan widgetnya pertama anda harus perhatikan struktur layoutnya seperti gambar berikut :

Perhatikan keempat angka diatas, berikut cara pengisiannya :
Kolom widget nomer 1, adalah slider. Masukkan kode berikut ini ke dalamnya :

<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Keterangan :

Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti dengan label Anda.

Kolom widget nomer 2, adalah label category otomatis di sebelah slider. Anda tinggal memasukkan/ketik label anda pada kotak tersebut, seperti gambar dibawah ini :

Dari gambar diatas hot games adalah label yang saya masukkan ke dalam widget tersebut, silahkan Anda ganti dengan label Anda.

Widget nomer 3 dan 4, adalah widget category thumbnail biasa yang masih semi otomatis. Saya buat demikian agar tampilannya agak berbeda dan tidak monoton. Untuk menampilkannya masukkan kode dibawah ini pada kotak HTML/Javascript nomer 3 dan 4 :

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/play station?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://johny-backup.blogspot.com/feeds/posts/summary/-/play station?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-backup.blogspot.com/search/label/play station" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Keterangan :

Warna merah : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.

Warna biru : Ganti URL dengan URL blog anda.

Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :

 <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>

 Keterangan :
Warna biru : ganti dengan alamat feed anda.

Untuk mengganti iklan yang ada di bawah postingan, masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font:normal 12px Georgia;font-style:Italic;padding:8px 10px 8px 70px;font-weight:normal;color:#333;margin-top:10px;'>
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;ca-pub-9608487840337104&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* jamumartin */
google_ad_slot = &quot;9319314062&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;
</div>
</b:if>

 Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 468 x 60 px.

Read More

Buat Youtube tampilan blogspot

dalam postingan bukan di Edit HTML template. Untuk lebih jelasnya perhatikan gambar untuk membuat postingan video di bawah ini :

1. Masuk ke Youtube dan pilih video favorit anda.
2. Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
3. Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
4. Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
5. Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :

   <iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />

6. Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :
   
   
   
   
   Perhatikan kedua kode pada gambar dengan background biru diatas.

Pada template ini saya tambahkan fitur untuk tampilan Grid dan List style, dibawah ini adalah screenshot untuk tampilan grid dan list syle :

Sekarang untuk menampilkan widget Video Category yang ada pada template ini. Yang Anda harus lakukan hanya membuka widget Video Category 1 dan 2 kemudian masukkan/ketik label di dalam kotak HTML/Javascript seperti gambar di bawah ini :

Dari gambar diatas jazz adalah label yang saya tampilkan pada video category 1, Anda ganti dengan label yang diinginkan, demikian juga dengan widget Video Category 2.

Untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=1128587339572285487&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Template ini juga dilengkapi fitur related video di setiap postingan dan slider otomatis yang menampilkan postingan terbaru Anda. Template ini bisa digunakan juga untuk konten gallery gambar biasa, dan untuk video hanya khusus dari Youtube, tapi jika anda ingin menambahkan video selain Youtube harus membuat thumbnail manual dulu kemudian baru di upload saat buat postingan. Segitu dulu tutorial cara instalasi untuk template Johny Crottube kali ini. Jika ada yang mau ditanyakan silahkan tinggalkan pesan pada kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

Demo | Download

Read More

slider Carousel Otomatis Berdasarkan Label

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :     #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJ1ygtkCxZcV7DtpoB2-fXjOi7fFu7pM7gCff3jIT82BElvdOHSIHUnOqTAp7kDd2PYMVR3g_hxYUJ6V3j8CmgjVChYZ1pNTbjoj_uyfPOCe0VzDyEO1kQleHvrgwiuk6-PrS_ezrApc/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdj7sh-BpLkZ8FWQTPMcoEhqdeLedbE-qjSLyNxzizDOdAVm7Kv5zjzLJLvomnD8uvTOsMI1S-4776YIxnZ6-IY_kBufA7L-5-SYoomh_TSzQyCwb0x4PT7exBnF4eo9Hm8Nc686Iex5U/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXy3qltwu8sA7n6xwX7stohkYallXEiaMvGcuk-kXmDSaGFFlq24H7YCFeekCvfZ_vIx-_xAGYuKNN_xMH4EWMP26Cye_t4EK70SU0MVg2Yy_LEI17SF9SRcYkkbjKEG32f-3efqe3SJo/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNcwB3xXoFl0y8Wd31hwzKYjKX5VD80Neres2qA9s2qdbVpKrLOB8utMRaByt3n_L_cL1X7igFodnhR903zTnM0pWePKt5E6SpEwsLd39yCiJm4yGAhhrCdGioa_Hk7bojTQyZ9yQTxA/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pZROSkFyMQy8nWf6vxD1vP-o4ZoncOCIZepCUnAIjoUReX3iApDch7t-vamMA3DwcQvp1zgGhnf-eHpPy5D1O7KWjVKgKiKFWsRaF9dd-45XEy75uEyVEXcaI1FoS107NSvZLu9i054/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJ8BsvAwwGBztz_I_wZwWUdbb2UlHI9inj7T0lIyk5gl_MPkJ9uZGdmLK_8EXyOzhyPUSOvLt3PlXmDGD_y3seK_6quc5lIR5KuswGn8VK81w1DcnenLTUtpN5tWies9DGo6N3UWrBYQ/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkU34ud9nmPUUaSdelY-WLG8n0nUMrffD8nHf0zR6AC8H9MGsSpyCSdBQ5cabEKtkEW2eyFdVomkvIrDIEHhAiRTg8tFwkll4fEOtiOZGylq_n6melejnSbmWP-s01j2AfEK4kEvIFmM/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

 Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

 

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if> 

1. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
2. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Read More

Gambar Slide Ala Zinmag Primus

Baik, sekarang kita langsung saja ke langkah-langkah pembuatannya :

Langkah Pertama :

Login ke blogger dengan id anda >> Klik Tata Letak >> Pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

/* Slider Code
-------------------- */
#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #DF0101;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

Langkah Kedua

Jangan kemana-mana dulu ya, karena kita masih dalam posisi Edit HTML. Sekarang letakkan kode berikut di bawah kode ]]></b:skin>.

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Langkah Ketiga

Kita akan meletakkan id untuk slider zinmag primus tepat di bawah header blog anda. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Oke langsung saja. Silahkan cari kode :

<div id='header-wrapper'>
..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html'>Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a></h2>
<p>Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun</p>
<img alt='Tutorial Blog' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>
<p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini).</p>
<img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/widget-yang-harus-dimiliki-suatu-blog.html'>Widget yang Harus Dimiliki Suatu Blog</a></h2>
<p>eman-teman blogger pasti menginginkan blog yang dibuat tampil dengan performa maksimal, dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:</p>
<img alt='tutorial blog' src='http://i33.tinypic.com/2whm22w.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

Sekarang klik tombol Simpan Template dan akhirnya Selesai. Coba anda perhatikan hasilnya. Apakah memuaskan atau tidak atau masih banyakkah yang tidak sesuai dengan desain template blog temen-temen? Jika ya, berarti ada yang harus diedit lagi.

Hal-hal yang perlu diedit.

1. Pemanggilan kode JavaScript di atas, masih berasal dari situs bloggerstyles.com dan anda bisa meng-hosting javascript tersebut di tempat hosting yang biasa anda pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa digunakan.
2. Background image pada slider di atas mungkin tidak sesuai dengan template anda. Sebaiknya diperkecil saja atau mungkin anda harus membuat background baru dan sesuaikan dengan ukuran dan lebar template anda. Bagian tersebut adalah ini :

   #slider {
   background:url(http://i33.tinypic.com/2l8hgi.jpg);
   height: 229px;
   overflow: hidden;
   position: relative;
   margin: 5px 0;
   }

3. Nah, pada contoh slider di atas, saya menyertakan link dan teks dari blog ini. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :

   <div class='slide'>

   <span class='slmet'> Posted by Maskolis </span>

   <h2><a href='http://creatingwebsite-maskolis.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>

   <p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini). </p>

   <img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
   

   </div>

4. Untuk mengatur letak text, gambar dan link, anda bisa mengutak-atik sendiri pada kode CSS. Yang pasti, setiap template punya ukuran lebar yang mungkin berbeda. Terus terang saya juga bingung untuk menjelaskannya, karena penerapan slider di blog ini pun butuh percobaan yang berulang-ulang agar benar-benar pas. So, trial and error aja dulu.
5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, misalnya 5000 atau 9000 (catatan: 1 detik = 1000).

Read More

Slider Gambar ala Drakon Template

Oke, langsung saja pada langkah-langkah pembuatannya :

PERTAMA

Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMti6qq0QxI/AAAAAAAAAYs/85Em1FsewNI/s000/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIoH7nB3qDo0g2goiS2ZAga5Wy_D8flHNvFVyYKeCvmzXUQ4IpREiSVEMhNXfATbpR4VYeFF1SPc5dbLFeUSvtR4j_9UJI17ZCSFG0WQw5nUXmK_aH0rKuSCNtcpmO0Gs1r7zMZ1s0QxE/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcN9na3C7Lg-TSCyTmSez8muClc4reNBTjNTCV5DbyFNTgNbR-GyMznizsIuRrSYML6Fzrd4UDr40oTb5Y6R-nKH00WvDGUKb3Ihru8NsnUGBwxT8P6wCDavcDypXIHTpj7KzyLxXyX1w/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

KEDUA

Masih pada posisi Edit HTML. Letakkan kode berikut di bawah kode ]]></b:skin>.atau diatas </head>

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

<script type='text/javascript'>
//<![CDATA[

/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */

jQuery.easing = {
    easein: function(x, t, b, c, d) {
        return c*(t/=d)*t + b; // in
    },
    easeinout: function(x, t, b, c, d) {
        if (t < d/2) return 2*c*t*t/(d*d) + b;
        var ts = t - d/2;
        return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;       
    },
    easeout: function(x, t, b, c, d) {
        return -c*t*t/(d*d) + 2*c*t/d + b;
    },
    expoin: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (Math.exp(Math.log(c)/d * t)) + b;       
    },
    expoout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
    },
    expoinout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
        return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
    },
    bouncein: function(x, t, b, c, d) {
        return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
    },
    bounceout: function(x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    bounceinout: function(x, t, b, c, d) {
        if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
        return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
    },
    elasin: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    elasinout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    },
    backin: function(x, t, b, c, d) {
        var s=1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backout: function(x, t, b, c, d) {
        var s=1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    backinout: function(x, t, b, c, d) {
        var s=1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    linear: function(x, t, b, c, d) {
        return c*t/d + b; //linear
    }
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

KETIGA

Kita akan meletakkan id untuk slider Drakon tepat di bawah header blog. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Langsung saja cari kode <div id='content-wrapper'> Letakkan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>.

<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
 $jx(&quot;.mygallery&quot;).jCarouselLite({
 btnNext: &quot;.nextb&quot;,
        btnPrev: &quot;.prevb&quot;,
    visible: 5,
    speed: 1000,
    easing: &quot;backout&quot;      
    });

Kalau sudah klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :

1. Background slider, anda bisa ganti http://3.bp.blogspot.com/_JUg9QsmKp5s/TMti6qq0QxI/AAAAAAAAAYs/85Em1FsewNI/s000/header-background.png sesuai dengan background anda sendiri

#slidearea{

height:150px;

overflow:hidden;margin:-20px 0px 0 2px;

position:relative;

width:965px;

background:#fff url(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMti6qq0QxI/AAAAAAAAAYs/85Em1FsewNI/s000/header-background.png) repeat-x;

border:5px ridge #052844;

}

1. Pada contoh slider di atas, saya menyertakan link dan teks (tulisan warna merah) dari blog demo saya. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :
   

   <li>
   <div class='mytext'>
   <a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqdfyy4mqsvfYSviw6653raYfayHwkRrLgm1E1imTP-DA_ohyphenhyphenrNFaIHXkayKtAOD8LTlU3aKytwgKFru9HSmbbgbUQ1wKd_a3D9ZlkzprgKIeD_kVGDIhOssDOyd6duB5kdjteWEJRCk/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
   <div class='clear'/>
   <p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
   </div>
   </li>

2. Jika ingin menambahkan deskripsi singkat di bawah judul gambar, temen-temen bisa rubah menjadi seperti ini
   

   <li>
   <div class='mytext'>
   <a href='SLIDE-1-LINK-HERE'>
   <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqdfyy4mqsvfYSviw6653raYfayHwkRrLgm1E1imTP-DA_ohyphenhyphenrNFaIHXkayKtAOD8LTlU3aKytwgKFru9HSmbbgbUQ1wKd_a3D9ZlkzprgKIeD_kVGDIhOssDOyd6duB5kdjteWEJRCk/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a> <div class='clear'/>
   <h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>  
   <p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
   </div>
   </li>



Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa.

 

Read More

Membuat Teks Berjalan di Menu Bar

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Kisah Islami ";

msg = " | http://aivaputraanugrah1.blogspot.com -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Read More

Cara Membuat Content Slider Image Otomatis

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
2. Pilih blog yang ingin anda tambahkan slider image ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGpUv7bgtabsXNqpog1fl1xRWvNNqyVmcHDOSZmrnHigS_5Bfeui7U3HyA1dfyl_DlWsBcNwD7jAo5CXJ2RRyvvOITWSkwqz98n9SHqKNJx0EFCUsPrw-FGoYrPeDWSs0zzeQapuQBgoii/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}


Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkU34ud9nmPUUaSdelY-WLG8n0nUMrffD8nHf0zR6AC8H9MGsSpyCSdBQ5cabEKtkEW2eyFdVomkvIrDIEHhAiRTg8tFwkll4fEOtiOZGylq_n6melejnSbmWP-s01j2AfEK4kEvIFmM/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
       
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
       
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;
   
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
   
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
       
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
       
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;
   
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
   
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
</script>



Keterangan :

Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Warna biru : Jumlah post yang ditampilkan dalam slider
Warna hijau : Panjang dan lebar image besar
Warna merah tua : Panjang dan lebar image kecil

Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript

 

 

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

1. Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
   

   script src=\"/feeds/posts/default/-/sport?max-results

   dengan kode berikut :
   

   script src=\"/feeds/posts/default?max-results

2. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

3. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

   

 

Read More