Tampilkan postingan dengan label TipsnTrick. Tampilkan semua postingan

Membuat menu Slide N Rolling

Nah Buat Sobat Blogger Yang Berminat Menerapkan Pada Blog Sobat Semua, Sobat Bisa Ikuti Caranya

Dibawah ini:

Login Ke Akun Blogger Sobat.
Pilih Rancangan => Edit HTML Dan Jangan Lupa Centang Expand Template Widget
Lalu Carilah Kode ]]> Dan Taruhlah Kode Berikut Diatasnya.

Klik Untuk Liat Kode

<center>
.menu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

Selanjutnya Cari body Lalu Taruh Kode di Bawah ini Tepat diatasnya

</script>

Setelah itu Sobat Bisa Menyimpan Template nya.
Terakhir Seperti Biasa Sobat Pikir Pikir Dulu Dech Lokasi Penempatan Yang Cocok Untuk Sliding Dan Rolling Menu nya Dan Bila Sudah Ada Ide Sobat Sekarang Masuk Ke Element Halaman Dan Tambah Widget Lalu Pilih Yang HTML/JavaScript.
Taruh Kode Berikut Dan Simpan.

Selasa, 17 Desember 2013

Posted by Unknown

0 Comments

Tag : TipsnTrick

Cara membuat Sosial Network slide di Blog

►

Berikut langkah-langkah pembuatannya :

Klik Untuk Liat Kode

1. Login ke Blogger
2. Masuk ke Template >> Edit HTML (centang expand widget templates)
3. Letakkan kode CSS di bawah ini diatas ]]> :

<center>
.social-buttons {
    position: fixed; 
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
} 
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum :

5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum :

<center>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Senin, 16 Desember 2013

Posted by Unknown

0 Comments

Tag : TipsnTrick

Tips Membuat Efect Kembang Api dikedua sisi Blog

►

Caranya Tetap sama dengan yang Lain karena Ini menggunakan HTML/Javascript

Oke deh Biar Lebih Mudah seperti Biasa :
1. Sobat Login Dulu ke Blog Sobat
2. Buka TataLetak
3. Selanjutnya Tambah Gadget
4. Pilih HTML/Javascript
5. Copy Code di bawah ini

Klik Untuk Liat Kode

6. Setelah Selesai Simpan
7. Ligat Hasilnya .

Oke Broooooo ............. Selamat Mencoba ...!!!!!
Gambar nya kayak di bawah ini WKWKWKWK.

Minggu, 10 November 2013

Posted by Unknown

0 Comments

Tag : TipsnTrick

Tips Membuat Tampilan Blogger Tab Browser Berjalan

►

Cara Membuat Judul Blog Berjalan Di Tab Browser

Pada kesempatan kali ini saya akan berbagi tips singkat dan sederhana tentang blogging, yaitu bagaimana cara membuat judul blog berjalan di tab browser.

Sebenarnya ini adalah cara yang sudah lama tetapi tidak apalah untuk menambah beberapa tutorial serta untuk mempermudah teman-teman dalam mendesain blog.

Oke tanpa banyak penjelasan lagi berikut ini adalah cara bagaimana cara membuat judul blog berjalan di tab browser.

1. Pertama silahkan anda login ke akun blogger
2. Klik pada Template pilih Edit HTML
3. Kemudian silahkan meng-copy kode dibawah ini

4. Lalu Temukan Kode di bawah ini pada Templat Anda :

Lalu Sisipkan Sintax di bawah ini tepat di bawah Sintak warna Biru

Klik Untuk Liat Kode

Setelah itu simpan.

Biru Sintax yang harus Sobat cari di Tamplate Blogger

Oh ya hampir Lupa ada yang perlu di rubah sesuai selera anda “Kata yang bakal tampil di Tab Browser Sobat” yang wa kasih warna MERAH .. (Ganti sesuka Sobat)

Posted by Unknown

0 Comments

Tag : TipsnTrick

Tips Memasang Tombol BecK to Up

►

Tips dan trick ini sudah saya peragakan di blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC7AQSJxgg39uul7pK7nziTIMIt3mhmcRF0JxwUoE5Hj5Uwup6uS5P2xAC-UAVwkR6Kv-k_Z3XgtfgK_9dhFhlKiCIuHxrtDMBguWybxbEvCZGIMkKyzDbLKY_BG19Sj714N-B3Gj2czP/s1600/Untitled-2.png'/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC7AQSJxgg39uul7pK7nziTIMIt3mhmcRF0JxwUoE5Hj5Uwup6uS5P2xAC-UAVwkR6Kv-k_Z3XgtfgK_9dhFhlKiCIuHxrtDMBguWybxbEvCZGIMkKyzDbLKY_BG19Sj714N-B3Gj2czP/s1600/Untitled-2.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

Kode warna kuning adalah posisi tombol berada

Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan gambarnya dengan selera anda)

Posted by Unknown

0 Comments

Tag : TipsnTrick

Tips Membuat Link Sumber jika Post di COPAS

►

Kami yakin Anda pasti pernah copy paste begitu juga Admin tapi copy paste harus punya etika dan sopan santun, misalnya yaitu dengan menyertakan sumber atau kredit link blog yang dicopas, selain itu kita juga harus menulis artikel tidak sama persis dengan aslinya untuk menjaga kualitas artikel blog.

Terkadang ada blogger yang nakal atau meng-copas artikel tapi tidak menyertakan sumber atau kredit link blog yang dicopas, pada postingan sebelumnya kita sudah bahas cara menonaktifkan klik kanan untuk menghindari copas, kalau Anda ingin menghindari artikel dicopas dengan cara lain berikut tips cara membuat link sumber otomatis pada blog ketika dicopas :