Cara Membuat Headline News | Cara pasang headline news di blog inilah yang akan kita bahas. setelah sobat mengatahui fungsi headline news di blog sekarang saya coba share cara pasangnya : 

1.  Masuk ke dashbor blog sobat,
2. Kemudian pilih Rancangan kemudian Edit HTML
   untuk tampilan blogger lama.
3. Untuk tampilan blogger baru silahkan pilih Template kemudian Edit HTML 
4. Setelah terbuka silahkan cari kode ]]></b:skin> dengan menggunakan Ctrl + F. 
5.  Pasang
   kode berikut tepat di atas kode ]]></b:skin>

 .headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png)
repeat-x;width:960px;height:30px;margin:0
auto;padding:0 auto}

.headline{width:960px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0
auto;padding:0 auto;text-shadow: 1px 1px 1px #000}

.headline a:hover{color:#eace12;text-decoration:none}

·  
Perhatikan link ini adalah background headline
news yang akan kita gunakan, anda bisa mengubahnya menurut selera anda : https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png

·  
Kemudian angka berikut 960px Menunjukkan
panjang headline news yang akan dipasang, anda bisa mengubahnya sesuai ukuran
blog sobat.

6.      Selanjutnya anda cari kode </head> dan anda pasang kode berikut di atas kode </head>

<script
src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png'
type='text/javascript'/>

<script src='http://kompiajaib.googlecode.com/files/newsticker2.js'
type='text/javascript'/>

<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/

text-decoration: none;}

.labelfield{ /*CSS for label field in general*/

color:#666;font-size: 100%;}

.datefield{ /*CSS for date field in general*/

color:#fff;font:normal 12px Arial;}

#example1{ /*Demo 1 main container*/

width: 900px;

height: 12px;

border: 0px solid #aaa;

padding: 0px;

font:bold 12px Arial;

text-transform:none;

text-align:left;

background-color:transparent;}

code{ /*CSS for insructions*/

color: #fff;}

#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}

#example1 a:hover {color:#fff;text-decoration:none;}

</style>

7.
Kemudian
cari kode <b:includable id='main'>
Pasang kode berikut dibawah kode <b:includable
id='main'>

<div class='headline-wrapper'>

<div class='headline'>

<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px
Arial;color:#aeaeae;text-transform:none;'>

Latest Posts :

</div>

<div style='float:left;width:800px;padding:5px 0; position:relative;
overflow:hidden;'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;,
&quot;example1class&quot;, 3000, &quot;_new&quot;)

cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://informasi4rt.blogspot.com/feeds/posts/default&quot;)
//Specify &quot;label&quot; plus URL to RSS feed

cssfeed.displayoptions(&quot;date&quot;) //show the specified
additional fields

cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV
tag

cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by
date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div><div style='clear:both;'/>

</div>

·  
Lihat tulisan Latest
Posts, Ganti sesuai keinginan sobat.

·  
Kemudian infomasi4rt.blogspot.com
ganti dengan LINK blog sobat.

8.
Terakhir
simpan perubahan yang sobat setting

9.
Kemudian
silahkan buka blog anda dan lihat apakah posisi headline news sudah sesuai dengan keinginan sobat. Jika tidak sesuai silahkan tinggalkan komentar dibawah
ini.

Demikian tadi tutorial Cara Membuat Headline News di blog, semoga tutorial ini dapat bermanfaat.

Tutorial Cara Percepat Loading Blog Anda .Tutorial Cara Percepat Loading Blog Anda - Siapa yang tidak ingin halaman blog-nya tampil lebih cepat, pada kenyataannya selain kualitas konten, faktor kecepatan loading page lah yang sangat besar pengaruhnya buat kenyamanan pengunjung. Sudah menjadi sifat dasar manusia dimana menunggu adalah pekerjaan yang sangat membosankan, ini yang harus kita cermati bersama, jangan sampai pengunjung kabur dan pindah ke situs lain hanya karena blog kita sangat lambat ketika dibuka..walaupun itu hanya telat beberapa detik saja. 

Faktor kecepatan koneksi juga bisa dikatakan sebagai salah satu biang kerok, meskipun kita berpikir halaman blog kita tampil secepat kilat ketika dibuka pada komputer kita sendiri, tapi tidak begitu khan dengan koneksi pengunjung Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat, tentunya cepat dalam batas wajar :)

1. Aktifkan Kompresi dengan GZIP Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. 

Untuk teknik dan tutorial Gzip silahkan disearch aja ya..sudah banyak sekali yang membahasnya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin WP Super Cache(pengguna Wordpress). 

2. Buang Spasi kosong pada kode HTML 

Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya termasuk juga dalam Inline untuk kode Javascript dan CSS. 

Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editor seperti Notepat++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atau Delete Surplus Blank Lines. 

3. Lakukan Kompresi CSS (Stylesheet) 

Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js. 

4. Letakan CSS (Stylesheet) di Atas  

Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header. 

5. Buang CSS (Stylesheet) yang tidak perlu 

Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat! 

6. Periksa Validasi CSS (Stylesheet) 

Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations 

7. Kombinasi CSS (Stylesheet) dalam file External 

Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja. (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal) 

8. Lakukan Kompresi Javascript  

Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor, Closure Compiler dan JSMin 

9. Buang Javascript yang tidak Perlu  

Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja! 

10. Kombinasi Javascript dalam file 

External Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja. (untuk pengguna blogger jika memungkinkan sebaiknya panggil melalui file internal saja, silahkan baca kembali solusi hosting javasript internal) 

11. Lakukan Optimasi Gambar 

Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it 

12. Jangan Paksa Skala Gambar dalam HTML 

Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSS atau dalam tag seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah 200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya. 

13. Hindari Gambar SRC kosong 

Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja. 

14. Periksa Kembali Broken link  

Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dari W3C Checklink 

15. Buang Widget atau plugin yang tidak Perlu 

Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender. Tanyakan pada diri kita sendiri apa gunanya memasang jam di blog, jika hanya sebagai penunjuk waktu..trus apa gunanya jam pada taksbar windows

Apakah blog sobat sudah memiliki jam? mungkin sobat membutuhkan widget jam pada blog sobat, entah itu untuk mempercantik Blog, atau untuk pengingat jam, atau alasan lain...

Nah pada kesempatan ini saya ingin berbagi Cara Membuat Widget Jam Cantik Pada Blog ,

  Baiklah kita Langsung Menuju Tutorial Cara Membuat Widget Jam Cantik Pada Blog

Pertama Buka ClockLink
Pilih category jenis widget pada sebelah kiri, lihat seperti gambar,,
Sebagai contoh saya pilih widget Digital.

Maka Akan Ada banyak pilihan Jenis Jam. Lihat Gambar di bawah.

Pilih salah satu widget yang sesuai selera Sobat, jika sudah ketemu yang pas klik pada View HTML Tag

 Select by City dan sesuaikan zona waktu ke indonesia

 Pilih besar widget..

 Kemudian Copy kode HTML

Sekarang Pergi ke Dashboar Blogger > Tata Letak > Tambah Gadget.

Pilih HTML/JavaScript

Paste Kodenya Dan simpan...

Sekarang Lihatlah Hasilnya Sob...
Demikian Posting saya kali ini Cara Membuat Widget Jam Cantik Pada Blog

Selamat mencoba.....

Langkah Pertama
Seperti biasa login kedasbor blogger sobat, kemudiann pilih edit html dan jangan lupa beri tanda centang expand widgetnya,

Nb. Antisipasi sebelum melakukan perubahan kode html sebaiknya backup terlebih dahulu.

Jika sudah di edit html cari kode ini : </body> gunakan ctrl f untuk cari cepat, jika sudah ketemu kode tersebut kemudian copy kode dibawah ini dan tempatkan diatas kode </body> tadi.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://eaction.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

• Langkah Kedua

Masih diposisi edit html blogspot sobat cari kode ]]></b:skin> dan tempatkan kode css dibawah ini diatas kode ]]></b:skin> tadi.

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

• Langkah Ketiga

Simpan template sobat dan lihat hasil jadinya semoga berhasil membuat nomor halamannya.

Sembunyikan Widget Related Post Dari Linkwithin Di Homepage Blog. Dalam menata widget-widget yang telah dipasang pada blog, kita tidak bisa mengabaikan hubungannya dengan tampilan dan loading blog. Sehubungan dengan hal ini, ada beberapa blog yang saya kunjungi telah memasang widget related post atau artikel terkait dari layanan linkwithin pada blognya. Hal yang saya garis bawahi disini adalah widget tersebut muncul juga pada homepage blognya sehingga mempengaruhi waktu loading blognya serta mungkin akan membuat blog kelihatan tak begitu rapi dari segi tampilannya.

Postingan kali ini akan sedikit menjelaskan bagaimana menyembunyikan atau menampilkan widget artikel terkait dari layanan linkwithin di halaman postingan saja. Dari beberapa penjelasan di blog lain yang saya baca dan saya praktekkan pada blog percobaan saya selalu saja ada kendala atau tidak berhasil makanya saya coba cara yang akan saya jelaskan di bawah ini kepada sobat blogger dan mudah-mudahan bisa dipraktekkan juga pada blognya.



Jika widget artikel terkait dari linkwithin sudah terpasang pada blog sobat atau sobat sudah memasang widget ini pada blognya dan belum menemukan cara untuk menampilkan widget artikel terkait dari linkwithin pada halaman postingannya saja, silahkan coba praktekkan cara-cara berikut ini :

Misalkan kode widget related post dari linkwithin seperti di bawah ini :

<script>var linkwithin_site_id = 1061949;</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/">
<img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" />
</a>

Kode seperti di atas sobat bisa copy di halaman tata letak blog sobat dengan nama widget LinkWithin. Silahkan login ke akun blognya dan buka halaman tata letak blog Anda. Klik edit pada widget tersebut dan setelah terbuka widgetnya, copy kode related post dari linkwithin dan amankan dulu di notepad. Kemudian hapus widget tersebut dan simpan perubahan yang telah dilakukan pada halaman tata letak blog.

Setelah diamankan kode related post tadi di notepad, langkah selanutnya pilih menu template dan klik edit HTML kemudian klik lanjutkan. Pada halaman edit HTML, silahkan centang pilihan Expand Template Widget kemudian lanjutkan dengan mencari kode <data:post.body/>

Perlu diingat bahwa jika sobat sudah memasang readmore otomatis pada blognya, biasanya kode di atas akan terdapat 2 sampai 3 kode. Jika kodenya sudah dilihat, silahkan letakkan kode related post dari linkwithin tadi yang sobat sudah amankan di notepad tepat setelah kode <data:post.body/>. Untuk melihat hasil sementara dari penempatan kode related post-nya apakah sudah tak muncul lagi di halaman pertama blog, silahkan dipratinjau dulu hasilnya. Jika sudah berhasil, langsung disimpan saja templatenya.

Tips Tambahan
Jika sobat ingin menghilangkan link linkWithin yang berada pada pojok kanan bawah widget related post tersebut, silahkan letakkan kode di bawah ini :

a#linkwithin_logolink_0 b {display:none; visibility:hidden; height:0; overflow:hidden;}

tepat di atas kode ]]></b:skin>.

Kemudian untuk mengganti judul widget related post dari You might also like : dengan kalimat yang sobat inginkan, silahkan letakkan kode di bawah ini :

<script>linkwithin_text=&#39;You might also like :&#39;</script>

tepat di bawah kode ]]></b:skin> atau tepat di atas kode </head>. Dan hasilnya sobat bisa lihat seperti gambar di bawah ini.



Akhirnya selesai juga buat postingan ini dengan penuh perjuangan mencari koneksi jaringan yang mantap. semoga artikel tentang Sembunyikan Widget Related Post Dari Linkwithin Di Homepage Blog bermanfaat buat sobat dan silahkan praktekkan pada blognya.

Sumber : http://agungtalaga.blogspot.com/2012/11/Sembunyikan-Widget-Related-Post-Dari-Linkwithin-Di-Homepage-Blog.html

selamat malam sobat ,
Mungkin posting kali ini sudah banyak yang posting yaitu Cara Membuat Widget Melayang Di Pojok Blog ,
Tapi Banyak juga cara yang harus mengedit Css Template blog...Nah Yang mau saya Share adalah cara simplenya Saja.

Ini contoh widget yang melayang yaitu jam digital ,,, dan bagi yang pengen membuat jam digital cantik bisa baca Membuat Widget Jam Cantik Pada Blog.

Cara Membuatnya sangat Mudah,, Buka Dashbor Blogger > Tata Letak > Tambah Gadget

Pilih HTML/JavaScript

Pastekan Kode Berikut :

<div style="position: fixed; bottom: 0px; right: 10px;width:150px;height:130px;">Masukan kode Widget/HTML Anda disini</div>

Letakan Kode script/HTML sobat Pada teks yangBerwarna Merah

Simpan dan Lihatlah Hasilnya.

langsung saja untuk membuat daftar isi atau sitemap di blog silahkan ikuti cara di bawah ini:

1. Login blogger
2. Kemudian klik entri baru (untuk membuat postingan baru)
3. Pilih menu HTML (di sebelah menu Compose)
4. Copy paste kode di bawah dan beri judul daftar isi atau terserah anda

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">

</script>

<script src="http://albertotkj.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script>

      5. Ganti warna biru dengan alamat blog Sobat.

      6. Terakhir Publikasikan

Cara Membuat Link Bergoyang  yaitu  link bergoyang saat dilalui cursor mouse ya mirip goyang dombret gicu    

Berikut langkah-langkah membuat link bergoyang saat dilalui cursor mouse.
Kalau berminat ikuti langkah berikut ini,

1. Log in ke Blogger
2. Klik >> Template
3. Klik >> Edit HTML
4. Lalu anda cari kode </head> dengan menggunakan ctrl + F
5. Lalu copy kode berikut dan paste di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>       
$(document).ready(function()  {        
$(&#39;a&#39;).hover(function() {  //mouse in        
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);        
}, function() { //mouse out         
$(this).animate({ marginLeft: 0 }, 400);        
});         
});</script>

6. Klik >> Simpan Template

Cara Membuat Widget Follow Me Twitter – Follow Me OnTwitter Widget itu dia istilah kerennya untuk widget ini. Ada berbagai macam jenis widget Follow Me yang sering kita lihat tentunya, mulai dari widget Follow Me animasi sampai yang statis (diam). Dan penempatan widget ini pun bisa dimana saja, bisa di sidebar dan ada juga widget Follow Me yang melayang (floating) bebas ditempatkan di area mana saja. Kali ini saya mau share cara pasang widget follow me twitter melayang aja deh seperti yang ada di blog ini. Sekalian saya kasih 2 tipe sekaligus, yang dengan animasi sama yang statis (diam) alias non animasi biar ngga ada yang minta-minta lagi ya he he.

Widget Follow Me Twitter Melayang dengan Animasi :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/alberto_tkj" target="_blank"><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=http://twitter.com/alberto_tkj" /></object></a>

4.      Ganti username Twitter http://twitter.com/alberto_tkj dengan akun twitter anda.

5.       Save / Simpan.

Widget Follow Me Twitter Non Animasi (statis) :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/alberto_tkj" target="_blank"><img src="http://www.twitterbuttons.org/images/twitter-9a.png" width="150" height="124" border="0" /></a>

4.      Ganti username Twitter http://twitter.com/alberto_tkj dengan akun twitter anda.

5.       Save / Simpan.

Nah untuk widget follow me twitter yang kedua, sobat dapat menggonta-ganti gambar buttonnya dengan koleksi gambar button follow me yang ada disini http://www.twitterbuttons.org/index.html. Caranya tinggal ganti URL button yang saya tandai dengan warna biru dengan URL button twitter pilihan. Ada puluhan button twitter follow me yang bisa sobat pilih. Contoh gambar-gambarnya yang ada dibawah ini nih :

         

Oke sobat, sekian dulu sharing kali ini tentang cara memasang widget follow me twitter melayang. Semoga bisa memenuhi keinginan sobat blogger yang pernah menanyakan cara membuat widget follow me ini pada saya beberapa waktu yang lalu. Don’t forget to follow me OK !

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

1. Login ke blogger dengan ID anda tentunya.
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini :
   ]]></b:skin>
   
   
5. Copy paste kode berikut persis di atas kode yang tadi :
   
   .quickedit{
   display:none;
   }
   
   
6. Klik tombol Simpan template.
   
7. Selesai.
   

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Banyak Cara Membuat Widget Entri Popular Blogger Cantik.Seperti anda lihat pada gambar.Tentunya bila anda berminat untul menggunakannya tentunya harus mengikuti tahapan Cara Membuat Widget Popular Posts Yang Cool Ini.

Cara Membuat Widget  PopularPosts

  1: Cari kode ini  <b:skin><![CDATA[ Pastekan kode dibawah ini sebelumnya

/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

  2:Cari kode  ]]></b:skin> Pastekan kode dibawah ini sebelumnya :

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

  3: Cari kode ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Ganti dengan kode dibawah ini : .

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJoufzNLF3HfuoKgrUaD5qYyQl8Me3b_xXBKjBgFIjKDsT1I6Rr4hzOX3n9mjILWSvYMwVfYNQG2uNvteqYeTu9BsynyOmHkXa2VR3fAoPaKZchU_6-ukG9dPQPz349LhbMH4nrtsp9WP9/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJoufzNLF3HfuoKgrUaD5qYyQl8Me3b_xXBKjBgFIjKDsT1I6Rr4hzOX3n9mjILWSvYMwVfYNQG2uNvteqYeTu9BsynyOmHkXa2VR3fAoPaKZchU_6-ukG9dPQPz349LhbMH4nrtsp9WP9/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

  4: Atur Widget Seperti gb dibawah ini :

Anda bisa  Mengganti Warna PopularPosts Backgrounds  background color1, background color2, background color3, background color4, background color5

Selamat Mencoba Dan moga berhasil !!

Apa itu CSS | CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang bertanggung jawab atas penampilan web anda  dimata pengunjung melalui browser internet.

CSS yang buruk bisa membuat visitor Anda tidak kerasan lagi menjelajahi blog anda,apalagi untuk kembali lagi.

Memaksimalkan CSS adalah penting (khususnya) blog agar lebih nyaman untuk dibaca dilihat oleh visitor anda dan kalau bisa bikin lah CSS yang meringankan loading.

Jika anda tertarik untuk mengedit tampilan template blog sendiri,maka mengerti CSS adalah wajib.Namun ingat,untuk menjadi seorang blogger tidak wajib untuk mengerti CSS karena banyak template yang bisa didapat dari desainer blog.Tapi tak ada salahnya kan mengerti sedikit saja?.....karena menggunakan tampilan blog hasil desain sendiri itu dapat memberikan kepuasan tersendiri.

Pengenalan Dasar penulisan CSS

Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya ;

• Selector
• Properti
• Deklarasi
• Nilai/Values

Contoh penulisan code  CSS


body {background-color: white;}

body adalah sebagai Selector
background-color adalah Properti
white adalah Nilai/values

Deklarasi adalah bagian yang berada didalam "{  }" yaitu properti dan nilai


Selector adalah bagian atau elemen yang ingin kita atur stylenya.
Properti adalah komponen yang kita butuhkan
Nilai/value adalah nilai dari deklarasi yang kita inginkan

Segitu saja dasar CSS,untuk lebih lanjut,nanti kita akan mengenal apa saja code yang bisa dimasukkan kedalam golongan properti,selector ataupun Nilai untuk postingan berikutnya.

Metode yang dipakai dalam penggunaan CSS

Inline style sheet metode
Penulisan atribut css langsung kedalam code HTML yang dimaksud

Contoh:

<div align="center" style="background="white;"> Ini adalah bagian yang diatur stylenya</div>


Embeded style sheet
Penulisan CSS dengan mendefinisikan dulu didalam sebuah tag
<style type="text/css">code CSS</style> yang dipasang sebelum tag </head>
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh:

<html>
<head>
<title>Title halaman</title>
<style>
body {background:#0000FF; color:#FFFF00;}
h1 {font-size:18px; color:#FF0000}
p {font-size:12px; font-family:arial; text-indent:0.5in}
.header-wrapper{margin:0 auto;border 1px solid #cccccc;}
</style>
</head>
<body>
<div class="header-wrapper">komponen header</div>
<h1>Judul psotingan ini berukuran 18 dengan warna merah!</h1>
<p>Artikel /paragraf ada disini berukuran 12</p>
</body>
</html>


Menurut sifatnya CSS itu memiliki 2 sifat yaitu CSS external dan CSS internal adalah CSS yang ditulis secara langsung didalam halaman web yang disesain.Jika anda membuat dua halaman web yang berstyle sama ,maka dihalaman yang kedua kita juga memasukkan code css yang sama

CSS external adalah CSS yang ditulis didalam berkas style.css dan diletakkan ditempat khusus atau bahkan diluar dari situs tersebut.

Berkas CSS itu bersxtensi css,bisa di beri nama yang memudahkan untuk diingat,misalnya cssku-page1.css.

Rumor mengatakan bahwa css external itu lebih meringankan loading blog?...saya kurang tahu pasti.Tergantung pilihan anda,lebih suka cara yang mana..

Cara penulisan code pemanggilan css  adalah

<link href="http://situsku.com/style/cssku.css" rel="stylesheet" type="text/css" media="screen"></link>

Segitu saja pengenalan pokok pokok CSS untuk posting kali ini,Nanti akan kita ulas lebih lanjut lagi.

Karakter Anak Adalah Karakter Turunan |Kali ini kita akan membahas tentang bagaimana karakter terbentuk secara turun temurun dan terkadang tidak disadari. Apakah bisa? Mungkin? Bisa dan mungkin, dan biasanya ini terbentuk dari Belief atau kepercayaan atau keyakinan dari orangtua yang diturunkan kepada anak. Dan jika keyakinan yang diturunkan salah, sampai 7 turunan bisa salah jika tidak diperbaiki. Baiklah, simak terus tulisan ini dan dapatkan rahasia pemahaman baru.

Belief atau kepercayaan itu bukan kita berarti membahas persoalan agama atau keyakinan beribadah, yang dimaksud adalah suatu pemikiran yang terbentuk karena pengalaman yang berulang-ulang atau pengalaman yang berkesan. Jadi secara sederhananya bisa kita katakan sebagai perasaan “pasti” akan sesuatu hal. Contohnya mungkin anda mempunyai perasaan yang pasti tentang kemampuan berhitung yang baik, jadi anda punya belief atau kepercayaan “wah saya itu pintar kalau berhitung”. Itu yang kita maksud dengan belief atau kepercayaan.

Cara Membuat Kotak Permalink di Bawah Postingan | Permalink adalah tautan permanen dari halaman suatu postingan blog. Sebenarnya blogger sendiri sudah menyediakan permalink di bawah postingan, khususnya yang memakai template default atau bawaan. Tetapi permalink yang disajikan oleh Blogger terasa kurang menarik.

Untuk itulah kebanyakkan blogger membuat permalink di bawah postingan lebih menarik dan mudah untuk dimanfaatkan. Caranya dengan membuat kotak permalink, dalam kota tersebut sudah ada tag atau kode html yang berisi permalink dari postingan yang sedang dibuka atau dibacanya.

Manfaat membuat kotak permalink di bawah postingan adalah untuk mempermudah pembaca atau blogger lain mengetahui permalink dari postingan yang sedang dibacanya. Blogger lain bisa saja menyematkan kode HTML permalink itu di blognya, sehingga memberikan tautan (backlink) ke halaman postingan tadi.

Jika tulisan (postingan) menarik tentu kemungkinan mengcopy atau menyebarkan permalink itu semakin besar. Yang akhirnya bisa berdampak pada traffik blog kita yang lebih banyak. Berarti dalam hal ini konten masih jadi suatu hal yang penting dalam ngeblog.

Cara Membuat Kotak Permalink di Bawah Postingan Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode <data:post.body/> Lalu taruh kode berikut di bawahnya:

<br /><textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>

5. Simpan jika sudah selesai.

Jika setelah disimpan kurang sesuai dengan tampilan blog kita, bisa kita edit. Untuk <data:post.body/> jika kita menggunakan read more otomatis, akan ada dua kode, pilih kode yang kedua. Sebelum kode html yang ditambahkan di atas, kita bisa menyisipkan tulisan di atas, misalnya: "Tulisan ini menarik? Copas permalink ini blogmu donk!". 55 adalah panjangnya kotak dan 2 adalah tingginya.