Membuat Slideshow Gambar Berita di Blog

Apa sih slide show image itu? yaitu sebuah widget yang dapat menampilkan image/gambar secara random. Dimana akan berganti-ganti tergantung dari jumlah gambar dan informasi yang di masukan ke dalamnya.

Jika anda berkunjung ke detik.com, Kompas, ataupun Okezone. Pastinya anda pernah menjumpai sebuah tampilan Slide show Gambar atau foto  berita yang bila di klik pada gambar yang tampil slide show tersebut akan masuk kehalaman postingan yang di targetkan.

Bagi anda yang ingin tau bagaimana cara membuatnya, yuk ikuti langkah berikut ini :
1. Login Ke Bloger
2. Pilih Tata Letak >> EDIT HTML dan jangan lupa back up template anda.
3. Letakkan kode berikut diatas kode ]]></b:skin>

/*-----Slide Show-----*/
#s3slider{height:250px;margin:0px;overflow:hidden;position:relative;width:347px}
#s3sliderContent{margin-left:0;padding:0;position:absolute;top:-14px;width:347px}
.s3sliderImage{display:none;float:left;position:relative}
.s3sliderImage span{-khtml-opacity:0.8;-moz-opacity:0.8;background-color:#000;bottom:0;color:#fff;display:none;filter:alpha(opacity=70);font:11px arial, sans-serif;left:0;opacity:0.8;padding:10px 0;position:absolute;text-align:center;width:347px}
.clear{clear:both}

NB : Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan lebar ruang kolom/elemen di blogmu.

4. Lalu letakkan lagi kode berikut di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

NB : untuk cara mengatur atau setting waktu slide show silakan anda cari kode timeOut: 3000
Ubah angka 3000 itu sesuai keinginan anda.

5. Cari kode <div id='main-wrapper'> Letakkan kode berikut di bawah <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>
<a href='http://abdu-green.blogspot.com/2012/05/install-dual-boot-windows-dan-ubuntu.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNfMoXVM-NVHzzEKBdbD-GUd5EJGHyC2z_06w_q3cItVnYGvwu4xiBFtw4jq9_SQ-F33R2qiVOXDmdA_VGSDy_DkXRoJxnhV2LT53hCnyKRRCi4W_zFXYDjuHRoUEAeRceqhZlaB9GGkU/s1600/windows-linux.jpg' width='347'/>
<span>Panduan lengkap tentang cara untuk mendual boot antara OS Windows 7 dan Ubuntu 12.04</span></a></li>

<li class='s3sliderImage'>

<a href='URL POSTINGAN'>

<img height='245'

src='URL GAMBAR' width='347'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan :

• Ganti warna hijau dengan alamat link artikel kamu
• Ganti warna kuning dengan link gambar / foto
• Arti kode width="347" height="245" adalah ukuran dari widget slideshow view, (atur sesuai ukuran widget yang kamu inginkan)
• Ganti warna pink dengan Isi dengan kalimat yang ingin di tampilkan di bawah gambar slideshow.
• Jumlah Slide Show juga bisa anda perbanyak dengan menambahkan kode :
  

  <li class='s3sliderImage'>
  <li><a href="URL POSTINGAN"><img height='245' src="URL GAMBAR" width='468'/> <span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

  --->> Letaknya di atas kode </ul>

6. Setelah semua selesai, Klik Pratinjau untuk melihat previewnya, setelah itu Simpan Template.

Mudah bukan?? Selamat mencoba dan Semoga bermanfaat. ^_^

Sumber :Membuat Slideshow Gambar Berita di Blog

Read More

Memberi Efek Shadow Pada Outer-Wrapper Blog

Apasih arti dari shadow itu?? yaitu mempunyai arti "Bayangan", jadi pada pertemuan kali ini akan belajar tentang efek shadown (bayangan) pada Outer-Wrapper atau Background Blogger.

Cara Menambahkan Efek Shadow atau Bayangan pada bagian background Blogspot sangat simple dan mudah sekali untuk di terapkan, hanya dengan menambahkan kode CSS3,  Mungki sudah banyak yang saya jumpai blog-blog di luara sana yang sudah nerapin Efek shadow ini pada blognya.

Dengan penambahan efek bayangan ini membuat blog kita akan terasa lebih hidup dan tidak terasa garing atau membosankan sekaligus blog kita menjadi lebih enak di lihat.

Cara Memberi Efek Bayangan Pada Background Blogspot :
1. Login ke blogger.
2. Kemudian masuk ke dalam menu Edit HTML.
3. Kemudian cari kode #outer-wrapper. Gunakan CTRL + F untuk mempermudah pencarian.

#outer-wrapper{border:5px solid #fff; width:950px;margin:0px auto;padding:0px 0px 0px 0px;text-align:$startSide;font:$bodyfont}

Jika sudah ketemu tambahkan kode di bawah ini ke dalam kode diatas.

-moz-box-shadow: 0px 0px 20px #000000; -webkit-box-shadow: 0px 0px 20px #000000; box-shadow: 0px 0px 20px #000000;

Sehingga hasilnya bisa dilihat di bawah ini :

#outer-wrapper{-moz-box-shadow: 0px 0px 20px #000000;-webkit-box-shadow: 0px 0px 20px #000000; box-shadow: 0px 0px 20px #000000; border:5px solid #fff; width:950px;margin:0px auto;padding:0px 0px 0px 0px;text-align:$startSide;font:$bodyfont}

Nb : Sebagai catatan untuk kode CSS di dalam #outer-wrapper bisa jadi berbeda - beda tergantung template nya. Namun untuk peletakan kodenya kurang lebih tidak jauh dengan peletakan kode diatas. Simpan dan lihat hasilnya. Selamat Mencoba dan Semoga Bermanfaat.

Read More

Membuat Scroll Blockquote Otomatis Pada Postingan Blog

Apa sih yang di maksud dengan Blockquote itu? Blockquote mrmpunyai fungsi sebagai wadah/penanda kata-kata yang di anggap penting di sebuah artikel blog. Seperti yang ada di SYKC Blog ini, yang saya gunakan untuk wadah kode-script yang penting.


Pertemuan kali ini kita akan belajart memberi batasan tinggi maksimal yang sehinnga akan memunculkan fungsi scroll untuk bergulir kebawah pada blockquote, blockquote dengan fungsi scroll lebih efektif di bandingkan blockquote yang tidak memiliki fungsi scroll, karena jika kata-kata yang di anggap penting terlalu banyak menjadikan blockquote memakan tempat yang panjang ke bawah dalam postingan.

Blockquote dengan fungsi scroll kali ini memiliki ototmatis ketinggian maksimal yang bila tinggi dari kotak blockquote tidak mencapai batas yang di tetapkan, maka kotak akan tetap (scrollnya tidak muncul), dan jika melebihi tinggi yang ditentukan, maka akan muncul fungsi scroll(tombol gulir kebawah). tergantung bagaimana anda memodofikasinya. Kotak blockquote akan tetap dan blockquote nantinya otomatis memiliki scroll pada bagian kanan blockquote bila tinggi kotak blockquote mencapai batas yang telah ditentukan.

Blockquote kali ini menggunakan CSS, jadi anda tidak perlu repot2 mengatur pada tiap postingan anda lewat Edit HTML. bagi anda yang berminat untuk menerapkan trik ini, silahkan ikuti langkah2 dibawah ini :

Cara Membuat Scroll Blockquote Otomatis Pada Postingan Blog
1. Log in ke blogger
2. dari Dasbor klik Template dan masuk ke Edit HTML
3. Gunakan F3 untuk mencari kode seperti berikut :

.post-body blockquote {
-----------------
-----------------
}

Gunaka Ctrl + F lalu ketik blockquote

4. Jika sudah ketemu Ganti kode diatas  dengan kode dibawah :

.post-body blockquote {
overflow:auto;
max-height:400px;
font-family:'Trebuchet MS';
background:#333;
box-shadow:0 0 0.5em #333;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
color:#fff;
margin:10px 0;
padding:5px;
}

5. Jika kode pada langkah ke-3 tidak di temukan cari saja

.post body
--------
--------
}

4. dan letakkan kode berikut di bawah kode di atas :

.post-body blockquote {
overflow:auto;
max-height:400px;
font-family:'Trebuchet MS';
background:#333;
box-shadow:0 0 0.5em #333;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
color:#fff;
margin:10px 0;
padding:5px;
}

5. Simpan Template dan lihat hasilnya di postingan sobat yang sudah ada blockquotenya.

NB : Silahkan anda modifikasi sendiri sesuai kreatifitas anda, misalnya, mengatur tinggi, memberi background dan lain sebagainya.

jika ada masalah dengan pemasangan kode diatas, silahkan kontak admin lewat kolom komentar dibawah.
Selamat mencoba dan semoga berhasil, Semoga Bermanfaat.

Read More

Cara Menofollowkan Label Blogger

Cara Mengoptimalkan Label Blogger - Cara Membuat/Mengubah Label Blogger Jadi Nofollow. Label Blogger/Blogspot bukanlah berupa link yang bersifat permanent (permalink) melainkan link yang hanya terbentuk sebagai hasil perintah pencarian dan pengelompokan posting-posting dengan label tertentu. Oleh karena itu, bagi search engine (terutama Google) link-link semacam ini bukan merupakan link yang sah untuk diindeks.

Untuk menghindarkan proses indeks terhadap link label, atribut nofollow perlu ditambahkan pada semua label, termasuk link label yang dimasukkan di dalam badan posting/artikel. Dengan memberikan atribut nofollow pada label, diharapkan proses optimalisasi SEO Blogspot menjadi lebih maksimal.

Jika link-link label ditambahkan secara manual, maka cukup tambahkan atribut rel="nofollow" pada tag a label. Contoh :

<a href="http://buka-rahasia.blogspot.com/search/label/HTML-CSS%20Tricks" rel="nofollow">HTML-CSS Tricks</a>

Namun pada label yang ditampilkan pada widget yang bersifat otomatis, misalnya widget labelBlogger dan label yang ditampilkan di atas/di bawah posting, maka harus ditambahkan atribut nofollow pada bagian tag xml label.

Cara menambahkan atribut nofollow pada seluruh label secara otomatis:
1. Login ke Blogger
2. Silahkan menuju halaman Edit HTML - Klik/check "Expand Widget Templates"
3. Cari data:label.url (gunakan Ctrl + F)
Secara utuh, kode tersebut ada dalam tag seperti ini:

<a expr:href='data:label.url'>

4. Tag itu biasanya ada yang berjumlah satu atau dua tergantung pada jenis template XML Blogger tysng digunakan. Bahkan dalam beberapa template XML Bogger tertentu, ada pula yang berjumlah lebih dari dua.
Untuk mengubah label menjadi nofollow, tambahkan atribut rel='nofollow' ke dalam semua tag tersebut seperti pada contoh berikut:

<a expr:href='data:label.url' rel='nofollow'>

5. Setelah anda menambah atribut nofollow pada tag-tag tersebut, kemudian save template.
6. Selesai !

PENTING :
Bagi yang menggunakan menu/navigasi breadcrumbs, akan ditemukan tag sejenis dengan di belakangnya dibubuhi atribut rel='tag':

<a expr:href='data:label.url' rel='tag'>

Jika ditemukan tag seperti di atas, sebaiknya JANGAN ubah atribut rel='tag' menjadi rel='nofollow', karena itu bagian dari breadcrumbs yang berfungsi memberi tahu search engine bahwa url link tersebut berfungsi sebagai tag yang bersifat informatif bagi search engine.

Sumber : Buka[n] Rahasia Lagi

Read More

Widget Recent Post Per Label dengan Satu Thumbnail

Cara Membuat Daftar Isi Dari Label Dengan Satu Thumbnail/Gambar Postingan. Jika Anda lihat pada template blog ini, di bagian footer pada template ini terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja.

 

Langsung saja untuk Cara membuatnya adalah sebagai berikut :

1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget 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

   img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
   img.label_thumb:hover{background:#f7f6f6}
   .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
   ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode

   <script src='http://penyimpanan-maskolis.googlecode.com/files/labels.js' type='text/javascript'/>

7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   

   <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/-/news?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://sykcbloger.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
   <a href="http://sykcbloger.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

   Keterangan :
   Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna merah : Ganti URL dengan URL blog anda.
   
   Selanjutnya save dan lihat hasilnya.
   Selamat mencoba semoga bermanfaat...

Read More