edit template

Cara Membuat Breadcrumb schema.org Dengan Ikon SVG   -  Navigasi Breadcrumb berfungsi sebagai tautan  untuk kembali ke setiap halaman sebelumnya yang dilalui pengguna juga menunjukkan lokasi halaman pengguna saat ini di situs web tersebut.  Atau singkatnya Breadcrumb berguna  menunjukkan posisi halaman dalam hierarki situs tersebut. Masih banyak situs atau blog yang menggunakan breadcrumb dengan markup data-vocabulary.org. Namun markup schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google. Contohnya seperti ini : Untuk caranya silahkan ikuti langkah-langkanhnya : Cara Membuat Breadcrumb schema.org Dengan Ikon SVG  1. Cari kode    <b:includable id='breadcrumb' var='posts'>... </b:includable> 2. Ganti dengan kode dibawah ini :             <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='da...

Cara   Penggunaan  Anchor Text Yang Sebaiknya Dihindari - Ada beberapa anchor text yang sebaiknya dihindari ketika membuat link tautan di dalam sebuah artikel. Cara  Penggunaan  Anchor Text Yang Sebaiknya Dihindari  Anchor text yang perlu dihindari tersebut di antaranya: Klik di sini Anchor text atau teks tautan adalah teks yang ada di dalam tautan yang berguna untuk memberi tahu pengguna dan mesin pencari seperti Google sesuatu tentang halaman yang ditautkan. Link yang dibuat ada 2 jenis yaitu : 1. L ink internal   yaitu link yang mengarah ke halaman lain di situs kita sendiri 2. L ink eksternal  yaitu link yang mengarah ke konten di situs lain. Dalam hal ini masih banyak yang membuat internal link dengan menggunakan URL dari halaman itu sendiri dengan keyword sebagai anchor text dan diulang-ulang. Padahal sebaiknya gunakan URL dari halaman lainnya yang berhubungan dengan konten yang dibuat. Dalam hal ini jika semakin baik anchor text yang dibuat mak...

Cara Membuat Kotak Berlangganan di Blogger - Dengan adanya widget kotak subscribe atau langganan via email membantu sebuah blog untuk mendapatkan pengunjung melalui artikel terbaru yang dikirim ke setiap email subscriber secara otomatis. Setiap kali kita menerbitkan artikel baru maka mereka yang telah berlangganan akan menerima  pemberitahuan lewat email, sehingga mereka bisa jadi akan langsung mengunjungi blog anda dan sudah pasti akan menambah jumlah viewer blog anda secara signifikan.  Namun sebelum memasangnya, perlu mendaftarkan blog di FeedBurner. Hal ini penting karena kotak subscribe ini akan bertautan dengan FeedBurner. Jika anda sudah mendaftar feedburner, maka blog anda sudah siap untuk dipasangi widget kotak berlangganan via email ini. tampilannya seperti ini : Cara Membuat Kotak Berlangganan Via Email di Blogger 1. Pilih menu layout (tata letak).  2. klik tambahkan gadget pada elemen yang dinginkan, mau di sidebar atau footer. 3. Pilih html/javascript. Silah...

Cara Mengganti Tampilan Popular Post Template VioMagz - untuk mengganti tampilan Popular Post template VioMagz seperti tampilan popular Post di dalam blog ini silahkan ikuti cara ini. Cara Merubah Tampilan Popular Post Template VioMagz 1. Langkah pertama hapus dulu nomor pada pada tampilan Popular post bawaan Template VioMagnya Caranya lihat di sini : Cara Menghilangkan Nomor Popular Posts di Template VioMagz 2. Setelah nomor popular post VioMagznya dihapus, cari kode ini : /* Popular Posts */ .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li { margin: 0 0; padding: 0 0; list-style:none; border:none; outline:none; } .PopularPosts .widget-content ul { margin: 0; list-style:none; counter-reset:num; } .PopularPosts .widget-content ul li img { display: block; width: 70px; height: 70px; float: left; } .PopularPosts .widget-content ul li { margin: 0 0 15px; counter-increment: num; position: relative; } .PopularPosts ul li:last-child { margin-bottom: 0px; }...

Cara Memberi Shadow Atau Bayangan Pada Thumbnail Template Viomagz 1. Cari Kode di bawah ini. .img-thumbnail { position: relative; float: left; width: 255px; height: 170px; margin-top: 3px; overflow: hidden; } 2. Tambahkan kode di bawah ini. box-shadow:0 0 5px #666} note 5px = ketebalan shadow 3. Hasilnya seperti ini. .img-thumbnail { position: relative; float: left; width: 255px; height: 170px; margin-top: 3px; overflow: hidden; box-shadow:0 0  5px  #666} } 4. Simpan. Lihat hasilnya

Cara membuat efek gradasi bergerak di Header VioMagz V.3 dan Semua template Blogger yang ada gradasi warnanya. Cara Membuat Efek Gradasi Bergerak 1. Copy kode di bawah ini : <!-- Navigasi Header Animasi Berubah warna Start --> <style>#header-container, #back-to-top{background: linear-gradient(-45deg, #041a06, #0a6e17, #c41606, #0fbd71, #94bd0f, #bd9a0f );background-size: 400% 400%;-webkit-animation: Gradient 15 s ease infinite;-moz-animation: Gradient 15 s ease infinite;animation: Gradient 15 s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}</style> <!-- Navigasi Header Animasi Berubah warna End --> 2. Cari kode  </head> , lalu tempel...

Cara Memberi Bayangan Atau Shadow Pada Header Template VioMagz V.3 buatan Mas Sugeng. Caranya : 1. Copy Kode ini -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); 2. Cari kode ini dan tempelkan tepat dibawahnya : $(header.background.kanan)); 3. Hasilnya seperti ini :  /* HEADER */ #header-container { background: $(header.background.kiri); background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan)); -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 999; height: 48px; } #header-wrapper { max-width: 1000px; margin: 0 auto; position: relative; } .header { max-width: 400px; float: left; margin-right: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header h1.title, .header p.title { font: $(header.font); color: $(header.title.color); margin: 0; text-transform: uppercase; line-heig...

Cara Membuat Tombol Demo & Download di Blogger A. Dengan Edit Html Template Blogger 1. Masuk ke Blogger.com >> Tema >> Edit Html 2. Copy kode di bawah ini. .buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px} Keterangan : Ganti background warna sesuai selera. 2. Cari   ]]></b:skin> atau </style>   , simpan kode di  diatasnya. 3. Simpan 4. Untuk menampilkannya.  pada saat membuat postingan  masuk ke mode HTML dan letakkan kode berikut : <div style="text-align: center;margin: 10px 0;"> <a class="buttonx" href=" LINK " target="_blank">D...