Cara Membuat Slide Show Foto di Blog dengan Mudah

 Sumber : http://trick-tips-blogger.blogspot.com/2013/05/cara-membuat-slide-show-foto-di-blog.html

Banyak tips yang menawarkan tentang pembuatan slide Show ini, tapi menurutku ini yang paling jitu, hemat dan mudah sekali dengan Add Gadget aja tidak repot-repot edit HTML segala. Kurang Kerjaan wkwkwk. Langsung aja Bro, udah bertahun-tahun sampe berbulan-bulan eh kebalik, saya muter-muter sampe pusing akhirnya ada juga Cara Mudah Membuat Slide Show Foto di Blog.

 

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka/Update! Membuat Foto Slide Blogger!

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

Lihat gambar lebih besar klik di SINI
Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)


(1)

(2)

(3)
Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFBtd2D5xaSydsHoLzXEf4NMmx6Scs1uWdX8LzR5pvHguZdhKSUPXFg4C9HR-La2Yt3jIN4CeVZ-utnnBNGirX4XQIi4JDefuW5XZUgAFtZFfLer8vwfd3jDAUl-tT7Ov8d3kg3O5UA/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:

</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)

(6)
Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D

Sumber : http://pelajaran-blog.blogspot.com/2013/03/update-membuat-foto-slide-blogger.html

Membuat Link Text Melayang dengan Tombol Close [Tutup]

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design lalu pilih Add a Gadget kemudian pilihlah Html/Javascript, lihat gambar:

[1]


[2]


[3]

Dan letakkan kode berikut disana:

<style type="text/css">
#topbar{
position:absolute;
padding-left:0px;
padding-top:130px;
up:100px;
background-color: transparancy;
width: 200px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-B0EZO_0NcVo/T3bH1dJkQ8I/AAAAAAAABdA/o3IxlpRnRqE/s1600/pelajaran%2Bblog%2Bclose%2Bbutton.png" /></a></div>
<center>
<div style="background: #fff;">

<table width="200" height="130" border="0"><tr><td align="center">
<a href="http://beritamuslimsahih-ahlussunnah.blogspot.com/"><img src="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" alt="Pelajaran Blog - Ahlussunnah wa Al Jama'ah." width="180" height="120" /></a><br/><br/>
<small><strong>Masih belum mengenal Islam yang Murni?</strong></small>
</td></tr></table>

</div>
</center>
</div>

Lalu Simpan dan lihat hasilnya.

**Ket:

1.Untuk kode yang berwarna merah gantilah sesuai dengan keinginan sampai sobat mendapat posisi yang diinginkan.
2.Untuk kode yang berwarna biru sobat dapat ganti dengan [x],jika sobat tidak menginginkan tombol close.
3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.

Selamat mencoba ya :D

Sumber : http://pelajaran-blog.blogspot.com/2012/03/membuat-widget-melayang-cara-buat-obyek.html 

Cara Membuat Widget Counter Berapa Kali telah Dilihat Masing-Masing Posting

Pelajaran Blog - adalah sebuah trik bagaimana memasang atau membuat pageviews alias hit counter stat untuk masing-masing posting berapa kali telah di lihat oleh pengunjung.

Biasanya widget ini ditulis seperti; Telah dilihat "sekian" kali atau "sekian kali" views untuk menerapkannya.
Widget seperti ini sangat cocok untuk mempermudah kita dalam mengetahui traffik dari sebuah posting.Jika widget seperti hitstats,dan sejenisnya hanya menghitung berapa kali view sebuah blog atau situs,widget yang akan kita bahas ini dapat membaca berapa kali posting telah ditampilkan.

Hanya saja untuk menciptakan sendiri widget ini memerlukan hosting sendiri karena berhubungan dengan database dan sql.
Wah,klo gitu repot dong jika widget ini harus ditempatkan di posting blogger?

Tidak juga sob,yang berhasil saya ambil dari http://csharpdotnetfreak.blogspot.com rupanya sudah dapat membantu kita mewujudkan widget ini.
Kelemahannya tentu jika server di situs tersebut tidak lagi mendukung,widget ini juga tak lagi dapat bekerja.

Tapi seperti yang sobat lihat (jika masih ada,hehehe) dalam blog sederhana ini pun telah menerapkannya.

Sebenarnya,saya ingin menerapkannya di we hosting gratisan seperti www.000webhost.com,namun yang saya alami,situs tersebut sering mengupdate ststus user mereka (scara gratisan gitu,hihihi),sehingga semua file yang telah saya upload lenyap entah kemana :( -sedih-.
Sobat bisa lihat,dalam setap tutorial posting dalam blog sederhana ini yang melibatkan mrpujiajadeh.comze.com nyaris tutorial tersebut tak dapat bekerja.(ya ea lah,servernya keox :( -.

Tapi,ini menjadi pelajaran berharga bagi saya pribadi agar dilain waktu tidak main 'bermudah-mudah' dalam mencomot 'produk' luar tanpa izin.kapok gue :(

Oke,kita kembali pada permasalahannya ya gan,yup! bagaimana kita dapat menciptakan widget 'posting ini telah dilihat sebanyak sekian kali'.

Langkah dan Cara Membuat hit counter pageview Berapa Kali Posting Telah di Lihat

Pertama,sobat pilih Dashboard lalu pilih Template,pilih Edit Html lalu pilih Proceed kemudian contreng Expand Widget Templates seperti gambar:








Selanjutnya,sobat gunakan dalam keybord Ctrl+F - ini untuk mempermudah pencarian kode - dan cari kode berikut:

<data:post.body/> atau <p><data:post.body/></p>

Setelah sobat ketemukan,letakkan persis di bawahnya script post pageviews berikut:

<br/>
<span style='color: #660000;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:300px; display:compact'>Posting ini telah dilihat sebanyak <b><script src='http://amitjain.in/pageviews.php' type='text/javascript'/> (kali)</b></div></span>
<br/>

Kode <br/> untuk memberi jarak saja,jadi bisa untuk tidak disertakan.
Lalu simpan templates dan lihat hasilnya.
Semoga berhasil ya :D

Sumber : http://pelajaran-blog.blogspot.com/2012/09/cara-membuat-page-view-hits-counter.html

Cara Cepat Menaikkan Pagerank Blog kita

Cara cepat menaikan Pagerank bisa kita lakukan dengan gratis tanpa biaya. Cara Cepat Menaikkan Pagerank ini sudah banyak dilakukan oleh para blogger2 yang sudah ahli. Gak usah susah2 komentar sana sini. Cukup ikuti panduan ini.

Hal yang harus sobat lakukan adalah ikuti langkah-langkah berikut :

Cara Posting Otomatis dari Blog Ke Facebook

Facebook, sampai saat ini masih menjadi salah satu media yang cukup efektif untuk menjaring visitor ke blog apalagi bila blogger memposting artikel dengan judul dan konten yang menarik pastinya akan banyak sekali yang berkunjung ke blog dari facebook melalui link yang dishare.

Share URL postingan blog ke Facebook bisa dilakukan secara manual maupun otomatis. Untuk

Cara Memasang Waktu / Jam dan Tanggal di Blogger Blogspot dengan Javascript

Adakah tampilan baru di blog sederhana ini? Betul sob,tanggal dan jam yang terdapat pada header blog seperti pada blog ini.

Script ini sengaja saya padukan dari berbagai script yang sebenarnya sudah bertebaran di serp paman Google.

Cara Membuat Player Musik Di Blog Yang Auto Reply

Bagaimana cara membuat sebuah player musik di blog yang dapat mengulang-ulang lagunya secara otomatis. Dalam postingan kali ini saya akan membagi kepada anda, sebuah player musik yang berjalan secara otomatis yang juga dapat mengulang-ulang lagunya secara terus menerus sampai anda ataupun pengunjung blog anda merasa bosan untuk mendengarkan lagunya hehehe...namun player musik ini hanya untuk membaca lagu yang berformat mp3.

Membuat Timer Hitung Mundur (CountDown)

Widget Ebuddy

Ada yang pengen masang chat room di blog kamu nih ada widgetnya, boleh dapet dari ilmukomputer.org

Jika Anda tertarik, silakan masukkan kode di bawah ini ke widget blog kamu.

Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot V2

Widget Islamic untuk Blog....

kumpulan widget Islamic untuk di pasang di blog kamu seperti clock, greeting card calender dan yang lainnya klik di sini untuk menuju ke situsnya atau klilk ling ini http://www.al-habib.info/

Selamat Mencoba teman-teman..... 

Auto Hide pada Navigasi bar Blogger

Sudah saya informasikan sebelumnya bila menghilangkan navbar blogger (Navigation Bar) merupakan salah satu pelanggaran TOS Blogger, solusi lainya kita bisa menggunakan Auto hide navbar Blogger.

Cara Memasang News Ticker Feed Blog Pada Blogspot

Written By Iskaruji dot com on Jumat, 20 Mei 2011 | 00:41

Jika kita melihat pemberitaan di TV, kita sering melihat semacam headline berita yang berjalan di bawah layar. Tulisan berjalan tersebut disebut dengan "News Ticker". Pada blogspot sendiri ternyata bisa dipasang news

Screen Saver Blog

Hmm sekarang lagi musim nih, blog pake screensaver. Mau,? ga usah pusing - pusing, lanjutin aja bacanya. Di postingan kali ini saya akan membagi tahu (bukan temennya tempe) cara membuat screensaver sederhana

Cara membuat teks berjalan di blog (marquee)

Cara membuat teks berjalan di blog (marquee)

Teks berjalan yang biasa juga disebut marquee, merupakan sebuah efek gerak pada teks. Biasanya teks berjalan ini digunakan oleh pemilik blog untuk menampilkan sebuah pesan , link atau banner untuk menarik perhatian pengunjung.

Cara Membuat Flash Banner

|

rhee dhie

Tutorial Blog

Membuat blog lebih expressive dengan adanya flash-flash banner yg menarik untuk dilihat bisa jadi merupakan sesuatu yg selalu diidamkan oleh blogger. dengan adanya banner2 ini , y minimal pengunjung bisa dimanjakan matanya dengan adanya banner2 yg bergerak yang enak untuk dilihat, hehe..

Biasanya buat orang awam kaya sy yg katrok banget tentang cara buat yg begituan(buat flash maksudnya), pasti bingung buat bikin gimana caranya.. karna buat flash kan harus

Feedburner Stie Kalpataru

Alamat Feed Blog Stie Kalpataru adalah
http://feeds.feedburner.com/stiekalpatarucilengsiblogspot

Oleh : Sidik Abdullah

Kumpulan Cursor

Assalamualaikum......
buat iseng2 yang pengen ngubah tampilan cursornya nih prend.....klik aja di sini atau link ini sama aja sih sebenernya http://www.cursors-4u.com/, nah....kumpulan kursor ini bisa di download and bisa di gunakan di

Teks Berkedip di Blog

sahabat blog tahu nggak cara bikin tulisan berkedip seperti ini
http://stiekalpatarucilengsi.blogspot.com

kalau belum tahu ayuk buat yuk.... gampang kok.
Teks berkedip fungsinya hanya sekedar trik saja agar
suatu kata/teks ataupun kalimat kelihatan hidup dan menarik. Bagaimana caranya?
Gampang saja. Sobat hanya perlu menambahkan kode html diantara kata yang akan kita jadikan berkedip-kedip. O.K. Bagaimana kode htmlnya? Silakan catat kode htmlnya berikut ini:
diawal dikasih kode <blink>
dan diakhiri kode </blink>
contohnya : <blink>Kata yang akan dijadikan berkedip</blink>


Silakan ganti kata "Kata yang akan dijadikan berkedip" dengan kata-kata/kalimat Sobat sendiri.
Gampang bukan? Selamat Blogging...