Blog Deniededen

Flamboyan68 - Postingan kali ini saya akan berbagi tentang bagaimana cara membuat widget auto ping dan ping fast.  Widget ini merupakan media / alat untuk memberitahukan kepada Search Engine agar postingan artikel yang baru kita buat cepat di ketahui oleh google dan berada di halaman pertama google.

Cara memasang dan  menggunakannya pun mudah sekali, yaitu ketika kita telah selesai mempublikasikan artikel postingan lalu kita pergi ke halaman artikel yang telah dibuat tadi, lalu klik widget ping fast atau widget auto ping yang telah di pasang di blog kita.

Manfaat memasang auto ping sangat besar bagi blog kita, selain ping secara otomatis widget auto ping ini dapat meningkatkan pengunjung blog kita dan lebih penting lagi mengoptimalkan, meningkatkan ranking SEO blog. Berikut ini ada cara dan langkah-langkah yang bisa sobat ikuti, antara lain :

Flamboyan68 - Apa kabarnya, sobat?kabar baik tentunya. Saya masih menyelesaikan  acara kemarin yaitu bersih-bersih dan mengeluarkan semua artikel yang lama mengendap di draft jadwal posting hehe..biar lebih bersih gitu. Sebenarnya widget ini nggak penting amat sih cuma nggak ada salahnya saya posting dan backup apabila nanti membutuh widget ini jadi nggak usah wara-wiri essensi memasang widget ini sih biar enggak ketinggalan informasi terkini sambil blogging bisa dapat berita terbaru lewat rss feed-nya portal - portal berita terbesar di indonesia, Kompas, Liputan 6, Metro TV News, Detik, Vivanews, Republika Online, Tribunnews, JPNN, Okezone dan lain-lain. Selain itu tentunya juga membuat blog sobat semakin dinamis dengan update berita terkini. Gambar atau screenshot widget ini sobat bisa tengok seperti di bawah ini :

                                      

Widget ini diambil dari rss feed dari seluruh portal berita yang terindeks di Google, walaupun sederhana tapi manfaatnya sangat besar buat saya, sobat dan pengunjung blog sobat tentunya. Pemasangnya pun sangat mudah, cukup sobat tambahkan atau add Gadget, kemudian pilih HTML/JavaScript, setelah itu masukkan kode dibawah ini dan lalu simpan / save dan selesai nggak repot kan, sob?

Flamboyan68 - Robert Tyell mengemukakan definisi tentang arti berita. Berita adalah informasi yang baru, menarik perhatian, mempengaruhi orang banyak, dan mampu membangkitkan selera masyarakat untuk mengikutinya. Pengertian diatas mengandung makna bahwa informasi-indormasi yang terangkum dalam sebuah berita dapat mempengaruhi dan menjadi bagian dari aktifitas kehidupan manusia sehari-hari. Rangkuman informasi yang menjadi sebuah berita itu meliputi; tentang politik, ekonomi, kesehatan, olahraga, entertainment dan lain-lain. Semakin gencarnya berita  membuat para media salah satunya blogger untuk berlomba-lomba menampilkan berita-berita update dari berita online dengan memasang widget di blog masing-masing, seperti halnya saya yang kali ini akan memposting tentang "Memasang Widget Headline News Online Di Blog"

Flamboyan68 - Postingan kali ini yaitu kembali lagi ke awal pada saat belajar ng_blog, dimana pada masa-masa itu sebagai blogger baru selalu dan selalu mencari kode script untuk di tempel di blogku tentunya. Dari hilir mudiknya saya mencari script ada yang terlupakan dan sangat saya butuhkan pada saat dibuatnya postingan ini, yaitu cara membuat 2 kolom footer di blog.

Dan postingan ini sudah lama sekali bersemedi di ruangan draft, hehehe..essensi dari artikel ini dirasa cukup penting bagi yang mengoleksi beragam iklan di blognya termasuk saya, untuk mengatur letak/posisi iklan/widgets dan akan di bagi menjadi 2 bagian yang setiap bagian bisa sobat isi dengan script iklan/widget.

• Login ke akun blogger sobat
• Lalu pilih template  > edit html
• Setelah itu cari kode ]]></b:skin> Untuk mempermudah sobat bisa gunakan F3 atau Ctrl+F
• Copy lalu Pastekan kode berikut tepat di atas kode ]]></b:skin>

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

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

Postingan Artikel : 27 Februari 2012

Flamboyan68 - Artikel ini sudah terlalu lama saya simpan di skejul postingan, biar enggak menumpuk saya share biar bersih. Postingannya masih seputar tutorial blog yang pastinya sudah banyak para blogger  memposting artikel ini, biar terlambat asal bermanfaat bagi saya dan sobat semua.  Membuat satu Kolom Di Bawah Header masih sama ketika sobat membuat satu kolom widget diatas header , bedanya hanya letak penempatan saja. Kolom si bawah header ini bisa memberikan manfaat bagi sobat untuk memasang beberapa konten yang ingin ditampilkan dibawah header.

  #oneunderheader{margin:10px 0;padding:1%;width:100%;}

<div id='header-wrapper'> 

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> 

</b:section> 

</div> 

<div id='oneunderheader'>

<b:section class='header' id='oneunderheader' preferred='yes'/> 

</div> 

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> 

</b:section> 

</div> 

<div id='oneunderheader'>

<b:section class='header' id='oneunderheader' preferred='yes'/> 

</div>

Pada posisi widget/kolom baru ini sangat cocok untuk dipasang sebagai kolom iklan, kolom sliding dan widget lainnya. Silahkan sobat ikuti tutorial di bawah ini :

( - ) Langkah atau caranya sama seperti yang diatas dan sebelumnya sobat  backup template terlebih dahulu.

( - ) Cari kode ]]></b:skin>

( - ) Lalu copy kode di bawah ini :

<style>.atasposting{ background: #fff;
    border: 0px solid #0B610B;
    margin: 0 0 0.5em;
    padding: 2PX;}
.atasposting.widget{}</style>

( - ) Kemudian cari kembali kode  <div id='main-wrapper'> atau sobat cari kode <div id='content-wrapper'> (setiap mempunyai kode yang berbeda pilih salah satunya)

( - ) Kemudian copy dan paste kode di bawah ini tepat di bawah salah satu kode diatas :

 

<b:section class='atasposting' id='ataspostin' preferred='yes'/>

Flamboyan68 - Postingan kali ini masih dan masih seputar tutorial blog, sob! dimaksudkan untuk backup buat saya apabila sewaktu-waktu butuh dan nggk usah kesana kemari untuk cari scriptnya dan tentu berbagi untuk para blogger newbie, so..kita belajar bareng dan berbagi ilmu. Postingan Cara Membuat Tab Menu Horizontal Di Atas Header Blog, biar enggak penasaran sobat bisa melihat screenshot di bawah ini,  sekarang kita langsung pada pokok pembahasannya yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Apabila sobat semua berminat ikuti langkah atau cara dibawah ini secara berurutan, biar lebih mudah pengerjaannya :

menu horizontal diatas header

1.Masuk ke akun blogger sobat
2.Sebelum masuk ke Editor Edit Html sobat lakukan dulu backup template untuk menghindari kegagalan pasang kode script dengan cara Unduh Template Lengkap. 
3.Kemudian masuk ke > Template > Lalu klik > Edit Html  >
4.Lalu carilah kode ]]></b:skin> dan untuk mempermudah pencarian gunakan Ctrl + F, setelah ketemu dengan kode tadi kemudian sisipkan kode di bawah ini tepat di atas kode ]]></b:skin>

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya sobat telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

5.Terus sisipkan kode CSS di bawah ini tepat di atas ]]></b:skin> 

.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog sobat, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

6.Selanjutnya cari kode <body dan lalu sisipkan kode berikut ini tepat di bawah kode <body

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://flamboyan68.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYO9Pamb4dj6Ajud_wVAIRHYaClqWUijoK7WFDupi_vuwVjwygxDDgxqI2RZoNlVSh7-5pbBI1vUjWH60SA6nh2fZEqFx9ozXDLH-HLxh18uKoxHV-77lwQeicQ81P6r4AwQ_KhJGy4o/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://flamboyan68.blogspot.com/ dengan URL blog sobat dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

7.Simpan Template Sobat.

Dan setelah template disimpan maka navbar standar Blogger tidak akan tampak lagi di halaman blog dan muncul dengan navbar baru seperti gambar screenshot di atas. Perlu diketahui oleh sobat bahwa contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>

Sekian dulu postingan kali semoga bermanfaat dan sampai jumpa.

Posted by Denie Deden_Nz

 

Apa kabarnya, sob? sehat? Basa basi dulu ya, sob hehehe. Postingan malam ini saya akan share mengenai cara pemasangan widget share button melayang di blog dan yang tentunya untuk para master pasti mesem-mesem mengenai widget ini hehehe..tapi untuk para newbie kayak saya memasang widget ini menarik sekali biar lebih bagus siih tampilan blognya. 

Salah satu fungsi dari widget ini yaitu sebagai media share untuk mempermudah pengunjung blog untuk bisa share artikel yang di sukai ke situs sosialnya.

Selain fungsi diatas tadi, widget share button ini juga merupakan termasuk salah satu unsur pendukung SEO dalam peningkatan traffic serta Backlink. Begitu kata para master blogger, sob.

Oke kita langsung sedoot aja ya, sob. Biar nggak lama untuk masangnya di blog sobat. Ikuti langkah-langkah di bawah ini:

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="bagikan ke teman anda">

<div class='sbutton' id='gb'>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='rt'>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='sbutton' id='gplusone'>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class='sbutton' id='su'>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'>

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>

<br/><div style="clear: both;font-size: 9px;text-align:center;">

<a href="http://flamboyan68.blogspot.com/2012/12/cara-memasang-widget-share.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">Widget by flamboyan68<font></font></font></a></div>

</div>

<!--Widget Share Button Melayang End-->