Membuat iFrame Toolbar dengan Blogger Template

jquery template tutorial

Pengertian iFrame Toolbar sebenarnya sebuah rangka (frame) dengan menggunakan menubar atau toolbar yang muncul di bagian atas halaman web/blog. Sesuai namanya iframe akan seperti elemen/dokumen HTML, yang terpisah dengan konten frame. iFrame Toolbar bekerja dengan menggunakan jQuery, mirip seperti sticky top menubar, saat Anda scroll browser.

Penggunaan iFrame Toolbar sering dijumpai diblog/website seperti situs-situs Free Template, social network sites (facebook), search engines, dan lainnya. Atau pada saat Anda klik sebuah tommbol demo yang mengarahkan/redirect ke tab baru, disana akan terlihat iframe toolbar di bagian atas halaman demo.

iframe toolbar screenshot

DEMO

Bagi sobat Blogger, iFrame Toolbar ini juga dibutuhkan sebagai penunjang halaman demo / blog demo yang telah Anda buat. Keuntungannya, dapat membantu meningkatkan pageview blog Anda, setiap kali seseorang mengklik link-link blog utama yang ditambahkan pada iFrame toolbar, atau pembaca Anda dapat kembali ke situs Anda dengan klik pada link Home.

Pada tutorial ini, saya akan membahas cara Membuat iFrame Toolbar dengan Blogger Template. Jadi kita akan membuat sebuah blog baru di blogger, dan menggunakannya sebagai iFrame Toolbar. Sebenarnya, Anda juga dapat meng-host / upload di server sendiri, dengan free hosting seperti Github, untuk Google Drive atau Dropbox sepertinya tidak bisa. ( Untuk membuatnya dan upload di Github akan dibahas artikel selanjutnya)

Langkah Membuat iFrame Toolbar dengan Blogger Template 

1. Buat Blog Baru 

Pada Dasbor Blogger, silahkan buat blog simple/sederhana, beri nama blog baru Anda,eg: "http://mydemo.blogspot.com"
Untuk lebih detail tentang blog baru lihat di Cara Membuat Blog di Blogger

2. Donwload File (xml)

iFrame Toolbar ini berupa file xml, yang disesuaikan dengan blogger. Ukuran sizenya kurang lebih 11kb.
Download filenya dibawah ini:
Download

3. Upload File 

Kembali ke Blog Baru yang telah dibuat, buka Template > klik tombol Cadangkan/Pulihkan > Pilih: Unggah template dari file di hard drive Anda.
Klik tombol Choose File.
Setelah upload berhasil, klik lihat Blog, jika tampilan sesuai dengan Demo diatas berarti template iframe telah berhasil.

 So, sekarang blog baru Anda telah berubah dari Simple Blogger Template menjadi iFrame Toolbar Template (ini cuma istilah saya saja).
Bagaimana cara penerapan iframe ini menjadi template demo untuk blog Anda? Kita lanjutkan ke langkah berikut.

Penerapan iFrame Toolbar untuk Blog Demo 

Pada dasarnya, iframe ini bukan sebagai main page dari halaman posting atau halaman demo, ini hanya sebagai penunjang dari blog utama Anda. Dari toolbar pengunjung akan diberi opsi Back To Post (kembali ke Blog Utama), menggunakan kotak pencarian dengan tujuan Blog Utama, sosial icon, opsi label atau link-link url dari Blog Utama.
Untuk mengarahkan url Demo misalnya dengan iframe sebagai parameter, anda hanya menggunakan parameter :"?iframe=URL"

Contoh:

http://iframetool.blogspot.com/?iframe=http://target.blogspot.com/

ket :
http://iframetool.blogspot.com/ : blog iframetoolbar yang baru dibuat
http://target.blogspot.com/ : alamat blog/halaman yang dijadikan target
?iframe= : parameter untuk redirect blog sebagai frame

Untuk contoh demo diatas, saya memakai link dengan parameter sebagai berikut:

http://problogiz-demo.blogspot.com/?iframe=http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Ini berarti sebagai target tujuan untuk memasang iframe toolbar di url :http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Setiap Anda ingin menempatkan iframe toolbar di halaman blog atau Url yang diinginkan, gunakan iframe sebagai parameter seperti diatas.

Sekian dulu sobat semoga artikel ini bisa membantu, silahkan tanyakan bagi yang menemui kesulitan untuk Membuat iFrame Toolbar dengan Blogger Template

Read More

Widget Back To Top Efek Smooth Scrolling

jquery tutorial

proBlogiz

---

Membuat widget Back To Top dengan Efek Smooth Scrolling

Widget Back To Top tentu Anda sudah mengetahuinya, bukan? Sudah banyak sekali tutorial Blogger yang membahasnya, baik yang sedeharna hanya dengan membuat link anchor ke atas halaman (mengarahkan ke halaman atas blog) ada juga yang sudah menggunakan efek smooth scrolling  (dengan jQuery). Penggunaan script jQuery tentu lebih membuat fungsi tombol/button back to top lebih baik dan memberi kesan profesional di blog/situs Anda. Desain Blog kali ini juga tentang Cara Membuat widget Back To Top dengan Efek Smooth Scrolling, smooth scrolling ini berarti menggulung (bergulir) secara lembut/halus ke atas jika tombol diklik, tidak secara sekaligus.

Bagi Anda yang memiliki blog/situs  dengan konten yang banyak dan panjang, menambah widget Back To Top ini sungguh ide yang baik, Kawan. Dengan memberi kemudahan dan navigasi yang cepat bagi pengunjung, tombol kembali ke halaman atas ini adalah widget yang sempurna untuk blog Anda.

Buton/tombol Back To Top yang saya sharing ini, menggunakan script yang tidak rumit dan selain mempunyai efek smooth scrolling automatic (menggulung halaman otomatis secara lembut) juga efek fade in dan fade out (tombol akan muncul jika halaman telah discroll pada posisi tertentu kebawah halaman blog). Disamping itu script tersebut mudah diedit dan diganti seperti mengganti gambar ikon/tombol Back To Top, merubah ukuran gambar, mengganti teks attribut (Scroll Back to Top) dengan teks Anda sendiri. Oleh karena dalam artikel ini, saya juga telah menyediakan contoh-contoh image/gambar tombol Back To Top  dengan url-nya dibawah. (silahkan Anda pilih yang cocok)

Ok, now....langsung saja ke topik bagaimana cara membuat atau menambah widget Back To Top di blog ini, sebelumnya saya akan memulai dengan prinsip sederhana dari fungsi tombol back to top.

Pada dasarnya cara kerja fungsi link back to top ini sederhana, yaitu sebuah link yang menuju atau megarahkan pengguna ke halaman atas dari blog/website. Prinsipnya Anda bisa membuat tombol ini hanya dengan menggunakan kode sederhana dibawah ini :

<a href='#'>Back to Top</a>

Coba Anda klik link back to top dengan menggunakan contoh diatas:

Back to Top

Sebuah tag hyperlink yang memiliki nilai href="#", akan selalu menuju ke halaman atas situs. Pada dasarnya, setiap kali Anda membuat sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengkliknya.

Walaupun contoh diatas sangat sederhana, maka tentu kurang menarik dan hanya mengarahkan user keatas secara sekaligus karena memang tanpa menggunakan efek apapun (smooth scroll).

Maka sudah saatnya Anda memakai yang ini, fungsi back to top dengan smooth scrolling, caranya sangat mudah ikuti saja panduannya dibawah ini.

Cara Membuat/Menambah Widget "Smooth Scrolling Back To Top" di Blogger

• Masuk Blogger > pilih Tata Letak >
• Klik Tambah Gadget > pilih Add HTML/Javascript
• Copy semua kode dibawah, dan letakkan didalam kolom widget tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, 
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

original code by : www.dynamicdrive.com
little modif by me

Kemudian Simpan.
Hasilnya ( sebagai DEMO) Anda bisa lihat tombol "Back to Top" di blog ini, pojok kanan bawah tampak ikon, coba diklik aja.

Kostum :

*Script jQery:

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

Anda bisa menghapus jQuery diatas jika template Anda sudah menggunakan jquery.min.

*Text 'Scroll Back to Top' ganti dengan teks Anda sendiri jika mau.

*Untuk URL gambar/ikon tombol "back to top" pada kode yang berwarna biru :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>

*Angka="32px" : adalah besar ukuran ikon, jika kurang besar Anda bisa rubah menjadi 48 atau 50, jangan terlalu besar (tampilanya jelek) max= 50px.
*Gantilah URL ikon dengan contoh gambar/ikon dibawah ini (atau dengan ikon Anda sendiri), jika Anda tertarik dengan  ikon-ikon dibawah ( klik kanan pada ikon yang Anda pilih kemudian pilih "copy image URL", kemudian gantikan kode ikon URL-nya)

---

---

Silahkan pilih salah satu ikon-ikon keren "back to top" diatas dan copy URL image, kemudian ganti url ikon yang ada di code Widget Back To Top diatas (yang berwarna biru)

Gimana Sob!! udah coba?
Silahkan di comment atau ada yang ga jelas, feel free to ask me......

Happy Blogging...:)

Read More

Efek Salju Keren di Blog

jquery tutorial

Mungkin Anda sudah sangat mengenali efek yang satu ini, Efek Hujan Salju, Efek Salju Turun, Efek Falling Snow atau Efek Salju di blog atau apalah namanya, yang jelas semua itu untuk membuat tampilan blog semakin cantik, atraktif dan menarik banyak pengunjung. Ya tentu semua itu dilakukan untuk kebaikan blog, namun ada satu hal yang harus Anda pertimbangkan adalah penggunaan Javascript Efek Salju ini sedikit banyak akan mempengaruhi waktu loading halaman blog. 

Jika Anda benar-benar ingin memberi/membuat efek salju di blog Anda, saya sarankan gunakan kode Javascript Efek Salju yang ringan dan tidak rumit. Ini penting Anda pertimbangkan, karena maksud baik untuk mempercantik blog akan berubah menjadi bencana karena visitor/pengunjung blog Anda pergi sebelum sempat melihat blog Anda, akibat loading blog yang terlaaaaalu lamaaaaaa.......

So, solusinya cobalah gunakan Efek Salju Keren ini (hehe.....ternyata promosi produk sendiri), tapi ga ada salahnya Anda mencoba, karena Efek Salju Keren yang ini cukup unik dengan butiran-butiran salju   berbentuk objek unik yang jatuh dengan animasi berputar (rotate snow falling) dengan efek sesekali terhembus angin sepoi-sepoi......hehe keren Sob!!! 

Ada 2 style/type Efek Salju Keren yang saya sharing dibawah ini, Efek Salju "DesemberSnow 01" dan "DesemberSnow 02",  Anda bisa pilih salah satunya untuk menghiasi blog Anda

DEMO LIVE  >> Efek Salju "DesemberSnow 01"

DEMO LIVE  >> Efek Salju "DesemberSnow 02"

Cara Memberi/membuat Efek Salju Keren pada Blog

Caranya sangat mudah Sob, Anda hanya perlu menambah kode Javascript dan jQuery ini ke template blog dan selesai.

• Masuk Blogger > pilih Template > edit HTML
• Dan letakkan kode Javascript dan jQuery ini tepat diatas tag </head>

Efek Salju "DesemberSnow 01"

Kode scirpt untuk efek salju "DesemberSnow 01"

<script src="http://problogizjs.googlecode.com/files/desembersnow.min.js" type="text/javascript"/>

Kode jQuery untuk memberi efek berputar pada butiran salju

<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js" type="text/javascript"/>

Efek Salju "DesemberSnow 02"

Kode scirpt untuk efek salju "DesemberSnow 02"

<script src='http://problogizjs.googlecode.com/files/desembersnow2.min.js' type='text/javascript'/>

Kode jQuery untuk memberi efek berputar pada butiran salju

<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js" type="text/javascript"/>

Kemudian Save Template

Alternatif  lain memberi Efek Salju Keren pada Blog dengan menambahkan sebagai widget/gadget Blogger. 

• Masuk Blogger > pilih Tata Letak > add HTML/Javascript
• Dan pasang/letakkan kode Efek Salju Keren diatas
• Kemudian Simpan

Untuk penulisan kode Javascript pada widget, seperti berikut :

<script src="http://problogizjs.googlecode.com/files/desembersnow.min.js"></script>
<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js"></script>

Selesai!!

Lihatlah hasilnya, sekarang blog Anda ditaburi salju-salju yang berjatuhan. Selain itu waktunya sangat tepat  Anda memberi efek salju "DesemberSnow" ini di blog, karena sebentar lagi tiba waktunya bagi yang merayakan Hari Raya Natal yang identik dengan moment turunya salju itu. 

Browser Support untuk Efek Salju 

Basicly, efek ini menggunakan Javascript yang secara umum kompatibel di hampir semua browser (apalagi browser modern), efek ini akan bekerja sempurna pada browser Chrome, dan support juga di browser Firefox 3+, Opera 6+, IE 9+ (efek shadow salju kurang baik), Safari.

Good Luck and Enjoy it!!

Read More

Membuat Related Post Dengan Fungsi Scroll-DropDown

jquery tutorial

proBlogiz

---

Membuat Related Post atau Artikel Terkait di blog Anda akan memberi banyak keuntungan khususnya meningkatkan pageview blog Anda. Selain itu fitur ini akan memudahkan pembaca Anda unutk mencari artikel-artikel yang terkait topik. Saya akan membagi kembali, setelah sebelumnya juga sudah sharing

Cara Buat dan Pasang Artikel Terkait di Blogger, namun tutorial kali ini juga berkaitan dengan permintaan seorang pengunjung yang menanyakan cara Membuat Related Post Dengan Fungsi Scroll-DropDown.

Related Post Dengan Fungsi Scroll-DropDown.

Pada fungsi Related Pos ini, mempunyai fitur Scrolling down dan artikelnya ditampilkan dengan style DropDown, seperti gambar diatas. Ada penambahan kode CSS untuk box/kotak Related Post, sehingga setiap Anda scrolling artikel, judul / tulisan "Artikel Terkait" masih tetap berada diatas / fixed.

Langkah Membuat Related Post Dengan Fungsi Scroll-DropDown

Masuk Blogger > Template > edit HTML
Back up template dahulu > klik Download Full Template
Check "Expand Widget Templates" box

Tekan Control + F > cari kode <data:post.body/>

Copy  kode script HTML berikut dan letakkan setelah/dibawah tag <data:post.body/>

<!-- START Related posts--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <H2>Artikel Terkait:</H2> <DIV class='rbbox'> <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <DIV id='albri'/> <SCRIPT type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;albri&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if> <!-- END Related posts -->

note : 

pada beberapa template terdapat lebih dari satu tag <data:post.body/>, oleh karena itu Anda bisa pilih salah satu kalau gagal tag yang pertama pilih tag yang kedua atau cobalah semuanya dimana yang berhasil.

Selanjutnya, copy kode CSS berikut dan letakkan diatas tag  ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

Kemudian Save Template

Selesai !!
Lihat hasilnya Related Post Dengan Fungsi Scroll-DropDown disalah satu postingan Anda.

Salaam

Read More