Cara Membuat Tulisan/ Teks Berjalan di Blog

Tulisan berjalan atau yang juga sering dikenal dengan marquee merupakan salah satu fitur unik yang dapat diterapkan pada blog kita, baik pada artikel, judul, maupun nama blog. teks atau tulisan berjalan yang dapat digunakan terdapat banyak macam, seperti bergerak dari kanan ke kiri dan sebaliknya, bergerak dari atas ke bawah dan sebaliknya hingga bergerak mondar mandir dan masih banyak jenis gerakan tulisan lainnya yang dapat diterapkan pada blog dengan menambahkan kode tertentu.

Pada beberapa saat yang lalu saya telah membuat artikel mengenai cara membuat judul blog bergerak dan cara membuat judul postingan bergerak yang juga merupakan penerapan dari fitur teks atau tulisan berjalan ini (marquee). Nah pada kesempatan kali ini saya akan berbagi beberapa kode untuk membuat teks berjalan yang dapat anda lakukan pada blog dan artikel anda.

1. Tulisan berjalan dari kanan ke kiri

<marquee direction="left" scrollamount="2" align="center">Tulisan Berjalan disini</marquee>

2. Tulisan berjalan dari kiri ke kanan

<marquee direction="right" scrollamount="2" align="center"> Tulisan Berjalan disini </marquee>

3. Tulisan bergerak ke kanan dan kiri

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Tulisan Berjalan disini </marquee> 

4. Tulisan berhenti saat scroll berada padanya 

<marquee onmouseover="this.stop()" onmouseout="this.start()">Tulisan Berjalan disini</marquee> 

5. Tulisan berjalan dengan fitur jeda

<marquee scrolldelay="500">Tulisan Berjalan disini</marquee>

Keterangan: Scroll amount: Kecepatan teks berjalan
                 Direction: arah gerakan

Cara memasang kode berjalan di postingan (artikel)

1. Klik 'Entri Baru' dan gunakan menu Html (bukan Compose)

Edit Teks Berjalan

2. Masukan kode tulisan berjalan yang anda inginkan
3. Jika telah selesai membuat artikel + efek tulisan berjalannya silahkan 'publish' artikelnya

Cara memasang kode berjalan di widget

1. Klik menu 'Tata letak'
2. Pilih 'Tambah widget' atau edit widget yang telah ada
3. Klik 'HTML/ Javascript'
4. Masukan kode marquee yang anda inginkan disertai kode widget yang ingin anda tambahkan.

Selain 5 jenis efek tulisan berjalan yang saya bagikan diatas, masih terdapat banyak jenis tulisan berjalan lainnya yang dapat divariasikan dengan mengubah atau menambah tag atribut pada kode marquee tersebut. Oleh karena itu silahkan belajar lebih banyak lagi di blog hedryiks ini untuk mendapatkan informasi lebih banyak lagi.

Cara Membuat Tulisan/ Teks Berjalan di Blog ini, semoga bermanfaat

Cara Membuat Judul Berjalan

Bagaimana tampilan judul artikel saya kali ini. Terlihat berbeda bukan dengan tampilan standar judul postingan pada umumnya?. Apa yang terjadi pada judul artikel saya kali ini yaitu adalah efek judul bergerak atau berjalan yang bergerak secara horizontal dari kanan ke kiri. Untuk menerapkan tampilan seperti ini pada artikel atau postingan anda, cara yang dilakukan sangatlah mudah yaitu kita hanya perlu menambah kode <marquee>....</marquee> di judul postingan yang kita buat atau posting. Jadi kita perlu melakukannya secara manual pada setiap postingan yang ingin kita beri efek bergerak tersebut.

Jika masih belum mengerti, ilustrasi tahap membuat judul postingan bergerak ini akan saya jabarkan sebagai berikut:

1. Masuk ke akun blogger anda
2. Klik “Entri Baru” untuk membuat artikel / postingan baru atau bisa juga klik edit entri yang ingin anda beri efek bergerak pada judul postingannya
3. Pada kolom Judul artikel tambahkan kode <marquee>....</marquee> jadi misalkan judul artikel anda adalah cara membuat blog anda tulis menjadi <marquee>cara membuat blog </marquee>

4. Klik “Terbitkan/ publikasikan” postingan yang anda buat tersebut jika telah selesai membuatnya.

Langkah yang sangat mudah bukan?. membuat efek berjalan pada judul artikel ini hanya akan berpengaruh pada sisi visual atau tampilan saja dan tidak berpengaruh terhadap pengindexan maupun SEO blog anda. Oleh karena itu jika kalian ingin membuat tampilan yang menarik seperti Efek Judul Postingan Artikel Bergerak yang ada pada artikel saya ini, silahkan lakukan tahap diatas.

Membuat Menu Drop Down Di Blogspot

Banyak cara bagaimana membuat blog terlihat cantik dan salah satu caranya untuk membuat blog yang kita miliki terlihat cantik adalah dengan mendesai menu secara dinamis menggunakan menu drop down.

Menu drop down sendiri adalah menu yang menampilkan sederetan link yang dinamis kearah bawah adapun cara membuat menu drop down pada blogspot adalah dengan mengikuti langkah dibawah.

1. Masuk ke blogspot anda
2. Klik menu tata letak
3. Klik tambah gadget

Kemudian copy html di bawah



<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
      </ul>
    </div>


4  Save
5. Untuk Tanda # di ganti dengan link alamat artikel anda
6. Untuk menambah menu horizontal anda dapat mengcopy kode yang berada di dalam <li> </li>
contoh:

        <li>
          <a href='#'>Nama Menu</a>
        </li>  

7. Untuk menambah menu vertikal copy kode dibawah
contoh

         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>


8. kemudian masuk ke menu template > edit HTML
9. Cari kode     ']]></b:skin>' dan masukan kode dibawah tepat diatas kode ']]></b:skin>'

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;    
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}


sumber : http://masbudicahyono.blogspot.co.id/2016/02/membuat-menu-drop-down-pada-blogspot.html

Membuat Labels Widget Dengan Effect Keren

Membuat Labels Widget 

Dengan Effect Keren

Label adalah daftar yang menampilkan kategori postingan blog kita. Membuat label membantu untuk mengkategorikan posting dalam kelompok. Sehingga hal ini membantu pengunjung untuk melihat posting di bawah kategori. Bawaan blogger Label widget tidak begitu bergaya. Jangan khawatir, di sini saya berbagi beberapa label yang menarik dan keren hanya untuk sobat semua. Label widget ini menggunakan kode CSS sederhana. Untuk menerapkannya di blog sobat ikuti langkah-langkahberikut ini :

1. Pertama pastikan sobat harus sudah memasang widget Labels di blog
2. Kemudian silahkan sobat pergi ke halaman Template -> Edit HTML
3. Temukan kode  ]]></b:skin> gunakan Control F untuk menemukannya
4. Setelah itu, copy salah satu kode dibawah ini dan letakan di atas kode ]]></b:skin>

1. label 1

.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}
.Label a {
    color: #fff;
    text-decoration: none;
}



2. label 2

.Label li:before {
        background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);
        border-bottom: 1px solid #D99D38;
        border-left: 1px solid #D99D38;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D99D38;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #FAEABA;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);
        border-bottom: 1px solid #D99D38;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #D99D38;
        border-top: 1px solid #D99D38;
        box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }

3. label 3

.Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
        border-bottom: 1px solid #145091;
        border-left: 1px solid #145091;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #3F6893;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #B5D8FF;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
        border-bottom: 1px solid #145091;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #145091;
        border-top: 1px solid #145091;
        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }



4. label 4

.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
.Label li:hover {
    transform: rotate(5deg);
}


5. label 5

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}
.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}
.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}


Sekian dulu tutorial tentang Membuat Labels Widget Dengan Effect Keren. Jika sobat tertarik silahkan ambil scriptnya dan tinggalkan komentar.

sumber : 
https://blog.itapuih.com/2015/03/membuat-labels-widget-dengan-effect.html