|
Membuat Image Slider Keren Dengan Thumbnails
Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan tutorial baru membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenagaCSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
untuk membuktikannya anda bisa mengecek live demo pada blog eksperimen sayalog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:
CARA MENAMBAHKAN WIDGET INI KEBLOG
- Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
- Klick Ctrl+F dan cari kode ]]></b:skin
- Tambahkan kode CSS berikut diatas kode ]]></b:skin>
.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 100px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
&display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/
Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar
- Cari kode <div id='main-wrapper'>
- Setelah dapat tambahkan kode HTML berikut diatas kode <div id='main-wrapper'>
<div class="slider"> <input type="radio" name="slide_switch" id="id1"/> <label for="id1"> <img src="IMAGE LINK" width="100"/> </label> <img src="IMAGE LINK"/> <!--Lets show the second image by default on page load--> <input type="radio" name="slide_switch" id="id2" checked="checked"/> <label for="id2"> <img src="IMAGE LINK" width="100"/> </label> <img src="IMAGE LINK"/> <input type="radio" name="slide_switch" id="id3"/> <label for="id3"> <img src="IMAGE LINK" width="100"/> </label> <img src="IMAGE LINK"/> <input type="radio" name="slide_switch" id="id4"/> <label for="id4"> <img src="IMAGE LINK" width="100"/> </label> <img src="IMAGE LINK"/> <input type="radio" name="slide_switch" id="id5"/> <label for="id5"> <img src="IMAGE LINK" width="100"/> </label> <img src="IMAGE LINK"/> </div>
Kustomisasi
Ganti IMAGE LINK dengan link gambar anda.- Tambahkan script berikut diatas kode </head>
<script src="http://tipstrikblogging.googlecode.com/files/imagesliderthumbnails.js" type="text/javascript"></script>
- Simpan template.
Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.
Demikian tutorial membuat image slider keren dengan thumbnails semoga bermanfaat. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih tuk apresiasi anda.
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentarKonversi Kode di Sini!
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentarKonversi Kode di Sini!
:( 
Click to see the code!
To insert emoticon you must added at least one space before the code.
Modifikasi Widget Profil Blogger
Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog, tutorial kali ini juga masih merupakan request sahabat blogger.Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.
Baiklah silahkan ikuti langkah-langkah berikut:
cara membuat modifikasi widget profil blogger di blog
1. Setelah login ke akun anda.2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent
<style> #profileAmatullah{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profileAmatullah:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; margin-left: 50px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .opacity:hover { opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <!--[endif]----> <img align="left" class="opacity" id="#profileAmatullah" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" style="color: #888888;">...Read More</a><!--![endif]----> <div class="clear"> </div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="http://www.blogger.com/blogID=5143343840607190550&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML1"));" target="configHTML1" title="Edit"> </a> </span> </span> <br /> <div class="clear"> </div>
Kustomisasi
- Ganti profilAmatullah dengan nama profil anda,
- perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
- ganti blog ID dengan ID blog anda
- silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.
Demikian tutorial kali ini, cara modifikasi tampilan widget profil blogger pada blog. Semoga bermanfaat
Cara Membuat Gallery Photo Keren Di Blog
Dalam tutorial kali ini saya ingin mengetengahkan cara membuat gallery photo keren diblog dengan menggunakan CSS3 dan tanpa JavaScript. Ya, anda tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slidermenggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni hanya dengan properti CSS3 seperti, user-select, box-sizing, transition, box-shadow dan transform.Pada gallery photo ini anda bisa mengklik image/photo untuk mendapatkan efek zooming dan anda bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Silahkan ke blog tempat eksperiment saya, untuk mendapatkan ide yang jelas dari gallery photo yang mengagumkan ini.
CARA MENAMBAHKAN WIDGET INI KEBLOG
- Login ke akun blogger anda
- Pada dasbor pilih Template >> Edit HTML >> Proceed
- Klik Ctrl+F cari kode ]]></b:skin
- Tambahkan kode CSS berikut diatas kode ]]></b:skin>
/* Photo Gallery styles */
.gallery {
margin: 100px auto 0;
width: 800px;
}
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.gallery a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.gallery a:focus img {
cursor: default;
height: 250%;
left: -150px;
top: -100px;
position: absolute;
width: 250%;
z-index: 25;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
/* CSS3 transform rules */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
- Simpan template.
CARA MENAMPILKAN WIDGET INI DALAM POSTINGAN
Anda bisa menampilkan gallery photo keren ini dalam postingan atau pada halaman mandiri blog anda dengan menambahkan kode berikut pada bagian HTML.
Ingat pada bagian HTML bukan bagian Compose!
<div class="gallery"> <a tabindex="1"><img src="IMAGE LINK"></a> <a tabindex="2"><img src="IMAGE LINK"></a> <a tabindex="3"><img src="IMAGE LINK"></a> <a tabindex="4"><img src="IMAGE LINK"></a> <a tabindex="5"><img src="IMAGE LINK"></a> <a tabindex="6"><img src="IMAGE LINK"></a> <a tabindex="7"><img src="IMAGE LINK"></a> <a tabindex="8"><img src="IMAGE LINK"></a> <a tabindex="9"><img src="IMAGE LINK"></a> <a tabindex="10"><img src="IMAGE LINK"></a> <a tabindex="11"><img src="IMAGE LINK"></a> <a tabindex="12"><img src="IMAGE LINK"></a> </div>
Kustomisasi
Ganti IMAGE LINK dengan alamat gambar anda.Silahkan klik pratinjau, jika sudah sesuai dengan yang anda inginkan, silahkan publikasikan gallery photo anda.
Anda bisa mengedit lagi bagian CSS diatas, menyesuaikan dengan bagian posting blog anda dengan mengganti lebar dan tinggi gallery, atau menambah dan mengurangi jumlah photo yang ingin ditampilkan. Anda juga dapat menampilkan gallery photo dengan menghilangkan bagian sidebar blog, footer blog dengan menambahkan kode display: none.
Silahkan mengembangkan kreasi anda.
Demikian tutorial cara membuat gallery photo keren diblog, semoga bermanfaat. Jika ada pertanyaan seputar tutorial ini silahkan kemukakan pada kolom komentar.
Original Source: Script Tutorial
Cara Menambahkan Google Plus Comments Pada Blogger
Setelah memperbaharui editor HTML template blogger, nampaknya Google telah siap merilis banyak perangkat tambahan untuk menjadi yang terdepan, dan kali ini hadir dengan Google+ Comments untuk blogger. Suatu sistem komentar yang berbeda, tidak saja dapat membuat ikatan yang lebih kuat dengan pembaca anda tetapi juga diharapkan dapat meningkatkan keterlibatan pengguna G+. Bagaimana hal ini dapat bekerja? Lanjutkan membaca, saya akan menunjukkan bagaimana kinerja sistem Google+ Comments ini di blogger
Apa Saja Fitur Sistem Google+ Comments?
Baiklah sekarang kita akan membahas setiap aspek dari Google+ Comments, agar para blogger dapat memutuskan apakah tetap setia dengan sistem threaded comments atau mereka harus beralih pada sistem komentar baru saat ini.
- Antarmuka Interaktif: Komentar tampil dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau memberikan plus 1 dengan mudah. Anda dapat mengontrol komentar teman-teman anda karena interaktif dan langsung update.
- Publik atau Khusus: Sekarang pembaca anda dapat memposting komentar umum atau pribadi mereka kepada orang-orang dalam lingkaran G+ mereka atau selainnya, ketika orang browsing maka mereka dapat melihat komentar tersebut.
- Semua kegiatan pada satu tempat: Setiap kali seseorang akan berbagi kontent anda di Google+ atau mereka akan menanggapinya, maka secara otomatis akan menampilkan komentar mereka pada feed komentar di blog anda. Misalnya, jika ada diskusi terjadi tentang konten anda di Google+ maka komentar tersebut, balasan semuanya akan muncul di blog anda.
- Edit atau Hapus Komentar: Anda sekarang dapat mengedit atau menghapus komentar Anda. Melalui opsi fleksibilitas Google+ Anda dapat dengan mudah mengedit atau menghapusnya kapan saja, di mana saja. Anda tidak bisa serius, bukan?
Hal pertama yang perlu anda lakukan tentu harus terlebih dahulu menghubungkan blogger dengan profil Google+ anda. Setelah menghubungkan akun anda.
- Pada dasbor --> Klik tab Google+
- Sekarang untuk mengaktifkan Google Plus Comments anda harus mencentang kotak kecil disamping teks 'Gunakan Google+ komentar di blog ini'
- Selesai.
Tidak melihat perubahannya? Kemungkinan anda menggunakan custom template dan perlu untuk mengikuti langkah-langkah tambahan berikut:
- Pada dasbor --> Klik Tab Template --> Edit HTML --> Format Template
- Klik Dropdown lompat ke widget --> Blog1
- Klik code folding tanda panah pada <b:includable id='post' var='post'>
- Cari kode <div class='post-footer'> kemudian copy dan paste kode berikut dibawahnya:
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
- Simpan template dan lihat hasilnya diblog anda. Atau lihat demo komentar disini
Jika anda mengaktifkan sistem Google Plus Comments pada blog maka siapapun yang ingin memposting komentar harus register ke akun G+. Mengaktifkan sistem ini tidak akan menghapus komentar lama anda.
Demikian informasi dan tutorial kali ini, semoga bermanfaat.
Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel
Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog
- Setelah login ke akun blogger anda
- Pada dasbor >> klik tab template >> Edit HTML
- Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
- Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
- Click Ctrl+F >> cari kode <data:post.body/>
Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم</span></span></span></div><br/>
Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>
<div align='center'><span style='font-size: medium;'>ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين</span></div>
- Simpan template dan lihat hasilnya di blog anda.
Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.
Terimakasih.
ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Subscribe to:
Posts (Atom)
.jpg)
