https://bl.id/kumpulink_io_art

Cara membuat blockuote di postingan blog

  06:19:00    

           Dalam Pembahasan Kali ini seoke.com akan membahas tentang Bagai mana cara membuat blockuote di postingan blog, untuk  para blogging sich Cukup Penting, karena bisa di Katan blockuote ini akan lebih memperlihatkan postingannya Begitu lebih elegan dengan tampilan blockuote tersebut.

foto By http://bl6.jp

Berikut seoke.com akan Memberi 3 KODE KODE blockuote Yang akan siapa pakai di blog 
  • Yang Pertama 

blockquote {margin: 0 20px; padding: 60px 30px 40px 20px; background: # F1F8FE url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RoUrTZr2VvLifpS7B6nJCMOeF3rVhhEJ4xf2NEo2KSHGb_Lj-oV-PRmGyDfjWCN8iY9ow6OeusgqO-ZSzluWTt1rP4sUSLN6xXz0HNtCqiLJqKzppIwIxAxG5gmqBHioLEghy7rmf_I/s400/owl.png) no-repeat 350px 5px; Font: normal .9em "sans komik ms", Courier , "Times New Roman", Times, serif; color: # 000; border-left: 8px bertitik # ​​DAB547; } Blockquote p {margin: 0; padding-top: 10px; }

Hasilnya akan seperti gambar di Bawah ini





  •  Kode kedua 
blockquote .post {background: # F3F3F1; background-position :; background-repeat: repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; Font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post Blockquote p {margin: 0; padding-top: 10px; }

Dan hasilnya:


  • kode Ketiga

blockquote .post {font: 18px biasa Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIY0mxo5vtihxjL2szlTsQ8fs0mbdReHHl8RJMkGErDs72G0tXHkjRFTABJBwRy57Jxz9R4fQeekj1UCYAx6wN07z3FpOz0Vrgr03bk1kBQYJGI_EM34jXZ7-UDuYojhlMU1n_rCX9U6A/s400/comma-left.gif) no-repeat differences kiri; text-indent: 65px; } .post Blockquote div {display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEjXrD1mxiNNjT82GJirPAFQwD4Vur0HIu95J8qsDXVLmudcDctABYVrC-J52_dQtf3YgGWN1Pdd0A96FGVjEIhBcSGIyqzG-BEkvgrCZnkcnOjJynQ6HIv825OvisnrnWfmjCAyBepc/s400/comma-right.gif) no-repeat Kanan Bawah; padding-bottom: 10px; } .post Blockquote p {margin: 0; padding-top: 10px; }

hasilnya


  • Cara penempatan Kode tersebut cukup tambahkan code  tersebut  tepat di atas Kode ]]> </ b: skin> pada template blog Kalian.
  • Jika  cara untuk cara mebuat dipostingan, Kalian Cukup dengan kata mana Yang Kalian  akan di blockoute dan pilh gambar  kutip lihat gambar 

foto By www.bloggermax.com

gimana mudah bukan membuat Blockuote untuk postingan blog.
Dan seoke.com berterima kasih telah menyempatkan waktunya berkunjung di seoke.com yang berusaha untuk menyajika code code untuk blog.
dan baca juga postingan saya yang sebelumnya tentang cara membuat permalink untuk blog


  

  No Comments

pengertian JAVASCRIPT untuk blog

  05:43:00    

     Di sini seoke.com akan menjelah kan tentang pengertian JAVASCRIPT .untuk para pemula belum mengerti dengan pengertian javascript tersebut.
kita ingin membangun suatu WEBSITE kita juga harus sedikit mengerti dengan yang ada di dalam website tersebut semisalkan yang kita akan bahas sekarang Pengertian Java script.
JAVASCRIPT ialah baha pemograman HTML dan WEB,pemograman dalam suatu web dan melakukan apa yang kalian lakukan dalam web tersebut.


foto BY www.tutorialku.net


sebenaranya JAVASCRIP itu mudah untuk kita pelajari yang terpenting adalam mempelajari ini,kita harus rela mengirbankan watu dan pikiran untuk bisa belajar tentang Javascript tersebut.
Dan seoke.com pun akan memeberi contoh untik code java script tersebut.

<h1>Contoh javascript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>

untuk memperjelas contonya lihat contoh di bawah ini

<html>
<body>
<h1>Contoh java script</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html> 

dan hasilnya akan seperti ini



Contoh JavaScript


Dalam javascript salah satu dari  3 bahasa untuk semua pengembang web

  • HTML untuk mentukan isi dari halam web
  • CSS untuk menentukan tata letak web
  • JAVASCRIPT untuk program halaman web 
nah Dari situ kalian pun di anjurkan untuk belajar code kode sperti HTML,CSS soalnya kalau cuma JAVASCRIPT aja yang di pelajari gak bakalan bisa berkembang untuk membangun suatu web yang besar.
jika kalian pengen belajar HTML,CSS.kalian bisa baca tutorial tentang pengertian HTML yang telah saya postingkan sebelumnya.
mungkin sementara ini seoke.com cuma bisa si gini dulu pembahasan tentang JAVASCRIPT tersebut,dan seoke.com pun akan membahas lebih dalam lagi tetang javascript tersebut dalam postingan beikutnya,
Terima kasih telah berkunjung di seoke.com yang berusaha menyajika code code untuk blog.

  

  No Comments

Share button sederhana

  06:12:00    

      Selamat datang di sini,semoga kalian di beri kesehatan oleh yang maha kuasa,share button kalian mungkin sudah tak asing lagi di telinga para blogger,dan mungkin kali ini juga untuk para blogging sudah bosan melihat postingan tentang sahre button yang telah di postingan oleh beberapa blogger tersebut,Namun apa salahnya seoke.com pengen berbagi pengalamannya kepada para blogging pemula.
Share button mungkin cukup di butuhkan oleh para blogging di karenakan sahre button tersebut bisa membuat blog kita sedikit mudah jika kalian pengen baerbagi dengan yang lain.
kita cari tau youk code nya sperti apa.


  • kalian silahkan masuk dulu pada blog kalian
  • setelah masuk kalian silahkan pilih di mana saat penempatan code tersebut yang di inginkan,
  • semilalkan di bawah postingan atau pun di mana aja yang terlihat menarik saat di lihat oleh pengunjung 
  • kalian tinggal masuk pada TATA LETAK > pilih TAMBAHKAN WIDGET > HTML/JAVASCRIPT
  • Dan copy paste code di bawah ini :




dan hasilnya akan seperti ini

Cara Membuat Tombol Share Sosial di Blogger


mungkin bila kalian pengen tampilan share button seperti di bawah ini.
Cara Membuat Tombol Share Sosial di Blogger

silahkan tinggal copy paste code di bahwah ini,Caranya sama seprti cara yang di atas tadi 



Bila kalian butuh sahre button yang lain silahkan tulis di komentar pesannya .
seoke.com mengucapkan banyak berterima kasih kalian menyempatkan waktunya di postinga Share button sederhana.dan terima kasih untuk www.seocips.yang membantu saya membuat postingan seperti ini
Terima kasih

  

  No Comments

Demo button effek slide

  06:32:00    

   Butuh tombol DENGAN Yang unik, seoke.com akan postingkan mebuat demo tombol effek slide. Kalian langsung aja kecaranya oke

foto Dengan www.kellydennisvoice.com/
  •  Cari Kode </ style> tau cari Kode ]]> </ b: skin>
  • Masukan Kode Di Bawah ini Tepat di atas Kode di ANTARA dua yang kalian pilih 
#wrap {margin: 20px auto; text-align: center; }
#wrap br {display: none; }
.bie-slide, .bie-slide2 {position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid # F9690E; margin: 10px; transisi: .5s; }
.bie-slide2 {border: 2px solid # 36D7B7; }
.bie-slide: hover {background-color: # F9690E; }
.bie-slide2: hover {background-color: # 36D7B7; }
.bie-slide: hover span.circle, .bie-slide2: hover span.circle2 {kiri: 100%; margin-left: -45px; background-color: #fdfdfd; color: # F9690E; }
.bie-slide2: hover span.circle2 {color: # 36D7B7; }
.bie-slide: hover span.title, .bie-slide2: hover span.title2 {left: 40px; opacity: 0; }
.bie-slide: hover span.title-hover, .bie-slide2: hover span.title-hover2 {opacity: 1; left: 40px; }
.bie-slide span.circle, .bie-slide2 span.circle2 {display: block; background-color: # F9690E; Warna: # fff; position: absolute; float: kiri; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; kiri: 0; transisi: .5s; border-radius: 50%; }
.bie-slide2 span.circle2 {background-color: # 36D7B7; }
.bie-slide span.title, .bie-slide span.title-hover, .bie-slide2 span.title2, .bie-slide2 span.title-hover2 {position: absolute; kiri: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: # F9690E; transisi: .5s; }
.bie-slide2 span.title2, .bie-slide2 span.title-hover2 {color: # 36D7B7; kiri: 80px; }
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {kiri: 80px; opacity: 0; }
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {color: # fff; }

  • Kemudian cari Kode </ head> Dan letakan Kode di Bawah ini Tepat di atasnya 
<Link href = 'http: //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel = 'stylesheet' />


  • Simpan Template tersebut, untuk review memanggilnya kita cukupdengan  mode HTML di postingan Dan silahkan Simpan Kode Di Bawah ini dengan yang kalian inginkan
<Div id = "membungkus">
<a class="bie-slide" href="http://seokecom.blogspot.com" target="_blank">
  <Span class = "lingkaran"> <i class = "fa fa-roket"> </ i> </ span>
  <Span class = "title"> Demo </ span>
  <Span class = "title-melayang"> Klik di sini </ span>
</a>
<a class="bie-slide2" href="http://seokecom.blogspot.com" target="_blank">
  <Span class = "CIRCLE2"> <i class = "fa fa Download"> </ i> </ span>
  <Span class = "title2"> Unduh </ span>
  <Span class = "title-hover2"> Klik di sini </ span>
</a>
</ Div>

Mudah Bukan tombol MEMBUAT Demo effek slide pada blog .
seoke.com mengucapkan Banyak terima kasih atas berkunjung di seoke.com JIKA Kalian Punya keritik dan Saran silahkan Tinggalkan pesanya di komentar Yang  telah di siapkan..





   /

  No Comments

Cara membuat permalink pada blog

  06:12:00    

   Ketemu lagi di blognya seoke.com yang selalu menyajikan kode kode untuk blog,buat yang membutuhkan.nah kali ini seoke.com sekarang share ini tentang Cara membuat permalink pada blog.
dan sebelum kita ke pembahannay,kalian harus tau dulu apa sich yangdi maksud dengan Permalink Ialah link permanen yang menuju halam dari sumber artikel berbeda.sangant optimal dalam membuat artikel link yang murni dari sebuah halaman,dan bisa membuat SEO home page dari suatu halaman yang akan membantu halam untuk bisa terindex oleh search berdasarkan KEYWORD yang diketikan.

foto By dribbble.com


untuk prosesnya kalian yang pasti harus masuk ter lebih dahulu pada blog kalian dan masuk ke DASHBOARD > pilih TEMPLATE > dan EDIT HTML.

  • Cari kode seperti ini ]]></b:skin>
  • Setealah kalian menemukan kode  ]]></b:skin> masukan kode di bawah ini tepat di atas kode yang tadi :
.admin-tulisan { display:block; width:auto; background:#fff; border:2px solid#4eabff; box-shadow:0 1px 3px #4eabff; -moz-box-shadow:0 1px 3px #4eabff; -webkit-box-shadow:0 1px 3px #4eabff; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#000; }
.admin-tulisan .kontainer { padding:5px; }
.admin-tulisan h4 { background:#4eabff; border:none; border-bottom:1px solid #; color:#000; text-transform:normal; text-  box-shadow:0 1px 3px #4eabff; -moz-box-shadow:0 1px 3px#4eabff; -webkit-box-shadow:0 1px 3px #4eabff; font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block; }
.admin-tulisan h4 a { color:#000; }
.admin-tulisan img { width:110px; height:110px; margin:0 10px 0 0; float:left; border:1px solid #4eabff; padding:2px; background:#4eabff; box-shadow:0 1px 3px #4eabff; -moz-box-shadow:0 1px 3px #1da7e7; -webkit-box-shadow:0 1px 3px #4eabff; }

  • Setelah itu kalian  cari kode <data:post.body/> dan masukan kode di bawah ini tepat di bawahnya 
  • keterangan saat mencari kode <data:post.body/> di dalam template mungkin ada lebih dari satu,jadi kalian coba satu persatu sampai permalink bisa muncul di bawah postingan
<!-- Permalink seoke.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='admin-tulisan'><h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4><div class='kontainer'><img alt='seoke.com' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8LO2FSeqbOL4opPT3VIbRtAlXoC2imd_sYQfHQMdP14GbyQGLlUpeKFmlFBYLQTWwrvNdcXvqqULfpdwU3siuhnC8rxp0Sc0a0mffgmLSsayM-wM7PjB96lpNuFgSs0WxZFSdAZDjw7w/s200/www.seoke.com.png'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://seokecom.blogspot.com' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/></div></div></b:if><!-- Permalink seoke.com -->

dan simpan/save template


  • Biru ganti dengan nama yang kalian inginkan
  • Orange ganti url  gambar dengan yang kalian punya
  • Merah untuk besar kecinya ukuran kotak permalink dan kalin bisa sesuaikan dengan template sobat sendiri.
Bila kalian butuh kode kode menarik yang pengen di tempelkan pada blog kalian seperti membuat fans page melayang silahkan kunjungi halamanya.

Terima kasih telah berkunjung di Cara memasang permalink pada blog.bila punya keritik dan saran silahkan tinggalkan pesanya di komentar.

   / /

  No Comments

Cara menginput kode Css pada Html

  06:38:00    

sekarang seoke.com akan berbagi sedikit dengan postingan postingan yang telah seoke.com bagikan.kali ini seoke.com akan berbagi postingan untuk para pemula yang begitu belum mengerti dengan penempatan/menginput kode kode Css pada Html.


foto By maringngerrang.blogspot.co.id

nah seoke.com sekarang pengen postingan tentang Cara menginput kode Css pada Html,dalam hal ini cara mnegipust kode tersebut kita bagi dengan 3 bagian diantaranya yaitu :
  • moetode inline style
  • internal style sheets
  • external style sheets
Yang di maksud dengan metide inline style ialah untuk menginput kode Css pada halaman/tag Html di haruskan menggunakan atribut style,contoh dengan cara penemptan dan atribut yang akan di pasang lihat contohnya di bawah ini 

1
2 
3
4
5
6
7
8
9
10
11
 <!DOCTYPE html>
 <html>
 <head>
      <title>Contoh Inline Style CSS</title>
 </head>
    <body>
       <h2 style="background-color:black; color:white" >
          Text ini akan bewarna putih dan background warna hitam
       </h2>
    </body>
 </html>

saat penempatan kode Css tersebut seoke.com menambahkan atributnya pada h2.

 internal style sheets ialahuntuk memisahkan kode Css dari halam Html namun dalam satu halaman Html,atribut style yang sebelumnya berada dalam tag di kumpulkan pada tag <style>. tag style ini harus berada dalam <head> dari halaman Html,kita lihat contohnya di bawah ini :


1
2
3
4
5
6
7
8 
9
10
11
12
13
14
15 
16 
17
 <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <style type="text/css">
         h2 {
         background-color:black;
         color:white;
         }
     </style>
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
</body>
</html>

Menggunakan internal style sheets ini lebih baik dari pada metode inline style,karena sudah memisahkan Css dari Html tersebut.dan kekurangan saat menggunakan internal style sheets ialah jika kita memeiliki beberapa halaman yang sama,maka kita harus membuat kode Css pada masing masing halam tersebut.

external style sheets ialah untuk mengankat  kode Css tersebut ke dalam sebuah file yang terpisah dari halaman Html,setiap halaman yang membutuhkan kode Css tersebut.
Contoh sama seoerti dengan saat menggunakan internal style sheets.yang pertama kita lakukan ialah memindahkan isi tag <style> ke halaman baru.dan contohnya seperti ini :


1
2
3  
4 
 h2 {
 background-color:black;
color:white;
}
Pastikan akhir dari file tersebut Css.dan kembali ke halaman Html 
disini Css akan kita bagikan menjadi 2 cara untuk menginput kode Css ke halaman Html tersebut yaitu 

@import 

contohnya seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Pada metode @impor ini kita akan sisipkan @impor URL pada Tag  <style> 
dan yang kedua input pada external style sheets dengan mengunakan Tag <LINK>.contohnya seperti ini :

1
2
3 
4
5
6
7
8
9
10
11
12
 <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <link rel="stylesheet" type="text/css" href="belajar.css">
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
 </body>
 </html>
Dalam meto de ini kita menggunakan href pada <link> yang akan berisi alamat dari halam Css.

mungkin hanya segitu yang bisa seoke.com terangkan dan jika kalian tidak mengerti dengan apa yang telah sampaikan di atas atau kalian punya keritik dan saran tenta blog seoke.com ini,kalian bisa tinggalkan pesannya di komentar.
Dan seoke.com berterima kasih kalian sudah berkenan mengunjungi blognya seoke.com yang berusaha untuk menyajikan kode kode html untuk para blogging yang bersumber dari para master blogging.

jika kalian butuh kode  Html pasang teks area untuk blog, bisa baca di postingan saya yang lainya di kumpulan kode teks area
Terima kasih 


  

  No Comments

Subscribe to: Posts (Atom)