Posts

Showing posts from February, 2014

Pasang Tombol Go To Down Pada Tombol Back To Top

Image
Pasang Tombol Go To Down Pada Tombol Back To Top Sebelumnya saya sudah share tips " Pasang Tombol Smooth Scroll Back To Top dengan jQuery di Blogspot" .
Nah kali ini, saya ambil tips dari Kompi Ajaib dimana denga menambahkan tombol go to down.Untuk tampilan tombolnya kita buat sama dengan sebelumnya yang menggunakan before dan after, hanya membalikan arah panahnya menjadi ke bawah (membalikan border pada before dan after).

Sebelumnya Anda perlu membaca tips berikut ini, simak bai-baik :
Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After

Jika Anda sudah memasang tombol Back To Top tersebut, kini tinggal menambahkan tombol Go To Down.

Langkah pemasangan :

1. Tambahkan kode CSS untuk tombol go to down di bawah ini dan Anda taruh/simpan di atas kode ]]></b:skin> atau </style>

#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;}#GoToDo…

Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After

Image
Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After Sobat bloggers,sebelumnya saya sudah share tips "Pasang Tombol Smooth Scroll Back To Top dengan jQuery di Blogspot" kali ini kita akan membuat membuat tombol back to top atau scroll to top
dengan menggunakan kode CSS   :before dan :after sehingga tidak menggunakan gambar.
Script ini dikembangkan dari tips Blog Kang Ismet, karena scriptnya lebih simple dan memiliki efek bounce pada halaman ketika sampai ke atas.

Langkah/Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After 1. copy script di bawah ini, dan taruh di atas kode </body> .

<scripttype='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0}…

Kompi Banget Responsive Blogger Template-Valid HTML5 and CSS3

Image
Kompi Banget Responsive Blogger Template-Valid HTML5 and CSS3
FITUR Kompi Banget Responsive Blogger Template-Valid HTML5 and CSS3:
Valid HTML5 dan CSS3 baik di homepage maupun di postpage ResponsiveDesign template flat ui.Full title pada semua link dan gambar (100%).Postmeta di homepage, postingan, dan halaman statis.HCard Author dan Update di homepage, postingan, dan halaman statis.Markup Authorship terverifikasi.Back to TopSpammer detected pada komentar.Breadcrumb 1 kolom pada halaman statis.ETC... =================================================================================

DemoDownload
Untuk pengaturan selanjutnya, silahkan Anda baca selengkapnya di sini.
Sekian artikel Kompi Banget Responsive Blogger Template-Valid HTML5 and CSS3:

Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly

Image
Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly
Sobat bloggers, bagi Anda yang suka posting video dari YouTube di blog silahkan Anda ikuti tips di bawah ini.


Cara Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly : 1. Copy kode CSS di bawah ini dan tempatkan tepat di atas ]]></b:skin> atau </style>

.videoyoutube{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow: 1px 30px 30px -26px #818181;}.video-responsive {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin:8px;}.video-responsive iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;}


2. Simpan kode javascript iframe loader video Youtube di bawah ini DI ATAS kode </body>

<script type='text/javascript'>//<![CDATA[ setTimeout(function(){ $('.video-youtube').each(function(){ $(this).…

Cara Membuat Efek Jera Waktu Pada Komentar Blog

Image
Cara Membuat Efek Jera Waktu Pada Komentar Blog,Anaktimor17 Blog - Sobat bloggers, dengan adanya efek pada komentar dengan jera waktu menurun (dari atas scroll kebawah secara pelan)

DroidPluss Responsive Blogger Template Valid HTML5 dan CSS3

Image
DroidPluss Responsive Blogger Template Valid HTML5 dan CSS3
Anaktimor17 Blog - Sobat bloggers, kembali saya share template terbaru dari Kang Ismet. Setelah lama absen, akhirnya Kang Ismet mempublikasikan sebuah template yang unik dan keren.

FITUR DroidPluss Responsive Blogger Template Valid HTML5 dan CSS3 :
Responsiv cek Valid HTML5 pada HomepageValid HTML5 pada postingan Valid CSS3 cek SEO 100% cek Sticky WidgetBack to topCustomized Deleted CommentSmooth scroll to comment hashEtc... ================================================================================= DemoDownload

Old Fianetmu Responsive Blogger Template

Image
Old Fianetmu Responsive Blogger Template, Anaktimor17 Blog
FITUR Old Fianetmu Responsive Blogger Template:
ResponsiveFast LoadingSyntax HighlighterValid HTML5 Scor SEO 97%Ads ReadySpace Iklan ads 125x125Etc. =================================================================================

DemoDownload

MagicNesia Responsive Blogger Template

Image