Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Wednesday, December 17, 2014

Cara Agar Wigdet Fixed Scroll


Pada kesempatan kali ini saya akan membagikan Tutorial Blog. Yang akan kita bahas adalah tentang Cara Membuat Wigdet Agar Tetap Disamping Walaupun Discroll Kebawah. Mungkin kebanyakan orang pengguna bloger kesulitan menemukan widget apabila dalam websitenya di scroll kebawah. Ya pasti dengan tombol ke atas (TopButton) tetapi tombol tersebut memiliki kekurangan yaitu tidak menemukan secara langsung dengan wigdet yang akan dicari.
Oke langsung saja ini caranya


  1. Login ke Blogger mu
  2. Cari Template lalu Edit HTML
  3. Copykan Kode dibawah ini
  4. dan Letakan diatas Tag </body> (agar lebih mudah gunakan CTRL+F)


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<SCRIPT> 
$(document).ready(function() {
var div = $('#Your Wigdet ID');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>

   5.  Ganti kode Your Wigdet ID denga wigdet tah diinginkan (Misalnya: HTML1, HTML3                       PageList1, Header1, HTML2 )
   6.  Setelah itu save templatenya
   7.  Selamat mencoba!

Monday, December 15, 2014

Cara Menambahkan Komentar Facebook Pada Blog


Pada kesempatan kali ini saya akan membagikan Tutorial Blog tentang Cara Menambahkan Komentar Facebook Pada Blog. Tutorial ini sangat berguna bagi pengguna blogger. Karena tidak semua pengunjung blog selalu mempunyai akun blogger. Oleh karena itu saya akan membagikan tutorial ini. Siapa yang tidak tahu Facebook ya. Facebook seakan menjadi kebutuhan pokok setiap orang dan yang pasti setiap orang mempunyai facebook bahkan sampai ada yang mempunyai akun facebook lebih dari 1. Tak usah berpanjang lebar Ikuti perintahnya


  1. Login ke Blogger Anda
  2. Pilih menu template lau edit html
  3. Cari kode ]]></b:skin> (Agar lebih mudah Gunakan Shortkey CTRL+F)
  4. Lalu Copy kode dibawah ini dan Letakkan tepat diatas kode ]]></b:skin>



.comments-page { background-color: #fffff;} 
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

      5. Copy kode dibawah ini
      6. Letakkan tepat diatas kode </head>


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook Anda' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

      7. Ganti ID Facebook Anda dengan id facebook anda
      8. Kemudian setelah langkah diatas sudah selesai 
      9. lanjut Copy lagi kode dibawah ini 
    10. Letakkan tepat dibawah  <div class='comments' id='comments'>



<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments With Facebook 
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments With Blogger
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='650'/>
    <div style='color:##000000; background-color:##ffffff;border: solid 1px #ffff; font-size:10px; padding:3px; width:700px;'>Facebook Comments by 
      <b><a href='http://fadhlifirmansyah.blogspot.com/2014/12/cara-menambahkan-komentar-facebook-pada.html' style='text-decoration:underline; color:#fffff;' target='_blank' title='Ayo Buat Komentar Facebook Anda'>Fadhli Firmansyah</a></b>
</div>
    </b:if>
    </div>

    <div class='comments comments-page' id='blogger-comments-page'>


      11. Setelah selesai lalu Simpan Template
      12. Selamat blog anda sekarang terdapat komentar facebooknya

Monday, December 8, 2014

Cara Menambahkan Random Post Pada Blog



Pada kesempatan kali ini Saya akan membagikan Tutorial Blog tentang Cara Menambahkan Random Post Pada Blog. Cara ini dapat meningkatkan pageviews blog anda dan dapat meningkatkan rangk blog anda.













Oke  langsung saja cara membuat random post berjalan dengan thumbnail. Hasilnya bisa lihat di sidebar kanan blog saya ini.


1. Masuk ke blogger lalu ke tata letak

2. klik tambah gadget, lalu pilih yang html/java script
3. setelah itu tinggal masukkan saja code script dibawah ini



<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:hidden 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#1E90FF;}
#rp_plus_img .news-title{display:block;font-size:11px;font-weight:bold !important;color:#1E90FF;text-align:left;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:left;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:hidden 1px #1E90FF;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 4000;
var pause = 4000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 100;
var numchars = 0;
</script> <script src="http://fadhlifirmansyah.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

4. lihat tulisan warna merah var speed dan var pause digunakan untuk mengatur delay.  semakin sedikit nominalnya semakin cepat delaynya (maksudnya delay waktu berjalannya)
6. ganti tulisan http://fadhlifirmansyah.blogspot.com/  dengan url blog kamu.
5. langkah terakhir tinggal simpan dan lihat hasilnya

Sumber : zamehadaku

Saturday, December 28, 2013

Cara Membuat Facebook Like Box Di Blog

Halaman di Media Jejaring Sosial sangatlah penting untuk mendukung promosi blog anda, contoh media sosial yang sangat populer saat ini yaitu Facebook, Twitter dan lain lain. Oleh karena itu saya akan membahas tentang Cara Membuat Facebook Like Box Di Blog. Tutorial Blog ini memudahkan para pengunjung blog anda dapat me-LIKE langsung dari halaman tersebut, Jadi tidak usah mencari di facebook. tidah usah panjang lebar Ikuti langkah berikut

Berikut langkah langkahnya:
  1. Anda harus login ke akun facebook Anda.
  2. Agar lebih mudah silahkan klik Social Plugins ini untuk lansung menuju ke facebook Developers
  3. Kemudian Anda pilih Like Box dibagian samping kiri halaman,
  4. Maka akan muncul haaman seperti dibawah ini 


     6.      Jika sudah mengisi hal yang perlu dilakukan untuk like box anda. Klik “Get Code” untuk                     mengambil code like box tersebut. Setelah itu akan muncul window baru seperti dibawah ini 



       7. Klik IFRAME, nah maka akan keluar kodenya,
       8. Setelah itu copy kode IFRAME ke html/javascript blog anda
Selesai Selanat Menikmati!

Saturday, September 21, 2013

Daftar Kode Warna Pada HTML

Nama warna didukung oleh semua browser, 147 nama warna didefinisikan dalam HTML dan CSS (17 warna standar ditambah 130 warna lebih).

Berikut ini daftar nama dan kode warna pada HTML bersama dengan nilai-nilai heksadesimal mereka.
Silahkan digunakan.


Color Name HEX Color Shades Mix
AliceBlue  #F0F8FF
Shades Mix
AntiqueWhite  #FAEBD7
Shades Mix
Aqua  #00FFFF
Shades Mix
Aquamarine  #7FFFD4
Shades Mix
Azure  #F0FFFF
Shades Mix
Beige  #F5F5DC
Shades Mix
Bisque  #FFE4C4
Shades Mix
Black  #000000
Shades Mix
BlanchedAlmond  #FFEBCD
Shades Mix
Blue  #0000FF
Shades Mix
BlueViolet  #8A2BE2
Shades Mix
Brown  #A52A2A
Shades Mix
BurlyWood  #DEB887
Shades Mix
CadetBlue  #5F9EA0
Shades Mix
Chartreuse  #7FFF00
Shades Mix
Chocolate  #D2691E
Shades Mix
Coral  #FF7F50
Shades Mix
CornflowerBlue  #6495ED
Shades Mix
Cornsilk  #FFF8DC
Shades Mix
Crimson  #DC143C
Shades Mix
Cyan  #00FFFF
Shades Mix
DarkBlue  #00008B
Shades Mix
DarkCyan  #008B8B
Shades Mix
DarkGoldenRod  #B8860B
Shades Mix
DarkGray  #A9A9A9
Shades Mix
DarkGrey  #A9A9A9
Shades Mix
DarkGreen  #006400
Shades Mix
DarkKhaki  #BDB76B
Shades Mix
DarkMagenta  #8B008B
Shades Mix
DarkOliveGreen  #556B2F
Shades Mix
Darkorange  #FF8C00
Shades Mix
DarkOrchid  #9932CC
Shades Mix
DarkRed  #8B0000
Shades Mix
DarkSalmon  #E9967A
Shades Mix
DarkSeaGreen  #8FBC8F
Shades Mix
DarkSlateBlue  #483D8B
Shades Mix
DarkSlateGray  #2F4F4F
Shades Mix
DarkSlateGrey  #2F4F4F
Shades Mix
DarkTurquoise  #00CED1
Shades Mix
DarkViolet  #9400D3
Shades Mix
DeepPink  #FF1493
Shades Mix
DeepSkyBlue  #00BFFF
Shades Mix
DimGray  #696969
Shades Mix
DimGrey  #696969
Shades Mix
DodgerBlue  #1E90FF
Shades Mix
FireBrick  #B22222
Shades Mix
FloralWhite  #FFFAF0
Shades Mix
ForestGreen  #228B22
Shades Mix
Fuchsia  #FF00FF
Shades Mix
Gainsboro  #DCDCDC
Shades Mix
GhostWhite  #F8F8FF
Shades Mix
Gold  #FFD700
Shades Mix
GoldenRod  #DAA520
Shades Mix
Gray  #808080
Shades Mix
Grey  #808080
Shades Mix
Green  #008000
Shades Mix
GreenYellow  #ADFF2F
Shades Mix
HoneyDew  #F0FFF0
Shades Mix
HotPink  #FF69B4
Shades Mix
IndianRed   #CD5C5C
Shades Mix
Indigo   #4B0082
Shades Mix
Ivory  #FFFFF0
Shades Mix
Khaki  #F0E68C
Shades Mix
Lavender  #E6E6FA
Shades Mix
LavenderBlush  #FFF0F5
Shades Mix
LawnGreen  #7CFC00
Shades Mix
LemonChiffon  #FFFACD
Shades Mix
LightBlue  #ADD8E6
Shades Mix
LightCoral  #F08080
Shades Mix
LightCyan  #E0FFFF
Shades Mix
LightGoldenRodYellow  #FAFAD2
Shades Mix
LightGray  #D3D3D3
Shades Mix
LightGrey  #D3D3D3
Shades Mix
LightGreen  #90EE90
Shades Mix
LightPink  #FFB6C1
Shades Mix
LightSalmon  #FFA07A
Shades Mix
LightSeaGreen  #20B2AA
Shades Mix
LightSkyBlue  #87CEFA
Shades Mix
LightSlateGray  #778899
Shades Mix
LightSlateGrey  #778899
Shades Mix
LightSteelBlue  #B0C4DE
Shades Mix
LightYellow  #FFFFE0
Shades Mix
Lime  #00FF00
Shades Mix
LimeGreen  #32CD32
Shades Mix
Linen  #FAF0E6
Shades Mix
Magenta  #FF00FF
Shades Mix
Maroon  #800000
Shades Mix
MediumAquaMarine  #66CDAA
Shades Mix
MediumBlue  #0000CD
Shades Mix
MediumOrchid  #BA55D3
Shades Mix
MediumPurple  #9370DB
Shades Mix
MediumSeaGreen  #3CB371
Shades Mix
MediumSlateBlue  #7B68EE
Shades Mix
MediumSpringGreen  #00FA9A
Shades Mix
MediumTurquoise  #48D1CC
Shades Mix
MediumVioletRed  #C71585
Shades Mix
MidnightBlue  #191970
Shades Mix
MintCream  #F5FFFA
Shades Mix
MistyRose  #FFE4E1
Shades Mix
Moccasin  #FFE4B5
Shades Mix
NavajoWhite  #FFDEAD
Shades Mix
Navy  #000080
Shades Mix
OldLace  #FDF5E6
Shades Mix
Olive  #808000
Shades Mix
OliveDrab  #6B8E23
Shades Mix
Orange  #FFA500
Shades Mix
OrangeRed  #FF4500
Shades Mix
Orchid  #DA70D6
Shades Mix
PaleGoldenRod  #EEE8AA
Shades Mix
PaleGreen  #98FB98
Shades Mix
PaleTurquoise  #AFEEEE
Shades Mix
PaleVioletRed  #DB7093
Shades Mix
PapayaWhip  #FFEFD5
Shades Mix
PeachPuff  #FFDAB9
Shades Mix
Peru  #CD853F
Shades Mix
Pink  #FFC0CB
Shades Mix
Plum  #DDA0DD
Shades Mix
PowderBlue  #B0E0E6
Shades Mix
Purple  #800080
Shades Mix
Red  #FF0000
Shades Mix
RosyBrown  #BC8F8F
Shades Mix
RoyalBlue  #4169E1
Shades Mix
SaddleBrown  #8B4513
Shades Mix
Salmon  #FA8072
Shades Mix
SandyBrown  #F4A460
Shades Mix
SeaGreen  #2E8B57
Shades Mix
SeaShell  #FFF5EE
Shades Mix
Sienna  #A0522D
Shades Mix
Silver  #C0C0C0
Shades Mix
SkyBlue  #87CEEB
Shades Mix
SlateBlue  #6A5ACD
Shades Mix
SlateGray  #708090
Shades Mix
SlateGrey  #708090
Shades Mix
Snow  #FFFAFA
Shades Mix
SpringGreen  #00FF7F
Shades Mix
SteelBlue  #4682B4
Shades Mix
Tan  #D2B48C
Shades Mix
Teal  #008080
Shades Mix
Thistle  #D8BFD8
Shades Mix
Tomato  #FF6347
Shades Mix
Turquoise  #40E0D0
Shades Mix
Violet  #EE82EE
Shades Mix
Wheat  #F5DEB3
Shades Mix
White  #FFFFFF
Shades Mix
WhiteSmoke  #F5F5F5
Shades Mix
Yellow  #FFFF00
Shades Mix
YellowGreen  #9ACD32
Shades Mix

Sunday, September 15, 2013

Cara Membuat Burung Twitter Terbang Di Blog

Pada kesempatan kali ini saya akan membagikan Tutorial Blog Tentang Cara Membuat Burung Twitter Terbang Di Blog mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini
  1. Silahkan login di Blogger
  2. Klik Layout > Add Gadget > Html/Javascript
  3. Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqacS6TIPWcExTTFw9ib6RVmNN97EhG8_s5fxd82ge1C4AKJTkQco2E5aT1lgHoKjQht9qtiEX7RUyFjoRwjnQ5oa7PrF9SDKlmKqOUM5_OVptwaSmWByRv8Ts4TRvLbpjlzG2F_eIbDU/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://zona-cyber-man.blogspot.com/";
tripleflapInit();
</script> 

4. Ganti kode yang berwarna oren dengan nama pengguna (username) akun Twitter sobat
5. Simpan dan lihat hasilnya

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang bercetak miring diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_B_pE-PNF_JoTk1a9O80rqovaff6jchnv0Lb0Hg5mQcrVhqLgWWA_KT320X-RmGyh9KaXQj2KYpQ_XBGoEjEhb4c8BMbrUczDsOb_G_HELKQL7Y09qzjyZCEqIczLC6wE8-l1Yl-24_M/s1600/yellow+bird.png
Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gZA_Eef2dko5X6IiThJ7BInQPVzdg4nIVJTFVXzhM_vsvu5-eL7MqCGiTt7jZR6-2Jz1wTRVtwFLIS_nUZHlEw3Ux34Zi72_20eQ2_NU8kPjS28iT16pp_jqBFgja5G1O3C3y2Hrcxo/s1600/black+bird.png
Warna Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5Cl8QrTjOTAX6h8fPpswCACt0jloQJUb0Bizo8-S7sI4UhBNKYW10w5-Z589OQPoMedLWM9j8ydV74z_4kRz7ZTU4OM-RIxgKcOf-yKgzd6jdbJQcrrJPvAbjSC3yW7wvOornmrJGI4/s1600/Blue+bird.png
Warna Coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-uhJZ3OXLDAGm0Iz5a79I39LDcV6qhYyD9i4JOX6ygTou2jJC360GoMQfPoUtPytfmcZLjS3GUfNbjRQt-OFj8MVDdhMh_wN9LNKI6bIXCtuZZj_qPRwWqaezKPVJupSa5e3FBa_oMBw/s1600/brown+bird.png
Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ii6HUvPIdh2gWajWmYryLmZGuI7gCzDG3eE0tUyIeXI15yKKzSJrOR8IpJxHYt3wql-BeWwiVV3q8pXTCfWBA5OTsG5sZA7QwWi3_p3Sj-J9x5vJKXuct4UEI5EcOxeqno99XpVneQA/s1600/Green+bird.png
Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Pn_zHuxIK3qbc71XkEzBcESi-Soyt9BhHKZsSL9MHElX3EHaS13enYOAkezWUKLUpi-Dsz_wdxn6egeuZIFmmaqddIOYemY64liIDx0p1UXqcfqoFgWI1TImFan8IjZQdfZd6AXYq88/s1600/purple+bird.png
Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheMISixfcI74izGw8CRiVpcdHRcnXZTMnGo19Ts1d20Qq0rgNdKygtweJo4Ykl-D1OnXP1iXhCUEkoq70ODnmtlgKNEcrhQoNwC0vKmv-XFlt26I97Vvmh26GUQY6fjQ-b15jxLrUsSIk/s1600/white+bird.png