https://bl.id/kumpulink_io_art

Memunculkan penghasilan di dashboar blogspot

  04:38:00    

              Nah seoke.com sedikit berbeda dengan postingan postingan yang pernah seoke.com potingkan .kali ini seoke.com pengen berbagi pengalaman yang mungkin bisa sangant bermanfaat bagi yang mebuutuhkan.


foto By adakportal.com
dan mungkin kalian juga  yang para pemula yang belum begitu paham dengan blogging dan keuntungan blogging,kalau menurut seoke.com mebuat blog sangatlah bermanfaat dan bisa pula dari ilmu yang kita dapaat dari saat ngblogging kita juga bisa mendapatkan penghasilan lebih dari blogging tersebut.

  • kenapa bisa di katakan seoke.com sangatlah bermanfaat di karnakan kita para blogging pasti setiap saat setipa waktu selalu mencari Update Update untuk bahan postingan blog,nah dari situ kita seakan tak merasa kita itu mendapat banyak ilmu,namun dari situ kita selalu menemukan untuk bahan yang akan di jadikan postingan dan kita seamkin banyak ilmu dan pengetahuan yang kita dapat
  • Dan bisa mendapatkan penghasilan lebih dari blogging,kenapa bisa????Y bisa di karnakan blogspot juga tidak serta diam dan membiarkan kita membuat postingan postingan yang begitu aja di bagikan untuk orang banyak.namun blogspot juga menyedikan untuk kita agar kita mendapatkan penghasilan lebih dari postingan, dan kita semakin bersemangat untuk membuat  postingan yang bermanfaat bagi orang banyak.
mungkin kalian sudah cukup mengerti apa yang seoke.com jelaskan di atas.dari sini lah seoke.com akan berbagi tentang bagai mana memunculan penghasilan di dashboar blogspot tersebut,
cukuplah mudah saat kalian akan munculkan penghasilan di dashboar blogspot.

  • Yang pertama yang harus kalian lakukan yang pastinya sudah punya akun blogspotnya tersebut
  • Sudah punya silahkan masuk dulu ke akun blog kalian
  • Setelah kalian di bawa ke blog Dasboar,seperti gambar di bawah ini 

foto by clownfishcafe.blogspot.co.id

  • kalian pilih Setting yang berada paling bawah dashboard 
  • pilih bahasa pemformatan lihat gambar di bawah ini

foto by www.scg.web.id

  • pilih bahasa inggris 
  • Dan yang terakhir yang harus kalian lakukan ilah save/simpan perubahan.
  • Dan lihat hasilnya di dashboar kalian widget penghasilan di dashboar blogspot sudah muncul sperti gambar di atas.
Gimana mudah bukan cara memunculkan penghasilan di dashboard blogspot.seoke.com mengucapkan terima kasih kalian sudah berkenan meluangkan waktu berkunjung di blog seoke.com yang berusaha untuk menyajikan code code untuk blog dan seputar blogging.

jangan lupa baca juga artikel yang menarika lainnya yang seoke.com telah postingkan,jika klaian butuh kode dasar HTML blog silahkan baca di kumpulan code Html untuk blog. dan kumpulan effec untuk blog






   / /

  No Comments

Membuat loading keren untuk blog

  04:01:00    

  Dari beberapa yang pernah seoke.com postingkan,kali ini seoke.com akan postingan tentang membuat loading untuk blog yang mungkin bisa di katakan keren dan unik..
mungkin untuk para master atau para senior blogging,mungkin saat masuk blog tidak di butuhkan di karna kan para master bolgging tidak buttuh dengan loading saat masuk untuk masuk ke blog mereka di karanakan blog para maser itu cukuplah seo frendly yang saat para pengunjung masuk tidak cukup lama saat mau masuk pada blognya,dan tidak lemot atau lambat.


foto by www.concernindiafoundation.org

Namun jika kalin yang membuatuhkan code code untuk membuat gambar loading di blognya.silahkan copy paste code code di bawah ini,dan kalian juga sudah mengerti dengan cara pemasang code code tersebut.


  • HTML

<div class="loader">
   <div class="bar">
      <div class="show"></div>
   </div>
</div>


  • CSS 

$main: #2196F3;
body {
   background-color: $main;
   .loader {
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:140px;
      height:30px;
      background-color:#fff;
      border-radius:100px;
      .bar {
         position: absolute;
         top:10px;
         left:10px;
         bottom:10px;
         right:10px;
         overflow:hidden;
            border-radius:100px;
         .show {
            position: absolute;
            top:0px;
            left:0px;
            bottom:0px;
            width:0%;
            background-color:$main;
            border-radius:100px;
            border-top-left-radius:0px;
            border-bottom-left-radius:0px;
            transition: width .2s ease;
            &:before {
               position: absolute;
               content: '';
               top:-10px;
               bottom:-10px;
               width:10px;
               background-color:#fff;
               left:0px;
               animation: baranimation 2s linear infinite;
            }
         }
      }
   }
}
@keyframes baranimation {
   0% {
      left:0%;
      transform:translateX(-100%);
   }
   100% {
      left:100%;
      transform:translateX(0%);
   }
}


  • JAVASCRIPT/JS 

 //Animation of the banner is CSS only
var loading = 0;
function loadbar() {
   $(".show").css("width", loading + "%");
   loading++;
   if(loading >= 100) {
      loading = 100;
   }
}
setInterval(loadbar, 150);

Mungkin hanya segitu yang bisa saya jelaskan dari tentanta cara membuat loading keren untuk blog,jika kalian tidak mengerti dengan saya ucapkan di atas silahkan kalian bisa tinggalkan pesanya di komentar,atau jika kalian punya keritik dan saran untuk blog seoke.com ini silahkan berkomentar.

dan baca juga artikel seoke.com yang menarik lainnya di Cara menginput kode Css pada Html dan pengertian javascript untuk blog.

   /

  No Comments

membuat slide gambar di blog

  07:04:00    

              Oke sobat seoke.com yang selalu setia mengunjungi seoke.com,akali ini seoke.com akan berbagi tentang Cara membuat slide gambar untuk blog.
slide gamab ialah gambar yang bergerak otomatis di blog,dan seoke.com akan menerangkan  dalam metode ini cara penerapan atau esangan code code tersebut.
Dan seoke.com  akan membuat slide yang begitu sederhana namun elegant.ukuran dalam slide ini cukuplah kecil tidak mengganggu saat loading masuk pada blog kalian.dan di desain secara detail oleh para master koding tersebut.


foto by www.tele-satellite-global.com


slide ini bisa termasuk menggunakan Javascript yang merupakan salah satu terbaik untuk menampilkan banyak informasi halaman yang relatif cukup kecil dan membuat fungsi dan piture yang baik.

Kita langsung aja mulai ke cara peerapan kode tersebut

  • Cari code sperti ini ]]></b:skin> dan letakan kode di bawah ini tepat di atas kode ]]></b:skin>

    • .easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging a.active { background: #15E3FF; border: 1px solid #15E3FF; } .paging a:hover { } .easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }


  •  Berikutnya cari code sperti ini </head> dan letak kode di bawah ini tepat di atas kode </head>
    <script type="text/javascript"> /*<![CDATA[*/ $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 4000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/ </script>
    • pada tahap bertikutnya cari code <div id="main-wrapper"> atau <div class ="main-wrapper"> jika klain tidak menukan seperti code yang 2 tadi silahkan cari yang mirip dengan code tersebut,di karnakan dalam setiap template blog itu berbeda beda tergantung yang membuat tersebut.
  • Setelah menemukan kode seperti di atau atau yang mirip code tersebut silahkan masukan kode di bawah ini tepat di bawah code tersebut
    <b:if cond="data:blog.url == data:blog.homepageUrl"> </b:if><br />
    <div class="easyslider">
    <div class="image_reel">
    <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image1.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image2.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image3.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image4.jpg" /></a> <a href="https://www.blogger.com/blogger.g?blogID=800603341005712978#"><img src="...image5.jpg" /></a> </div>
    <div class="descriptionslider">
    <div class="easytitledes">
    <a href="https://www.blogger.com/...post-link1.html">Post-Title 1</a><br />
    Description / Caption 1</div>
    <div class="easytitledes">
    <a href="https://www.blogger.com/...post-link2.html">Post-Title 2</a><br />
    Description / Caption 2</div>
    <div class="easytitledes">
    <a href="https://www.blogger.com/...post-link3.html">Post-Title 3</a><br />
    Description / Caption 3</div>
    <div class="easytitledes">
    <a href="https://www.blogger.com/...post-link4.html">Post-Title 4</a><br />
    Description / Caption 4</div>
    <div class="easytitledes">
    <a href="https://www.blogger.com/...post-link5.html">Post-Title 5</a><br />
    Description / Caption 5</div>
    </div>
    <div class="paging">
    <a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="1"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="2"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="3"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="4"> </a><a class="" href="https://www.blogger.com/blogger.g?blogID=800603341005712978#" rel="5"> </a></div>
    </div>

  • silahkan peratinjau dulu dalam template kalain dan lihat hasilnya 
    Mungkin cukup sekian dulu seoke.com menerangkan postingan tentang membuat slide gambar di blog.
    jika kailan punya kriti atau pun saran tentang postingan atau yang seoke.com sampaikan.silahkan tinggalkan pesanya di komentar yang seoke.com telah sipakan .
    Terima kasih.
    dan baca juga artikel menarik seoke.com yang lainya dengan cara membuat menu navigasi dengan gambar

   / /

  No Comments

Subscribe to: Posts (Atom)