Tips "N Trick Blogger

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 cara Ngilangin Pemberdaya Blogger

►

Tips kali ini buat temen-temen yang bingung Ngilangin Tulisan Diberdayakan Oleh Blogger

Sebenarnya cara ini tidak boleh di pake tapi… kadang-kadang temen-temen jadi males liat blog kalo ada tulisan di berdayakan oleh Blogger.

Hahahah…… oke Sob.. ni sedikit Tips untuk hilangan kekesalan Sobat yang kesel karena Blog ada Pemberdaya nya wkwkwkwk

Berikut ini adalah Menghilangkan Tulisan diberdayakan Oleh Blogger di Blog sobat.

1. Login Blog
2. Pilih Template ==> Edit HTML
3. Cari kode ]]></b:skin ( gunakan ctrl+f )
4. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin

Klik Untuk Liat Kode

Kalo Udah tinggal di Save aja Udah dech Mudah kan Sob.

Jumat, 15 November 2013

Posted by Unknown

0 Comments

Tag : Tips LaiN

Membuat menu Slide N Rolling

Cara membuat Sosial Network slide di Blog

Tips cara Ngilangin Pemberdaya Blogger

Post-post Terpopuler

Anda yang Ke ...

Tanslate

Blog Archive

BloG ku Yang Lain

Tips "N Trick Blogger

Selamat Datang Di Tips 'aNd TriCK BloGGeRs DiTHa SoB

Sekilas Tentang Admin NicH