Günümüzde yoğun trafik elde etmenin hayati stratejilerinden biri, Googleplus, Facebook, Twitter, Stumbleupon, LinkedIn ve daha pek çok sosyal medya ağındaki paylaşımını paylaşmaktır , ancak whatsapp’daki paylaşımları daha az önemsiyoruz . Whatsapp, facebook’tan çok daha fazla kullanıcısı olan en çok kullanılan sosyal medya ağlarından biridir. Bu, blogunuzu yeni kullanıcılar tarafından tanıtmak için toplu bir tanıtım başlatmak için iyi bir yer yapar, ancak bir whatsapp paylaşım düğmesine sahip olmadan bunu yapamayız .
Yani bugün blogcu whatsapp paylaşım butonu ile fantezi sosyal paylaşım butonu eklemeyi öğreneceğiz.
Sosyal paylaşım Widget düğmeleri sosyal medya simgeleri fontawesome alınan ve daha sonra css ile tarz çünkü fontawesome çalışmak üzere yapılandırılmıştır.
Şimdi ilk olarak Fontawesome’yı blogumuza yükleyelim;
Öncelikle işlemlere başlamadan önce herhangi bir aksi durum için Bloğumuzun yedeğini alalım.
Daha sonra Bloğumuzun Tema bölümüne tıklayalım ve HTML düzenle diyelim.
Html sayfa editörümüzde etiketini Ctrl+F yardımıyla arıyalım ve bulduğumuz etiketin altına aşağıda ki stil kodlarını ekliyelim.
HTML
Yukarıda ki kodu ekledikten sonra yine HTML editör sayfamızda Ctrl+F yardımıyla ]]> kodunu arayıp buluyoruz ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.
CSS .share-box { position: relative; padding: 10px; } .share-title { border-bottom: 2px solid #777; color: #010101; display: inline-block; padding-bottom: 7px; font-size: 15px; font-weight: 500; position: relative; top: 2px; } .share-art { float: right; padding: 0; padding-top: 0; font-size: 13px; font-weight: 400; text-transform: capitalize; } .share-art a { color: #fff; padding: 3px 8px; margin-left: 4px; border-radius: 2px; display: inline-block; margin-right: 0; background: #010101; } .share-art a span { display: none; } .share-art a:hover{color:#fff} .share-art .fac-art{background:#3b5998} .share-art .fac-art:hover{background:rgba(49,77,145,0.7)} .share-art .twi-art{background:#00acee} .share-art .twi-art:hover{background:rgba(7,190,237,0.7)} .share-art .goo-art{background:#db4a39} .share-art .goo-art:hover{background:rgba(221,75,56,0.7)} .share-art .pin-art{background:#CA2127} .share-art .pin-art:hover{background:rgba(202,33,39,0.7)} .share-art .lin-art{background:#0077B5} .share-art .lin-art:hover{background:rgba(0,119,181,0.7)} .share-art .wat-art{background:#25d266;display:none;} .share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)} @media only screen and (max-width: 768px) { .share-art .wat-art{display:inline-block;} }
Son olarak HTML editör sayfamızda yine Ctrl+F yardımıyla kodunu arayıp buluyoruz ve bulduğumuz kodun altına gelecek şekilde aşağıda ki HTML kodlarını ekliyoruz.
HTML
Bu paylaşım düğmelerini konuşmakta zorluk çekiyorsanız aşağıdaki yorumunuzu bırakın. Aşağıdaki düğmeleri kullanmayı unutmayın ve bunu sosyal medyada paylaşın.
Ziyaretiniz için teşekkürler…Yorumlarınızı bekliyoruz…
Bilgisayar ve Yazılım Programları 