WPscoop External Published Stories Site Widget Tutorial
Over the coming days and weeks we will be posting some short tutorials on our features and tools here at WPscoop, a few days ago we updated our “Browser Submit Button” to include selectable text from the submitted page. This post will show you how to place a configurable WPscoop Stories widget on your website or Blog.
Image of the stories block and you can see a liv e version on the right sidebar of this blog.
The code for the story block is all configurable here are some of the elements you can change and style yourself.
- edit widgets width
- edit widgets height
- edit text size
- edit which feed categories are displayed
- edit how many stories are displayed
- edit show votes or not show votes
- edit widgets background color
- edit story text color
- edit story link color
- edit the border color
- edit vote background color
- edit vote text color
- edit vote block background color
Basically you can configure the code how you like and style the colours to integrate with your websites design.
This is the code below you can insert into your website for the block to display.
<script type="text/javascript"><!-- customize to match your website !! --> var box_width ="300px "; <!-- edit width !! --> var box_height = "390px"; <!-- edit height !! --> var text_size = "8"; <!-- edit text size !! --> var section = "All"; <!-- edit feed categories!! --> var how_many = 10; <!-- edit how many stories !! --> var show_karma = 1; <!-- edit show karma !! --> var bg_color = "ffffff"; <!-- edit background color !! --> var text_color = "5ea400"; <!-- edit text color !! --> var link_color = "054b81"; <!-- edit link color !! --> var border_color = "e4e4e4"; <!-- edit border color !! --> var score_bg_color = "054b81"; <!-- edit score background color !! --> var score_text_color = "fff"; <!-- edit score text color !! --> var score_border_color = "000"; <!-- edit score board color !! --> </script><script type="text/javascript" src="http://wpscoop.com/sites/all/modules/drigg/drigg_box/drigg_box.js"></script>
If you would like to header and style the block for a wordpress sidebar try copying the code below to your sidebar.php and modifying the DIV Class or ID depending on your theme along with the H header tag.
<div class="yoursideblockclasshere"> <h2>WPscoop Published Stories</h2> <ul> <script type="text/javascript"><!-- customize to match your website !! --> var box_width ="300px "; <!-- edit width !! --> var box_height = "390px"; <!-- edit height !! --> var text_size = "8"; <!-- edit text size !! --> var section = "All"; <!-- edit feed categories!! --> var how_many = 10; <!-- edit how many stories !! --> var show_karma = 1; <!-- edit show karma !! --> var bg_color = "ffffff"; <!-- edit background color !! --> var text_color = "5ea400"; <!-- edit text color !! --> var link_color = "054b81"; <!-- edit link color !! --> var border_color = "e4e4e4"; <!-- edit border color !! --> var score_bg_color = "054b81"; <!-- edit score background color !! --> var score_text_color = "fff"; <!-- edit score text color !! --> var score_border_color = "000"; <!-- edit score board color !! --> </script><script type="text/javascript" src="http://wpscoop.com/sites/all/modules/drigg/drigg_box/drigg_box.js"></script></ul> </div>
I will be working on hopefully turning this feature into a configurable wordpress plugin over the coming weeks, the current code can however be inserted into any web blog or cms including wordpress. Any bugs or configuration, placement questions please leave a comment.
This post was written by:
Stuart - who has written 9 posts on WPscoop Blog.
Co Founder of WPscoop with a passion for Wordpress
Web: Stuart
Leave a Reply