https://bl.id/kumpulink_io_art

Cara memasang widget perlebel


Untuk cara memasanga widget perlebel kalian cukup ikuti tutorial yang seoke samapaikan


foto by http://bagaimanablog.blogspot.co.id
  • masuk akun blog klain 
  • pilih TEMPLATE 
  • lalu pilih EDIT HTML
  • cari kode ]]></b:skin>
  • dan letakan kode di bawah ini tepat di atas kode ]]></b:skin> tersebut
/*** Featured Categories ***/ img.label_thumb{ float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px;height:55px; width:55px; } img.label_thumb:hover{ background:#f7f6f6; }   .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong {} 


  • lalau kalian kode </head> dan letakan kode di bawah ini tepat di atasnya atau bisa di letakan di atas kode </body>
<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjwP97DiI_2bmGcKxB1sGSieY62Nbjyjw7_tINxx2xADh6rQdDt1OaA-sANAbNeHE4eHxo_p4D_xac7KCvL3mKfbQQ_rKc9dyt3z5-dlS6E1hJeIWP4frme_h1G53FOVVskqslqMlWwY4/';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script> 

  • Dan save template tersebut 
  • kita  pilih untuk pemasangna widgetnya
  • masuk pada TATA LETAK 
  • pilih TAMBAHKAN WIDGET
  • dan pilih HTML/JAVASCRIPT
  • masukan kode di bawah ini di kotak yang yelah di sediakan 
<div style="overflow:auto; width:100%px; height:100px; padding:10px; border:1px solid #999999; background-color:#DDE1E3"><script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script><script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>
Yang terakhir yang harus kita lakukan save dan lihat hasilnya.
 Baca juga artikel menarik lainya cara membuat kotak berlangganan dan cara menghilangkan obeng dan tang di blog
seoke.com mengucapkan terima kasih kalian sudah bersedia berkunjung di blog


Cara membuat kotak berlangganan blog


    Assalamualaikum wr.wb
pada kesempatan ini seoke akan berbagi bagai mana cara membuat kotak berlangganan untuk blog
saat penempatan kode juga tidak harus masuk pada kode kode templatelate tersebut.jadi cara ini sungguh sangat membantu untuk para pemula seperti seoke ini.

foto by http://bos-goblog.blogspot.co.id

  • masuk ke akun blog 
  • pilih TATA LETAK lalu pilih 
  • TAMBAH WIDGET 
  • lalu pilih lagi HTML/JAVASCRIPT
  • dan letakan kode di bawah ini pada kotak yang telah di sediakan

<style>
.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtvWbJ_K6awksIKVMCvsWaJ6Zzp-nx1YRrdGeIHotRHJDyGFAdtGT8kE7CseF-pv-V6ZCjOmP_sG7XpmHutwBUW4sw_XrQ0Ozd59kGLR9hxhlwifeSFfaeRK37Ahs-9fWCCRaxefXuYLCj/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.rb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="rb-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seoke', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="seoke" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Perhatian 

ganti yang berwatna BIRU dengan alamat feedburnerd kalian.
Dan jangan lupa save dan lihat hasilnya

butuh dengan button keren untuk blog dan navigasi dengan gambar silahkan kunjungi halaman tersebut.
seoke mengucapkan banyak berterima kasih.

Cara menghilangkann gambar obeng dan tang di blog


 ketemu lagi sahabatnya seoke,sudah cukup lama tidak pernah lagi buat posting ,mungkin bisa di katakan sangat sibuk di dunia nyata nya.jadi ga sempat buat postingn lagi,tapi oke para sahabat seoke kali ini seoke.com akan embagikan postingan tentang bagai mana cara menghilangkan obeng adan tang di blog untuk para pemula.soalnya para master blogging sudah ga asing lagi dengan tutorial seperti ini dan sudah berpengalaman sekali.

foto by http://kupukblog.blogspot.co.id

kita langsang ke caranya aja.

  • Yang pertama kalian yang harus lakukan ialah
  • masuk pada akun blog kalian
  • dan masuk ke dashboar blog
  • pilih template lalu piplih edit Html 
tinggal copy paste code di bawah ini tepat di atas code  ]]></b:skin>

.quickedit{display:none}

  • lalu simpan dan lihat hasilnya  
TB
jika pada blog kalian masih terdapat gambar obeng dan tang tersebut,terpaksa kalian harus menghapusnnya secara manual atau dengan menghapus kode kode tersebut satu persatu.
 hayooo pasti kalian bingung mau menghapus kode yang mana untuk gambar obeng dan tang tersebut.
 cari kode seperti  di bawah ini

<b:include name='quickedit'/>

dalam menghapus dengan cara manual kalian di wajibkan harus teliti dan kecermataan saat melihat code code tersebut.karena kalau tidak template kalian bukannya apa yang di harapkan malahan jadi error.
oke sahabatnya seoke mungkin cuma segitu yang bisa di bagikan oleh seoke.com.
dan jangan lewatkan pula artikel menarik lainya.Cara membuat tulisan keren di blog dan Cara memebuat postingan video di blog.
Terima kasih

cara membuat tulisan judul blog keren


 Selamat malam menjelang weekand besok sahabat seoke.com semua,oke kalia ini seoke.com akan membagikan tentang cra membuat tulisan judl blog keren.


foto By bukainfo.com

jika kalian terratik silahkan ikuti apa yang seoke.com jelaskan nanti dan cara penempatan kode tersebut
  • yang peretama yang pasti kalian sudah punya dulu blog atau yang nantinya kita gunakan untuk meenpatakan kode kode teersebut.
kita langsung ke code HTMLnya

  • CSS

/*punk seoke.com*/
.punk {
  font-size:6vw;
  margin-top:10vh;
  text-align:center;
}
.punk span {
  display:inline-block;
  margin:0 .05em;
  padding:0 .15em;
  min-width:.25em;
}
.punk span:first-child,
.punk span:last-child {
  position:relative;
}
.punk span:first-child:before {
  content:"";
  border:solid 2px #eee;
  border-top-width:.2em;
  border-radius:.25em;
  height:.5em;
  left:-0.1em;
  position:absolute;
  top:-0.25em;
  transform:rotate(20deg);
  width:.15em;
}
.punk span:first-child:after {
  background-color:inherit;
  content:"";
  height:.15em;
  left:.05em;
  position:absolute;
  top:.05em;
  transform:rotate(20deg);
  width:.1em;
}
.punk span:last-child:before {
  content:"";
  border:solid 2px #eee;
  border-top-width:.2em;
  border-radius:.25em;
  height:.5em;
  right:-0.1em;
  position:absolute;
  top:-0.25em;
  transform:rotate(-20deg);
  width:.15em;
}
.punk span:last-child:after {
  background-color:inherit;
  content:"";
  height:.15em;
  right:.05em;
  position:absolute;
  top:.05em;
  transform:rotate(-20deg);
  width:.1em;
}
/* font */
.punk span:nth-child(5n+1) {
  font-family:serif;
  font-size:1.25em;
}
.punk span:nth-child(5n+2) {
  font-family:sans-serif;
}
.punk span:nth-child(5n+3) {
  font-family:monospace;
  font-size:1.25em;
}
.punk span:nth-child(5n+4) {
  font-family:serif;
  font-style:italic;
}
.punk span:nth-child(5n+5) {
  font-family:fantasy;
}
/* shadow */
.punk span:nth-child(4n+1) {
  box-shadow:.05em .05em currentColor;
}
/* rotate */
.punk span:nth-child(3n+1) {
  transform:rotate(5deg);
}
.punk span:nth-child(3n+3) {
  transform:rotate(-5deg);
}
/* colour schemes */
.punk span:nth-child(12n+1) {
  background-color:#f09;
  color:#000;
}
.punk span:nth-child(12n+2) {
  background-color:#ff0;
  color:#f09;
}
.punk span:nth-child(12n+3) {
  background-color:#fff;
  color:#000;
}
.punk span:nth-child(12n+4) {
  background-color:#000;
  color:#ff0;
}
.punk span:nth-child(12n+5) {
  background-color:#f09;
  color:#000;
}
.punk span:nth-child(12n+6) {
  background-color:#ff0;
  color:#f09;
}
.punk span:nth-child(12n+7) {
  background-color:#fff;
  color:#f09;
}
.punk span:nth-child(12n+8) {
  background-color:#000;
  color:#ff0;
}
.punk span:nth-child(12n+9) {
  background-color:#f09;
  color:#fff;
}
.punk span:nth-child(12n+10) {
  background-color:#fff;
}
.punk span:nth-child(12n+11) {
  background-color:#ff0;
}
.punk span:nth-child(12n+12) {
  background-color:#000;
  color:#fff;
}
p {
  color:#bbb;
  font-family:monospace;
  font-size:5vw;
  margin:10vw;
  text-shadow:-1px -1px #ddd;
}
dan code HTMLny

 <h1 class="punk">
  <span>P</span><span>u</span><span>n</span><span>k</span><span> </span><span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>i</span><span>n</span><span>g</span>
</h1>
dan hasilnya akan seperti demo berikut silahkan kunjungi demo di bawah ini



dan jika kalian bingung dengan cara penempatan code CSS tau kode HTML silahkan tinggalkan pesanya di komentar.
Terima kasih telah berkunjung di blognya seoke.com yang selalu menyediakan code code sperti HTML,CSS,JAVASCRIPT dan tentang tutorial blog.
jang lupa juga kunjungi artikel yang menarik lainya Cara membuat share button melayang.dan Cara meunculakan penghasilan di dashboard blogspot.

effect button css


       Seperti yang saya postingkan  tentang Demo button efect slide nah kali ini seoke.pom mau mempostingkan tentang Effect button css untuk blog,jika kalian membutuhkan effect tersebut silahkan copy paste code code di bawah ini.


foto By www.sanwebe.com


seperti biasa kalin harus terlebih dahulu masuk pada blog kalian

  • masuk ke DASHBOARD 
  • pilih TEMPLATE 
  • terus pilih edit HTML 
Silahkan kalian cari kode ]]></b:skin>  dan masukan code di bawah ini tepat di atas kode tersebut.



  • CSS

.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  background: #fff;
}
.pulse-button {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.3em;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  letter-spacing: -1px;
  color: white;
  border: none;
  border-radius: 50%;
  background: #5a99d4;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}
@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}
setelah itu simpan template sobat semua.
Kita lanjut untuk pemasangn pada postingan kalian tetap dalam DASHBOAD blog lalu pilih POS dan pilih entri baru  pada mode HTML bukan COMPOSE,masukan kode di bawah ini dalam postingan kalian

  • HTML
<div class='container'>
  <span class='pulse-button'>pulse</span>
</div>

Jika kalian sudah siap mwmpostingkannya silahkan publikasikan postingan kalian dan lihat effect button tersebut berubah atau tidak,Jangan lewatkan jug artikel menarik lainnya tentang Cara membuat permalink pada blog  dan  Membuat toggle unik untuk blog.
Terima kasih kalian telah berkunjung di blognya seoke.com dan postingan effect button css.
jika kalian punya jeritik dan saran silahkan tinggalkan pesanya di komentar.
Terima kasih.

Cara membuat postingan video di blog


           Jumpa lagi sahabat seoke.com semoga kalian di beri selalu kesehatan oleh yang maha kuasa.oke gays kali ini seoke.com akan membagikan tentang Cara membuat postingan video di blog,sahabat membuatuhkan video dalam postingan atau p8n mau di pasang dalam blog kalian silahkan copy paste code codenya di bawah ini dan bila sahabat membutuhkan kode kode seperti cara membuat navigasi silahkan baca di postingan seoke.com sebelumnya yang telah di postingan beberapa waktu lalu.


foto By www.cowfest.org

Dalam membuat video dalam postingan atau di pasang dalam blog kalian sungguh bisa di katakan sangat lah mudah dan gampang saat memasangkan kode kode tersebut.
kalian cukup copy paste code CSS di bawah ini dan letakan di atas kode ]]></b:skin> 


  • CSS

#vid {
  margin-top: 20px;
}
#spin {
  width: 110px;
  height: 110px;
  background-color: #88CE02;
  border-radius: 50%;
  margin: auto;
  margin-top: 30px;
  border: 5px solid #333;
}
#spin .thumb {
  width: 25px;
  height: 25px;
  top: 20px;
  left: 20px;
  position: absolute;
  background-color: #333;
  border-radius: 50%;
}
#rail {
  background-color: #333;
  height: 5px;
  width: 360px;
  overflow: visible;
  margin: auto;
  margin-top: 40px;
  position: relative;
}
#rail .prog {
  height: 100%;
  position: absolute;
  background-color: #88CE02;
  opacity: 0.3;
}
#rail .thumb {
  background-color: #88CE02;
  width: 15px;
  height: 40px;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index:1000;
}
#logo {
  border-radius: 50%;
  position: absolute;
  z-index: 5000;
  top: 20px;
  right: 20px;
}
#links {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  font-size: 13px;
  font-family: tahoma;
  color: #fff;
}
#links a {
  text-decoration: none;
  font-size: 2.3em;
  color: #fff;
}
#twitter {
  position: absolute;
  bottom: 15px;
  right: 20px;
}
#pens {
  position: absolute;
  bottom: 15px;
  left: 20px;
}
Setelah itu kalian cari kode </body> biasanya kode </body >tersebut selalu berada di badian bawah pada kode HTML.Dan letakan kode di bawah ini tepat di atasnya.

  • JAVASCRIPT
<script type='text/javascript'>
var vid = document.getElementById("myVideo");
vid.onplay = function() {
    TweenLite.ticker.addEventListener('tick',vidUpdate);
};
vid.onpause = function() {
      TweenLite.ticker.removeEventListener('tick',vidUpdate);
}
vid.onended = function() {
      TweenLite.ticker.removeEventListener('tick',vidUpdate);
      vidUpdate();
};

var maxRX = 360 ,
    spin = document.querySelector('#spin') ,
    thumb = document.querySelector('#rail .thumb') ,
    prog = document.querySelector('#rail .prog') ;
Draggable.create(spin,{
  type:'rotation',
  bounds:{min:0,max:maxRX},
  onDrag:onDrag ,
  onPress:function(){ vid.pause()  },
  onRelease:function(){ vid.play()  }
});
Draggable.create(thumb,{
  type:'x',
  bounds:{minX:0,maxX:maxRX},
  onDrag:onDrag ,
  onPress:function(){ vid.pause()  },
  onRelease:function(){ vid.play()  }
});
function onDrag(){
  vid.currentTime = (this.x/maxRX)*vid.duration;
  if( this.target == spin ){
    TweenLite.set( thumb,{x:this.x}) ;
  }else{
    TweenLite.set( spin,{ rotation : this.x }) ;
  }
  TweenLite.set( prog , { width : this.x }) ;
};
function vidUpdate(){
  TweenLite.set( spin , {rotation:(vid.currentTime/vid.duration)*maxRX} ) ;
  TweenLite.set( thumb , {x:(vid.currentTime/vid.duration)*maxRX} ) ;
  TweenLite.set( prog , {width:(vid.currentTime/vid.duration)*maxRX} ) ;
};
</script>

Dan yang terakhir jika sahabat meminginkan video berada pada postingan kalian buka dashboar dan pilih entri baru,setelah berada pada halaman postinngan kalian pilih yang HTML dan masukan kode di bawah ini


  • HTML 
<div id="vid">
  <video id="myVideo" controls autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
  <div id="spin">
    <div class="thumb"></div>
  </div>
  <div id="rail">
    <div class="prog"></div>
    <div class="thumb"></div>
  </div>

dan publikasikan

NB jika kalian video tersebut berada dalam blog kalian cukup buka dashboar pilih TATA LETAK dan TAMBAHKAN WIDGET pilih HTML/JAVASCRIPT,letakan kode HTMLnya.Dan simpan

sahabat membutuhkan demo tersebut silahkan kunjungi demo nya di bawah ini




Terima kasih sahabat sudah berkunjung di postingan Cara membuat postingan video di blog,dan baca juga artikel terkait tentang Cara menginput code CSS pada HTML atau pengertian JAVACRIPT 
soke.com mengucapkan banyak Terima kasih yelah meluangkan watunya nerkunjung di blognya seoke.com yang selalu berusaha menyajikan kode kode HTML,CSS,JAVASCRIPT dan tutorial yang bisa kalian gunakan.