Sudah selamanya sejak saya menulis tutorial baru tapi kurangnya waktu itu masalah utama bagi saya.
Jadi di sini adalah tutorial baru yang saya yakin Anda akan merasa terbantu.
Sekarang Blogger memperkenalkan halaman kesalahan kustom saya akan hadir dengan HTML5 halaman error 404 yang indah dengan efek geser bagus yang dibuat oleh kode javascript kecil.
Karena menggunakan HTML 5 dan CSS3 pola untuk latar belakang akan memiliki masalah tampilan kecil di IE (pola latar belakang dan efek javascript tidak akan ditampilkan), tetapi untuk orang lain browser akan ditampilkan baik-baik saja.
Jadi tanpa penjelasan membosankan mari kita mulai dengan pelaksanaan Membuat HTML5 Page Error 404 di Blogger Anda.
READ MORE
Jadi di sini adalah tutorial baru yang saya yakin Anda akan merasa terbantu.
Sekarang Blogger memperkenalkan halaman kesalahan kustom saya akan hadir dengan HTML5 halaman error 404 yang indah dengan efek geser bagus yang dibuat oleh kode javascript kecil.
Karena menggunakan HTML 5 dan CSS3 pola untuk latar belakang akan memiliki masalah tampilan kecil di IE (pola latar belakang dan efek javascript tidak akan ditampilkan), tetapi untuk orang lain browser akan ditampilkan baik-baik saja.
Cara Membuat HTML5 Page Error 404 di Blogger Anda?
1. Login ke Dashboard -> Template -> Edit HTML.
2. Pencarian untuk tag </body> dan tepat setelah itu paste kode berikut ini:
<!-- Start-->3. Cari kode </head> menggunakan "CTR+F" pastiken kode dibawah ini di atas kode </head>.
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.error-page-404 {
background: -webkit-radial-gradient(black 10%, transparent 11%) 0 0,
-webkit-radial-gradient(black 10%, transparent 11%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -moz-radial-gradient(black 10%, transparent 11%) 0 0,
-moz-radial-gradient(black 10%, transparent 11%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -o-radial-gradient(black 10%, transparent 11%) 0 0,
-o-radial-gradient(black 10%, transparent 11%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -ms-radial-gradient(black 10%, transparent 11%) 0 0,
-ms-radial-gradient(black 10%, transparent 11%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background:
radial-gradient(black 10%, transparent 11%) 0 0,
radial-gradient(black 10%, transparent 11%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background-color:#282828;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
background-size:16px 16px;
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:50px;
z-index:999;
}
header, section, footer { text-align: center; margin: 20px 0 0 0; }
section { margin-top: 25px; }
.ribbon { margin-top: 20px; }
.error-logo {margin-top: 0px;}
/* transitions */
#n1, #n2, #n3 { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }
/* errors */
.error { background-position: center 185px; background-repeat: no-repeat; }
.error .number { width: 348px; height: 225px; margin: 0 auto; }
#n1, #n2, #n3 { float: left; width: 100px; height: 150px; margin: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkXOLKzz9F7ck99LcxuNqbR5XTtubn4fFm4YCWCb2ZG9rpXQEFYzv6GAR3K6LeJjTDmDaWX4St5i_89lv7uwFdCWdCcsCCd_FopZ_3bF96kN0WcaG4kE7SofPfWbgrQ1BLRb8ZzfK-Ik/s1600/numbers.png) 0 -1500px repeat-y; }
.error-404 #n1 { background-position: 0 -600px; }
.error-404 #n2 { background-position: 0 0; }
.error-404 #n3 { background-position: 0 -600px; }
#error-not-found h1{
font-family:arial ,sans serif!important;
text-transform:uppercase;
font-size:50px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#131313!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found h2 {
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:55px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#191B1C!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found p a{
font-family:arial black ,sans serif!important;
text-transform:uppercase;
font-size:20px;
border:none;
font-weight: bold;
color:#111111!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
/* footer */
footer {
height: 92px;
background: url(http://img28.imageshack.us/img28/4821/footerbackground.png) 0 0 repeat-x;
margin: 80px auto 0 auto;
}
footer .container {
width: 552px;
height: 32px;
margin: 0 auto;
padding: 20px 0;
}
footer .engine{
z-index: 99999;
display:block;
position:absolute;
top:-47px;
margin-left:770px;
width:175px;
height:40px;
background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top;
padding:0
}
footer .search .field{
float:left;
display:inline;
height:40px;
width:135px
}
footer .search .field input{
color:#ccc;
border:0;
background:transparent;
font-size:11px;
margin:3px 0 0 10px;
padding:4px;
width:110px
}
footer .search .button{
float:left;
display:inline;
height:40px;
width:37px;
cursor:pointer;
border:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6UYsdgcV0JcN97IjLayRoeGjQKKp31l4B9G-VfnOAhVR9b7bPtta9K_E4xDvg33fAD26lJAz-lWPM9PJa22TFXeVuI2Z0ufBF57JOlPViU1kvms2n1YSqFMhXlk-jgt737_PqR4a4D8/s320/search_button.png) no-repeat 0 0
}
footer .search { display: block; width:173px; height: 32px; margin: 0 auto; background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top; }
</style>
<div class='error-page-404'>
<div class='error-logo'><img alt='' src='http://img546.imageshack.us/img546/2760/4044u.png'/></div>
<header>
<div class='ribbon'><img alt='' src='http://img39.imageshack.us/img39/3108/ribbont.png'/></div>
</header>
<section class='error' data-error='404'>
<div class='number'>
<div id='n1'/>
<div id='n2'/>
<div id='n3'/>
</div>
</section>
<div id='error-not-found'>
<h1> Page not found</h1>
</div>
<footer>
<div class='container'>
<div class='search'>
<form action='/search' id='searchthis' method='get'>
<div class='field'><input name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/></div>
<input class='button' type='submit' value=''/>
</form>
</div>
</div>
<div id='error-not-found'>
<p><a href='/'>go to homepage</a></p>
</div>
</footer>
</div>
</b:if>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Set error
var error = $('section[data-error]');
error.attr('class', 'error error-' + error.attr('data-error'));
});
//]]>
</script>4. Cari Kode <b:includable id='main' var='top'> taruh kode berikut dibawah kode <b:includable id='main' var='top'><b:if cond='data:numPosts == 0'>
<data:navMessage/>
</b:if>Ok, Itu saja. Nikmati halaman Error baru untuk blog Anda
PENTING Beberapa fitur dari halaman kesalahan diimplementasikan pada blog ini tidak akan tersedia untuk Anda (gaya kotak pencarian, beberapa perubahan lain yang berbeda.)
source : http://artistutorial.blogspot.ro/2012/11/add-excelent-html5-404-error-page-to.html
Beberapa dari layanan ini sudah (cerdas) menyediakan script mereka dalam mode async, ini hanya menggabungkan mereka ke dalam kode yang lebih efisien, teratur, dan mudah dipahami.
kali ini saya akan memberikan tutorial Tombol Sharing Async (G+, Facebook, Twitter) untuk Website.
Langsung saja Ceck Scriptnya.
Anda akan memerlukan HTML di tempat untuk script menempatkan barang-barang mereka:
READ MORE
kali ini saya akan memberikan tutorial Tombol Sharing Async (G+, Facebook, Twitter) untuk Website.
Langsung saja Ceck Scriptnya.
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild( js );
};
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));Aku menemukannya akan melalui beberapa kode situs dan saya lupa persis yang awalnya melakukannya tetapi tampaknya seperti Nicolas Gallagher atau Mathias Bynes semacam itu. Benar saya jika saya salah.Anda akan memerlukan HTML di tempat untuk script menempatkan barang-barang mereka:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>itu saja yang bisa saya sampaikan. semoga bermanfaat.
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>
Kali ini saya akan berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :q; yang perlu kawan ketahui bahwa ini hanyalah selera saja dan merupakan pernak-pernik biar kelihatan Blog kita hidup :y; karena ada yang berjatuhan dari atas berterbangan :z;Seperti kawan ketahui Salju warnanya Putih maka akan kelihatan asyik apabila warna latar belakang Blog dengan warna gelap sedangkan Gelembung dengan warna biru muda :x;
 |
| Screenshot : Gelembung dan Salju |
Oke langsung saja ke cara membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML
- Cari tag </head>
- Copas Script berikut tepat diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bubble.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>
Kalau kawan berkeinginan akan menampilkan satu saja, kawan cukup menghapus salah satu teks yang berwarna merah atau teks yang berwarna biru
- Jangan lupa simpan template kawan
Template Name: WebDepot
Platform: Blogger / Blogspot
Release date : 29, June 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0
Download Demo
WebDepot Blogger Template adalah kombinasi dari skema warna yang berbeda yang membuatnya terlihat unik. Tema ini sangat ideal untuk Merancang, mengembangkan web, dan situs web berbasis Majalah terutama bagi mereka yang stres lebih ke arah merancang niche. Tidak seperti tema kami yang lain, ini memiliki banyak fitur tak tertandingi termasuk beberapa inklusi CSS3 dan fungsi penting lainnya. Ketika Anda berbicara tentang merancang murni, template ini hampir tak terlihat karena kita telah menggunakan banyak fitur untuk pertama kalinya. Ini memiliki desain yang bersih dan ramping dan memiliki banyak utilitas berani.
Fitur WebDepot Blogger Template:
- Colorful Sidebar Title: Tidak seperti template blogger lain, kita harus pertama kali menggunakan teknik baru untuk menampilkan judul sidebar berwarna-warni bersama dengan ikon bertubuh kecil. Sebagai contoh, untuk Facebook Widget, kita telah menggunakan gelap judul sidebar biru bersama dengan Icon kecil "F" Logo yang mewakili Facebook.
- Eye-Catching Tombol Kontra Sosial: Di bagian bawah setiap posting, Anda dapat melihat tombol hitung sosial diatur sedemikian rupa sehingga bisa membawa percikan eye-catching pengunjung Anda. Kami telah menambahkan Facebook, Twitter dan Google+ tombol sosial kontra.
- SEO Friendly: Seperti kebanyakan kami dari tema, ini juga SEO Friendly. Ini adalah pra-dioptimalkan untuk SEO pada halaman. Termasuk pos tag, Meta tag, Kata Kunci, dan hal mengoptimalkan mendalam. Lebih penting lagi, kecepatan ini secara signifikan lebih cepat daripada mayoritas template-tugas berat lainnya.
- Thumbnail Posting terkait: Dalam tema ini, kami telah menambahkan Thumbnail Terkait posting widget yang akan bekerja pada otomatisasi. Para Thumbnail adalah dari ukuran normal sehingga dengan mudah bisa dilihat oleh pembaca.
- Fitur Lebih: Drop Down Menu, 4 footer kolom, skema multi-warna, sistem komentar berulir, 2 kolom template, dan banyak lagi.
Apakah Anda ingin meningkatkan Scroll bar di situs Anda? Scroll bar akan muncul di sisi kanan layar dan, memungkinkan pengguna untuk Scroll ke bawah halaman setiap kali mereka menyeret ada mouse ke atas atau bawah halaman. Untuk memberikan pengalaman user-friendly bagi pengunjung Anda, yang penting adalah memiliki Gulir bar halus. Namun, tidak ada keraguan bahwa Kustom Gulir bar melakukan pekerjaan cukup mahal, tetapi tidak sempurna. Beberapa hari yang lalu, pembaca kami memberitahu kami tentang warna-warni WebKit Scrollbars bahwa ia telah melihat pada website yang berbeda. Selain itu, ia juga meminta kami untuk mengembangkan yang serupa. Oleh karena itu, dalam artikel ini kita akan belajar Cara Membuat Custom WebKit Scrollbar di Blogger?
Tidak ada alasan mengapa mematikan seseorang bisa mengatakan tidak kepada Disesuaikan Scrollbar karena menambah hidup elegan baru ke situs web nya. Pertimbangkan bahwa seseorang memiliki website yang sangat profesional tapi karena itu, Scrollbar adalah dari tua-sekolah, sehingga cukup jelas bahwa, itu akan menghancurkan prospek lengkap dari sebuah situs web. Untuk mempelajari lebih lanjut tentang perbedaan antara biasa atau dan scrollbar disesuaikan mempertimbangkan screenshot berikut.
Sejujurnya, tidak ada kompleksitas dalam tutorial ini karena semua yang perlu kita lakukan adalah untuk memasukkan CSS untuk tema kita, dan itu akan melakukan pekerjaan cukup mudah. Untuk menginstal WebKit Scrollbar dalam template blogger Anda mempertimbangkan petunjuk berikut.
READ MORE
Apa Definisi WebKit Scrollbar?
Sebagian besar orang masih berpikir apakah kata "WebKit Scrollbar" berarti, itu adalah bar vertikal atau horizontal yang biasanya muncul di sisi kanan layar dan yang memungkinkan pengguna untuk gulir ke bawah halaman melalui mouse mereka. Jika ada yang masih tidak dapat memahami bagaimana cara kerjanya kemudian, jangan lupa untuk memeriksa demonstrasi berikut yang akan menghapus semua kesalahpahaman yang bergoyang-goyang ke dalam otak Anda. Perhatikan screenshot berikut.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Mengapa Menggunakan Custom Scrollbar?
Tidak ada alasan mengapa mematikan seseorang bisa mengatakan tidak kepada Disesuaikan Scrollbar karena menambah hidup elegan baru ke situs web nya. Pertimbangkan bahwa seseorang memiliki website yang sangat profesional tapi karena itu, Scrollbar adalah dari tua-sekolah, sehingga cukup jelas bahwa, itu akan menghancurkan prospek lengkap dari sebuah situs web. Untuk mempelajari lebih lanjut tentang perbedaan antara biasa atau dan scrollbar disesuaikan mempertimbangkan screenshot berikut.
Bagaimana Tambahkan WebKit Scrollbar di Platform Blogger?
Sejujurnya, tidak ada kompleksitas dalam tutorial ini karena semua yang perlu kita lakukan adalah untuk memasukkan CSS untuk tema kita, dan itu akan melakukan pekerjaan cukup mudah. Untuk menginstal WebKit Scrollbar dalam template blogger Anda mempertimbangkan petunjuk berikut.
- Kembali ke Blogger.com >> Template >> EDIT HTML >> Lanjutkan.
- Sekarang dalam tema Mencari ]]> </ b: skin> dan di atasnya Paste Code CSS Berikut.
/* --- Tempat Blogging Custom WebKit Scrollbar di Blogger --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}
- Kemudian Ganti # 336699 dengan warna dengan selera Anda.
Instagram telah merevolusi sebagai aplikasi mobile menjadi sebuah platform jaringan sosial yang kuat dan interaktif di mana pengguna tidak hanya dapat berbagi foto mereka, tetapi dengan pengguna inklusi terbaru mereka sekarang dapat meng-upload dan berbagi video mereka juga. Hal ini telah menjadi tempat yang sempurna untuk berbagi foto dan video dengan hampir jutaan pengguna. Di masa lalu, kami telah menunjukkan Anda bagaimana untuk Cantumkan Foto Instagram di Blogger. Baru-baru ini, salah satu pengguna kami meminta kami Bagaimana Cantumkan Instagram Video di Blogger? Karena, itu adalah fitur baru, sehingga tidak ada banyak cara untuk melakukan pekerjaan ini. Pada artikel ini, kita akan Tunjukkan Anda Cara Mencantumkan Video Instagram di Blogger.
Ini bukan kejutan besar bahwa Instagram tidak pernah membuat hal tertentu mudah untuk menanamkan pada sebuah situs web pihak ketiga. Aplikasi mereka mendukung teknologi oEmbed, di mana layanan seperti Embedly dapat menampilkan foto Instagram. Tapi tidak ada pilihan embedding mudah tersedia.
Metode # 1: Metode Kode tertanam:
Hal pertama yang perlu Anda lakukan adalah dengan mengunjungi URL dari video di Instagram yang Anda ingin menanamkan di situs blogger Anda. Untuk hanya sebuah contoh, kita akan menggunakan video ini.
2. Di Google chrome, safari atau Firefox, klik kanan pada video asli dan pilih "Periksa Elemen". Ini adalah alat yang berguna yang memungkinkan Anda untuk mendapatkan akses ke kode sumber dari sebuah situs web. Anda bahkan dapat membuat perubahan pada kode seperti CSS dan dapat menyaksikan hal-hal yang berubah di depan mata Anda.
2. Cari kode yang mirip dengan yang satu ini 'div class-"Video"' dan mencari URL yang memiliki "distilleryvesper" dalam judul dan berakhir di "mp4.." Copy seluruh baris URL dan tempel di mana saja Anda ingin menampilkan video. Misalnya, Blogger >> Tambah Post baru >> Tab HTML. Kode agak akan terlihat seperti ini:
<video controls="controls" poster="http://distilleryimage3.s3.amazonaws.com/2ea7416ad9e311e28f2322000a9e0753_7.jpg" width="600" height="640"><source src="http://distilleryvesper3-7.ak.instagram.com/2ea7416ad9e311e28f2322000a9e0753_101.mp4" type="video/mp4"></source>3. Anda hanya perlu untuk mendapatkan URL dan kemudian Anda dapat menggabungkan hal-hal bersama-sama dengan kode embed untuk menampilkannya ke situs blogger atau website lain.
Metode # 2: Metode Embed Sederhana:
Mungkin cara termudah untuk melakukan pekerjaan adalah dengan menggunakan teknik sederhana. Buka video apapun dan copy seluruh URL-nya.
Misalnya, http://instagram.com/p/ayxFjtOiCT sekarang hanya menambahkan "/ embed" di akhir URL dan itu akan menjadi http://instagram.com/p/ayxFjtOiCT/embed.
Anda dapat menggunakan teknik iFrame untuk menampilkan video pada halaman Web Anda. Mengambil URL di atas sebagai contoh, Anda dapat melihat kode kerja berikut:
<iframe frameborder='0' height='292' src='http://instagram.com/p/ayxFjtOiCT/embed?byline=0&portrait=0' width='417px'/>Teknik ini hampir sama seperti yang kita tunjukkan di atas, tapi di sini Anda hanya menggunakan teknik iframe sederhana muncul video. Sepertinya pekerjaan yang dilakukan orang-orang.
Metode # 3: Gunakan Embedly:
Embedly, memberikan Anda fleksibilitas untuk menanamkan apa pun yang Anda suka. Hal ini juga menawarkan pilihan di mana Anda dapat menanamkan video Instagram dalam situs web Anda. Metode ini untuk orang-orang un-techy yang tidak bisa bermain-main dengan HTML.
Kami tidak akan memilih metode ini karena metode di atas bekerja cukup baik. Namun, jika Anda tidak dapat mencapai apa-apa dari atas dua metode maka yang satu ini tidak akan mengecewakan Anda.
Apa pikiran Anda tentang portal ini video baru Instagram? Kami berharap tutorial ini membantu Anda untuk belajar Cara Mencantumkan Video Instagram di Blogger. Jika Anda menyukainya kemudian, jangan ragu untuk berbagi dengan teman-teman Anda di web sosial. Marilah kita tahu apa pikiran Anda tentang hal itu.
Catatan: Anda dapat melihat Demo Disini, pastikan Anda gulir ke bawah ke bagian bawah posting untuk melihat tombol hijau "Reblog This Post".
Mengapa untuk memungkinkan penggunaan untuk Reblog Tulisan Anda?
Beberapa orang mungkin mengambil dengan cara yang salah karena memungkinkan pengguna untuk berbagi posting Anda di blog mereka akan berakhir di plagiarisme. Namun, ada twist di bagian ekor. Karena, backlink kredit dari sumber aslinya selalu ada, jadi itu berarti Anda akan terus menjadi penulis asli.
Di sisi lain, Anda bisa mendapatkan banyak backlink alami berkualitas tinggi. Hanya mempertimbangkan, jika blog Anda memiliki 100 posting dan setiap posting yang kembali bersama dengan 1000 orang dan sebagai imbalannya Anda mendapatkan banyak backlink layak untuk situs Anda. Ini juga akan menguntungkan Anda dengan menyediakan situs Anda dengan lebih popularitas sebagai orang mungkin mengikuti situs Anda dari menjadi penulis asli.
Cara Tambah Tombol Reblog posting Anda di Blogger?
Hal pertama yang Anda akan lakukan adalah untuk login ke Dashboard Blogger Anda. Sekarang Setelah log in, pergi ke blog Anda >> Template >> Edit HTML >> dan cari tag ]]> </ b: skin>. Setelah Anda menemukannya, tepat di atasnya paste kode CSS berikut.
.reblog {Setelah menambahkan kode CSS, waktu untuk menambahkan kode yang akan membuat pekerjaan widget. Hanya mencari <div class='post-footer'> dan di atasnya paste kode berikut. Setelah semuanya selesai, tekan "Save Template" tombol untuk menyimpulkan proses.
color: #fff;
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 0 #75a43b;
padding: 5px 10px;
display: inline;
border: 1px solid #69963b;
background: #7cc237;
border-radius: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));
background: -webkit-linear-gradient(top, #afd95b, #7cc237);
background: -moz-linear-gradient(top, #afd95b, #7cc237);
background: -ms-linear-gradient(top, #afd95b, #7cc237);
background: -o-linear-gradient(top, #afd95b, #7cc237);
box-shadow: inset 0 1px 0 #d0e8a0;
-webkit-box-shadow: inset 0 1px 0 #d0e8a0;
-moz-box-shadow: inset 0 1px 0 #d0e8a0;
-o-box-shadow: inset 0 1px 0 #d0e8a0;
}
.blogthis a {
color: #fff; text-decoration:none;}
a.reblog:hover {
color: #fff;
background: #7cc62b;
background: -webkit-gradient(linear, left top, left bottom, from(#b5e261), to(#7cc62b));
background: -webkit-linear-gradient(top, #b5e261, #7cc62b);
background: -moz-linear-gradient(top, #b5e261, #7cc62b);
background: -ms-linear-gradient(top, #b5e261, #7cc62b);
background: -o-linear-gradient(top, #b5e261, #7cc62b);
text-decoration:none;
}
<div class="reblogme"><li class='blogthis'><b:if cond='data:top.showBlogThisButton'>Selamat: Anda telah berhasil belajar Cara Memasang Fitur Reblog di Artikel Blogger Anda. Tidak hanya itu, tetapi Anda juga dapat menyesuaikan dgn mode sesuai dengan kebutuhan keinginan Anda. Anda juga dapat melihat posting Anda untuk melihat segala sesuatu bekerja dalam urutan atau tidak.
<a class='reblog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>Reblog This Post</a></b:if>
</li></div>
Kami berharap tutorial ini telah memfasilitasi Anda untuk memahami bagaimana untuk memungkinkan pengguna untuk Reblog posting Anda di blogger. Apakah ada dari Anda yang menggunakan teknik yang sama, Jika ya maka biarkan kami tahu tentang pengalaman Anda. Jika Anda suka posting maka berbagilah dengan teman-teman media sosial Anda.
Blog dari Blogger dengan Subdomain Blogspot saat ini memang lagi gempar diperbincangkan bahkan diperdebatkan oleh para blogger Indonesia, karena baru-baru ini si Embah google melakukan penghapusan besar-besaran terhadap blog yang melanggar TOS google, sebagaimana pengalaman saya dahulu juga yang pernah memiliki blog yang dihapus google pasti ini sangat menyakitkan, rasanya sampai keluar keringat dingin saat mengetahui bahwa blog yang kita cintai lenyap begitu saja, dan yang lebih menyedihkan lagi tidak akan ada konfirmasi sebelumnya atau peringatan dahulu ketika blog kita dihapus. beberapa hari inipun jg demikian, banyak blog yang mengikuti kontes SEO tiba-tiba waktu dibuka ternyata hanya ada tulisa seperti gambar dibawah ini:
Gambar diatas seperti momok yang menakutkan bagi para blogger yang menggunakan subdomain dari blogspot, jadi jika sewaktu-waktu anda buka blog anda lalu hanya tampilan diatas yang anda lihat, segera minumlah air putih sebanyak-banyaknya, elus dada anda dan istigfarlah, dosa apa yang telah anda lakukan. :) misalnya contoh kemarin ada beberapa kontestan dari lomba seo dari anekahosting.com web hosting murah terbaik di indonesia ternyata mengalami hal tersebut, sungguh tragis, blog yang capek-capek dioptimasi ternyata sekarang lenyap ditelan si embah. lalu bagaimana solusinya atau cara mengembalikan blog atau bahkan akun yang dihapus google? nah itulah yang saya cari-cari sejak dulu, disini ilmublogmu hanya akan memberikan tips saja dan tidak menjamin bahwa blog yang dihapus tersebut akan kembali kepada anda. silahkan simak tips-tipsnya saja.
READ MORE
Gambar diatas seperti momok yang menakutkan bagi para blogger yang menggunakan subdomain dari blogspot, jadi jika sewaktu-waktu anda buka blog anda lalu hanya tampilan diatas yang anda lihat, segera minumlah air putih sebanyak-banyaknya, elus dada anda dan istigfarlah, dosa apa yang telah anda lakukan. :) misalnya contoh kemarin ada beberapa kontestan dari lomba seo dari anekahosting.com web hosting murah terbaik di indonesia ternyata mengalami hal tersebut, sungguh tragis, blog yang capek-capek dioptimasi ternyata sekarang lenyap ditelan si embah. lalu bagaimana solusinya atau cara mengembalikan blog atau bahkan akun yang dihapus google? nah itulah yang saya cari-cari sejak dulu, disini ilmublogmu hanya akan memberikan tips saja dan tidak menjamin bahwa blog yang dihapus tersebut akan kembali kepada anda. silahkan simak tips-tipsnya saja.
- Jika anda masih bisa login ke blogger, maka dipastikan akan ada dasboard yang menandakan blog telah dihapus, klik blog yang dihapus, lalu ikuti perintahnya berikutnya, silahkan tunggu email balasan dari blogger. jika beruntung dan blog memang layak dan tidak melanggar TOS maka google akan segera mengembalikan blog tersebut. begitu juga sebaliknya, jika memang melanggar TOS maka akan sulit sekali untuk kembali.
- Berhenti dulu sementara waktu membangun backlink dari luar, kecuali hanya internal link yang baik saja,hari ini saya tidak berburu backlink sama sekali untuk artikel-artikel kontes seo saya. Backlink hanya ditujukan ke homepage saja dan itupun cuma beberapa. Makanya saya punya waktu untuk menulis artikel ini.
- Memindahkan blog-blog saya ke akun yang lain. Tadinya blog ini berada dalam satu akun dengan blog-blog saya yang lainnya yang ada di bagian footer dari blog ini (widget partner). Tujuannya agar kalau salah satunya terdeteksi sebagai spam oleh blogger, maka cukup blog itu dengan akun google yang satu saja yang dihapus dan blog lainnya masih bisa diselamatkan. Tapi ini kalau google mencurigai akunnya sebagai spam, kalau google mencurigai alamat IP saya sebagai spam, maka cara ini tidak akan berlaku dan seluruh blog saya beserta seluruh layanan google nya akan terhapus juga. Kalau kemungkinan terburuk ini yang terjadi, ya sudah buat lagi yang baru.
- Memutus tali backlink antar blog. Tadinya blog yang ada di widget partner di bawah saya beri backlink dofollow. Tapi melihat fenomena yang terjadi, saya sudah menambahkan atribut nofollow pada anchor text ke blog saya yang lainnya agar tidak meneruskan page rank.
- Menonaktifkan backlink untuk sementara waktu ke situs penyelenggara kontes seo. Khususnya untuk yang belum resmi dimulai. Kecuali kalau yang sedang berlangsung ya mau tidak mau harus dipertahankan walaupun cukup beresiko juga. Kalau posisi artikel kontes seo anda jauh dari yang diharapkan, ada baiknya berpikir realistis. Apakah terus memepertahankan backlink ke situs penyelenggara kontes, atau segera menghapusnya. Mengingat blog-blog kita ini sedang berada dalam pengawasan google.
Instalasi HTML5 Music Player di Blogger:
Hal pertama yang harus Anda lakukan adalah untuk login ke Dashboard Blogger Anda melalui akun Google Anda. Setelah login ke account Anda, dari daftar blog Anda, pilih bahwa blog yang Anda ingin menginstal HTML5 Music Player. Sekarang pergi ke Template >> Edit HTML dan cari tag </ head> berakhir. Setelah menemukan tag, tepat di atas itu paste kode berikut.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>Setelah semuanya dilakukan, itu adalah masa untuk menyimpan template Anda. Hanya tekan tombol "Simpan Template" tombol terletak di sudut kanan atas layar monitor Anda. Sekarang pindah ke langkah berikutnya ke depan.
<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>
Menambahkan HTML 5 Music Player di Blogger:
Hal berikutnya adalah menambahkan pemutar musik HTML5 baik pada sidebar Anda atau ke halaman tertentu / posting di situs Anda. Hal ini sepenuhnya tergantung pada kebutuhan Anda, apakah Anda ingin menjadi sidebar Anda, posting, halaman atau tempat lain. Ini akan bekerja dengan baik di mana-mana. Ikuti petunjuk berikut dengan benar.
Pergi ke Blogger >> Tata Letak >> Tambah Gadget >> Tambahkan HTML / JavaScript dan hanya paste kode berikut ke dalam kotak teks HTML. Sekarang Anda mungkin ingin menyesuaikan Pemutar musik Anda sehingga sebelum kita menyimpan gadget memungkinkan mempelajari bagaimana Anda dapat menyesuaikannya. Misalnya, Mengubah, Musik, dan lain-lain Covers.
<div class="mbl">Customization:
<div class="mbl_player" id="mnplp">
<div class="mbl_art_bg"></div>
<img class="mbl_cover" src="" alt=""/>
<span class="mnpl_title"></span>
<span class="mnpl_author"></span>
<div class="mnpl_volume_min"></div>
<div class="mnpl_volume"></div>
<div class="mbl_volume_max"></div>
<div class="mnpl_toolbar">
<div class="mnpl_tlb_prev"></div>
<div class="mnpl_tlb_stop"></div>
<div class="mnpl_tlb_next"></div>
<div class="mnpl_current"></div>
<div class="mnpl_long"></div>
<div class="mnpl_all"></div>
</div>
<div class="mbl_playlist">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
]
});
});
</script>
- Judul: Merupakan judul musik atau lagu.
- mfile: Ini merupakan file musik dalam ekstensi mp3.
- Penulis: Nama orang yang terdiri musik.
- meliputi: gambar jempol Sampul yang muncul saat lagu diputar.
- background: Gambar yang ditampilkan di latar belakang dari pemutar musik.
Selamat: Setelah menyesuaikan, tekan tombol "Simpan" yang terletak di bagian bawah jendela. Sekarang, pergi dan memeriksa situs Anda. Saya cukup yakin situs Anda akan batu sekarang. Marilah kita tahu tentang pikiran Anda pada gadget luar biasa ini.
Kami berharap bahwa Anda telah dipuja dan belajar Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger. Gadget ini sangat kuat dan mengambil detik untuk memuat, sehingga dapat dimengerti bahwa hal itu tidak akan mempengaruhi kecepatan situs Anda sama sekali. Marilah kita tahu apa yang Anda pikirkan tentang hal itu.
Catatan: Widget ini tidak akan bekerja sampai Anda akan menyesuaikannya. jadi, pastikan Anda benar menyesuaikan sesuai dengan petunjuk yang kami sebutkan di atas.
Dalam tutorial ini Tempat Blogging akan menjelaskan bagaimana menambahkan Navigation Bar CSS3 Style Classic Untuk Blogger. Menu ini baik-baik saja bekerja dengan setiap browser internet yang modern. Anda dapat menghubungkan dengan halaman utama Anda dengan menggunakan bar navigasi ini. Tempat Blogging menggunakan CSS3 dan HTML. klik Button di bawah untuk melihat Demo. Mari kita mulai tutorialnya.
6. Klik Tambahkan Widget.
7. Pilih HTML/Javascript.
Ganti Tanda # dengan Link Anda.
7. Simpan HTML/Javascript.
Sekian postingan kali ini yang membahas tentang Cara Membuat Navigation Bar CSS3 Style Classic Untuk Blogger. Semoga bermanfaat :)
READ MORE
- Buka Akun Blogger Anda
- Masuk ke menu HTML
- Cari kode ]]></b:skin>
- Pastekan kode dibawah ini di atas kode ]]></b:skin>
/* CSS Menu Classic tempat blogging */5. Masuk ke bagian Layout / Design
#tempatblogging_classic-menu{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-BwFZIvKbEzLc7SU61PtH4omv0fEsZN1b1mGOhQwIpNY1cizVSKyawiInJ961CLwRCHfM7OKrm8lGfLV51R3KELT-I2s95cYBgEW-EXvrSHOjkCvOulB7VrbMkyM65tGMJLhu4_6T08/s1600/tempatbloggingfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#tempatblogging_classic-menu ul,#tempatblogging_classic-menu li{margin:0 auto;padding:0 0;list-style:none}
#tempatblogging_classic-menu ul{height:35px;width:980px}
#tempatblogging_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#tempatblogging_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#tempatblogging_classic-menu li a:hover{color:#fff}
#tempatblogging_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#tempatblogging_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#tempatblogging_classic-menu label span{font-size:12px;position:absolute;left:35px}
#tempatblogging_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#tempatblogging_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#tempatblogging_classic-menu ul.menus a{color:#333}
#tempatblogging_classic-menu li:hover ul.menus{display:block}
#tempatblogging_classic-menu a.prett{padding:0 27px 0 14px}
#tempatblogging_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#tempatblogging_classic-menu ul.menus a:hover{background:#ddd;color:#333}
.page-tempatblogging_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-tempatblogging_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-tempatblogging_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}
.page-tempatblogging_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-tempatblogging_classic-menu li a:hover,.page-tempatblogging_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
6. Klik Tambahkan Widget.
7. Pilih HTML/Javascript.
<div id="tempatblogging_classic-menu">Note :
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>
Ganti Tanda # dengan Link Anda.
7. Simpan HTML/Javascript.
Sekian postingan kali ini yang membahas tentang Cara Membuat Navigation Bar CSS3 Style Classic Untuk Blogger. Semoga bermanfaat :)
HTML5 vs XHTML
Telah ada banyak diskusi dalam beberapa tahun terakhir tentang perbedaan antara HTML5 vs bahasa XHTML dan yang lebih disukai untuk pengembang web. HTML5 adalah versi mendatang dari HTML markup language, sekitar yang hampir semua laman web didasarkan. Lalu ada XHTML, kombinasi dari HTML4 dengan elemen XML 1.0.
Ikhtisar XHTML
XHTML (Extensible Hyper Text Markup Language) adalah standar dokumen web disahkan pada tahun 2000, segera setelah HTML4 adalah standar pada tahun 1997. HTML4 memungkinkan untuk sintaks yang sangat longgar dan ceroboh. Web browser dan parser lainnya harus mengkompensasi, dengan tidak ada yang benar-benar konforman dengan format. Namun, standar XML yang ketat dimasukkan ke XHTML, yang memungkinkan dokumen yang akan diurai oleh parser XML yang ada dan membuatnya lebih mudah untuk web browser.
Ikhtisar HTML5
HTML5 (HyperText Markup Language) adalah sedang mengembangkan penerus HTML4 diharapkan akan selesai pada tahun 2014. Ini mencakup banyak fitur baru populer, dan menggabungkan tidak hanya ekstensi dari HTML4 tetapi juga fitur XHTML. Ketika membandingkan HTML5 vs XHTML, menurut World Wide Web Consortium, HTML5 dimaksudkan untuk menggantikan XHTML dalam jangka panjang.
HTML5 memperluas kekayaan semantik dokumen dengan banyak tag baru, seperti untuk header, menu, navigasi, dan elemen yang sangat umum lainnya halaman web. Ada juga dukungan asli untuk video, audio, gambar SVG, dan lainnya jenis media tersebut. Hal ini akan menghilangkan kebutuhan untuk plugin media yang terpisah (seperti Flash). Dokumen HTML5 telah menunjukkan untuk melakukan lebih cepat pada perangkat mobile dan lain-lain dengan sumber daya terbatas. Sebagai browser utama sudah mendukung bagian signifikan dari HTML5, banyak pengembang sudah menggunakan itu (bersama dengan CSS3) untuk membuat aplikasi web yang sangat interaktif cross-platform.
Perbandingan antara HTML5 vs XHTML
Pada 2013 banyak pengembang web yang menunjukkan bahwa antara HTML5 vs XHTML, HTML5 akan segera sepenuhnya menggantikan XHTML sebagai dominan bahasa markup untuk halaman web. Dengan tren menuju "Web 2.0" dan popularitas media sosial, integrasi mudah yang memungkinkan HTML5 dengan audio, video, dan media lainnya membuat pilihan yang menarik, terutama pada perangkat mobile. XHTML tidak akan tetap waktu dekat meskipun. Untuk halaman web lebih mudah untuk ditampilkan pada layar komputer, XHTML sangat akrab bagi pengembang dan termudah untuk belajar. Meskipun XHTML awalnya diciptakan untuk memperkuat praktek coding yang ketat dan tepat, HTML5 memungkinkan sekali lagi untuk kode lebih longgar, ke kekecewaan banyak pengembang.
Kalau kawan ingin lihat Demonya » disini
Oke langsung saja ke Cara membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget
- Pilih tanda [+] pada HTML / JavaScript
- Copas Script berikut kedalamnya
<div style="overflow: hidden;margin:0; padding:10px 5px; width:100%; border:1px solid #369;">
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://tips-blogbego.blogspot.com/ &Exclusions=BLOGBEGO,TIPS BLOGBEGO
&ShowHowMany=20 &Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div></div>
- Teks yang berwarna merah [tips-blogbego] silahkan ganti dengan Link kawan
- Sedangkan BLOGBEGO, TIPS BLOGBEGO silahkan ganti dengan Nama Admin / Athour Blog kawan termasuk aliasnya juga
- Teks yang berwarna biru [20] adalah jumlah Komentator yang akan ditampilkan dari Komentar terbanyak, silahkan disesuaikan
- Simpan Blog kawan
Demo di bagian gambar atas. Menambahkan kode di bawah ini ke dalam sebelum tag </ body> dalam template Anda.
<style>Selamat : Anda sudah berhasil memasang Bar halaman untuk kontrol Sroll blog. silahkan cek apakah script sukses apa tidak.
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxaACGd-cCEIelON_p4qzdKcnnyKTPCGOfD3N87r65Yzi3SYPifxC_UY8Fv5hd1jCW_r0-GaFZbpPD62kNSa147SzJYzKYL427wSLSJ5KwNIrbqIUtGj2JIe2OlS9S6vYCrTVrTMaA-A/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
