.jpg)
Recent post
Tampilkan postingan dengan label Trik Blogging. Tampilkan semua postingan
Seperti judul di atas, kali ini saya akan membagikan bagaimana cara nya setiap kali kita posting di blog tampil secara otomatis ke fans page facebook, Untuk cara nya silahkan kalian bisa lihat di bawah ini :
Cara mensubmit RSS Feed ke RSS Graffiti
1. Login ke Facebook.
2. Buka aplikasi RSS Graffiti dan jalankan.
3. Setelah itu, klik Add Feed.
4. Kemudian akan muncul halaman seperti berikut:
Feed URL: silahkan isi alamat feed blog kalian.
Contoh http://blogmu.blogspot.com/feeds/posts/default
Source Name: Isi nama blog kalian
Source URL: Isi alamat blog kalian
Post style: Biarkan saja 'Standard'. Jika kalian ingin postingan blog muncul dalam bentuk pesan singkat seperti Twitter pilih 'Compact' atau 'Status updates'
5. Jika sudah tekan Save. Selesai
Fitur yang disediakan oleh RSS graffiti antara lain:
- Memperbolehkan kalian untuk mengatur tampilan artikel dalam bentuk feed biasa atau pesan singkat seperti Twitter
- Menyaring artikel dari tanggal tertentu
- Memberi pesan tambahan pada setiap artikel yang dipublikasi
- Mengatur jadwal posting
- Mempublikasi twitter tweak ke facebook
Selamat Sore sobat Blog Taretan Mania .. Kali ini saya membuat postingan tentang Cara Memasang Kode Tool Warna di Blog . Dalam dunia blogging memilih warna yang tepat bisa membuat tampilan blog kita menarik. Saat ini Blogger terus menyempurnakan tool editing yang memudahkan para pemula (bisa dilihat dalam fitur template desainer). Dengan begitu sobat tidak perlu mahir kode HTML untuk memilih warna yang sesuai keinginan. Namun tetap saja, mengerti kode HTML meskipun sedikit akan sangat bermanfaat.
Kode HTML untuk warna berupa simbol “#” diikuti dengan 6 deret angka atau huruf dimana jumlah ini juga ada dalam sistem heksadesimal. Dengan kata lain kombinasi huruf dan angka tersebut akan menunjuk pada warna tertentu. Misalnya: kode HTML untuk warna putih adalah #FFFFFF dan kode heksadesimalnya adalah 255, 255, 255.
Jika masih bingung dengan penjelasan tadi, coba sobat perhatikan tool eksaminasi warna buatan 2createawebsite.com dibawah ini. Untuk menggunakannya cukup klik pada bagian warna yang diinginkan dan perhatikan kode yang muncul di sebelahnya.
Kode HTML untuk warna berupa simbol “#” diikuti dengan 6 deret angka atau huruf dimana jumlah ini juga ada dalam sistem heksadesimal. Dengan kata lain kombinasi huruf dan angka tersebut akan menunjuk pada warna tertentu. Misalnya: kode HTML untuk warna putih adalah #FFFFFF dan kode heksadesimalnya adalah 255, 255, 255.
Jika masih bingung dengan penjelasan tadi, coba sobat perhatikan tool eksaminasi warna buatan 2createawebsite.com dibawah ini. Untuk menggunakannya cukup klik pada bagian warna yang diinginkan dan perhatikan kode yang muncul di sebelahnya.
Jika sobat suka dengan tool diatas silahkan copy kode dibawah ini dan letakkan ditempat yang diinginkan (area posting atau kolom widget).
<center><div style="text-align: center;"> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /> <param value="http://www.2createawebsite.com/build/col.swf" name="movie" /> <param value="high" name="quality" /> <param value="#ffffff" name="bgcolor" /> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div> </center>
Sekian Dulu postingan dari saya kurang dan lebihnya saya mohon maaf .
SALAM BLOGGER !!
Apa kabar Sobat Blogger !! Kali ini saya akan membuat postingan tentang "Cara Membuat Kotak Author Box",, Kalo mau liat gambarnya itu ada di smping kana blog saya ,, yang tulisannya "Author" itu kawan . Langsung aja nih ke step nya :
1. Login ke Blogger
2. Klik ke Template
3. Edit HTML
4. Lalu, tambahkan kode dibawah ini dan taruh tepat diatas ]]></b:skin>
/* Author Blog */.AHSadmin {width:auto; height:83px;padding:5px}.AHSadmin-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}.AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}.AHSfb, .AHSgp, .AHStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}.AHSfb {background: #3B5998;margin-left:73px}.AHSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}.AHSgp {background: #D34836;font-size:11px;margin-left:85px}.AHSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}.AHStw {background: #4099FF;margin-left:73px}.AHStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
5. Setelah itu menuju ke Tata Letak
6. Kemudian Add Gadget > HTML/Javascript7. Tambahkan Kode Dibawah ini
<!-- Author Box Start -->KETERANGAN :
<div class='AHSadmin'>
<img alt='Alif Lo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCosD3dFzJfvHnpWKkijxKVOcBVd2dWLWDoKq6rBFGhcuTZE1GRjJNgfSYizuFiXOski-pam38fTVaCF1lYpTV0s1bN7kytixamkL5OIeYIWdXBuUTbOo-WRzDCXKE2sPBMBsrUxLWlUY/s1600/kyuubi.jpg' title="Harun Lo" class='AHSadmin-gambar' />
<a class='AHSfb' href='http://www.facebook.com/harun.barue' rel='nofollow' target="_blank">f</a>
<a class='AHSgp' href='https://plus.google.com/104538829110848188070' rel='nofollow' target="_blank">G</a>
<a class='AHStw' href='http://twitter.com/TaretanPamexs' rel='nofollow' target="_blank">t</a>
<div class='AHSdeskripsi'>
Hai, Perkenalkan Nama Saya Harun Lo. Hehehehe.
<br/><a style="color:#888;" href="#" target="_blank"> Read More » </a>
</div></div>
<!-- Ends -->
1. Perhatikan Tulisan Biru silahkan ganti dengan URL : FB, G+, Twitter
2. Perhatikan Tulisan Hijau silahkan ganti dengan Kata" mu Sendiri
3. Perhatikan Tulisan Orange silahkan ganti dengan URL Gambar Profil Sobat.
Semoga bermanfaat. Jika ada yang kurang jelas silahkan tanyakan di Komentar..
SALAM BLOGGER !!
Hai sobat blogger,,udah hampir satu bulan nih saya tidak membuat postingan . soalnya di rumah lagi banyak kerjaan ,, kali ini Taretan Mania akan mengeposkan "Cara Membuat Kotak Banner 88 x 31", caranya tidak terlalu sulit kok, daripada penasaran ayo kita simak secara bersama-sama.
Login ke blogger- Masuk ke template
- edit HTML
- Cari kode ]]><b:skin jika sudah ketemu
- letakan script di bawah ini tepat di atas kode ]]><b:skin
#sidebarLank{
box-shadow: 0 0 15px white;
background: #0E090D;
border: 4px solid #9F1111;
border-left: 4px solid #9F1111;
float: left;
margin-top: 175px;
margin-left: -135px;
width: 88px;
height: auto;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
z-index: 10px;
line-height: 10px;
box-shadow: 0 0 15px blackred;
background: #222;
background-image: -webkit-linear-gradient(top, #393939, #222);
background-image: -moz-linear-gradient(top, #393939, #222);
background-image: -o-linear-gradient(top, #393939, #222);
background-image: -ms-linear-gradient(top, #393939, #222);
background-image: linear-gradient(to bottom, #393939, #222);
position:absolute;
}
#sidebarLank img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}
#sidebarLank img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
Cari kode <div id='header'>, tidak semua template sama jadi jika tidak ketemu kode tersebut cari saja kode yang intinya "header", jika sudah ketemu dengan kode tersebut. Lalu kalian letakan kode di bawah ini tepat di atas kode <div id='header'>
<b:section id='sidebarLank' maxwidgets='5' showaddelement='yes'>
</b:section>
Keterangan :
Kode yang berwarna pink itu tinggi dari banner tersebut
Kode yang berwarna hijau itu adalah lebarnya
tidak semua template sama, jadi disesuaikanlah dengan ukuran template anda.
Yang terakhir simpan, dan lihat hasilnya.
Sekian dulu postingan dari saya tentang Cara Membuat Kotak Banner 88 x 31 .
Taretan Mania - Cara Buat Smooth Scroll Back To Top di Blog . Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth scroll back to top / kembali ke atas. Smooth sendiri berarti lembut. Jadi smooth scrollartinya menggulung dengan lembut. Untuk membuat Tombol Back to Top biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.
Smooth Scroll Back To Top ini dimaksudkan sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Smooth Scroll Back To Top ini menggunakan Jquery mungkin pada tutorial selanjutnya lebih praktis .
Tidak lupa saya ucapkan terima kasih untuk Mas Oktri yang sudah berbagi tips ini kemudian saya share kembali karena Tutorial Blog ini Merupakan request dari teman blogger.
Cara Menambahkan ke Blog
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:"";position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style> 4. Kemudian letakkan kode berikut ini diatas kode </body>
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script> 5. Simpan Template
Taretan Mania - Cara Membuat Animasi Login Cap Jempol Di Home Blog ini memberikan efek manipulasi terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini didapat dari tetangga blogger kita abang Tutorial belajar blogger . Pada Postingan sebelumnya Cara Membuat Tulisan Berjalan Melayang di Bagian Bawah merupakan Tips animasi blog yang tidak berbeda jauh memberikan kesan yang menarik para pengunjung ketika berada di home blog kita .
Cara Menambahkan ke Blog
- Buka Template > Edit HTML > Expan Template Widget
- Cari kode </body>
- Lalu Paste kan kode di bawah tepat di atas kode </body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin by jalu-pangna.blogspot.com -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var Gambar_Login_Anda ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisgyQNFa977d4SDhMFHLmz6_qk8mPsOLpKPYjv9RQmOeJM3jxKn8mHz6uWWoRssyxcpAk-pyvFRX5Kiyn3g06qnjcgowXfpvAUfXP6-NQOjsssUPGqd12vQiEKKr2tbLKUMZ94m1tgKo/s28/Shutdown.png',
Nama_Login_Anda = ' Taretan Mania ';
</script>
<script src='https://tutorialbelajarblogger.googlecode.com/files/animasi-login3.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End by jalu-pangna.blogspot.com -->
<b:else/>
</b:if>
<!-- Animasi Login Begin by jalu-pangna.blogspot.com -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var Gambar_Login_Anda ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisgyQNFa977d4SDhMFHLmz6_qk8mPsOLpKPYjv9RQmOeJM3jxKn8mHz6uWWoRssyxcpAk-pyvFRX5Kiyn3g06qnjcgowXfpvAUfXP6-NQOjsssUPGqd12vQiEKKr2tbLKUMZ94m1tgKo/s28/Shutdown.png',
Nama_Login_Anda = ' Taretan Mania ';
</script>
<script src='https://tutorialbelajarblogger.googlecode.com/files/animasi-login3.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End by jalu-pangna.blogspot.com -->
<b:else/>
</b:if>
- Silahkan ganti nama login Taretan Mania pada script diatas dengan nama login anda
- Simpan Template, selesai...
Taretan Mania - Cara Membuat Tulisan Berjalan Melayang di Bagian Bawah Blog - Selamat pagi sobat Taretan !! pada postingan kali ini saya akan membahas Cara Membuat Tulisan Berjalan Melayang di Bagian Bawah (Footer) Halaman Blog. Maksud Tulisan berjalan di footer yaitu sebuah teks yang berjalan secara melayang di bagian bawah halaman blog kita (footer). Seperti halnya, saya juga sudah memasang tulisan melayang pada blog ini, seperti gambar berikut.
Cara Menambahkan ke Blog
1. Login ke Akun blogger anda, melalui www.blogger.com
2. Masuk ke Dashboard, Pilih Template, lalu Klik Edit HTML
3. Contreng "Expand Templae Widget"
4. Cari kode ]]></b:skin>
5. Copy kode dibawah ini tepat diatas kode ]]></b:skin>
/* footer dinamis */
#footer2 {
align: center;
position: fixed;
border-top: 1px solid #98cefc;
border-bottom: 1px solid #98cefc;
background-color: #FFFFFF;
width: 100%;
height:16px;
text-align: left;
color: #000000;
font-family: Verdana;
font-weight: bold;
font-size: 13px;
z-index:10000;
bottom:0;
}
#footer2 {
align: center;
position: fixed;
border-top: 1px solid #98cefc;
border-bottom: 1px solid #98cefc;
background-color: #FFFFFF;
width: 100%;
height:16px;
text-align: left;
color: #000000;
font-family: Verdana;
font-weight: bold;
font-size: 13px;
z-index:10000;
bottom:0;
}
6. Cari kode </body>
7. Copy kode dibawah ini tepat diatas kode </body>
<!-- footer dinamis -->
<div id='footer2'>
<marquee onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5'>Selamat datang di blog Tutorial Belajar Blog, Terima kasih telah berkunjung di blog kami.. Semoga anda senang!!</marquee>
</div>
Keterangan : Ganti tulisan yang berwarna merah dengan kata - kata anda sendiri.
8. Save Changes.
Taretan Mania - Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog - Apa kabar Pengunjung Taretan Mania Blog ,, Pada hari pertama bulan Ramadhan ini saya akan membuat Postingan yang kali ini membahas tentang Efek Hover Blockqoute ,, Sebenarnya tanpa Membuat Efek Hover Blockquote Blinking Bulb Pada Blog, pada blog yang masih menggunakan template standar atau template asli bawaan blogger juga sudah terdapat fasilitas blockquote. Namun blockquote pada template yang masih default blogger tersebut hanya mamberikan fasilitas blockquote yang masih murni atau bisa dikatakan blockquote sederhana, karena masih standar dan belum memiliki efek apapun pada blockquote tersebut.
Maka dari itu, untuk membuat efek hover pada blockquote di postingan blog agar lebih terlihat menarik maka dibawah ini merupakan tutorial untuk membuat efek pada blockquote akan menyala saat di sorot mouse layaknya seperti lampu didalam ruangan dan akan terlihat gelap jika mouse diarahkan menjauh dari blockquote.
Blockquote Sebelum Di sorot
Blockquote Setelah Di sorot
Cara Menambahkan ke Blog
1. Login ke blogger.
2. Kemudian klik Template > Edit HTML
3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Setelah ketemu, copy kode berikut ini kemudian letakan tepat di atas atau sebelum kode ]]></b:skin>
/*blockquote oktri blog */
blockquote {
background: #000 url(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktri.jpg) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font:Courier new;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktrihover.jpg) no-repeat right bottom ;
color:#00ff00;
}
blockquote p {
margin: 0;
padding-top:10px;
}
blockquote p {
margin: 0;
padding-top:10px;
}
blockquote {
background: #000 url(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktri.jpg) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font:Courier new;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktrihover.jpg) no-repeat right bottom ;
color:#00ff00;
}
blockquote p {
margin: 0;
padding-top:10px;
}
blockquote p {
margin: 0;
padding-top:10px;
}
KETERANGAN :
- Anda dapat merubah menggunakan background lain jika anda inginkan dengan cara mengganti kedua link background, Background di link berwarna merah muncul pada mouse hover dan background kedua di link biru muncul ketika mouse menjauh dari blockquote tersebut.
Untuk melihat hasil dari blockquote tersebut anda dapat langsung mencoba dengan membuat postingan baru atau bisa juga dengan mengedit postingan lama, kemudian pada teks yang ingin di jadikan kedalam blockquote tinggal di block saja teks tersebut kemudian klik tombol Quote pada bagian toolbar kolom posting selanjutnya tekan tombol Preview maka akan terlihat hasil dari Blockquote Blinking Bulb, untuk cara lebih jelasnya seperti pada gambar berikut ini:
Contoh membuat postingan Blockquote
