26 Juli 2014

Cara Mengganti Halaman Beranda Dengan Kata Sambutan

Cara Mengganti Halaman Beranda Dengan Kata Sambutan - Saat Anda bertamu kerumah kerabat, maka dengan mengetuk pintu Anda ucapkan "Assalamu alaikum" sebagai kata salam kepada pemilik rumah. Dan sebaliknya si pemilik rumah mengucapkan "Wa'alaikum salam" sebagai kata sambutan pertanda menerima Anda sebagai tamunya, mungkin begitulah cerita singkat untuk menggambarkan tutorial berikut.
Dengan Cara Mengganti Halaman Beranda Dengan Kata Sambutan seperti ini, setidaknya dapat mencerminkan keramahan Anda kepada mereka yang berkunjung ke blog Anda, dengan begitu, mereka yang berkunjung akan merasa dihormati dan disenangi, tidak menutup kemungkinan esok hari mereka akan datang berkunjung kembali karena keramahan Anda.

Pada umumnya, halaman beranda sudah pasti disana terdapat kumpulan artikel-artikel blog Anda, sehingga di pertemuan sebelumnya saya pernah membuat tutorial tentang Cara Membuat Kalimat Pembuka Pada Halaman Beranda Blog. Hasilnya dapat Anda lihat pada tombol DEMO SHOW di bawah ini:




DEMO SHOW




Home page widget image


Untuk Desain halaman beranda kali ini, agar tampilan teks pada kata sambutan terlihat lebih menarik dan cantik, saya memecah title descripsi, dan membalutnya dengan sentuhan efek animasi dengan value second-delay;, sehingga teks pada kata sambutan akan secara bergantian tampil dengan CSS seperti ini:

.text-wrapper{
   width: auto;
   position: relative;
   margin: 0 auto;
   font-family: 'Bree Serif';
   padding: 10px;}

.text-sentence{
   margin: 0;
   text-align: left;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.text-sentence span{
   color: #444;
   white-space: nowrap;
   font-size: 130%;
   font-weight: normal;}

.text-words{display: inline;text-indent: 10px;}
.text-words span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   width: 100%;
   color: red;}

.text-words-1 span{
   -webkit-animation: rotateWordsFirst 18s linear infinite 0s;
   -moz-animation: rotateWordsFirst 18s linear infinite 0s;
   -o-animation: rotateWordsFirst 18s linear infinite 0s;
   -ms-animation: rotateWordsFirst 18s linear infinite 0s;
   animation: rotateWordsFirst 18s linear infinite 0s;}

.text-words-2 span{
   -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
   -moz-animation: rotateWordsSecond 18s linear infinite 0s;
   -o-animation: rotateWordsSecond 18s linear infinite 0s;
   -ms-animation: rotateWordsSecond 18s linear infinite 0s;
   animation: rotateWordsSecond 18s linear infinite 0s;}

.text-words span:nth-child(2) {
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -o-animation-delay: 3s;
   -ms-animation-delay: 3s;
   animation-delay: 3s;
   color: green;}

.text-words span:nth-child(3) {
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
   color: #38f; }

.text-words span:nth-child(4) {
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -o-animation-delay: 9s;
   -ms-animation-delay: 9s;
   animation-delay: 9s;
   color: #25cf55;}

.text-words span:nth-child(5) {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;
   color: #8d6b9d;}

.text-words span:nth-child(6) {
   -webkit-animation-delay: 15s;
   -moz-animation-delay: 15s;
   -o-animation-delay: 15s;
   -ms-animation-delay: 15s;
   animation-delay: 15s;
   color: blue;}

@-webkit-keyframes rotateWordsFirst {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsFirst {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsFirst {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsFirst {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@keyframes rotateWordsFirst {
0% {opacity: 1;
    animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-webkit-keyframes rotateWordsSecond {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsSecond {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsSecond {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsSecond {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@keyframes rotateWordsSecond {
0% {opacity: 1;
    animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@media screen and (max-width: 768px){
.text-sentence { font-size: 18px; }}
@media screen and (max-width: 320px){
.text-sentence { font-size: 9px; }}

#text-space span {margin:-1.35em 0 0 58%;}
#text1 span {
   margin:-1.35em 0 0 11%;
   width:363px;
   border-bottom:3px solid indigo;
   max-height:43px;}

.ribbon-box2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:50%;
  padding:6px;background-color:#35ecf9;
  position:relative;
  margin:100px auto;border-left:8px double red;}

.ribbon-box2:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid transparent;
  border-left-color:#35ecf9;}

Dan hasilnya:




DEMO SHOW




Apakah sudah selesai? (hhmm..menurut kamu?!).
Sampai pada tahap ini, pekerjaan Anda belum selesai, sebagai tahapan akhir, Anda tinggal letakkan HTML berikut pada halaman kosong widget HTML/JavaScript pada tata letak halaman beranda. Selanjutnya simpan perubahan.

<section class="text-wrapper">
    <h2 class="text-sentence">
          <span>WELL COME TO MY BLOG</span>
             <span>Title : </span>
    <div class="text-words text-words-1" id="text1">
<span style="color:#080;">SAHABAT BLOGGER 77</span>
<span style="color:#660000;">SAHABAT BLOGGER 77</span>
<span style="color:#38f;">SAHABAT BLOGGER 77</span>
<span style="color:#8d6b9d;">SAHABAT BLOGGER 77</span>
<span style="color:blue;">SAHABAT BLOGGER 77</span>
<span style="color:red;">SAHABAT BLOGGER 77</span>
    </div>

<span class="ribbon-box2">Berbagi pengetahuan seputar</span>
     <div class="text-words text-words-2" id="text-space">
<span>Tutorial Blog</span>
<span>Desain Template</span>
<span>HTML code</span>
<span>CSS dan JavaScript</span>
<span>SEO Tips</span>
<span>Blogging tips</span>
     </div>
   </h2>
</section>


Sebagai pilihan untuk tampilan DAFTAR MENU ARTIKEL, silahkan Anda pilih widget mana yang sesuai dengan nice blog Anda pada tutorial berikut:

Membuat Tampilan Popular Post Dengan Slideshow
Membuat Artikel Terbaru Desain Gallery Dan Tooltip
Cara Membuat Widget Slideshow Efek 3D Gallery


Diam itu emas, namun dengan diam tidak akan pernah mengubah kecerdasan kita dalam berkarya. Untuk itu, saya akan selalu setia menunggu pertanyaan dari sahabat semua pecinta SAHABAT BLOGGER 77 jika kiranya mengalami kesulitan dalam menerapkan kode-kode di atas.
Semoga dapat bermanfaat. Terimakasih.!!

25 Juli 2014

Membuat Menu Navigasi Fixed Fly Out Dengan CSS3

Menu fly out image

Tampilan Menu Navigasi Blog Model Fly Out.
Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 - Banyak cara dalam membuat tampilan menu navigasi pada blog, dan salah satunya dengan membuat tampilan menu tersebut terlihat melayang pada halaman blog (Fixed), sehingga saat visitor berada jauh di bawah halaman posting, menu ini akan tetap terlihat karena tidak akan mengikuti gulungan scroll pada mouse. Desain menu kali ini, saya akan memberikan tutorial cara mudah membuat menu navigasi fixed model FLY OUT dengan CSS3 seperti ini:




DEMO SHOW




Gambar Tata letak widget


Baca Artikel sebelumnya - Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript



Selanjutnya, Copy kode dibawah ini, lalu letakkan dalam formulir HTML/JavaScript

<style type='text/css'>
//* navigasi menu fixed fly out desain with css3
show date : july 25, 2014
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
ul#menu-fly {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:5px;
  list-style:none;
  z-index:999999;
  width:840px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s flyout ease-in-out;
  -moz-animation:2s flyout ease-in-out;
  -ms-animation:2s flyout ease-in-out;
  animation:2s flyout ease-in-out;}

ul#menu-fly li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;}

ul#menu-fly li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:black;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
  -moz-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
  box-shadow:0 1px 2px rgba(11, 83, 148,.5);
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:10px;
  -khtml-border-bottom-right-radius:10px;
  -khtml-border-bottom-left-radius:10px;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;}

ul#menu-fly li a:hover {
  margin-top:-4px;
  background-position:50% 10px;
  color:lime;
  font:bold 13px/normal Georgia;
  position:relative;}

ul#menu-fly li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;}

//profile image menu...
ul#menu-fly li:nth-child(1) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dXTqBd3eZC46cnoT62Hrgp_tx7cZnpUrDSwPFOcSxlM77ykTsOqcxDtAVH82Ddg1K6Gg6J0Zde_BAfxSFYkYLHfNSb2CNidkG4su_LCjFxaC4EjIz73TfhEYSi3gcUa8ZkG_s1057nU/s75/sb77-image1.jpg);}

ul#menu-fly li:nth-child(2) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4AbpeVL1_jilyTwE799D-PGIywxcXCHUytdfTnJ0CXNP555l7IXVAHZtL84LhdUpyYXBYxNuO2g-HPTDGVhp34sACH8rAVBC_3Xw1w3r-7wAXYZM5vU5NjWQugKLQiNEvgcWWogRers/s75/sb77-image2.png);}

ul#menu-fly li:nth-child(3) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOc8Spvyp2IbqzZIhfSCDm3wQc7skDyM8BrM-wTurU2YdSmEH7VZWZn3lRHEjJvkuVACnEe54byyPC92EqMtMQHhbvi5L1hrMFiPiUVumE3ptLtIeqmjEnamZQ7U29zlQ2rt7AZX-kEi4/s75/sb77-image3.png);}

ul#menu-fly li:nth-child(4) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dLF798MqC9GOuZNX46DhuOrU0E3aLyYfLJK446SVbp0QXWMQ-9yoGFYxPMH55r4fxHr96KWRNivxhW_rSyjBtmNwdiHjXqBZf5MkZcUx6reeVYwnXR7eAFt6tlI0a3s_LRafpi3NVNU/s75/sb77-image4.jpg);}

ul#menu-fly li:nth-child(5) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKaQZOHp3VXsuAG75rhuaNCJO_IURZWJDYs8LLBKYW_YDiwAp1_piCaE_fACuCp1QM5wVWYKsit1E2BJnhMKJkjI84bgYXww5aEDPmFLnlAsCSd3eDk5yotCJPdRvlcTB6AF4y72QeVsw/s75/sb77-image5.png);}

ul#menu-fly li:nth-child(6) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGui1v9QcR8YqjdTitnu9hpfmIGFtd3nc5lU7NkCftaCQ9VBhRiYlj9CK3eYP9iNhhePcTlppELcxGKB9ksrI7wAZ3Fd4JB3OuRWne-CwB3oc-v8XiPgGVTAgXe6vSx-yu6vVevrr15Dk/s75/sb77-image6.jpg);}

ul#menu-fly li:nth-child(7) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xZeLG_T6UrjhxIOtPmuTF5Xg6CghG8Wab581xa-9mEtdHE7Vb_O9dA_-8J23-W2vnBpd_erC5aVUMvLP5CO99vX-dIplR6cOHB1iB0w36vul8ypvt6yzxWZQwrQ9rYOmL1QrygBLRDE/s75/sb77-image7.png);}

ul#menu-fly li:nth-child(8) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYFtdk2wfQbefrkaNK1MV1eX6Jrw7w1nlf5YZay93zeCk6RSQH3w6_aXw4-xWOqk_ML8Napc247AM1OR3-Nz_J2SzoLF8suvEpxtpQLbt1Zub5opdIPvFZ0BICuYohyUsryMbZ_cpViU/s75/sb77-image8.jpg);}

@-webkit-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@-moz-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@-ms-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}
</style>
<ul id='menu-fly'>
<li><a href='http://sahabatblogger77.blogspot.com'>Daftar Menu</a></li>
<li><a href='http://sahabatblogger77.blogspot.com'>Home</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Blogging%20Tips'>Tips Blog</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/CSS%20Widget'>Widget</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/CSS%20Code'>CSS</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Efek%20Gambar'>Gambar</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Menu%20Navigasi'>Navigasi</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/SEO%20Trik'>SEO</a></li>
</ul>

23 Juli 2014

Tata Letak Struktur Elemen HTML Template Halaman Posting

Tata letak struktur elemen HTML Template yang mendukung penampilan posting dalam HTML adalah sebuah elemen <b:includable> ..data..</b:includable> dengan id='post', yang jika dijabarkan dengan bahasa markup HTML kurang lebih seperti ini isi data elemen tersebut:


<div class='post hentry'>
  <h2 class='post-title entry-title'>
    //Letak Judul Posting...
  </h2>
  <div class='post-body entry-content' id='post-body-87834368950900xxx'>
    //Isi Konten Artikel (body)...
  </div>
  <div class='post-footer'>
    //Menu Widget Footer...
  </div>
</div>

Namun teks judul, isi konten dan menu yang terdapat pada footer (catatan kaki) tidak akan ditampilkan nilainya pada struktur HTML Template Anda. Disini akan saya jelaskan sedikit fungsi-fungsi element tersebut yang mendukung penampilan posting pada blog Anda satu persatu, sehingga dengan cara pemahaman seperti ini, dapat memudahkan Anda dalam belajar desain/mendesain Template dengan cepat tanpa harus takut salah hapus kode-kode tertentu.
Berikut tata letak struktur elemen kode HTML Template untuk tampilan halaman posting pada blog :

Edit HTML image



LETAK JUDUL POSTING
Elemen judul pada struktur HTML Template biasanya berupa elemen heading yang memiliki kelas post-title atau entry-title seperti ini:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>


KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)
ELEMEN DATAFUNGSI TAMPILANHASIL TAMPILAN
data:post.linkElemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor postinghttp://www.custom_link_url.com
data:post.urlElemen ini akan menghasilkan URL postinghttp://nama_blog.blogspot.com/2012/11/lorem-ipsum.html
data:post.titleElemen ini akan menghasilkan judul postingLorem Ipsum



ISI ARTIKEL (BODY)
Semua teks yang terdapat pada keseluruhan isi konten tidak akan ditampilkan dalam struktur HTML Template, namun elemen untuk tampilan isi artikel berikut, akan dihasilkan berupa elemen divisi kelas post-body atau entry-content seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div class='clear'/> <!-- clear for photos floats -->
</div>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)
ELEMEN DATAFUNGSI TAMPILAN
data:post.idElemen ini akan menampilkan ID posting
data:post.bodyElemen ini akan menampilkan konten posting
data:post.snippetElemen ini akan menghasilkan ringkasan posting dalam 100 kata +
data:post.authorPhoto.urlElemen ini akan menghasilkan URL gambar foto profil penulis
data:post.authorProfileUrlElemen ini akan menghasilkan URL profil penulis
data:post.authorAboutMeElemen ini akan menghasilkan deskripsi profil penulis


MENU WIDGET FOOTER
Letak widget catatan kaki (FOOTER) biasanya berisi elemen data yang memiliki kelas post-footer seperti ini:

<div class='post-footer'>

  <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
          <data:post.author/>
        </span>
      </b:if>
    </span>
    <span class='post-timestamp'>
      <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
      </b:if>
    </span>
    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    <span class='post-comment-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </b:if>
    </span>
    <!-- Feature added by BTemplates.com -->
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'> ... </span>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>

</div>


KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)
ELEMEN DATAFUNGSI TAMPILAN
data:top.authorLabelLabel keterangan sebelum nama penulis
data:post.authorElemen ini akan menghasilkan nama penulis
data:top.timestampLabelLabel keterangan sebelum waktu penerbitan
data:post.timestampElemen ini akan menampilkan waktu penerbitan dalam format timestamp
data:post.addCommentUrlElemen ini akan menampilkan URL posting dengan tambahan hash [#comment-form]
data:postLocationLabelElemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting
data:post.location.mapsUrlElemen ini akan menghasilkan URL lokasi dalam peta Google
data:post.location.nameElemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasi


DESAIN TEMPLATE TO THE NEXT (Referensi Themes)
Pengertian HTML Template Berdasarkan Versi
Belajar Mengenal Bahasa Markup HTML Template
Sekilas Tentang META Tag Dalam Bahasa HTML

19 Juli 2014

Menonaktifkan Fungsi Copy Paste Pada Area Tertentu

Consep area no copy paste image

Menonaktifkan Fungsi Copy Paste Pada Area Tertentu - Salah satu hal yang tidak disukai oleh para blogger adalah artikel COPY PASTE, namun bukan artikel hasil copy paste yang akan saya bahas dipertemuan kali ini, melainkan banyaknya keluhan dari mereka, karena salah satu atau beberapa artikel mereka telah dicuri oleh para COPASER yang tidak bertanggung jawab dengan meng-Copy ulang muatan artikel dengan fungsi Copy Paste, dan mendesain sedikit tampilannya yang seolah-olah postingan tersebut adalah hasil karya mereka.
Apakah hal seperti ini harus kita biarkan? (hmm...jawab sendiri ya).

Akan tetapi banyak juga yang berpendapat dengan mengatakan seperti ini:

Buat saya, jika beberapa atau salah satu artikel saya telah ada yang copy paste, saya merasa senang dan bangga, itu berarti tulisan saya menarik buat mereka, mungkin artikel saya bermanfaat baginya, makanya di copy paste.


Namun tidak sedikit juga yang tidak suka jika artikelnya di copy paste, sehingga banyak diantara mereka menonaktifkan fungsi copy paste dengan memanipulasi sistem KLIK KANAN menggunakan perintah javascript seperti ini:


if (typeof document.onselectstart!="undefined") {
   document.onselectstart=new Function ("return false");
}
else{
    document.onmousedown=new Function ("return false");
  document.onmouseup=new Function ("return true");
}

maka semua tampilan postingan Anda tidak akan dapat di Copy Paste.

DESAIN TAMPILAN -
JavaScript Sistem Klik Dan Hover Pada Text Area
Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript
Membuat Tampilan Popular Post Dengan Slideshow



Nah..!! pertanyaannya, bagaimana jika blog tersebut membahas seputar tutorial blog dengan penyajian materi tentang kode-kode HTML seperti CSS, JavaScript, jQuery dan lain sebagainya, yang sudah pasti Anda perintahkan untuk meng-copy kode-kode tersebut untuk ditempatkan pada area tertentu. Dengan cerita inspirasi diatas, kali ini SAHABAT BLOGGER 77 akan memberikan Trik Terbaik tentang Cara Mudah Menonaktifkan Fungsi Copy Paste Pada Area Tertentu, sehingga dengan ini Anda dapat tentukan artikel mana yang akan Anda ijinkan untuk di Copy, dan mana yang tidak di ijinkan dengan CSS berikut:


dashboard blog image


Temukan kode ]]></b:skin>
Selanjutnya Copy kode berikut, dan letakkan diatasnya.

//* no copy paste consep area with css
css design: inputcode="sb77-nocopy code","sahabat blogger 77"
ex. show : tag pre code
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.sb77-nocopy code {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;}

.sb77-nocopy .sahabatblogger77 {
   background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateX(-800px);
   -moz-transform: translateX(-800px);
   -o-transform: translateX(-800px);
   -ms-transform: translateX(-800px);
   transform: translateX(-800px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;}

.sb77-nocopy:hover .sahabatblogger77 {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);}

.sb77-nocopy:hover code {
   -webkit-transform: translateX(800px);
   -moz-transform: translateX(800px);
   -o-transform: translateX(800px);
   -ms-transform: translateX(800px);
   transform: translateX(800px);}

.sb77-nocopy:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}

.sb77-code {
   font:normal 12px/14px Courier,Monospace;
   width:550px;
   overflow: hidden;
   position: relative;
   text-align: left;
   cursor: default;
   background: #333;
   padding:10px 15px;
   color:#ccc;
   border-left:8px solid #080;
   border-top:6px double #fff;
   margin:-6em 0 0 0;}

.sb77-code .sahabatblogger77,.sb77-code .content {
   width: 580px;
   top:0;left:0;right:0;bottom:0;
   position: absolute;
   overflow: hidden;}

.sb77-code h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font: bold 18px/normal Arial, Sans Serif;
   padding: 10px;
   background: rgba(106, 168, 79, 0.7);
   margin: 15px 0 0 0;
   border-top: 2px solid #080;
   border-bottom: 2px solid #080;}

.text-box {
   background:#080;position:relative;
   padding:10px;color:white;
   font:normal 13px Arial,Sans-Serif;
   margin:4em 10px 0 3%;
   border-radius:5px;width:530px;}

.text-box.bottom:after {
   content:"";width:auto;
   overflow:auto;position:absolute;
   top:100%;left:20px;
   border-width:10px;border-style:solid;
   border-color:#080 transparent transparent #080;
   -webkit-transform:skew(-30deg, 0deg);
   -moz-transform:skew(-30deg, 0deg);
   -ms-transform:skew(-30deg, 0deg);
   -o-transform:skew(-30deg, 0deg);
   transform:skew(-30deg, 0deg);display:block;}

.sb77-code a.info {
   font:normal 12px/normal Arial,Sans Serif;
   display: inline-block;
   text-decoration: none;
   padding: 7px;
   background: #000;
   color: #fff;
   margin: 2em 0 -50% 15px;
   border: 2px solid orange;
   text-transform: uppercase;}

.sb77-code a.info:hover {
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;background:red;}

.sb77-profile-1 .sb77-imageprofile {
   display: block;
   width: 120px;
   height: 120px;
   border: 5px solid #2fe45D;
   background: url(URL-Gambar Anda.jpg) no-repeat center center;
   position: relative;
   margin:-12em 0 0 75%;
   box-shadow: inset 1px 1px 4px rgba(225,225,225,0.5),
               0 2px 3px rgba(225,225,225,0.6);}

p {
  color:#fff;
  text-align:right;
  padding-right:10px;
  font:normal 11px/normal Arial,Sans Serif;}

Simpan Template Anda.

Maka hasilnya akan terkonsep seperti ini:




DEMO SHOW



Selanjutnya letakkan kode berikut di wilayah area posting mode HTML

<div class="sb77-code sb77-nocopy">
...
Teks Anda Di Sini
...
   <div class="sahabatblogger77">
      <h2>
        Sahabat blogger 77, Say..
      </h2>
       <div class="text-box bottom">
...
Ucapkan Sesuatu Di Sini
...
<span style="font:bold 15px/normal Arial, Sans Serif;">TOP ARTIKEL</span>
       </div>
     <a class="info" href="#">&#10144; Read More</a>
   <div class="sb77-profile-1">
<div class="sb77-imageprofile">
  </div>
</div>
<p>
Di Desain Oleh ~ Devy Indriyani
My. Site - <a href="http://sahabatblogger77.blogspot.com">SAHABAT BLOGGER 77</a>
</p>
    </div>
</div>

16 Juli 2014

Daftar Generator Penulisan Simbol HTML Terlengkap

Simbol HTML image

Perhatikan Deretan generator simbol dibawah ini. Icon- icon simbol seperti ini, biasanya digunakan untuk menggenerasikan atau Sistem Penulisan KARAKTER dalam elemen HTML. Anda bisa memanfaatkan generator simbol seperti ini untuk sekedar memberikan beberapa hiasan pada tulisan Anda, atau mungkin beberapa menu yang ingin Anda tambahkan icon simbol seperti ini sebagai pengganti gambar. Cukup COPY kode yang berada di bawah simbol pilihan Anda, lalu tempatkan dimana Anda ingin meletakkannya.

Sebenarnya, masih cukup banyak tampilan icon simbol seperti ini yang dapat Anda gunakan untuk mempercantik tampilan blog Anda, namun di sini saya akan berikan 120 Daftar Generator Penulisan Simbol HTML Terlengkap buat sahabat semua, berikut daftar salinannya:


DAFTAR GENERATOR PENULISAN SIMBOL HTML

&#10003;
&#10004;
&#10005;
&#10006;
&#10007;
&#10008;
&#10009;
&#10010;
&#10011;
&#10012;
&#10013;
&#10014;
&#10015;
&#10016;
&#10017;
&#10018;
&#10019;
&#10020;
&#10021;
&#10022;
&#10023;
&#10002;
&#10025;
&#10026;
&#10027;
&#10028;
&#10029;
&#10030;
&#10031;
&#10032;
&#10033;
&#10034;
&#10035;
&#10036;
&#10037;
&#10038;
&#10039;
&#10040;
&#10041;
&#10042;
&#10073;
&#10074;
&#10075;
&#10076;
&#10077;
&#10078;
&#10083;
&#10084;
&#10081;
&#10082;
&#10053;
&#10054;
&#10055;
&#10056;
&#10057;
&#10058;
&#10059;
&#10063;
&#10061;
&#10064;
&#10043;
&#10044;
&#10045;
&#10046;
&#10047;
&#10048;
&#10049;
&#10050;
&#10051;
&#10052;
&#10102;
&#10103;
&#10104;
&#10105;
&#10106;
&#10107;
&#10108;
&#10109;
&#10110;
&#10111;
&#10112;
&#10113;
&#10114;
&#10115;
&#10116;
&#10117;
&#10118;
&#10119;
&#10120;
&#10121;
&#10140;
&#10141;
&#10142;
&#10143;
&#10144;
&#10145;
&#10146;
&#10147;
&#10148;
&#10149;
&#10136;
&#10137;
&#10138;
&#10139;
&#10163;
&#10164;
&#10165;
&#10166;
&#10168;
&#10169;
&#10150;
&#10151;
&#10152;
&#10153;
&#10154;
&#10155;
&#10156;
&#10157;
&#10158;
&#10159;

13 Juli 2014

Mengenal Lebih Jauh Tentang CSS3 Linear Gradient

Mengenal Lebih Jauh Tentang CSS3 Linear Gradient - Membuat warna yang berbeda-beda di salah satu TAB kolom halaman pada blog Anda, mungkin sangat mudah dilakukan dengan penggunaan CSS background-color seperti hijau, kuning, merah dan lain sebagainya yang jika kita deklarasikan dalam penggunaan kode HEKSA dapat kita tuliskan seperti ini :


Penggunaan HEKSA Warna Dalam Bahasa HTML
KODE WARNAHASIL TAMPILAN
#080000
#e06666
#38f
#3cef45
red
magenta
blue


Perubahan dapat kita terapkan lebih jauh lagi, tentunya dengan penggunaan sintaks elemen CSS3 Linear Gradient. Namun untuk dapat menerapkan sintaks ini, pertama kita harus tahu awal kedatangan gradient tersebut diproduksi, misalnya dapat kita tuliskan left bottom, top bottom (apakah dari kiri bawah atau dari atas bawah).

Gradient syntax image


Artikel Terkait :
1. Mengenal CSS Dasar Box Shadow
2. Memahami Dengan Mudah Bentuk Kinerja CSS Animasi



TAHAP I - Mengenal Sintaks
Berikut beberapa sintaks Gradient yang dapat Anda gunakan:
  1. linear-gadient
  2. radial-gradient
  3. repeating-linear-gradient
  4. repeating-radial-gradient

PENULISAN FUNGSI
PENGGUNAELEMEN KODE
Chrome Dan Safari 4+background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
Chrome 10+ Dan Safari 5.1+background: -webkit-linear-gradient(top, #fff, #000);
Firefox 3.6+background: -moz-linear-gradient(top, #fff, #000);
Opera 10+background: -o-linear-gradient(top, #fff, #000);
W3Cbackground: linear-gradient(top, #fff, #000);
Internet Explorer 6 - 9filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
Internet Explorer 10+background: -ms-linear-gradient(top, #fff, #000);



TAHAP II - Penerapan Sintaks
1. Linear Gradient

span {
  background:-webkit-linear-gradient(left top, red, blue);
  background:-moz-linear-gradient(left top, red, blue);
  background:-ms-linear-gradient(left top, red, blue);
  background:-o-linear-gradient(left top, red, blue);
  background:linear-gradient(left top, red, blue);
}



1.1 Linear Gradient Dengan Warna Berganda
Bahkan disini, Anda dapat menggunakan beberapa ragam warna yang berbeda dalam satu area. Pada intinya warna apa yang akan Anda tambahkan, selalu berikan tanda koma (,) sebagai pemisah atau spasi batas seperti ini:

span {
  background:-webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-ms-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}



1.2 Linear Gradient Dengan Nilai
Pada tahapan ini, kita coba mengubah keseimbangan warna dalam pembagian ruang dalam satu area, sehingga jika kita menyisipkan dua warna yang berbeda, maka letak warna yang pertama akan mendapatkan bagian ruang sebesar 0%, sedangkan letak warna yang ke dua akan mendapatkan bagian ruang 100%. Dengan menambahkan nilai pada masing-masing warna, Anda dapat menentukan dan mengatur luas warna pada ruang dalam satu area seperti ini:

span {
  background:-webkit-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-moz-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-ms-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-o-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue;
  background:linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
}




2. Radial Gradient

span {
  background:-webkit-radial-gradient(white, black, #080);
  background:-moz-radial-gradient(white, black, #080);
  background:-ms-radial-gradient(white, black, #080);
  background:-o-radial-gradient(white, black, #080);
  background:radial-gradient(white, black, #080);
}




3. Repeating Linear Gradient

span {
  background:-webkit-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-moz-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-ms-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-o-repeating-linear-gradient(left, red 10%, blue 30%);
  background:repeating-linear-gradient(left, red 10%, blue 30%);
}




4. Repeating Radial Gradient

span {
  background:-webkit-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-moz-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-ms-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-o-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
}

12 Juli 2014

Memahami Dengan Mudah Bentuk Kinerja CSS Animasi

Memahami Dengan Mudah Bentuk Kinerja CSS Animasi - Seperti yang sudah kita ketahui, bahwa dalam membuat sebuah efek pada blog dengan menggunakan CSS animasi sebagai perintah gerak, maka objek yang kita jadikan target akan dengan mudah bergerak. Beberapa bentuk kinerja gerak yang dihasilkan oleh CSS animasi dapat Anda pelajari pada TAB NAVIGASI dibawah ini:






Berikut ini, saya akan jabarkan bentuk dan kinerja CSS animasi agar nantinya dapat dengan mudah Anda memahami saat akan membuat sebuah tutorial yang berkaitan dengan penggunaan elemen CSS animasi. Namun sebelum menerapkan efek ini, terlebih dahulu Anda harus membangun frames animasi seperti ini:


@-webkit-keyframes {...}
@-moz-keyframes {...}
@-ms-keyframes {...}
@-o-keyframes {...}
@keyframes {...}

Kemudian, cukup panggil setiap efek yang telah Anda buat ke elemen-elemen yang sudah Anda tentukan, seperti metode efek loading pembuka halaman yang menggunakan efek animasi misalnya.

Animasi effect image


Baca juga - Cara Membuat Tampilan Popular Post Dengan Slideshow



CONTOH 1 - Transformasi Translate Animasi

#text-box {
  background:#333;width:440px;
  padding:15px 20px;text-align:center;
  font:bold 50px Impact,Arial,Sans-Serif;
  color:#ccc;border-bottom:6px double #fff;
  margin:0 auto;}

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

#text-box {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;}


DEMO SHOW




CONTOH 2 - Efek Yang Berbeda-beda (Durasi Animasi)
Sama seperti pada CONTOH 1, namun disini nilai pada durasi animasi yang saya bedakan, sehingga menghasilkan efek animasi yang berbeda-beda dalam satu halaman.

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

#text-box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;}

#text-box2 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;}

#text-box3 {
  -webkit-animation:aniload 5s;
  -moz-animation:aniload 5s;
  -ms-animation:aniload 5s;
  -o-animation:aniload 5s;
  animation:aniload 5s;}

#text-box4 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}

#text-box5 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

DEMO SHOW




CONTOH 3 - Efek Animasi Pada Warna Teks.
Disini warna teks yang akan kita jadikan sebagai target.

@-webkit-keyframes sb77-tautantext {
  0%   {color:green;}
  25%  {color:yellow;}
  50%  {color:red;}
  75%  {color:blue;}
  100% {color:orange;}}

@keyframes sb77-tautantext {
  0%   {color:green;}
  25%  {color:yellow;}
  50%  {color:red;}
  75%  {color:blue;}
  100% {color:orange;}}

#teks {
  -webkit-animation:sb77 5s;
  -moz-animation:sb77 5s;
  -ms-animation:sb77 5s;
  -o-animation:sb77 5s;
  animation:sb77 5s;}

DEMO SHOW




CONTOH 4 - Auto Sistem Highlight Effect.
Jika pada CONTOH 3, efek akan berhenti pada jarak yang sudah ditentukan maka, Tampilan animasi berikut ini, akan bekerja secara terus menerus (otomatis).

#highlight {
  font:bold 50px Impact,Arial,Sans-Serif;
  background:#333;padding:15px 20px;
  border-bottom:6px double #fff;}

<script language="javascript" type="text/javascript">
     var teks="SAHABAT BLOGGER 77"
     var speed=20

if (document.all||document.getElementById) {
     document.write('<span id="highlight">' + teks + '</span>')
     var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
}
...
//selengkapnya lihat sumber artikel
</script>


DEMO SHOW

9 Juli 2014

Membuat Tampilan Popular Post Dengan Slideshow

Membuat Tampilan Popular Post Dengan Slideshow - Widget popular post atau daftar artikel terbaru pada blog, umumnya merupakan cara untuk mempermudah visitor dalam menjelajah beberapa atau keseluruhan artikel yang terdapat pada blog tersebut. Pada artikel sebelumnya tentang Cara Membuat Artikel Terbaru Desain Gallery Dan Tooltip merupakan beberapa desain popular post yang sudah pernah saya modifikasi untuk mempercantik tampilan widget popular post blog Anda.

Desain kali ini, SAHABAT BLOGGER 77 kembali mempersembahkan tampilan terbaru popular post buat sahabat semua dengan Membuat Tampilan Popular Post Dengan Slideshow.
Sumber - Efek Slide Otomatis Pada Gambar




DEMO SHOW



TAHAP PENERAPAN WIDGET PADA BLOG
Tanpa menyentuh peng-editan HTML Template, pada dasboard masuk ke menu Tata Letak, kemudian tambahkan beberapa elemen halaman Gadget pada formulir HTML/JavaScript :

Widget page image
Halaman Menambahkan Widget


Selanjutnya, Copy kode berikut letakkan di dalam formulir.

<style type='text/css'>
.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;}

.tinycarousel-viewport {
  overflow:hidden;
  margin:0 auto;
  position:relative;
  background-color:#333;
  border:1px solid #ccc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align:center;}

.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;}

.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:#fff;
  color:#666;}

.tinycarousel-inner {
  padding:10px;
  border:1px solid #080;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;}

li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0px;
  padding:0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;}

.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 3px;
  background:none;
  border-bottom:3px double orange;}

.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;}

.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;}

.tinycarousel-footer {
  font:bold 12px/normal Helvetia;
  color:#ccc;
  background-color:#333;
  background-image:-webkit-linear-gradient(#660000,#e06666);
  background-image:-moz-linear-gradient(#660000,#e06666);
  background-image:-ms-linear-gradient(#660000,#e06666);
  background-image:-o-linear-gradient(#660000,#e06666);
  background-image:linear-gradient(#660000,#e06666);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;}

.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  color:#fff;
  background-color:#38f;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#b6d7a8;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 4px 0 0;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
  -webkit-border-radius:50%;
  border-radius:50%;
  -moz-border-radius:50%;
  border:2px solid red;}

.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;}

.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;}

.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;}

.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom:0;}
</style>


Selanjutnya, letakkan kode berikut setelah kode penutup </style>
<div id="tinycarousel-container" class="tinycarousel">
</div>
<script>
var tinycarousel_config = {
    url: 'http://sahabatblogger77.blogspot.com',//ganti dengan URL Blog Anda
    numPosts: 9,//tentukan jumlah posting
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    nav: {prevText: 'Prev',nextText: 'Next',},
    carousel: {
        axis: "x",
        itemwidth: 190,
        itemheight: 360,
        itemmargin: 10,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/pop-post-auto-slide.js"></script>



Sebagai alternatif, tampilan widget popular post seperti ini, bisa Anda jadikan sebagai daftar Arsip artikel pada halaman Beranda/Home.