Professional Blogger

RANDOM POST EFEK MODAL JQUERY UI

noreply@blogger.com (Bg-Mart) — Mon, 23 Jun 2014 03:52:00 -0700

Random Post Efek Modal Jquery UI - Random post atau orang sering menyebutnya recent post adalah widget unik yang berfungsi untuk menampilkan artikel maupun postingan yang sebelumnya sudah kita publikasikan. Pada widget Professional Blogger kali ini saya akan memberikan sedikit contoh random post dengan blind dan explode efek modal jquery ui, untuk contoh efek - efek jquery ui lainnya baca juga contoh efek -efek jquery ui.


<style scoped="scoped"
type="text/css">

#dialog {background:#fff;color:#fff;width:300px;height:80px}

.ui-dialog-title{color:#fff}

#opener{position:relative;background:#2980b9;color:#fff;border:3px
solid #2980b9;padding:6px 6px}

i.fa-random{color:#fff;font-size:16px}

</style>

<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />

 <script
src="//code.jquery.com/jquery-1.10.2.js"></script>

 <script
src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

  $(function() {

    $( "#dialog" ).dialog({

      autoOpen: false,

      show: {

        effect: "blind",

        duration: 1000

      },

      hide: {

        effect: "explode",

        duration: 1000

      }

    });



    $( "#opener" ).click(function() {

      $( "#dialog" ).dialog(
"open" );

    });

  });

  </script>



<div id="dialog" title="RANDOM
POST">

<div id='bp_recent'></div>

<script style='text/javascript'
src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>

<script style='text/javascript'>

var numberOfPosts = 12;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 70;

var imgFloat = 'left';

var myMargin = 9;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

<script src='http://1stproblogger.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

</div>

<button id="opener"><i class="fa
fa-random"></i> RANDOM POST</button>

Anda cukup mengganti http://1stproblog.blogspot.com/ menjadi situs/url blog anda.

Demikian sedikit widget blog metro ui kali ini, baca juga menu metro ui modal dialog dan semoga bermanfaat.

Jika menemukan kesalahan atau pertanyaan di atas yang belum jelas dapat memberikan komentar dibawah ini.

DEMO : RANDOM POST DENGAN JQUERY UI MODAL

noreply@blogger.com (Bg-Mart) — Mon, 23 Jun 2014 01:28:00 -0700

SEO

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 19:18:00 -0700

Tempalate

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 19:17:00 -0700

Widget

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 19:14:00 -0700

Uang Di Blogger

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 19:12:00 -0700

Etika Blogging

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 18:59:00 -0700

Member Aktif Professional Blogger

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 08:00:00 -0700

Profil Admin

noreply@blogger.com (Bg-Mart) — Sun, 22 Jun 2014 00:05:00 -0700

Mengenal Admin

Desaign

<div class="samsury-metro-menu">
<ul class="navi">
 <li id="n1"><a class="samsury-tab1" href="#" title="HOME" ></a>
<ul class="sub">
 <li class="l"><a class="samsury-fb" href="#" title="FACEBOOK"></a></li>
 <li class="c"><a class="samsury-tw" href="#" title="TWITTER"></a></li>
  <li class="r"><a class="samsury-g" href="#" title="GOOGLE +"></a></li>
<li class="r1"><a class="samsury-rss" href="#" title="RSS FEED"></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" title="LABEL" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><span>LABEL 1</span></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><span>LABEL 2</span></a></li>
 <li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><span>LABEL 3</span></a></li>
<li class="r1"><a class="samsury-tab2sub" href="#" title="label 4"><span>LABEL 4</span></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#" title="ARCHIVE" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><span>ARSIP 1</span></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><span>ARSIP 2</span></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><span>ARSIP 3</span></a></li>
<li class="r1"><a class="samsury-tab3sub" href="#"><span>ARSIP 4</span></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#" title="PARTNER LINK" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="samsury-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="samsury-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>

Cara Melakukan Riset Kata Kunci Di Google Keyword Planner

noreply@blogger.com (Bg-Mart) — Sat, 21 Jun 2014 22:31:00 -0700

Setiap blogger seharusnya mengetahui cara melakukan riset kata kunci dengan menggunakan Google Keyword Planner. Kenapa? Karena itu akan membantu kita mengukur potensi trafik yang bisa kita peroleh.

Ini adalah tahap awal yang wajib anda lakukan jika anda mengharapkan sesuatu dari aktifitas blogging. Kalau anda melakukan blogging just for fun, maka tentunya anda tidak perlu melakukan ini.

Kenapa saya katakan riset kata kunci di Google Keyword Planner ini sebagai sesuatu yang penting? Karena seringkali saya menemukan banyak orang mengalami kekecewaan besar dalam aktifitas blog ataupun bisnis online-nya karena mengabaikan yang satu ini. Mereka sudah menghabiskan banyak waktu dan tenaga dalam optimasi hanya untuk mendapatkan trafik yang sangat kecil .... Jika trafik saja kecil, maka tentunya anda bisa membayangkan bagaimana besarnya persentase yang bisa diubah menjadi sebuah transaksi.

Lain kasus kalau sekali deal hasilnya lumayan besar.... Misalnya, anda deal menjual sebuah rumah.... hasilnya bisa dipakai untuk beberapa bulan ke depan sambil menunggu deal lainnya.

Jadi sebelum anda kecewa karena trafik yang sangat buruk, ada baiknya anda segera melakukan riset keyword dengan menggunakan Google Keyword Planner ini. (Sebenarnya ini adalah alat "pengganti" dari alat riset kata kunci Google External yang karena sesuatu hal Google keyword tools ini ditutup agustus 2013 yang lalu)

1. Mendaftarkan Akun Google Anda Pada Adwords

Kalau anda sudah mempunyai sebuah akun Google, maka anda cukup melakukan prosedur di bawah ini untuk mendapatkan sebuah akun Adwords (sebuah customer ID).

a. Silahkan masuk ke dalam halaman Google keyword planner (klik di sini)b. Anda akan diminta melakukan login dengan menggunakan akun dan password gmail

c. Pilih Zona Waktu dan setelahnya klik CONTINUE

d. Tunggu pesan bahwa anda sudah berhasil membuat akun dan klik link untuk membuka akun adwords anda.

e. Anda akan diminta sekali lagi melakukan login, jadi masukkan lagi akun dan password gmail yang sebelumnya sudah didaftarkan....

Dengan demikian pendaftaran anda sudah selesai. Anda siap menggunakan Google Keyword Planner....

2. Cara Menggunakan Google Keyword Planner Untuk Melakukan Riset Kata Kunci

Untuk memilih kata kunci dengan menggunakan alat eksternal Google ini, silahkan ikuti panduan di bawah ini.

a. Setelah anda masuk ke halaman ADWORDS klik menu TOOLS AND ANALYSIS, akan muncul drop down....yang menampilkan KEYWORD PLANNER, klik sub menu tersebut.

b. Pada halaman baru klik Search for new keyword and ad group ideas

c. Masukkan kata kunci yang anda inginkan pada formulir, lalu ubah lokasi dan bahasa menjadi Indonesia (jika target anda hanyalah pasar domestik). Setelah itu klik GET IDEAS

d. Pada halaman hasil, klik tab KEYWORD IDEAS untuk menampilkan daftar panjang.e. Jika anda pebisnis online, maka klik AVG.MONTHLY SEARCHES untuk memperlihatkan kata kunci dengan pencarian terbanyakf. Jika anda pencari uang dari memasang iklan Adsense, maka klik AVG.CPC untuk memperlihatkan kata kunci dengan bayaran termahal

Oleh karena Avg. Monthly Searches adalah parameter jumlah pencarian kata kunci, maka nilai inilah yang harus menjadi fokus utama perhatian anda. Ada 2 hal yang perlu anda ketahui tentang nilai dari Avg. Monthly Searches ini, yaitu:

g. Google menampilkan hasill pencarian exact. Yang dimaksud dengan exact adalah jumlah pencarian yang dilakukan dengan memasukkan kata kunci yang benar-benar sama persis dengan yang anda ketikkan saat melakukan riset.h. Oleh karena hasilnya adalah exact, maka anda harus mencoba memasukkan beberapa variasi lain dari kata kunci anda untuk menemukan jumlah pencarian yang sebesar-besarnya dari riset kata kunci ini

Bagaimana kalau misalnya setelah banyak variasi dan hasilnya tetap kecil? Anda bisa memperluas wilayah dengan membahas masalah-masalah lain yang masih cukup berkaitan dengan topik anda saat ini. Jadi anda bisa mendapatkan trafik tambahan dari kata kunci "perluasan" tersebut. Untuk mengkonversinya, pastikan anda memasang banner yang menarik perhatian....

Kalau setelah diperluas masih juga kecil nilai pencariannya? Ya tidak ada pilihan selain mengoptimalkan yang kecil itu. Apakah yang sedikit itu bisa anda ubah menjadi nilai uang yang lumayan? Kalau tidak sebaiknya dipikirkan sekali lagi, apakah bisnis atau rencana blogging anda ini berharga untuk dilanjutkan...

Jadi seringkali riset kata kunci itu tidak membawa anda melihat penghasilan yang luar biasa, tapi sekedar "menyelamatkan" anda dari aktifitas yang membuang waktu dan tenaga anda....

Tukar Link

noreply@blogger.com (Bg-Mart) — Sat, 21 Jun 2014 20:24:00 -0700

Tukar Link!

Cukup dengan menempatkan link Professional Blogger ini di blog Anda, maka link Blog Anda akan terpasang di blog Professional Blogger . Persyaratannya :

1. Judul : Tips Professional Blogger Harus dofollow.
2. Untuk lebih mudahnya, cukup salin script HTML dibawah ini, dan tempatkan di blog Anda:

<a href="http://1stproblog.blogspot.com/" target="_blank">Professional Blogger</a>

3. Blog yang bertukar link dengan Professional Blogger ini tidak boleh ada yang mengandung konten P*RNO, S*ARA, S*PAM, Permusuhan, Virus dan hal – hal negative lainnya

Apabila Anda melanggar ketentuan diatas, mohon maaf, maka link blog Anda akan DIHAPUS tanpa pemberitahuan sebelumnya! Setelah Anda memasang link Tips Professional Blogger, harap melakukan konfirmasi dengan meninggalkan komentar yang berisikan alamat blog Anda. Link yang sudah dikonfirmasi akan ditampilkan di laman Tukar Link ini. Selamat Bertukar Link! Salam Blogger.

Daftar blogger yang sudah di tukar linknya :

No	Nama Pemilik Blog	Alamat Blogger
1	Bg Soji Djarum	http://soji-djarum.blogspot.com/
2	Martinus Sarumaha	http://jebret-cerot.blogspot.com

Gallery Foto Untuk Blogger

noreply@blogger.com (Bg-Mart) — Fri, 20 Jun 2014 20:24:00 -0700

Saya tidak pernah berpikir kita bisa memiliki cahaya, loading cepat, lucu dan namun sangat dikontrol Galeri Gambar atau slide dengan bermain dan jeda pilihan. Menggunakan Jquery, JavaScript dan CSS yang kukasihi dan HTML dan terima kasih kepada drive yang dinamis kami mampu membuat blogger widget yang kompatibel yang akan menampilkan posting Anda ditampilkan, foto, gambar dll dengan cara yang indah. Sekali lagi aku mencoba tingkat terbaik saya untuk membuatnya menjadi salah satu instalasi langkah. Jadi Anda hanya perlu copy dan paste kode di dalam widget blogger untuk membiarkan sesuatu bekerja. Mohon melihat demo di blog ini terhadap sidebar kanan bawah.

Gallery Images Untuk Blogger

1. Login ke Blogger

2. Setelah masuk ke halaman blogger anda pilih Tata Letak

3. Pilih HTML/JavaScript

4. Kemudian copi code dibawah ini

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/ 
#simplegallery1{ //CSS for Simple Gallery Example 1 
position: relative; /*keep this intact*/ 
visibility: hidden; /*keep this intact*/ 
border: 1px solid #666; 
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) 
text-align: left; 
padding: 2px 5px; 
font: 10px normal verdana, arial; 
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={ 
    loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwuAN2QoOfbpq9LNuI_BXaLZDBOKGrLOt_Q5Q3GizaYbYEeJCYvWxZymj8XcekJ2qAvdnEINAl8xTzdBO00m9Q8Q_3oubfXBNJM-9SfvwSwUC_6quvDbA-Jc6Yyvnn8nfEFVm0B-PH-0/s400/ajaxload.gif', //full path or URL to loading gif image 
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container 
    images: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMsJ9OAo5Ez42SuZKakkbQztKVGZlwSbyZwBZU5ZCOb0CI_FDQ_7WgqmfJiNKW40Be8Flp10E3mCCI8_uOe9nHvObcEjL3x0WdrVigOnZSmETwuZygbNzLPARlhc0xP-OlFTolkcjm6M/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGB4TMpJs-xOz4RYL4k6NIqE1G0RytAN_oHDpijLeSAlu3zTR4vv2TVH9AATdwMkLSiZHaHpSvXamuT4211bydfo8pgqRK44TH7Je37jzp0E_luWuNLusrLYFSwsq7WOp3A5CY_nK8z0/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY6VBIpidC11Rhbl1Fa6dbrxEPQ4mpT8MRA5li01gfX-yK2WJGB0aGJ9ALPwlkBR9VEjnVyT8BOpzH-XzjcxY_lW9n-hsE_D-yW0n-kryxM69DKqRHsB9-e4-Xd3ydjYBCdnUdUrIfbiE/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIOY8zK69kFSyYzX09ZOnG7laZCjRDHx67nm18C27bhcwt7DY7jNf0G__2b4E0DX3hPrhOjQ7VEntKQkY0VRVjOrYLqYjxy33LnpHu5C3ojnTWy0CJV6uLK1sJ_nRO7qv1QsvISx2GLow/s400/pause.gif'], //nav panel images (in that order) 
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images 
    slideduration: 500 //duration of slide up animation to reveal panel 
}
function simpleGallery(settingarg){ 
    this.setting=settingarg 
    settingarg=null 
    var setting=this.setting 
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height) 
    setting.fadeduration=parseInt(setting.fadeduration) 
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0 
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty 
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery 
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play 
    setting.currentstep=0 //keep track of # of slides slideshow has gone through 
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles 
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) 
    setting.oninit=setting.oninit || function(){} 
    setting.onslide=setting.onslide || function(){} 
    var preloadimages=[], longestdesc=null, loadedimages=0 
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it 
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" 
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif 
        var loadgif=new Image() 
        loadgif.src=simpleGallery_navpanel.loadinggif 
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent() 
    })() 
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images 
        preloadimages[i]=new Image() 
        preloadimages[i].src=setting.imagearray[i][0] 
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length) 
            setting.longestdesc=setting.imagearray[i][3] 
        jQuery(preloadimages[i]).bind('load error', function(){ 
            loadedimages++ 
            if (loadedimages==setting.imagearray.length){ 
                dfd.resolve() //indicate all images have been loaded 
            } 
        }) 
    } 
    var slideshow=this 
    jQuery(document).ready(function($){ 
        var setting=slideshow.setting 
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV 
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found 
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") 
            return 
        } 
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
            .css({position:'absolute', left:0, top:0}) 
            .appendTo(setting.$wrapperdiv) 
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif 
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects 
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            setting.descdiv=simpleGallery.routines.adddescpanel(setting) 
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8}) 
            .bind('mouseover mouseout', function(e){ 
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8}) 
            }) 
            .bind('click', function(e){ 
                var keyword=e.target.title.toLowerCase() 
                slideshow.navigate(keyword) //assign behavior to nav images 
            }) 
        dfd.done(function(){ //execute when all images have loaded 
            setting.$loadinggif.remove() 
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')}) 
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')}) 
            slideshow.showslide(setting.curimage) //show initial slide 
            setting.oninit.call(slideshow) //trigger oninit() event 
            $(window).bind('unload', function(){ //clean up and persist 
                $(slideshow.setting.navbuttons).unbind() 
                if (slideshow.setting.persist) //remember last shown image's index 
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) 
                jQuery.each(slideshow.setting, function(k){ 
                    if (slideshow.setting[k] instanceof Array){ 
                        for (var i=0; i<slideshow.setting[k].length; i++){ 
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div 
                                slideshow.setting[k][i].innerHTML=null 
                            slideshow.setting[k][i]=null 
                        } 
                    } 
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div 
                        slideshow.setting[k].innerHTML=null 
                    slideshow.setting[k]=null 
                }) 
                slideshow=slideshow.setting=null 
            }) 
        }) //end deferred code 
    }) //end jQuery domload 
}
simpleGallery.prototype={
    navigate:function(keyword){ 
        clearTimeout(this.setting.playtimer) 
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 
        if (!isNaN(parseInt(keyword))){ 
            this.showslide(parseInt(keyword)) 
        } 
        else if (/(prev)|(next)/i.test(keyword)){ 
            this.showslide(keyword.toLowerCase()) 
        } 
        else{ //if play|pause button 
            var slideshow=this 
            var $playbutton=$(this.setting.navbuttons).eq(1) 
            if (!this.setting.ispaused){ //if pause Gallery 
                this.setting.autoplay[0]=false 
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
            } 
            else if (this.setting.ispaused){ //if play Gallery 
                this.setting.autoplay[0]=true 
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1]) 
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]}) 
            } 
            slideshow.setting.ispaused=!slideshow.setting.ispaused 
        } 
    },
    showslide:function(keyword){ 
        var slideshow=this 
        var setting=slideshow.setting 
        var totalimages=setting.imagearray.length 
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) 
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) 
            : Math.min(keyword, totalimages-1) 
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex]) 
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground 
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: 
                clearTimeout(setting.playtimer) 
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below) 
                try{ 
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage) 
                }catch(e){ 
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) 
                } 
                setting.currentstep+=1 
                if (setting.autoplay[0]){ 
                    if (setting.currentstep<=setting.totalsteps) 
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1]) 
                    else 
                        slideshow.navigate("play/pause") 
                } 
            }) //end callback function 
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background 
        setting.fglayer=setting.bglayer 
        setting.bglayer=(setting.bglayer==0)? 1 : 0 
        setting.curimage=imgindex 
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length 
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description 
            setting.$descpanel.css({visibility:'visible'}) 
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3] 
        } 
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled) 
            setting.descdiv.innerHTML=null 
            setting.$descpanel.css({visibility:'hidden'})
        } 
    },
    showhidenavpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1] 
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            this.showhidedescpanel(state) 
    },
    showhidedescpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? 0 : -setting.descpanelheight 
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
    } 
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){ 
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide? 
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />' 
        layerHTML+=(imgelement[1])? '</a>' : '' 
        return layerHTML //return HTML for this layer 
    },
    addnavpanel:function(setting){ 
        var interfaceHTML='' 
        for (var i=0; i<3; i++){ 
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0) 
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next') 
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i] 
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> ' 
        } 
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>' 
        setting.$navpanel=$('<div class="navpanellayer"></div>') 
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'}) 
            .appendTo(setting.$wrapperdiv) 
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs 
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'}) 
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div 
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div 
            .appendTo(setting.$navpanel) 
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects 
    },
    adddescpanel:function(setting){ 
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>') 
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'}) 
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div 
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div 
            .eq(2).html(setting.longestdesc).end().end() 
            .appendTo(setting.$wrapperdiv) 
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext') 
        setting.descpanelheight=$gallerydesctext.outerHeight() 
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'}) 
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object 
    },
    getCookie:function(Name){ 
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 
        if (document.cookie.match(re)) //if cookie found 
            return document.cookie.match(re)[0].split("=")[1] //return its value 
        return null 
    },
    setCookie:function(name, value){ 
        document.cookie = name+"=" + value + ";path=/" 
    } 
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({ 
    wrapperid: "simplegallery1", //ID of main gallery container, 
    dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly 
    imagearray: [ 
        ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 2", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 3","#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 4", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 5", "#", "_new", "DESCRIPTION"]
    ], 
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] 
    persist: false, //remember last viewed slide and recall within same session? 
    fadeduration: 500, //transition duration (milliseconds) 
    oninit:function(){ //event that fires when gallery has initialized/ ready to run 
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")) 
    }, 
    onslide:function(curslide, i){ //event that fires after each slide is shown 
        //Keyword "this": references current gallery instance 
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) 
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) 
    } 
})
</script>
<div id="simplegallery1"></div>

Anda dapat mengubahnya :

Mengubah ukuran semua gambar Anda ke ukuran yang tetap. Untuk mengubah ukuran gambar mengedit 300, 200 di mana 300 adalah lebar dan 200 adalah tinggi. Jika gambar Anda adalah ukuran yang lebih besar maka mereka akan dipotong agak diubah ukurannya. Jadi yang lebih baik bahwa Anda secara manual terlebih dahulu mengubah ukuran gambar Anda di Photoshop dan kemudian lanjutkan.
Upload gambar Anda di blogger dan kemudian mengganti IMAGE LINK 1, IMAGE LINK 2, ...., seterusnya dengan Image Anda link dalam urutan itu.
Ganti # dengan Page Link. Para pengunjung akan klik gambar untuk mendarat di halaman sehingga menyebutkan URL dari halaman tersebut. Jika Anda tidak ingin link gambar maka cukup hapus #
Ganti DESCRIPTIONdengan beberapa informasi tentang gambar. Decription Gambar ini akan muncul di bagian atas ketika pengguna melayang kursor di atasnya. Jika Anda tidak ingin menulis deskripsi apapun maka cukup menghapus DESCRIPTION
Jika Anda tidak ingin gambar untuk bermain secara otomatis kemudian mematikan auto play. True atau False.
Untuk mengubah interval waktu antara berikutnya dan sebelumnya geser kemudian mengedit 2000
Itu saja! Anda semua dilakukan! :)

Anda dapat melakukan lebih banyak tapi saya tidak berbagi setiap hal di sini untuk kesederhanaan. Ya, Anda dapat mengubah seluruh tampilan, warna, font dan semua.Jika Anda memerlukan penyesuaian lebih lanjut silahkan berikan komentar anda.

Perusahaan Milioner Itu Berasal Dari Blogger

noreply@blogger.com (Bg-Mart) — Fri, 20 Jun 2014 18:05:00 -0700

Pernah bertanya-tanya di mana blog Anda dapat membawa Anda menjadi Milioner? Banyak blogger bertujuan untuk membuat uang dari blog mereka. Beberapa bercita-cita untuk menjadi probloggers, mendapatkan enam atau bahkan tujuh angka. Sedikit lagi pergi untuk membangun bisnis full-blown balik blog mereka yang membuat mereka jutaan! Beberapa bulan lalu, saya berpendapat bahwa membuat uang besar dari blog sekarang sangat sulit, hampir mustahil. Tapi tidak jika Anda melakukannya dengan cara beberapa orang dalam daftar di bawah ini yang anda miliki! Berikut adalah beberapa perusahaan multi-juta dolar yang lahir sebagai blog biasa!

1. CopyBlogger.com

Sebagian besar dari Anda mungkin tahu tentang CopyBlogger.com. Hal ini dimiliki oleh CopyBlogger Media, perusahaan induk untuk sejumlah layanan online dan properti termasuk StudioPress, Scribe, Sintesis, Premise, dan banyak lagi! Jika Anda pengguna WordPress, Anda harus tahu tentang StudioPress, pencipta salah satu kerangka kerja yang paling populer WordPress - Kejadian, dan berbagai tema Wordpress.

Perusahaan ini awalnya dimulai oleh Brian Clark, yang pernah menjadi pengacara. Tapi dia dialihkan, dan memutuskan bahwa tulisan itu lebih kepada keinginan dari praktek hukum.

Sebelum memulai CopyBlogger.com pada tahun 2006, Brian Clark adalah seorang pengacara.

"Aku benci praktek hukum dan saya terpesona oleh Internet. Transisi ini ekstrim saya kira, tapi aku selalu punya hal untuk menulis, jadi aku mulai membuat konten online lebih dari satu dekade lalu. Sekarang itu hanya bagian dari diriku. "

Selama empat tahun, Brian dan kru dipompa keluar posting setelah posting, beberapa kali per minggu dengan segelintir posting tamu di antaranya. Dengan jaringan proyek lain dan kemitraan pembuatan bir, Brian membawa mereka bersama-sama pada tahun 2010 untuk menciptakan Copyblogger Media:

"Selama 4 tahun terakhir, saya telah meluncurkan beberapa perusahaan dari blog sederhana ini saya. Gagasan bahwa membangun penonton dengan konten dan membiarkan ide-ide menghasilkan pendapatan, produk, dan jasa mengungkapkan diri mereka sendiri berdasarkan apa yang benar-benar ingin penonton telah bekerja luar biasa baik. "

Salah satu alasan CopyBlogger.com melakukannya dengan baik untuk menarik penonton adalah bahwa segala sesuatu di situs benar-benar gratis. Meskipun satu juta tampilan halaman bulanan, CopyBlogger.com tidak membuat sepeser pun. Sebaliknya, semua platform menghasilkan pendapatan mereka ada di domain lainnya dan mereka menggunakan CopyBlogger untuk membuat orang sadar dari mereka.

2. SitePoint.com

SitePoint.com, sebuah blog milik Matt Mickiewicz, melahirkan 99designs perusahaan desain. Ini dimulai ketika desainer dalam komunitas SitePoint mulai menantang satu sama lain untuk menciptakan desain terbaik. Akhirnya, orang lain dalam masyarakat bergabung, dan mulai menawarkan hadiah uang tunai untuk bekerja pada proyek-proyek nyata. Oleh karena itu, ide untuk sebuah perusahaan desain lahir.

Sekarang, 99designs adalah perusahaan 64 orang, dan merupakan dunia pasar online terbesar untuk outsourcing desain grafis. Ini telah membayar lebih dari $ 38 juta penggunanya.

Salah satu manfaat di bawah digunakan memiliki sebuah blog adalah memiliki akses langsung ke sekelompok orang tertentu. Jika Anda meminta mereka dan mengamati interaksi mereka, Anda akan menemukan apa yang mereka inginkan dan apa yang mereka bersedia untuk membayar. Kemudian, ketika Anda memulai, Anda akan sudah memiliki penonton terlibat.

3. QuickSprouts.com
Banyak dari kita tahu Neil Patel dan nya indah artikel mendalam mengenai QuickSprouts! Ia menerbitkan posting blog pertamanya pada bulan April 2007. Saat itu, dia bekerja pada startup-nya, Crazy Egg, dan juga bekerja pada badan internet marketing untuk menutupi kerugian yang ia hadapi pada startup nya. Menggabungkan pengetahuan dan pengalaman dari ini dan beberapa proyek lainnya, Patel datang dengan sebuah perusahaan analisis baru, KISSmetrics.

"Dengan pengetahuan baru ditemukan, kami memutuskan untuk membuat perusahaan analisis lain yang akan memecahkan masalah yang lebih besar daripada apa yang dipecahkan Gila Egg. Gila Egg baik-baik, tetapi tidak akan pernah bahwa perusahaan 100 juta dollar karena ukuran pasar untuk itu satu produk sangat terbatas"

Neil membuat uang kecil melalui bisnis konsultasi pemasaran, tetapi dia tidak suka pekerjaan. Jadi dia mulai bekerja di bisnis software sebagai gantinya, yang dia suka, dan unggul dalam hal itu. Hal ini berlangsung untuk menunjukkan apa yang dapat Anda capai jika Anda bergairah tentang sesuatu.

Mengapa saya berhubungan blogging untuk perusahaan online besar? Yah, seperti Neil sendiri mengatakan, Anda bisa mendapatkan keuntungan terbaik atas investasi melalui blogging - tidak ada bisnis lain datang dekat. Jadi, jika Anda berpikir tentang menciptakan hal besar berikutnya, mempertimbangkan mulai off sebagai blog, dan kemudian membangun pembaca yang solid yang kemudian akan memberi makan lalu lintas untuk startup baru Anda, memberikan jump start. Ini mungkin adalah rahasia bagaimana perusahaan-perusahaan ini menjadi begitu sukses.